diff options
| -rw-r--r-- | README.md | 17 | ||||
| -rw-r--r-- | assets/js/template-dom-scripts.js | 32 | ||||
| -rw-r--r-- | exampleSite/config.yaml | 1 | ||||
| -rw-r--r-- | layouts/partials/head.html | 18 |
4 files changed, 58 insertions, 10 deletions
@@ -19,6 +19,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https:// - [Disable toc for a blog post](#disable-toc-for-a-blog-post) - [Localization](#localization) - [Custom CSS and JS](#custom-css-and-js) +- [Default to Dark Theme](#default-to-dark-theme) - [Getting help](#getting-help) - [Credits](#credits) @@ -105,6 +106,22 @@ You can provide an optional list of custom JS files, which must be placed inside See the [example site config file](https://github.com/zwbetz-gh/cupper-hugo-theme/blob/master/exampleSite/config.yaml) for sample usage. +## Default to Dark Theme + +In the site config file set the param `defaultDarkTheme` to true. + +E.g. for `config.yaml` +```yaml +params: + defaultDarkTheme: true +``` + +Note that the default of light or dark theme only applies to the first visit to a site using this theme. Once the site is visited the choice of dark or light theme is stored in 'local storage' in the browser. + +To reset to a 'first visit' scenario (e.g. for testing), one needs to either browse in private mode (aka Incognito/InPrivate/etc) or delete 'local storage' for this site. The easiest way to do that, but which affects other sites as well, is to use the 'Clear History' feature of the browser. + +Check your browser's help or documentation for details. + ## Getting help If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/zwbetz-gh/cupper-hugo-theme/tree/master/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132). diff --git a/assets/js/template-dom-scripts.js b/assets/js/template-dom-scripts.js index 368ddfb..75b2af5 100644 --- a/assets/js/template-dom-scripts.js +++ b/assets/js/template-dom-scripts.js @@ -104,23 +104,31 @@ } function applyDarkTheme() { - var rules = [ - '.intro-and-nav, .main-and-footer { filter: invert(100%); }', - '* { background-color: inherit; }', - 'img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%); }' - ]; - rules.forEach(function(rule) { - document.styleSheets[0].insertRule(rule); - }) + var darkTheme = document.getElementById('darkTheme'); + darkTheme.disabled = false; } function clearDarkTheme() { - for (let i = 0; i < document.styleSheets[0].cssRules.length; i++) { - document.styleSheets[0].deleteRule(i); + var darkTheme = document.getElementById('darkTheme'); + darkTheme.disabled = true; + } + + function defaultDarkTheme() { +{{- with .Site.Params.defaultDarkTheme }} + if (localStorage.getItem('darkTheme') == null) { + persistTheme('true'); + checkbox.checked = true; } +{{- else }} + if (localStorage.getItem('darkTheme') == null) { + persistTheme('false'); + checkbox.checked = false; + } +{{ end }} } checkbox.addEventListener('change', function () { + defaultDarkTheme(); if (this.checked) { applyDarkTheme(); persistTheme('true'); @@ -134,6 +142,9 @@ if (localStorage.getItem('darkTheme') === 'true') { applyDarkTheme(); checkbox.checked = true; + } else { + clearDarkTheme(); + checkbox.checked = false; } } @@ -143,6 +154,7 @@ } window.addEventListener('DOMContentLoaded', function () { + defaultDarkTheme(); showTheme(); showContent(); }); diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 6949c55..3a218e0 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -27,6 +27,7 @@ params: hideHeaderLinks: false search: true showThemeSwitcher: true + defaultDarkTheme: false moveFooterToHeader: false logoAlt: "An alternative text description of the logo" customCss: diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 4832d1b..0fdc8fe 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -31,6 +31,24 @@ } </style> + <style id="darkTheme"> + .intro-and-nav, + .main-and-footer { + filter: invert(100%); + } + + * { + background-color: inherit + } + + img:not([src*=".svg"]), + .colors, + iframe, + .demo-container { + filter: invert(100%); + } + </style> + <link rel="stylesheet" href="{{ "css/prism.css" | relURL }}" media="none" onload="this.media='all';"> {{ $templateStyles := resources.Get "css/template-styles.css" }} |