variant: themeVariantAuto for advanced options #679

assets/css/theme-auto.css

@@ -1,34 +1,6 @@
-{{- $themevariants := partial "get-theme-variants.hugo" . -}}
-{{- $themevariantsauto := slice | append (.Site.Params.themeVariantAuto | default slice) -}}
-{{- $i := 0 -}}
-{{- if eq (int (len $themevariantsauto)) 0 -}}
-	{{- range $themevariants -}}
-		{{- $i = add $i 1 -}}
-		{{- if ne .identifier "auto" -}}
-			{{- $themevariantsauto = $themevariantsauto | append .identifier -}}
-			{{- 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 .identifier "auto" -}}
-			{{- $themevariantsauto = $themevariantsauto | append .identifier -}}
-			{{- break -}}
-		{{- end -}}
-	{{- end -}}
-{{- end -}}
-{{- if eq (int (len $themevariantsauto)) 1 -}}
-	{{- $themevariantsauto = $themevariantsauto | append "relearn-dark" -}}
-{{- end -}}
-{{- $themevariantsauto = ($themevariantsauto | first 2) -}}
-{{- with index $themevariantsauto 0 -}}
+{{- with index .auto 0 -}}
 @import "{{ printf "theme-%s.css" . }}" screen and (prefers-color-scheme: light);
 {{ end -}}
-{{- with index $themevariantsauto 1 -}}
+{{- with index .auto 1 -}}
 @import "{{ printf "theme-%s.css" . }}" screen and (prefers-color-scheme: dark);
-{{ end -}}
+{{ end -}}

exampleSite/config/_default/params.toml

@@ -61,26 +61,20 @@ social.twitter = ""
 # You can also define your own variants. See the docs how this works. Also,
 # the docs provide an interactive theme generator to help you with this task.
 themeVariant = [
-	{ identifier = "auto"          },
-	{ identifier = "relearn-light" },
-	{ identifier = "relearn-dark"  },
-	{ identifier = "zen-light"     },
-	{ identifier = "zen-dark"      },
-	{ identifier = "neon"          },
-	{ identifier = "learn"         },
-	{ identifier = "blue"          },
-	{ identifier = "green"         },
-	{ identifier = "red"           }
+	{ identifier = "relearn-auto",  name = "Relearn Light/Dark", auto = [] },
+	{ identifier = "relearn-light"  },
+	{ identifier = "relearn-dark"   },
+	{ identifier = "relearn-bright" },
+	{ identifier = "zen-auto",      name = "Zen Light/Dark", auto = [ "zen-light", "zen-dark" ] },
+	{ identifier = "zen-light"      },
+	{ identifier = "zen-dark"       },
+	{ identifier = "neon"           },
+	{ identifier = "learn"          },
+	{ identifier = "blue"           },
+	{ identifier = "green"          },
+	{ identifier = "red"            }
 ]
 
-# The color variants used for auto mode.
-# Default: [ "relearn-light", "relearn-dark" ], overwritten by the first
-# two non-auto options of your `themeVariant` option if present.
-# The auto variant defines how your site adjusts to your selected OS settings
-# for light/dark mode. The first array element is the variant for light mode,
-# the second for dark mode.
-themeVariantAuto = [ "relearn-light", "relearn-dark" ]
-
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # General
 # These options are defining general, non visual behavior.

exampleSite/content/basics/branding/_index.en.md

@@ -47,7 +47,7 @@ Although all options documented here are still working, the advanced configurati
 
 ## 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.
+You can also cause the site to adjust to your OS settings for light/dark mode. Just set the `themeVariant` to `auto` to become an auto mode variant. That's it.
 
 You can use the `auto` value with the single or multiple variants option. If you are using multiple variants, you can drop `auto` at any position in the option's array, but usually it makes sense to set it in the first position and make it the default.
 
@@ -128,3 +128,28 @@ The `identifier` option is mandatory and equivalent to the string in the first e
 |-----------------------|-----------------|-------------|
 | identifier            | _&lt;empty&gt;_ | Must correspond to the name of a color variant either in your site's or the theme's directory in the form `static/css/theme-<IDENTIFIER>.css`. |
 | name                  | see notes       | The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form. |
