Add paige.color_scheme config
This commit is contained in:
@@ -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 := . }}
|
||||||
|
|
||||||
|
{{ if and (not (eq $params.color_scheme "dark")) (not (eq $params.color_scheme "light")) }}
|
||||||
$color-mode-type: media-query;
|
$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 {
|
||||||
|
Reference in New Issue
Block a user