Move switchers out of the user check, so it also works when logged out

1 files changed, 34 insertions, 2 deletions

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index c6f82827..f697c4e2 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -57,6 +57,14 @@
   --radius:                6px;
 }
 
+@media (prefers-color-scheme: light) {
+  :root:has(#scheme_override:checked) { color-scheme: dark; }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:has(#scheme_override:checked) { color-scheme: light; }
+}
+
 /* ============================================================
    Base elements
    ============================================================ */
@@ -369,13 +377,13 @@ form.button_to.destructive button[type="submit"]:hover {
 form.button_to.computation input[type="submit"],
 form.button_to.computation button[type="submit"] {
   color: var(--compute);
-  background-color: var(--compute-solid);
+  background-color: var(--compute-surface);
 }
 
 form.button_to.computation input[type="submit"]:hover,
 form.button_to.computation button[type="submit"]:hover {
   color: var(--on-solid);
-  background-color: var(--compute);
+  background-color: var(--compute-solid);
 }
 
 form.button_to.computation input[type="submit"]:disabled,
@@ -420,6 +428,7 @@ input[type="submit"]:hover {
 }
 
 #main_navigation a,
+#main_navigation label.nav_toggle,
 #main_navigation form.button_to button {
   display: inline-flex;
   text-decoration: none;
@@ -433,11 +442,16 @@ input[type="submit"]:hover {
 }
 
 #main_navigation a:hover,
+#main_navigation label.nav_toggle:hover,
 #main_navigation form.button_to button:hover {
   color: var(--surface);
   background-color: var(--text);
 }
 
+#main_navigation label.nav_toggle {
+  cursor: pointer;
+}
+
 #main_navigation svg,
 .action_button svg,
 form.button_to svg  {
@@ -445,6 +459,24 @@ form.button_to svg  {
   height: 1.25rem;
 }
 
+#main_navigation input.nav_toggle_input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+#main_navigation input.nav_toggle_input:focus-visible + label.nav_toggle {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+#main_navigation input.nav_toggle_input:checked + label.nav_toggle {
+  color: var(--accent);
+  background-color: var(--accent-surface);
+}
+
 #dashboard_search {
   margin-bottom: 1.5rem;
 }