+| auto                  | _&lt;empty&gt;_ | If set, the variant is treated as an [auto mode variant](#adjust-to-os-settings). It has the same behavior as the `themeVariantAuto` option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options. |
+
+### Example Configuration of This Site
+
+````toml
+[params]
+  [[params.themeVariant]]
+    identifier = "relearn-auto"
+    name = "Relearn Light/Dark"
+    auto = []
+  [[params.themeVariant]]
+    identifier = "relearn-light"
+  [[params.themeVariant]]
+    identifier = "relearn-dark"
+  [[params.themeVariant]]
+    identifier = "zen-auto"
+    name = "Zen Light/Dark"
+    auto = [ "zen-light", "zen-dark" ]
+  [[params.themeVariant]]
+    identifier = "zen-light"
+  [[params.themeVariant]]
+    identifier = "zen-dark"
+  [[params.themeVariant]]
+    identifier = "neon"
+````

exampleSite/content/basics/migration/_index.en.md

@@ -22,9 +22,9 @@ This document shows you what's new in the latest release and flags it with one o
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.
 
-- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You now can configure options for every theme variant in your `config.toml`. This allows for optional [advanced functionality](basics/branding#theme-variant-advanced). You don't need to change anything as the old configuration options will still work (but may generate warnings now).
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You now can configure additional options for every theme variant in your `config.toml`. This allows for optional [advanced functionality](basics/branding#theme-variant-advanced). You don't need to change anything as the old configuration options will still work (but may generate warnings now).
 
-  The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and provide an extended way to configure the automatic switch of variants based on your OS settings.
+  The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and now allows for multiple auto mode variants that adjust to the light/dark preference of your OS settings.
 
 ---
 

layouts/partials/get-theme-variants.hugo

@@ -1,5 +1,5 @@
-{{- $themevariants := slice }}
 {{- $tempthemevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }}
+{{- $themevariants := slice }}
 {{- range $tempthemevariant := $tempthemevariants }}
   {{- $themevariant := $tempthemevariant }}
   {{- if not (reflect.IsMap $themevariant) }}
@@ -8,6 +8,44 @@
   {{- if not $themevariant.name }}
     {{- $themevariant = collections.Merge $themevariant (dict "name" ($themevariant.identifier | humanize | strings.Title)) }}
   {{- end }}
+  {{- if eq $themevariant.identifier "auto" }}
+    {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | default slice)) }}
+  {{- end }}
+  {{- $themevariants = $themevariants | append $themevariant }}
+{{- end }}
+
+{{- $tempthemevariants = $themevariants }}
+{{- $themevariants = slice }}
+{{- range $tempthemevariant := $tempthemevariants }}
+  {{- $themevariant := $tempthemevariant }}
+  {{- if collections.IsSet $themevariant "auto" }}
+    {{- $i := 0 }}
+    {{- if eq (int (len $themevariant.auto)) 0 }}
+      {{- range $tempthemevariants }}
+        {{- $i = add $i 1 }}
+        {{- if not (collections.IsSet . "auto") }}
+          {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | append .identifier)) }}
+          {{- break }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+    {{- if eq (int (len $themevariant.auto)) 0 }}
+      {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | append "relearn-light")) }}
+    {{- end }}
+    {{- if eq (int (len $themevariant.auto)) 1 }}
+      {{- $poppedthemevariants := last (sub (len $tempthemevariants) $i) $tempthemevariants }}
+      {{- range $poppedthemevariants }}
+        {{- if not (collections.IsSet . "auto") }}
+          {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | append .identifier)) }}
+          {{- break }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+    {{- if eq (int (len $themevariant.auto)) 1 }}
+      {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | append "relearn-dark")) }}
+    {{- end }}
+    {{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | first 2)) }}
+  {{- end }}
   {{- $themevariants = $themevariants | append $themevariant }}
 {{- end }}
 {{- return $themevariants }}

layouts/partials/stylesheet.html

@@ -13,11 +13,16 @@
     <link href="{{"css/perfect-scrollbar.min.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">
-    {{- $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"-->
     {{- $themevariants := partial "get-theme-variants.hugo" . }}
+    {{- if $page.IsHome }}
+      {{- $autotemplate := resources.Get "css/theme-auto.css" }}
+      {{- range $themevariants }}
+        {{- if collections.IsSet . "auto" }}
+          {{- $autocss := $autotemplate | resources.ExecuteAsTemplate (printf "css/theme-%s.css" .identifier) . }}
+          {{- /* the following line causes Hugo to generate our theme css file - although it is in comments */}}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
+        {{- end }}
+      {{- end }}
+    {{- end }}
     {{- with index $themevariants 0 }}
     <link href="{{(printf "css/theme-%s.css" .identifier) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="R-variant-style">
     {{- end }}