From 2716fad72cdc38b64cb6e695efb3869d3e181098 Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Tue, 23 Sep 2025 15:43:36 +0200
Subject: [PATCH] fix: Check user's theme preference during page load (#156)

---
 app/javascript/controllers/theme_controller.js | 2 ++
 app/views/layouts/_dark_mode_check.html.erb    | 5 +++++
 app/views/layouts/shared/_head.html.erb        | 1 +
 3 files changed, 8 insertions(+)
 create mode 100644 app/views/layouts/_dark_mode_check.html.erb

diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js
index 10aa7b9a0..361ae95ed 100644
--- a/app/javascript/controllers/theme_controller.js
+++ b/app/javascript/controllers/theme_controller.js
@@ -42,8 +42,10 @@ export default class extends Controller {
   // Sets or removes the data-theme attribute
   setTheme(isDark) {
     if (isDark) {
+      localStorage.theme = "dark";
       document.documentElement.setAttribute("data-theme", "dark");
     } else {
+      localStorage.theme = "light";
       document.documentElement.setAttribute("data-theme", "light");
     }
   }
diff --git a/app/views/layouts/_dark_mode_check.html.erb b/app/views/layouts/_dark_mode_check.html.erb
new file mode 100644
index 000000000..0a0ccac2c
--- /dev/null
+++ b/app/views/layouts/_dark_mode_check.html.erb
@@ -0,0 +1,5 @@
+<script>
+  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  }
+</script>
\ No newline at end of file
diff --git a/app/views/layouts/shared/_head.html.erb b/app/views/layouts/shared/_head.html.erb
index 8a097475b..26fd2f29c 100644
--- a/app/views/layouts/shared/_head.html.erb
+++ b/app/views/layouts/shared/_head.html.erb
@@ -10,6 +10,7 @@
   <%= combobox_style_tag %>
 
   <%= javascript_importmap_tags %>
+  <%= render "layouts/dark_mode_check" %>
   <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
 
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">