feat: support to customize the brand color

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";