feat: theme switcher

internal/glance/templates/document.html

@@ -5,7 +5,7 @@
     <title>{{ block "document-title" . }}{{ end }}</title>
     <script>if (navigator.platform === 'iPhone') document.documentElement.classList.add('ios');</script>
     <meta charset="UTF-8">
-    <meta name="color-scheme" content="dark">
+    <meta name="color-scheme" content="light">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">

internal/glance/templates/page.html

@@ -8,6 +8,11 @@
         slug: "{{ .Page.Slug }}",
         baseURL: "{{ .App.Config.Server.BaseURL }}",
     };
+
+    /**
+     * @type ThemeCollection
+     */
+    const userThemes = JSON.parse("{{ .Presets }}");
 </script>
 {{ end }}
 
@@ -29,6 +34,23 @@
 {{ end }}
 {{ end }}
 
+{{ define "theme-switcher" }}
+<div class="theme-dropdown">
+    <button class="dropdown-button">
+        <span>Theme</span>
+        <i class="arrow"></i>
+    </button>
+    <div class="dropdown-content">
+        <div class="theme-option" data-theme="default" data-scheme="dark">default</div>
+        <div class="theme-option" data-theme="light" data-scheme="light">light</div>
+        <div class="theme-option" data-theme="dark" data-scheme="dark">dark</div>
+        <div class="separator"></div>
+        <div class="custom-presets">
+        </div>
+    </div>
+</div>
+{{ end }}
+
 {{ define "document-body" }}
 <div class="flex flex-column body-content">
     {{ if not .Page.HideDesktopNavigation }}
@@ -39,6 +61,9 @@
             <div class="nav flex grow">
                 {{ template "navigation-links" . }}
             </div>
+            <div class="flex items-center">
+                {{ template "theme-switcher" . }}
+            </div>
         </div>
     </div>
     {{ end }}
@@ -52,7 +77,12 @@
             <label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"{{ if .Page.ExpandMobilePageNavigation }} checked{{ end }}><div class="hamburger-icon"></div></label>
         </div>
         <div class="mobile-navigation-page-links">
-            {{ template "navigation-links" . }}
+            <div class="flex grow">
+                {{ template "navigation-links" . }}
+            </div>
+            <div class="flex items-center">
+                {{ template "theme-switcher" . }}
+            </div>
         </div>
     </div>
 

internal/glance/templates/theme-style.gotmpl

@@ -1,14 +1,31 @@
 <style>
-:root {
+.default {
     {{ if .BackgroundColor }}
     --bgh: {{ .BackgroundColor.Hue }};
     --bgs: {{ .BackgroundColor.Saturation }}%;
     --bgl: {{ .BackgroundColor.Lightness }}%;
     {{ end }}
+
     {{ if ne 0.0 .ContrastMultiplier }}--cm: {{ .ContrastMultiplier }};{{ end }}
     {{ if ne 0.0 .TextSaturationMultiplier }}--tsm: {{ .TextSaturationMultiplier }};{{ end }}
     {{ if .PrimaryColor }}--color-primary: {{ .PrimaryColor.String | safeCSS }};{{ end }}
     {{ if .PositiveColor }}--color-positive: {{ .PositiveColor.String | safeCSS }};{{ end }}
     {{ if .NegativeColor }}--color-negative: {{ .NegativeColor.String | safeCSS }};{{ end }}
 }
-</style>
+
+{{ range $name,$theme := .Presets }}
+.{{ $name }} {
+    {{ if .BackgroundColor }}
+    --bgh: {{ $theme.BackgroundColor.Hue }};
+    --bgs: {{ $theme.BackgroundColor.Saturation }}%;
+    --bgl: {{ $theme.BackgroundColor.Lightness }}%;
+    {{ end }}
+
+    {{ if ne 0.0 $theme.ContrastMultiplier }}--cm: {{ $theme.ContrastMultiplier }};{{ end }}
+    {{ if ne 0.0 $theme.TextSaturationMultiplier }}--tsm: {{ $theme.TextSaturationMultiplier }};{{ end }}
+    {{ if $theme.PrimaryColor }}--color-primary: {{ $theme.PrimaryColor.String | safeCSS }};{{ end }}
+    {{ if $theme.PositiveColor }}--color-positive: {{ $theme.PositiveColor.String | safeCSS }};{{ end }}
+    {{ if $theme.NegativeColor }}--color-negative: {{ $theme.NegativeColor.String | safeCSS }};{{ end }}
+}
+{{ end }}
+</style>