Add default dark theme for modern browsers (#56)

* Add default dark theme for modern browsers

This version is based on the DOM specification used by Firefox, Chrome,
and the new Edge. Since it is standards compliant it should work on
modern browsers, but dark mode won't be available on IE11 and maybe the
old Edge.
I have avoided the screen flash on loading the page, and toggling from
dark to light (or vice versa) both when dark
is default and when light is default.

Signed-off-by: Daniel F. Dickinson <20735818+danielfdickinson@users.noreply.github.com>

* Edit/improve as suggested by maintainer

* Improves documentation (README.md)
* Improves Go template logic for setting the default theme type
* Improves coding (and markdown) style
* Adds the new param to exampleSite/config.yaml for documentation

Signed-off-by: Daniel F. Dickinson <20735818+danielfdickinson@users.noreply.github.com>
This commit is contained in:
Daniel F. Dickinson 2021-08-16 22:35:09 -04:00 committed by GitHub
parent c2914816e1
commit 87c4c8dfbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 10 deletions

View File

@ -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).

View File

@ -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();
});

View File

@ -27,6 +27,7 @@ params:
hideHeaderLinks: false
search: true
showThemeSwitcher: true
defaultDarkTheme: false
moveFooterToHeader: false
logoAlt: "An alternative text description of the logo"
customCss:

View File

@ -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" }}