From 6b96c2d66209c2fb12001d48add9d4270ce2aec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sat, 4 Feb 2023 22:33:27 +0100 Subject: [PATCH] variant: add support for prefers-color-scheme #445 --- exampleSite/assets/css/theme-auto.css | 34 +++++++++++++++++++ exampleSite/config.toml | 3 +- .../content/basics/configuration/_index.en.md | 4 +-- .../content/basics/customization/_index.en.md | 20 +++++++++++ .../content/basics/migration/_index.en.md | 6 ++++ layouts/partials/menu.html | 2 +- layouts/partials/stylesheet.html | 6 +++- 7 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 exampleSite/assets/css/theme-auto.css diff --git a/exampleSite/assets/css/theme-auto.css b/exampleSite/assets/css/theme-auto.css new file mode 100644 index 0000000000..7c986ee560 --- /dev/null +++ b/exampleSite/assets/css/theme-auto.css @@ -0,0 +1,34 @@ +{{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto") -}} +{{- $themevariantsauto := slice | append (.Site.Params.themeVariantAuto | default slice) -}} +{{- $i := 0 -}} +{{- if eq (int (len $themevariantsauto)) 0 -}} + {{- range $themevariants -}} + {{- $i = add $i 1 -}} + {{- if ne . "auto" -}} + {{- $themevariantsauto = $themevariantsauto | append . -}} + {{- break -}} + {{- end -}} + {{- end -}} +{{- end -}} +{{- if eq (int (len $themevariantsauto)) 0 -}} + {{- $themevariantsauto = $themevariantsauto | append "relearn-light" -}} +{{- end -}} +{{- if eq (int (len $themevariantsauto)) 1 -}} + {{- $poppedthemevariants := last (sub (len $themevariants) $i) $themevariants -}} + {{- range $poppedthemevariants -}} + {{- if ne . "auto" -}} + {{- $themevariantsauto = $themevariantsauto | append . -}} + {{- break -}} + {{- end -}} + {{- end -}} +{{- end -}} +{{- if eq (int (len $themevariantsauto)) 1 -}} + {{- $themevariantsauto = $themevariantsauto | append "relearn-dark" -}} +{{- end -}} +{{- $themevariantsauto = ($themevariantsauto | first 2) -}} +{{- with index $themevariantsauto 0 -}} +@import "{{(printf "css/theme-%s.css" .) | relURL}}" screen; +{{- end -}} +{{- with index $themevariantsauto 1 }} +@import "{{(printf "css/theme-%s.css" .) | relURL}}" screen and (prefers-color-scheme: dark); +{{- end -}} diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9f86e44aea..3e391797eb 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -198,7 +198,8 @@ disableHugoGeneratorInject = true disableNextPrev = false disableLandingPageButton = true titleSeparator = "::" - themeVariant = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] + themeVariant = [ "auto", "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] + themeVariantAuto = [ "relearn-light", "relearn-dark" ] disableSeoHiddenPages = true # this is for the stylesheet generator to allow for interactivity in Mermaid # graphs; you usually will not need it and you should remove this for diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md index e2e624d497..81bd023fce 100644 --- a/exampleSite/content/basics/configuration/_index.en.md +++ b/exampleSite/content/basics/configuration/_index.en.md @@ -75,8 +75,8 @@ Note that some of these parameters are explained in details in other sections of # Order sections in menu by "weight" or "title". Default to "weight"; # this can be overridden in the pages frontmatter ordersectionsby = "weight" - # Change default color scheme with a variant one. Eg. can be "red", "blue", "green" or an array like [ "blue", "green" ]. - themeVariant = "relearn-light" + # Change default color scheme with a variant one. Eg. can be "auto", "red", "blue", "green" or an array like [ "blue", "green" ]. + themeVariant = "auto" # Change the title separator. Default to "::". titleSeparator = "-" # If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md index ce2c3ff7e2..31a6245afd 100644 --- a/exampleSite/content/basics/customization/_index.en.md +++ b/exampleSite/content/basics/customization/_index.en.md @@ -80,6 +80,26 @@ You can also set multiple variants. In this case, the first variant is the defau If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/), and `@import` this stylesheet in your color variant stylesheet. For an example, take a look into `theme-relearn-light.css` and `config.toml` of the exampleSite. {{% /notice %}} +### Adjust to OS Settings + +You can also cause the site to adjust to your OS settings for light/dark mode. Just set the `themeVariant` to `auto`. That's it. + +If you've set multiple variants, you can drop `auto` at any position, but usually it makes sense to set it in the first position and make it the default. + +```toml +[params] + themeVariant = [ "auto", "red" ] +``` + +If you don't configure anything else, the theme will use `relearn-light` for light mode and `relearn-dark` for dark mode. + +If you don't like that, you can set `themeVariantAuto`. The first element is the variant for light mode, the second for dark mode + +```toml +[params] + themeVariantAuto = [ "learn", "neon" ] +``` + ### Roll your own If you are not happy with the shipped variants you can either copy and rename one of the shipped files from `themes/hugo-theme-relearn/static/css` to `static/css`, edit them afterwards to your liking in a text editor and configure the `themeVariant` parameter in your `config.toml` or just use the [interactive variant generator]({{%relref "basics/generator" %}}). diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 921c080415..ffff955bdd 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -28,6 +28,12 @@ This document shows you what's new in the latest release. For a detailed list of ```` +- {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme is now capable to visually [adapt to your OS's light/dark mode setting]({{%relref "basics/customization/#adjust-to-os-settings" %}}). + + This is also the new default setting if you haven't configured `themeVariant` in your `config.toml`. + + Additionally you are able to configure the variants to be taken for light/dark mode with the new `themeVariantAuto` parameter. + - {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the [`expand` shortcode]({{% relref "shortcodes/expand" %}}) was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works. - {{% badge style="note" title=" " %}}Change{{% /badge %}} The JavaScript code for handling image lightboxes (provided by [Featherlight](https://noelboss.github.io/featherlight)) was replaced by a CSS-only solution. diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 6b35f57454..c2129fa3a9 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -58,7 +58,7 @@ {{- end }} {{- $siteLanguages := .Site.Languages }} {{- $showlangswitch := and .Site.IsMultiLingual (not .Site.Params.disableLanguageSwitchingButton) (gt (int (len $siteLanguages)) 1) }} - {{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }} + {{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }} {{- $showvariantswitch := gt (int (len $themevariants)) 1 }} {{- $footer := partial "menu-footer.html" . }} {{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }} diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html index 15a8a0b8e7..178988d64b 100644 --- a/layouts/partials/stylesheet.html +++ b/layouts/partials/stylesheet.html @@ -13,7 +13,7 @@ - {{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }} + {{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }} {{- with index $themevariants 0 }} {{- end }} @@ -24,6 +24,10 @@ {{- if partialCached "fileExists.hugo" $f $f }} {{- end }} + {{- $autotemplate := resources.Get "css/theme-auto.css" }} + {{- $autocss := $autotemplate | resources.ExecuteAsTemplate "css/theme-auto.css" .Site.Home }} + {{- $c := "" }} + {{- $c = "" }}