diff --git a/src/App.vue b/src/App.vue
index 62780d6..c597408 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@ import RouterViewport from "@/components/RouterViewport.vue";
 import Toaster from "@/components/ui/toast/Toaster.vue";
 import CommandPalette from "./components/CommandPalette.vue";
 import SettingsContextProvider from "./providers/SettingsContextProvider";
+import ColorSchemeProvider from "./providers/ColorSchemeProvider";
 import KubeContextProvider from "./providers/KubeContextProvider";
 import CommandPaletteProvider from "./providers/CommandPaletteProvider";
 import TabProvider from "./providers/TabProvider";
@@ -18,19 +19,21 @@ import DialogHandler from "./components/DialogHandler.vue";
   >
     <Suspense>
       <SettingsContextProvider>
-        <KubeContextProvider>
-          <TabProvider>
-            <CommandPaletteProvider>
-              <DialogProvider>
-                <Navigation />
-                <RouterViewport />
-                <Toaster />
-                <CommandPalette />
-                <DialogHandler />
-              </DialogProvider>
-            </CommandPaletteProvider>
-          </TabProvider>
-        </KubeContextProvider>
+        <ColorSchemeProvider>
+          <KubeContextProvider>
+            <TabProvider>
+              <CommandPaletteProvider>
+                <DialogProvider>
+                  <Navigation />
+                  <RouterViewport />
+                  <Toaster />
+                  <CommandPalette />
+                  <DialogHandler />
+                </DialogProvider>
+              </CommandPaletteProvider>
+            </TabProvider>
+          </KubeContextProvider>
+        </ColorSchemeProvider>
       </SettingsContextProvider>
     </Suspense>
   </AppLayout>
diff --git a/src/providers/ColorSchemeProvider.ts b/src/providers/ColorSchemeProvider.ts
new file mode 100644
index 0000000..424058d
--- /dev/null
+++ b/src/providers/ColorSchemeProvider.ts
@@ -0,0 +1,15 @@
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
+import { useColorMode } from "@vueuse/core";
+import { injectStrict } from "@/lib/utils";
+
+export default {
+  async setup() {
+    const { settings } = injectStrict(SettingsContextStateKey);
+    const colorMode = useColorMode();
+
+    colorMode.value = settings.value.appearance.colorScheme;
+  },
+  render(): any {
+    return this.$slots.default();
+  },
+};