Replace color_scheme, data attr with Bootstrap media query

2 years ago · 668ea2602e
parent 1156b8dea4
commit 668ea2602e
5 changed files with 4 additions and 22 deletions
--- a/README.md
+++ b/README.md
@ -276,7 +276,6 @@ paige:
    yandex: # See https://metrica.yandex.com
      account_id: ""
  color: "#0d6efd" # Bootstrap primary color; theme color for Safari and Windows
-  color_scheme: "" # Always use this color scheme without automatic switching; must be "", "light", or "dark"
  comments:
    cactus: # See https://cactus.chat
      account_id: ""
--- a/assets/paige/bootstrap/custom.scss
+++ b/assets/paige/bootstrap/custom.scss
@ -1,4 +1,6 @@
 {{ $page := . }}

+$color-mode-type: media-query;
 $primary: {{ $page.Param "paige.color" | default "#0d6efd" }};
+
@import "bootstrap";
--- a/layouts/partials/paige/html.html
+++ b/layouts/partials/paige/html.html
@ -1,7 +1,6 @@
 {{ $page := . }}

-{{ $dark := eq ($page.Param "paige.color_scheme") "dark" }}
 {{ $lang := site.LanguageCode | default site.Language.Lang }}
 {{ $rtl := eq $page.Language.LanguageDirection "rtl" }}

-<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 }}>
+<html data-paige="Paige theme from https://github.com/willfaught/paige" {{ if $rtl }} dir="rtl" {{ end }} {{ with $lang }} lang="{{ . }}" {{ end }}>
--- a/layouts/partials/paige/links.html
+++ b/layouts/partials/paige/links.html
@ -13,14 +13,9 @@
 <link color="{{ $page.Param `paige.color` | default `#0d6efd` }}" href="{{ relLangURL `safari-pinned-tab.svg` | safeURL }}" rel="mask-icon">
 <link href="{{ relLangURL `site.webmanifest` | safeURL }}" rel="manifest">

+{{ partial "paige/link.html" (dict "href" "paige/bootstrap/paige.scss" "page" $page "sass" true) }}
 {{ partial "paige/link.html" (dict "href" "paige/bootstrap-icons/bootstrap-icons.css") }}

-{{ if $page.Param "paige.color" }}
-    {{ partial "paige/link.html" (dict "href" "paige/bootstrap/custom.scss" "page" $page "sass" true) }}
-{{ else }}
-    {{ partial "paige/link.html" (dict "href" "paige/bootstrap/bootstrap.css") }}
-{{ end }}
-
 {{ if or ($page.Param "paige.math") (and ($page.Param "paige.section_pages.full_pages") (where $page.Pages "Params.paige.math" "eq" true)) }}
    {{ partial "paige/link.html" (dict "href" "paige/katex/katex.css") }}
 {{ end }}
--- a/layouts/partials/paige/scripts.html
+++ b/layouts/partials/paige/scripts.html
@ -30,19 +30,6 @@ function paigeResize() {
 }
 paigeResize();
 addEventListener("resize", paigeResize);
-{{ if $page.Param "paige.color_scheme" | not }}
-    var paigeQuery = matchMedia("(prefers-color-scheme: dark)");
-    if (paigeQuery.matches) {
-        document.documentElement.setAttribute("data-bs-theme", "dark")
-    }
-    paigeQuery.addEventListener("change", function (e) {
-        if (e.matches) {
-            document.documentElement.setAttribute("data-bs-theme", "dark");
-        } else {
-            document.documentElement.removeAttribute("data-bs-theme");
-        }
-    });
-{{ end }}
 </script>
 {{ partial "paige/script.html" (dict "src" "paige/bootstrap/bootstrap.bundle.js") }}