Make theme key accessible via CSS

svilenmarkov · svilenmarkov · commit b294839b79d5 · 2025-05-19T21:25:33.000+01:00
diff --git a/internal/glance/static/js/page.js b/internal/glance/static/js/page.js
@@ -683,6 +683,7 @@ async function changeTheme(key, onChanged) {
         .appendTo(document.head);
 
     themeStyleElem.html(newThemeStyle);
+    document.documentElement.setAttribute("data-theme", key);
     document.documentElement.setAttribute("data-scheme", response.headers.get("X-Scheme"));
     typeof onChanged == "function" && onChanged();
     setTimeout(() => { tempStyle.remove(); }, 10);
diff --git a/internal/glance/templates/document.html b/internal/glance/templates/document.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top" data-scheme="{{ if .Request.Theme.Light }}light{{ else }}dark{{ end }}">
+<html lang="en" id="top" data-theme="{{ .Request.Theme.Key }}" data-scheme="{{ if .Request.Theme.Light }}light{{ else }}dark{{ end }}">
 <head>
     {{ block "document-head-before" . }}{{ end }}
     <script>
