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

5 files changed, 60 insertions, 2 deletions

diff --git a/app/views/layouts/_nav_switchers.html.erb b/app/views/layouts/_nav_switchers.html.erb
new file mode 100644
index 00000000..9c3b222e
--- /dev/null
+++ b/app/views/layouts/_nav_switchers.html.erb
@@ -0,0 +1,23 @@
+<%= link_to url_for(locale: (:en unless I18n.locale == :en)),
+      class: "nav_toggle",
+      "aria-label" => t(".switch_locale"), title: t(".switch_locale") do %>
+  <%= I18n.locale == :en ? "DE" : "EN" %>
+<% end %>
+<%= check_box_tag "scheme_override", 1, false, class: "nav_toggle_input" %>
+<%= label_tag "scheme_override", class: "nav_toggle",
+      "aria-label" => t(".scheme_override"), title: t(".scheme_override") do %>
+  <%= icon("contrast", library: "tabler", "aria-hidden": true) %>
+<% end %>
+
+<%= javascript_tag nonce: true do %>
+  (function () {
+    var box = document.getElementById("scheme_override");
+    try {
+      if (localStorage.getItem("override-prefers-color-scheme")) box.checked = true;
+      box.addEventListener("change", function () {
+        if (box.checked) localStorage.setItem("override-prefers-color-scheme", 1);
+        else localStorage.removeItem("override-prefers-color-scheme");
+      });
+    } catch (e) { /* storage unavailable: the toggle still works per page */ }
+  })();
+<% end %>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index f6ceaaff..6ac9b756 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -27,6 +27,7 @@
       <div id="navigation">
         <div id="main_navigation">
           <%= render :partial => 'admin/menu' if current_user %>
+          <%= render :partial => 'layouts/nav_switchers' %>
         </div>
         <div id="search_widget" style="display: none;">
           <div>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 51fafe21..d1551fcf 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -281,6 +281,7 @@ de:
     menu:
       dashboard: "Dashboard"
       search: "Suche"
+      scheme_override: "Hell/Dunkel umschalten"
       log_out: "Abmelden"
     index:
       title: "cccms Dashboard"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b3678187..ac370852 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -234,6 +234,7 @@ en:
     menu:
       dashboard: "Dashboard"
       search: "Search"
+      scheme_override: "Toggle light/dark"
       log_out: "Log out"
     index:
       title: "cccms dashboard"
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;
 }