Use own Stimulus based theme changer

app/javascript/controllers/theme_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    const theme = localStorage.getItem("theme") || "light";
+    document.documentElement.dataset.theme = theme;
+  }
+
+  change(event) {
+    const theme = event.target.dataset.theme;
+    document.documentElement.dataset.theme = theme;
+
+    if (localStorage.getItem("theme") !== theme) {
+      localStorage.setItem("theme", theme);
+    }
+  }
+}

app/javascript/entrypoints/application.js

@@ -1,9 +1,2 @@
 import "@hotwired/turbo-rails";
 import "../controllers";
-
-import { themeChange } from "theme-change";
-themeChange();
-
-document.addEventListener("turbo:load", () => {
-  themeChange();
-});

app/views/components/shared/nav.rb

@@ -63,7 +63,7 @@ def view_template
     private
 
     def render_theme_changer
-      Dropdown :end do |dropdown|
+      Dropdown :end, data: {controller: :theme} do |dropdown|
         dropdown.button :ghost, class: "mb-2" do
           "Theme"
         end
@@ -86,7 +86,7 @@ def render_theme_changer
           div class: "grid grid-cols-1 gap-3 p-3" do
             THEMES.each do |theme|
               menu.item do
-                a data: {set_theme: theme} do
+                a data: {theme:, action: "theme#change"} do
                   theme.capitalize
                 end
               end

package.json

@@ -13,7 +13,6 @@
     "prettier": "^3.3.3",
     "stimulus-vite-helpers": "^3.1.0",
     "tailwindcss": "^3.4.7",
-    "theme-change": "^2.5.0",
     "vite": "^5.0.0",
     "vite-plugin-ruby": "^5.0.0",
     "vite-plugin-stimulus-hmr": "^3.0.0"