nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-27 02:33:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

variant: themeVariantAuto for advanced options #679

Browse source
This commit is contained in:
Sören Weber 2023-11-23 01:05:26 +01:00
parent ee79857a22
commit a435587765
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
6 changed files with 91 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/css/theme-auto.css
View file

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

30
exampleSite/config/_default/params.toml
View file

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

27
exampleSite/content/basics/branding/_index.en.md
View file

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

4
exampleSite/content/basics/migration/_index.en.md
View file

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

40
layouts/partials/get-theme-variants.hugo
View file

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

13
layouts/partials/stylesheet.html
View file

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