Add paige.color_scheme config

master
Will Faught 1 year ago
parent caac4048b5
commit c643ab3ffb

@ -180,6 +180,7 @@ There is a single parameter object with sensible defaults that can be overridden
```toml ```toml
[paige] [paige]
color = "#0d6efd" # Bootstrap primary color and theme color for Safari and Windows color = "#0d6efd" # Bootstrap primary color and theme color for Safari and Windows
color_scheme = "auto" # Must be "auto", "dark", or "light"
external_link_new_tab = false # Open external links in new tabs external_link_new_tab = false # Open external links in new tabs
math = false # Enable math typesetting math = false # Enable math typesetting
style = "" # CSS included at the end of the stylesheet, before style-last.css style = "" # CSS included at the end of the stylesheet, before style-last.css

@ -1,6 +1,9 @@
{{ $params := . }} {{ $params := . }}
$color-mode-type: media-query; {{ if and (not (eq $params.color_scheme "dark")) (not (eq $params.color_scheme "light")) }}
$color-mode-type: media-query;
{{ end }}
$primary: {{ $params.color }}; $primary: {{ $params.color }};
@import "bootstrap"; @import "bootstrap";

@ -1,6 +1,7 @@
{{ $page := . }} {{ $page := . }}
{{ $dark := eq ($page.Param "paige.color_scheme") "dark" }}
{{ $lang := site.LanguageCode | default site.Language.Lang }} {{ $lang := site.LanguageCode | default site.Language.Lang }}
{{ $rtl := eq $page.Language.LanguageDirection "rtl" }} {{ $rtl := eq $page.Language.LanguageDirection "rtl" }}
<html data-paige="Paige theme from https://github.com/willfaught/paige" {{ if $rtl }} dir="rtl" {{ end }} {{ with $lang }} lang="{{ . }}" {{ end }}> <html {{ if $dark }} data-bs-theme="dark" {{ end }} data-paige="Paige theme from https://github.com/willfaught/paige" {{ if $rtl }} dir="rtl" {{ end }} {{ with $lang }} lang="{{ . }}" {{ end }}>

@ -1,5 +1,6 @@
{{ $params := . }} {{ $params := . }}
{{ $context := $params.context }}
{{ $crossorigin := $params.crossorigin | default "anonymous" }} {{ $crossorigin := $params.crossorigin | default "anonymous" }}
{{ $href := $params.href }} {{ $href := $params.href }}
{{ $includepaths := $params.includepaths }} {{ $includepaths := $params.includepaths }}
@ -20,7 +21,6 @@
{{ $resource := . }} {{ $resource := . }}
{{ if $template }} {{ if $template }}
{{ $context := dict "color" (page.Param "paige.color" | default "#0d6efd") }}
{{ $split := path.Split $href }} {{ $split := path.Split $href }}
{{ $join := path.Join $split.Dir (print (printf "%#v" $context | sha1) "-" $split.File) }} {{ $join := path.Join $split.Dir (print (printf "%#v" $context | sha1) "-" $split.File) }}
{{ $resource = resources.ExecuteAsTemplate $join $context . }} {{ $resource = resources.ExecuteAsTemplate $join $context . }}

@ -32,7 +32,11 @@
<link href="{{ (resources.Get `site.webmanifest` | resources.ExecuteAsTemplate `site.webmanifest` .).RelPermalink | safeURL }}" rel="manifest"> <link href="{{ (resources.Get `site.webmanifest` | resources.ExecuteAsTemplate `site.webmanifest` .).RelPermalink | safeURL }}" rel="manifest">
{{ end }} {{ end }}
{{ partial "paige/link.html" (dict "href" "css/paige/bootstrap/paige.scss" "page" $page "sass" true "template" true) }} {{ $color := $page.Param "paige.color" | default "#0d6efd" }}
{{ $colorscheme := $page.Param "paige.color_scheme" | default "auto" }}
{{ $context := dict "color" $color "color_scheme" $colorscheme }}
{{ partial "paige/link.html" (dict "href" "css/paige/bootstrap/paige.scss" "page" $page "sass" true "template" true "context" $context) }}
{{ partial "paige/link.html" (dict "href" "css/paige/bootstrap-icons/bootstrap-icons.css" "page" $page) }} {{ partial "paige/link.html" (dict "href" "css/paige/bootstrap-icons/bootstrap-icons.css" "page" $page) }}
{{ if $page.Param "paige.math" }} {{ if $page.Param "paige.math" }}

@ -93,6 +93,13 @@ body, html {
margin-bottom: 0; margin-bottom: 0;
} }
{{ $colorscheme := $page.Param "paige.color_scheme" }}
{{ if eq $colorscheme "dark" }}
{{ partial "paige/dark.css" $page | safeCSS }}
{{ else if eq $colorscheme "light" }}
{{ partial "paige/light.css" $page | safeCSS }}
{{ else }}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
{{ partial "paige/dark.css" $page | safeCSS }} {{ partial "paige/dark.css" $page | safeCSS }}
} }
@ -100,6 +107,7 @@ body, html {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
{{ partial "paige/light.css" $page | safeCSS }} {{ partial "paige/light.css" $page | safeCSS }}
} }
{{ end }}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.paige-header-link { .paige-header-link {

Loading…
Cancel
Save