feat: dark mode

ui/app/index.html

@@ -10,17 +10,40 @@
         <script>
             // If there is no trailing slash at the end of the path in the url,
             // add one. This ensures assets like script.js are loaded properly
-            if (location.pathname.substr(-1) != '/') {
+            if (location.pathname.slice(-1) !== '/') {
                 location.pathname = location.pathname + '/';
                 console.log('added slash');
             }
+
+            function setAndPersistTheme(requestedBootstrapTheme) {
+                let themeToSet = requestedBootstrapTheme;
+
+                // Handle "auto" by detecting system preference
+                if (requestedBootstrapTheme === 'auto') {
+                    themeToSet = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+
+                // Apply the theme to the body
+                document.documentElement.setAttribute('data-bs-theme', themeToSet);
+
+                // Persist the requested theme back to localStorage
+                localStorage.setItem('bootstrapTheme', requestedBootstrapTheme);
+            }
+
+            // Initialize theme on app launch
+            window.addEventListener("DOMContentLoaded", function () {
+                let persistedBootstrapTheme = localStorage.getItem('bootstrapTheme');
+                if (persistedBootstrapTheme === null) { persistedBootstrapTheme = "auto"; }
+                setAndPersistTheme(persistedBootstrapTheme);
+            });
         </script>
         <script src="script.js"></script>
         <script>
             var app = Elm.Main.init({
                 flags: {
                     production: true,
                     firstDayOfWeek: JSON.parse(localStorage.getItem('firstDayOfWeek')),
+                    bootstrapTheme: localStorage.getItem('bootstrapTheme'),
                     defaultCreator: localStorage.getItem('defaultCreator'),
                     groupExpandAll: JSON.parse(localStorage.getItem('groupExpandAll'))
                 }
@@ -34,6 +57,9 @@
             app.ports.persistFirstDayOfWeek.subscribe(function(firstDayOfWeek) {
                 localStorage.setItem('firstDayOfWeek', JSON.stringify(firstDayOfWeek));
             });
+            app.ports.setAndPersistBootstrapTheme.subscribe(function(bootstrapTheme) {
+                setAndPersistTheme(bootstrapTheme);
+            });
         </script>
     </body>
 </html>

ui/app/src/Main.elm

@@ -100,6 +100,16 @@ init flags url key =
                             _ ->
                                 Monday
                    )
+
+        bootstrapTheme =
+            flags
+                |> Json.decodeValue (Json.field "bootstrapTheme" Json.string)
+                |> Result.withDefault "auto"
+
+        settings =
+            { firstDayOfWeek = firstDayOfWeek
+            , bootstrapTheme = bootstrapTheme
+            }
     in
     update (urlUpdate url)
         (Model
@@ -115,12 +125,10 @@ init flags url key =
             libUrl
             Loading
             Loading
-            Loading
             defaultCreator
             groupExpandAll
             key
-            { firstDayOfWeek = firstDayOfWeek
-            }
+            settings
         )
 
 

ui/app/src/Types.elm

@@ -24,7 +24,6 @@ type alias Model =
     , libUrl : String
     , bootstrapCSS : ApiData String
     , fontAwesomeCSS : ApiData String
-    , elmDatepickerCSS : ApiData String
     , defaultCreator : String
     , expandAll : Bool
     , key : Key
@@ -52,9 +51,9 @@ type Msg
     | RedirectAlerts
     | BootstrapCSSLoaded (ApiData String)
     | FontAwesomeCSSLoaded (ApiData String)
-    | ElmDatepickerCSSLoaded (ApiData String)
     | SetDefaultCreator String
     | SetGroupExpandAll Bool
+    | SetAndPersistBootstrapTheme String
 
 
 type Route

ui/app/src/Updates.elm

@@ -1,4 +1,4 @@
-module Updates exposing (update)
+port module Updates exposing (update)
 
 import Browser.Navigation as Navigation
 import Task
@@ -114,11 +114,14 @@ update msg ({ basePath, apiUrl } as model) =
         FontAwesomeCSSLoaded css ->
             ( { model | fontAwesomeCSS = css }, Cmd.none )
 
-        ElmDatepickerCSSLoaded css ->
-            ( { model | elmDatepickerCSS = css }, Cmd.none )
-
         SetDefaultCreator name ->
             ( { model | defaultCreator = name }, Cmd.none )
 
         SetGroupExpandAll expanded ->
             ( { model | expandAll = expanded }, Cmd.none )
+
+        SetAndPersistBootstrapTheme theme ->
+            ( model, setAndPersistBootstrapTheme theme )
+
+
+port setAndPersistBootstrapTheme : String -> Cmd msg