diff options
| author | Alexandre Negrel <negrel.dev@protonmail.com> | 2021-01-27 00:38:59 +0300 |
|---|---|---|
| committer | Alexandre Negrel <negrel.dev@protonmail.com> | 2021-01-27 00:38:59 +0300 |
| commit | 74727d3de80a6627c48631bfc180afa4c3556282 (patch) | |
| tree | 09d07493be8e61afd82f2b11a7f29515e29549d6 | |
| parent | df6c20a09c657071b58598ea5dcc57d23b75519e (diff) | |
adding darkMode parameter
| -rw-r--r-- | assets/config/tailwind.config.js | 2 | ||||
| -rw-r--r-- | assets/sass/_variables.scss | 26 | ||||
| -rw-r--r-- | exampleSite/config.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 |
4 files changed, 16 insertions, 16 deletions
diff --git a/assets/config/tailwind.config.js b/assets/config/tailwind.config.js index ff7d5a1..6f6b7bc 100644 --- a/assets/config/tailwind.config.js +++ b/assets/config/tailwind.config.js @@ -26,7 +26,7 @@ maxHeight = generator({ }); module.exports = { - darkMode: 'media', + darkMode: 'class', theme: { inset, extend: { diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index d03e61c..0d66392 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -12,18 +12,16 @@ --color-accent-light: #7deea7; } -@media (prefers-color-scheme: dark) { - :root { - --color-primary: #dee2e6; - --color-primary-dark: #adb5bd; - --color-primary-light: #e9ecef; - - --color-secondary: #161616; - --color-secondary-dark: #000000; - --color-secondary-light: #303030; - - --color-accent: #9e44ae; - --color-accent-dark: #6d0e7e; - --color-accent-light: #d174e0; - } +.dark * { + --color-primary: #dee2e6; + --color-primary-dark: #adb5bd; + --color-primary-light: #e9ecef; + + --color-secondary: #161616; + --color-secondary-dark: #000000; + --color-secondary-light: #303030; + + --color-accent: #9e44ae; + --color-accent-dark: #6d0e7e; + --color-accent-light: #d174e0; } diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a35578c..abea099 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -22,6 +22,8 @@ customJS = ["js/console.js"] # Path relative to assets folder description = "Boilerplate website" email = "mail@example.com" favicon = '/favicon.png' +# Dark mode support (default=false) +darkMode = true # Social parameters for contact_icons widget [[params.social]] diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4c5c8b8..742b54c 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang='{{ .Site.LanguageCode }}'> +<html lang='{{ .Site.LanguageCode }}' class="{{ if .Site.Params.darkMode }} dark {{ end }}"> <head> {{ partial "head/metadata.html" . }} |