diff --git a/web/index.html b/web/index.html
index da0cef8..740ece0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -21,6 +21,10 @@
     <script>
       window.APP = {};
       window.APP.baseUrl = "{{.BaseUrl}}";
+
+      const browserPrefers = !(window.matchMedia !== undefined && window.matchMedia("(prefers-color-scheme: light)").matches);
+      const { darkTheme = browserPrefers } = JSON.parse(localStorage.getItem("settings")) || {};
+      document.documentElement.classList.toggle("dark", darkTheme);
     </script>
   </head>
   <body class="bg-color">
diff --git a/web/src/utils/Context.ts b/web/src/utils/Context.ts
index 05e36e9..d725db9 100644
--- a/web/src/utils/Context.ts
+++ b/web/src/utils/Context.ts
@@ -72,12 +72,7 @@ export const SettingsContext = newRidgeState<SettingsType>(
   {
     onSet: (new_state) => {
       try {
-        if (new_state.darkTheme) {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
-
+        document.documentElement.classList.toggle("dark", new_state.darkTheme);
         localStorage.setItem("settings", JSON.stringify(new_state));
       } catch (e) {
         console.log("An error occurred while trying to modify the local settings context state.");
