#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference
Alex Shpak
parent
6beca7928c
commit
4e34988b5d
|
|
@ -139,6 +139,10 @@ enableGitInfo = true
|
|||
disableKinds = ['taxonomy', 'taxonomyTerm']
|
||||
|
||||
[params]
|
||||
# (Optional, default light) Sets color theme: light, dark or auto.
|
||||
# Theme 'auto' switches between dark and light modes based on browser/os preferences
|
||||
BookTheme = 'light'
|
||||
|
||||
# (Optional, default true) Controls table of contents visibility on right side of pages.
|
||||
# Start and end levels can be controlled with markup.tableOfContents setting.
|
||||
# You can also specify this parameter per page in front matter.
|
||||
|
|
@ -252,11 +256,10 @@ There are a few features implemented as plugable `scss` styles. Usually these ar
|
|||
|
||||
| Plugin | Description |
|
||||
| --------------------------------- | ----------------------------------------------------------- |
|
||||
| `assets/plugins/_dark.scss` | Switches site to dark mode |
|
||||
| `assets/plugins/_numbered.scss` | Makes headings in markdown numbered, e.g. `1.1`, `1.2` |
|
||||
| `assets/plugins/_scrollbars.scss` | Overrides scrollbar styles to look similar across platforms |
|
||||
|
||||
To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root. One exception is `_dark.scss` which contains variables only and should be added to `assets/_variables.scss`.
|
||||
To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root.
|
||||
|
||||
### Hugo Internal Templates
|
||||
|
||||
|
|
|
|||
|
|
@ -11,24 +11,6 @@ $font-size-16: 1rem !default;
|
|||
|
||||
$border-radius: $padding-4 !default;
|
||||
|
||||
// Grayscale
|
||||
$white: #ffffff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$color-link: #05b !default;
|
||||
$color-visited-link: #8440f1 !default;
|
||||
|
||||
$body-background: white !default;
|
||||
$body-font-color: $black !default;
|
||||
$body-font-weight: normal !default;
|
||||
|
||||
$body-min-width: 20rem !default;
|
||||
|
|
@ -40,11 +22,45 @@ $toc-width: 16rem !default;
|
|||
|
||||
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
|
||||
|
||||
// Hint colors
|
||||
$hint-colors: (
|
||||
info: #6bf,
|
||||
warning: #fd6,
|
||||
danger: #f66
|
||||
danger: #f66,
|
||||
) !default;
|
||||
|
||||
$icon-filter: none !default;
|
||||
// Themes
|
||||
@mixin theme-light {
|
||||
--gray-100: #f8f9fa;
|
||||
--gray-200: #e9ecef;
|
||||
--gray-500: #adb5bd;
|
||||
|
||||
--color-link: #0055bb;
|
||||
--color-visited-link: #8440f1;
|
||||
|
||||
--body-background: white;
|
||||
--body-font-color: black;
|
||||
|
||||
--icon-filter: none;
|
||||
|
||||
--hint-color-info: #6bf;
|
||||
--hint-color-warning: #fd6;
|
||||
--hint-color-danger: #f66;
|
||||
}
|
||||
|
||||
@mixin theme-dark {
|
||||
--gray-100: rgba(255, 255, 255, 0.1);
|
||||
--gray-200: rgba(255, 255, 255, 0.2);
|
||||
--gray-500: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--color-link: #84b2ff;
|
||||
--color-visited-link: #b88dff;
|
||||
|
||||
--body-background: #343a40;
|
||||
--body-font-color: #e9ecef;
|
||||
|
||||
--icon-filter: brightness(0) invert(1);
|
||||
|
||||
--hint-color-info: #6bf;
|
||||
--hint-color-warning: #fd6;
|
||||
--hint-color-danger: #f66;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ html {
|
|||
|
||||
body {
|
||||
min-width: $body-min-width;
|
||||
color: $body-font-color;
|
||||
background: $body-background;
|
||||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
letter-spacing: 0.33px;
|
||||
font-weight: $body-font-weight;
|
||||
|
|
@ -31,7 +31,7 @@ h5 {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $color-link;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -81,7 +81,7 @@ ul.pagination {
|
|||
}
|
||||
|
||||
.book-icon {
|
||||
filter: $icon-filter;
|
||||
filter: var(--icon-filter);
|
||||
}
|
||||
|
||||
.book-brand {
|
||||
|
|
@ -102,7 +102,7 @@ ul.pagination {
|
|||
nav {
|
||||
width: $menu-width;
|
||||
padding: $padding-16;
|
||||
background: $body-background;
|
||||
background: var(--body-background);
|
||||
|
||||
@include fixed;
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@ ul.pagination {
|
|||
}
|
||||
|
||||
a.active {
|
||||
color: $color-link;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
a.collapsed {
|
||||
|
|
@ -174,8 +174,8 @@ ul.pagination {
|
|||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
|
||||
background: $gray-100;
|
||||
color: $body-font-color;
|
||||
background: var(--gray-100);
|
||||
color: var(--body-font-color);
|
||||
|
||||
&:required + .book-search-spinner {
|
||||
display: block;
|
||||
|
|
@ -192,7 +192,7 @@ ul.pagination {
|
|||
height: $padding-16;
|
||||
|
||||
border: $padding-1 solid transparent;
|
||||
border-top-color: $body-font-color;
|
||||
border-top-color: var(--body-font-color);
|
||||
border-radius: 50%;
|
||||
|
||||
@include spin(1s);
|
||||
|
|
@ -271,7 +271,7 @@ ul.pagination {
|
|||
left: 0;
|
||||
padding: $padding-8 0;
|
||||
|
||||
background: $body-background;
|
||||
background: var(--body-background);
|
||||
box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
|
||||
|
||||
li img {
|
||||
|
|
|
|||
|
|
@ -21,12 +21,13 @@
|
|||
|
||||
a.anchor {
|
||||
opacity: 0;
|
||||
font-size: .75em;
|
||||
font-size: 0.75em;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover a.anchor, a.anchor:focus {
|
||||
&:hover a.anchor,
|
||||
a.anchor:focus {
|
||||
opacity: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +59,7 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
&:visited {
|
||||
color: $color-visited-link;
|
||||
color: var(--color-visited-link);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,14 +69,14 @@
|
|||
|
||||
code {
|
||||
padding: 0 $padding-4;
|
||||
background: $gray-200;
|
||||
background: var(--gray-200);
|
||||
border-radius: $border-radius;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: $padding-16;
|
||||
background: $gray-100;
|
||||
background: var(--gray-100);
|
||||
border-radius: $border-radius;
|
||||
overflow-x: auto;
|
||||
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
margin: $padding-16 0;
|
||||
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
|
||||
|
||||
border-inline-start: $padding-4 solid $gray-200;
|
||||
border-inline-start: $padding-4 solid var(--gray-200);
|
||||
border-radius: $border-radius;
|
||||
|
||||
:first-child {
|
||||
|
|
@ -111,18 +112,18 @@
|
|||
tr th,
|
||||
tr td {
|
||||
padding: $padding-8 $padding-16;
|
||||
border: $padding-1 solid $gray-200;
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: $gray-100;
|
||||
background: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: $padding-1;
|
||||
border: none;
|
||||
background: $gray-200;
|
||||
background: var(--gray-200);
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -156,7 +157,7 @@
|
|||
|
||||
details {
|
||||
padding: $padding-16;
|
||||
border: $padding-1 solid $gray-200;
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
border-radius: $border-radius;
|
||||
|
||||
summary {
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $padding-1 solid $gray-200;
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
border-radius: $border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.book-expand-head {
|
||||
background: $gray-100;
|
||||
background: var(--gray-100);
|
||||
padding: $padding-8 $padding-16;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $padding-1 solid $gray-200;
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
border-radius: $border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
|
@ -48,19 +48,19 @@
|
|||
.book-tabs-content {
|
||||
order: 999; //Move content blocks to the end
|
||||
width: 100%;
|
||||
border-top: $padding-1 solid $gray-100;
|
||||
border-top: $padding-1 solid var(--gray-100);
|
||||
padding: $padding-16;
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label {
|
||||
border-bottom: $padding-1 solid $color-link;
|
||||
border-bottom: $padding-1 solid var(--color-link);
|
||||
}
|
||||
input[type="radio"]:checked + label + .book-tabs-content {
|
||||
display: block;
|
||||
}
|
||||
input[type="radio"]:focus + label {
|
||||
@include outline
|
||||
@include outline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,10 +80,10 @@
|
|||
a.book-btn {
|
||||
display: inline-block;
|
||||
font-size: $font-size-14;
|
||||
color: $color-link;
|
||||
color: var(--color-link);
|
||||
line-height: $padding-16 * 2;
|
||||
padding: 0 $padding-16;
|
||||
border: $padding-1 solid $color-link;
|
||||
border: $padding-1 solid var(--color-link);
|
||||
border-radius: $border-radius;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "defaults";
|
||||
@import "variables";
|
||||
@import "themes/{{ default "auto" .Site.Params.BookTheme }}";
|
||||
|
||||
@import "normalize";
|
||||
@import "utils";
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
$gray-100: rgba(255, 255, 255, 0.1);
|
||||
$gray-200: rgba(255, 255, 255, 0.2);
|
||||
|
||||
$body-background: #343a40;
|
||||
$body-font-color: #e9ecef;
|
||||
|
||||
$color-link: #84b2ff;
|
||||
$color-visited-link: #b88dff;
|
||||
|
||||
$icon-filter: brightness(0) invert(1);
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
}
|
||||
|
||||
:hover::-webkit-scrollbar-thumb {
|
||||
background: $gray-500;
|
||||
background: var(--gray-500);
|
||||
}
|
||||
|
||||
// MS
|
||||
body {
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
|
||||
// Future
|
||||
.book-menu nav {
|
||||
scrollbar-color: transparent $gray-500;
|
||||
scrollbar-color: transparent var(--gray-500);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
:root {
|
||||
@include theme-light;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include theme-dark;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
@include theme-dark;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
@include theme-light;
|
||||
}
|
||||
|
|
@ -49,6 +49,10 @@ enableGitInfo = true
|
|||
weight = 20
|
||||
|
||||
[params]
|
||||
# (Optional, default light) Sets color theme: light, dark or auto.
|
||||
# Theme 'auto' switches between dark and light modes based on browser/os preferences
|
||||
BookTheme = 'light'
|
||||
|
||||
# (Optional, default true) Controls table of contents visibility on right side of pages.
|
||||
# Start and end levels can be controlled with markup.tableOfContents setting.
|
||||
# You can also specify this parameter per page in front matter.
|
||||
|
|
|
|||
|
|
@ -45,6 +45,10 @@ menu:
|
|||
weight: 20
|
||||
|
||||
params:
|
||||
# (Optional, default light) Sets color theme: light, dark or auto.
|
||||
# Theme 'auto' switches between dark and light modes based on browser/os preferences
|
||||
BookTheme: "light"
|
||||
|
||||
# (Optional, default true) Controls table of contents visibility on right side of pages.
|
||||
# Start and end levels can be controlled with markup.tableOfContents setting.
|
||||
# You can also specify this parameter per page in front matter.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}}
|
||||
{"Target":"book.min.4194921b4c7ff04cd7c5b17f3ac51f141158e219fa9deb989de5e50f624ca88f.css","MediaType":"text/css","Data":{"Integrity":"sha256-QZSSG0x/8EzXxbF/OsUfFBFY4hn6neuYneXlD2JMqI8="}}
|
||||
Loading…
Reference in New Issue