|
@@ -13,10 +13,41 @@
|
|
|
// $light: #;
|
|
// $light: #;
|
|
|
// $dark: #;
|
|
// $dark: #;
|
|
|
|
|
|
|
|
|
|
+$themecolor: #000080;
|
|
|
|
|
+$themelight: #f0f8ff;
|
|
|
|
|
+$accentcolor: #ffd700;
|
|
|
|
|
+
|
|
|
//== Light Mode
|
|
//== Light Mode
|
|
|
//
|
|
//
|
|
|
html:not([dark]) {
|
|
html:not([dark]) {
|
|
|
- $primary: yellow;
|
|
|
|
|
|
|
+ $primary: $themecolor;
|
|
|
|
|
+
|
|
|
|
|
+ // Background colors
|
|
|
|
|
+ $bgcolor-global: $themelight;
|
|
|
|
|
+ $bgcolor-navbar: #334455;
|
|
|
|
|
+ $bgcolor-inline-code: #f9f2f4;
|
|
|
|
|
+ $bgcolor-card: #f5f5f5;
|
|
|
|
|
+
|
|
|
|
|
+ // Font colors
|
|
|
|
|
+ $color-global: $themecolor;
|
|
|
|
|
+ $color-reversal: #eeeeee;
|
|
|
|
|
+ // $color-header: #2b2b2b;
|
|
|
|
|
+ $color-link: lighten($primary, 20%);
|
|
|
|
|
+ $color-link-hover: lighten($color-link, 20%);
|
|
|
|
|
+ $color-link-wiki: lighten($primary, 20%);
|
|
|
|
|
+ $color-link-wiki-hover: lighten($color-link-wiki, 20%);
|
|
|
|
|
+ $color-inline-code: #c7254e;
|
|
|
|
|
+
|
|
|
|
|
+ // Logo colors
|
|
|
|
|
+ $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
|
|
|
|
|
+
|
|
|
|
|
+ // Border colors
|
|
|
|
|
+ $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
|
|
|
|
|
+
|
|
|
|
|
+ // Dropdown colors
|
|
|
|
|
+ $bgcolor-dropdown-link-active: $growi-blue;
|
|
|
|
|
+ $color-dropdown-link-active: $color-reversal;
|
|
|
|
|
+ $color-dropdown-link-hover: $color-global;
|
|
|
|
|
|
|
|
@import 'apply-colors';
|
|
@import 'apply-colors';
|
|
|
@import 'apply-colors-light';
|
|
@import 'apply-colors-light';
|
|
@@ -25,6 +56,37 @@ html:not([dark]) {
|
|
|
//== Dark Mode
|
|
//== Dark Mode
|
|
|
//
|
|
//
|
|
|
html[dark] {
|
|
html[dark] {
|
|
|
|
|
+ $primary: #d65a31;
|
|
|
|
|
+
|
|
|
|
|
+ $basecolor: #222831;
|
|
|
|
|
+
|
|
|
|
|
+ // Background colors
|
|
|
|
|
+ $bgcolor-global: $basecolor;
|
|
|
|
|
+ $bgcolor-navbar: #151515;
|
|
|
|
|
+ $bgcolor-inline-code: darken($basecolor, 5%);
|
|
|
|
|
+ $bgcolor-card: darken($basecolor, 5%);
|
|
|
|
|
+
|
|
|
|
|
+ // Font colors
|
|
|
|
|
+ $color-global: #eeeeee;
|
|
|
|
|
+ $color-reversal: #333333;
|
|
|
|
|
+ // $color-header: desaturate($primary, 20%);
|
|
|
|
|
+ $color-link: $primary;
|
|
|
|
|
+ $color-link-hover: lighten($color-link, 10%);
|
|
|
|
|
+ $color-link-wiki: lighten($basecolor, 50%);
|
|
|
|
|
+ $color-link-wiki-hover: darken($color-link-wiki, 5%);
|
|
|
|
|
+ $color-inline-code: #c7254e;
|
|
|
|
|
+
|
|
|
|
|
+ // Logo colors
|
|
|
|
|
+ $fillcolor-logo-mark: #444;
|
|
|
|
|
+
|
|
|
|
|
+ // Border colors
|
|
|
|
|
+ $border-color-theme: black; // former: `$navbar-border: #ccc;`
|
|
|
|
|
+
|
|
|
|
|
+ // Dropdown colors
|
|
|
|
|
+ $bgcolor-dropdown-link-active: $primary;
|
|
|
|
|
+ $color-dropdown-link-active: $color-global;
|
|
|
|
|
+ $color-dropdown-link-hover: $color-reversal;
|
|
|
|
|
+
|
|
|
@import 'apply-colors';
|
|
@import 'apply-colors';
|
|
|
@import 'apply-colors-dark';
|
|
@import 'apply-colors-dark';
|
|
|
}
|
|
}
|