From c643ab3ffb6e1b6fbf5a7e32716c0ed9c4bac54d Mon Sep 17 00:00:00 2001 From: Will Faught Date: Sat, 6 Apr 2024 23:47:58 -0700 Subject: [PATCH] Add paige.color_scheme config --- README.md | 1 + assets/css/paige/bootstrap/paige.scss | 5 ++++- layouts/partials/paige/html.html | 3 ++- layouts/partials/paige/link.html | 2 +- layouts/partials/paige/links.html | 6 +++++- layouts/partials/paige/style.html | 8 ++++++++ 6 files changed, 21 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 21d558e3..00481603 100644 --- a/README.md +++ b/README.md @@ -180,6 +180,7 @@ There is a single parameter object with sensible defaults that can be overridden ```toml [paige] 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 math = false # Enable math typesetting style = "" # CSS included at the end of the stylesheet, before style-last.css diff --git a/assets/css/paige/bootstrap/paige.scss b/assets/css/paige/bootstrap/paige.scss index 2b8ea942..696bed7d 100644 --- a/assets/css/paige/bootstrap/paige.scss +++ b/assets/css/paige/bootstrap/paige.scss @@ -1,6 +1,9 @@ {{ $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 }}; @import "bootstrap"; diff --git a/layouts/partials/paige/html.html b/layouts/partials/paige/html.html index 121967ef..c137fcda 100644 --- a/layouts/partials/paige/html.html +++ b/layouts/partials/paige/html.html @@ -1,6 +1,7 @@ {{ $page := . }} +{{ $dark := eq ($page.Param "paige.color_scheme") "dark" }} {{ $lang := site.LanguageCode | default site.Language.Lang }} {{ $rtl := eq $page.Language.LanguageDirection "rtl" }} - + diff --git a/layouts/partials/paige/link.html b/layouts/partials/paige/link.html index 5d05090a..6108e2d5 100644 --- a/layouts/partials/paige/link.html +++ b/layouts/partials/paige/link.html @@ -1,5 +1,6 @@ {{ $params := . }} +{{ $context := $params.context }} {{ $crossorigin := $params.crossorigin | default "anonymous" }} {{ $href := $params.href }} {{ $includepaths := $params.includepaths }} @@ -20,7 +21,6 @@ {{ $resource := . }} {{ if $template }} - {{ $context := dict "color" (page.Param "paige.color" | default "#0d6efd") }} {{ $split := path.Split $href }} {{ $join := path.Join $split.Dir (print (printf "%#v" $context | sha1) "-" $split.File) }} {{ $resource = resources.ExecuteAsTemplate $join $context . }} diff --git a/layouts/partials/paige/links.html b/layouts/partials/paige/links.html index 0ca901ca..59115fd7 100644 --- a/layouts/partials/paige/links.html +++ b/layouts/partials/paige/links.html @@ -32,7 +32,11 @@ {{ 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) }} {{ if $page.Param "paige.math" }} diff --git a/layouts/partials/paige/style.html b/layouts/partials/paige/style.html index 5bf7f959..55980e0b 100644 --- a/layouts/partials/paige/style.html +++ b/layouts/partials/paige/style.html @@ -93,6 +93,13 @@ body, html { 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) { {{ partial "paige/dark.css" $page | safeCSS }} } @@ -100,6 +107,7 @@ body, html { @media (prefers-color-scheme: light) { {{ partial "paige/light.css" $page | safeCSS }} } +{{ end }} @media (prefers-reduced-motion: reduce) { .paige-header-link {