From c5212c60ad8058732c17b3107ffd1b6a05850bd4 Mon Sep 17 00:00:00 2001 From: jeffreytse Date: Wed, 26 May 2021 21:51:32 +0800 Subject: [PATCH] feat: support to customize the brand color --- _config.yml | 11 +++++++++++ _sass/yat.scss | 1 - assets/css/main.scss | 21 ++++++++++++++++++--- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/_config.yml b/_config.yml index 2168a68..7045fd3 100644 --- a/_config.yml +++ b/_config.yml @@ -95,6 +95,17 @@ yat: # Custom color as below: # theme_color: "#882250" +# You can choose a brand color +# Default brand colors as below: +# orangered: #ff5100 +# greatgold: #f2cb05 +# greenblue: #389092 +# +# brand_color: orangered +# +# Custom color as below: +# brand_color: "#1a8e42" + # Night/Dark mode # Default mode is "auto", "auto" is for auto nightshift # (19:00 - 07:00), "manual" is for manual toggle, and diff --git a/_sass/yat.scss b/_sass/yat.scss index 44938c8..7329c56 100644 --- a/_sass/yat.scss +++ b/_sass/yat.scss @@ -12,7 +12,6 @@ $spacing-unit: 30px !default; $text-color: #454545 !default; $background-color: #fff !default; -$brand-color: #ff5100 !default; $grey-color: #828282 !default; $grey-color-light: lighten($grey-color, 40%) !default; diff --git a/assets/css/main.scss b/assets/css/main.scss index afe4e59..8926243 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -4,13 +4,22 @@ // Default theme colors $theme-colors: ( - coolblack: #090a0b, - spacegrey: #353535, - snowwhite: #ffffff, + "coolblack": #090a0b, + "spacegrey": #353535, + "snowwhite": #ffffff, +); + +// Default brand colors +$brand-colors: ( + "orangered": #ff5100, + "greatgold": #f2cb05, + "greenblue": #389092, ); $theme-name: "{{ site.theme_color }}"; +$brand-name: "{{ site.brand_color }}"; $theme-color: map-get($theme-colors, "snowwhite"); +$brand-color: map-get($brand-colors, "orangered"); @if map-has-key($theme-colors, $theme-name) { $theme-color: map-get($theme-colors, $theme-name); @@ -18,4 +27,10 @@ $theme-color: map-get($theme-colors, "snowwhite"); $theme-color: {{ site.theme_color | default: '#ffffff' }}; } +@if map-has-key($brand-colors, $brand-name) { + $brand-color: map-get($brand-colors, $brand-name); +} @else if str-index($brand-name, "#") == 1 { + $brand-color: {{ site.brand_color | default: '#ff5100' }}; +} + @import "yat";