orchidsoftware · ega22a · Apr 6, 2026 · Apr 6, 2026 · Apr 6, 2026
diff --git a/public/assets/app.css b/public/assets/app.css
diff --git a/public/assets/app.js b/public/assets/app.js
diff --git a/public/assets/app.rtl.css b/public/assets/app.rtl.css
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,19 +1,19 @@
 {
   "resources/js/app.js": {
-    "file": "assets/app.js?v=9a0ca443",
+    "file": "assets/app.js?v=b35c1734",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
-    "integrity": "sha384-0g2/8lmkC15eCqxDKzwRpg03UsJuQWFXSQxv0M0cmamLXN35/olQITcbjfrREWLz"
+    "integrity": "sha384-Are2Xf2HjUVeF5pBXA9OzCHDO1kmINBjxH37LSxaZbsmkr/m1vzQ+F2N9DP5CQyA"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app.css?v=1a2da261",
+    "file": "assets/app.css?v=85ee863c",
     "src": "resources/sass/app.scss",
     "isEntry": true,
     "name": "app",
     "names": [
       "app.css"
     ],
-    "integrity": "sha384-UhZlAcQieMUrdzbGq+dtJNJu0CjrMsKiUSYTMoRMNEuePoxH1kkP0a+eZNwZ0m7i"
+    "integrity": "sha384-8oNbgfniRbUqSbSqTDh0sRbXWWhv+dvE2B/J1bBrYaQKRm1V8jhb4/+nYLjqYxEh"
   }
 }
diff --git a/resources/js/controllers/theme_controller.js b/resources/js/controllers/theme_controller.js
@@ -0,0 +1,93 @@
+import ApplicationController from "./application_controller";
+
+/**
+ * Stimulus controller for toggling between dark and light themes.
+ *
+ * Uses the Bootstrap 5.3 color mode mechanism by setting the
+ * `data-bs-theme` attribute on the `<html>` element. The user's
+ * preference is persisted in `localStorage` under the "theme" key.
+ *
+ * Icon visibility is handled purely via CSS selectors on
+ * `[data-bs-theme]`, so there is no flash during Turbo navigation.
+ *
+ * @extends ApplicationController
+ */
+export default class extends ApplicationController {
+
+    /** @type {string} localStorage key used to persist the theme choice. */
+    static STORAGE_KEY = "theme";
+
+    /**
+     * Called when the controller is connected to the DOM.
+     * Applies the resolved theme and subscribes to OS-level changes.
+     *
+     * @returns {void}
+     */
+    connect() {
+        this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        this.applyTheme(this.resolveTheme());
+
+        this.handleSystemChange = this.handleSystemChange.bind(this);
+        this.mediaQuery.addEventListener("change", this.handleSystemChange);
+    }
+
+    /**
+     * Called when the controller is disconnected from the DOM.
+     * Removes the OS-level media query listener.
+     *
+     * @returns {void}
+     */
+    disconnect() {
+        this.mediaQuery.removeEventListener("change", this.handleSystemChange);
+    }
+
+    /**
+     * Action: toggles the current theme between "dark" and "light".
+     * Persists the new value in `localStorage`.
+     *
+     * @returns {void}
+     */
+    toggle() {
+        const current = document.documentElement.getAttribute("data-bs-theme");
+        const next = current === "dark" ? "light" : "dark";
+
+        localStorage.setItem(this.constructor.STORAGE_KEY, next);
+        this.applyTheme(next);
+    }
+
+    /**
+     * Resolves which theme should be applied.
+     * Priority: localStorage -> OS preference -> "light".
+     *
+     * @returns {"dark"|"light"} The resolved theme name.
+     */
+    resolveTheme() {
+        const stored = localStorage.getItem(this.constructor.STORAGE_KEY);
+        if (stored === "dark" || stored === "light") {
+            return stored;
+        }
+        return this.mediaQuery.matches ? "dark" : "light";
+    }
+
+    /**
+     * Applies the given theme by setting `data-bs-theme` on `<html>`.
+     *
+     * @param {"dark"|"light"} theme - The theme to apply.
+     * @returns {void}
+     */
+    applyTheme(theme) {
+        document.documentElement.setAttribute("data-bs-theme", theme);
+    }
+
+    /**
+     * Handles OS-level `prefers-color-scheme` changes.
+     * Only auto-applies when no explicit user choice is stored.
+     *
+     * @returns {void}
+     */
+    handleSystemChange() {
+        if (!localStorage.getItem(this.constructor.STORAGE_KEY)) {
+            this.applyTheme(this.resolveTheme());
+        }
+    }
+}
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -27,3 +27,4 @@
 @import "plugins/load-opacity";
 @import "plugins/accordion";
 @import "plugins/tom-select";
+@import "core/dark-mode";
diff --git a/resources/sass/core/buttons.scss b/resources/sass/core/buttons.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .btn {
     font-weight: 400;
     border-radius: $btn-border-radius;
@@ -22,8 +24,8 @@
 
 .btn-default {
     @include button-variant($text-color, $btn-default-bg, $btn-default-border);
-    background-color: #fff;
-    border-bottom-color: darken($btn-default-border, 2%);
+    background-color: var(--bs-body-bg) !important;
+    border-bottom-color: color.adjust($btn-default-border, $lightness: -2%);
     @include box-shadow(0 1px 1px rgba(90, 90, 90, 0.1));
     &.btn-bg {
         border-color: rgba(0, 0, 0, 0.1);