init theme set on page load

CHANGELOG.md

@@ -16,12 +16,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Storing Discord-provided snowflake ID's in a postgresql database. Now using 'PositiveLargeIntegerField' to support this
 - Sidebar server "placeholder" elements running offscreen on desktop - fixed by reducing them by 2
+- Theme button missing icon on page load. Created an init function for properly setting up the theme on page load.
 
 ### Changed
 
 - Keep the hover state of sidebar buttons while their respective dropdown's are showing
 
-
 ## [Unreleased] [0.4.0] - xxxx-xx-xx [BREAKING]
 
 ### Added

static/js/base.js

@@ -9,6 +9,13 @@ $('input[name="themeToggle"]').on("change", function() {
     applyTheme(selectedTheme);
 });
 
+// on page load
+function initThemeChoice() {
+    const theme = getStoredTheme() || "auto";  // If the user is new, they won't have a set theme, so default to auto
+    setThemeIcon(theme);
+    applyTheme(theme);
+}
+
 function setThemeIcon(theme) {
     const iconOptions = {
         light: "bi-sun",
@@ -16,6 +23,10 @@ function setThemeIcon(theme) {
         auto: "bi-circle-half"
     }
 
+    if (!Object.keys(iconOptions).includes(theme)) {
+        throw new Error(`No icon for theme: ${theme}`);
+    }
+
     $(".js-themeMenuBtn > i").removeClass(Object.values(iconOptions).join(" "));
     $(".js-themeMenuBtn > i").addClass(iconOptions[theme]);
 }
@@ -90,7 +101,5 @@ $(document).ready(function() {
     // $(".input-group.date").datepicker({format: "yyyy-mm-dd"});
 
     // Load theme
-    const theme = getStoredTheme();
+    initThemeChoice();
-    setThemeIcon(theme);
-    applyTheme(theme);
 });