hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: support to customize the brand color

Browse source
This commit is contained in:
jeffreytse 2021-05-26 21:51:32 +08:00
parent de8c813aea
commit c5212c60ad
3 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
_config.yml
View file

@ -95,6 +95,17 @@ yat:
# Custom color as below: # Custom color as below:
# theme_color: "#882250" # 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 # Night/Dark mode
# Default mode is "auto", "auto" is for auto nightshift # Default mode is "auto", "auto" is for auto nightshift
# (19:00 - 07:00), "manual" is for manual toggle, and # (19:00 - 07:00), "manual" is for manual toggle, and

1
_sass/yat.scss
View file

@ -12,7 +12,6 @@ $spacing-unit: 30px !default;
$text-color: #454545 !default; $text-color: #454545 !default;
$background-color: #fff !default; $background-color: #fff !default;
$brand-color: #ff5100 !default;
$grey-color: #828282 !default; $grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%) !default; $grey-color-light: lighten($grey-color, 40%) !default;

21
assets/css/main.scss
View file

@ -4,13 +4,22 @@
// Default theme colors // Default theme colors
$theme-colors: ( $theme-colors: (
coolblack: #090a0b, "coolblack": #090a0b,
spacegrey: #353535, "spacegrey": #353535,
snowwhite: #ffffff, "snowwhite": #ffffff,
);
// Default brand colors
$brand-colors: (
"orangered": #ff5100,
"greatgold": #f2cb05,
"greenblue": #389092,
); );
$theme-name: "{{ site.theme_color }}"; $theme-name: "{{ site.theme_color }}";
$brand-name: "{{ site.brand_color }}";
$theme-color: map-get($theme-colors, "snowwhite"); $theme-color: map-get($theme-colors, "snowwhite");
$brand-color: map-get($brand-colors, "orangered");
@if map-has-key($theme-colors, $theme-name) { @if map-has-key($theme-colors, $theme-name) {
$theme-color: map-get($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' }}; $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"; @import "yat";