variant: add support for prefers-color-scheme #445

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

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

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

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" %}}).

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
   <script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
   ````
 
+- {{% 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.

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)))) }}

layouts/partials/stylesheet.html

@@ -13,7 +13,7 @@
     <link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
     <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    {{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }}
+    {{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }}
     {{- with index $themevariants 0 }}
     <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
     {{- end }}
@@ -24,6 +24,10 @@
     {{- if partialCached "fileExists.hugo" $f $f }}
     <link href="{{(printf "css/format-%s.css" $outputFormat) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     {{- end }}
+    {{- $autotemplate := resources.Get "css/theme-auto.css" }}
+    {{- $autocss := $autotemplate | resources.ExecuteAsTemplate "css/theme-auto.css" .Site.Home }}
+    {{- $c := "" }}<!-- cause Hugo to generate our theme-auto.css -->
+    {{- $c = "" }}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
     <script src="{{"js/url.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/variant.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script>