#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference

This commit is contained in:
Alex Shpak
2020-09-14 00:02:55 +02:00
parent 6beca7928c
commit 4e34988b5d
15 changed files with 100 additions and 66 deletions
+5 -2
View File
@@ -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