From 914bf54c493b299268c293be33a8babf99b1cce2 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 20:08:43 +0800 Subject: Custom scss variable support --- assets/scss/_fuji-theme/_base.scss | 32 ++++++++++++++++---------------- assets/scss/_var.scss | 18 ++++++++++++++++++ 2 files changed, 34 insertions(+), 16 deletions(-) (limited to 'assets/scss') diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss index d35d8b6..d9a6f7e 100644 --- a/assets/scss/_fuji-theme/_base.scss +++ b/assets/scss/_fuji-theme/_base.scss @@ -1,25 +1,25 @@ @mixin light { --color-mode: 'light'; - --color-primary: #8aa2d3; // https://irocore.com/aofuji/ - --color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/ - --color-focus: #3b469b; // https://irocore.com/aomurasaki/ - --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ - --color-font: #3f4551; // https://irocore.com/konnezu/ - --color-divider: #e5e2e4; // https://irocore.com/komachinezu/ - --color-bg: #fffffd; // https://irocore.com/shiro/ - --color-codebg: #f6f8fa; // GitHub + --color-primary: #{$light-color-primary}; + --color-secondary: #{$light-color-secondary}; + --color-focus: #{$light-color-focus}; + --color-mute: #{$light-color-mute}; + --color-font: #{$light-color-font}; + --color-divider: #{$light-color-divider}; + --color-bg: #{$light-color-bg}; + --color-codebg: #{$light-color-codebg}; } @mixin dark { --color-mode: 'dark'; - --color-primary: #8aa2d3; // https://irocore.com/aofuji/ - --color-secondary: #bab1df; // kai https://irocore.com/fujimurasaki/ - --color-focus: #e6e6e6; // https://irocore.com/shironezumi/ - --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ - --color-font: #c0c0c0; // https://irocore.com/gin-iro/ - --color-divider: #4d5158; // Discord - --color-bg: #2f3136; // Discord - --color-codebg: #414449; // kai GitHub + --color-primary: #{$dark-color-primary}; + --color-secondary: #{$dark-color-secondary}; + --color-focus: #{$dark-color-focus}; + --color-mute: #{$dark-color-mute}; + --color-font: #{$dark-color-font}; + --color-divider: #{$dark-color-divider}; + --color-bg: #{$dark-color-bg}; + --color-codebg: #{$dark-color-codebg}; } body[data-theme='auto'] { diff --git a/assets/scss/_var.scss b/assets/scss/_var.scss index d473787..4cbd256 100644 --- a/assets/scss/_var.scss +++ b/assets/scss/_var.scss @@ -15,6 +15,24 @@ $body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', $mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font !default; $body-font-size: 16px !default; +$light-color-primary: #8aa2d3 !default; // https://irocore.com/aofuji/ +$light-color-secondary: #8f82bc !default; // https://irocore.com/fujimurasaki/ +$light-color-focus: #3b469b !default; // https://irocore.com/aomurasaki/ +$light-color-mute: #9ea1a3 !default; // https://irocore.com/suzu-iro/ +$light-color-font: #3f4551 !default; // https://irocore.com/konnezu/ +$light-color-divider: #e5e2e4 !default; // https://irocore.com/komachinezu/ +$light-color-bg: #fffffd !default; // https://irocore.com/shiro/ +$light-color-codebg: #f6f8fa !default; // GitHub + +$dark-color-primary: #8aa2d3 !default; // https://irocore.com/aofuji/ +$dark-color-secondary: #bab1df !default; // kai https://irocore.com/fujimurasaki/ +$dark-color-focus: #e6e6e6 !default; // https://irocore.com/shironezumi/ +$dark-color-mute: #9ea1a3 !default; // https://irocore.com/suzu-iro/ +$dark-color-font: #c0c0c0 !default; // https://irocore.com/gin-iro/ +$dark-color-divider: #4d5158 !default; // Discord +$dark-color-bg: #2f3136 !default; // Discord +$dark-color-codebg: #414449 !default; // kai GitHub + @font-face { font-family: 'Product Sans'; font-style: normal; -- cgit v1.2.3