diff --git a/index.html b/index.html
index f16b30a..11603f8 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
-  <body class="dark">
+  <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index 343a483..62780d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,11 +10,12 @@ import CommandPaletteProvider from "./providers/CommandPaletteProvider";
 import TabProvider from "./providers/TabProvider";
 import DialogProvider from "./providers/DialogProvider";
 import DialogHandler from "./components/DialogHandler.vue";
-import Settings from "./views/Settings.vue";
 </script>
 
 <template>
-  <AppLayout class="dark bg-zinc-900 text-sm rounded-lg overflow-hidden">
+  <AppLayout
+    class="bg-accent text-sm rounded-lg border border-border overflow-hidden"
+  >
     <Suspense>
       <SettingsContextProvider>
         <KubeContextProvider>
diff --git a/src/assets/main.postcss b/src/assets/main.postcss
index ca1e183..c362f2c 100644
--- a/src/assets/main.postcss
+++ b/src/assets/main.postcss
@@ -53,7 +53,7 @@
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
 
-    --accent: 12 6.5% 15.1%;
+    --accent: 240 6% 10%;
     --accent-foreground: 60 9.1% 97.8%;
 
     --destructive: 0 72.2% 50.6%;
@@ -99,11 +99,11 @@ body,
   border: none;
   user-select: none;
   cursor: default;
-  color: #fff;
+  color: --foreground;
 }
 
 #app {
-  border: 1px solid --border;
+  border: 1px solid transparent;
 }
 
 ::-webkit-scrollbar {
@@ -115,14 +115,14 @@ body,
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.25);
   border-radius: 20px;
   border: 4px solid transparent;
   background-clip: content-box;
+  @apply bg-border;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #a8bbbf;
+  @apply bg-border;
 }
 
 ::-webkit-scrollbar-corner {
diff --git a/src/components/RouterViewport.vue b/src/components/RouterViewport.vue
index 92fd64f..cb4d913 100644
--- a/src/components/RouterViewport.vue
+++ b/src/components/RouterViewport.vue
@@ -12,7 +12,7 @@ const route = useRoute();
 <template>
   <div class="flex flex-col max-h-screen relative router-viewport">
     <ScrollArea
-      class="w-full flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
+      class="w-full flex flex-grow border-l border-border bg-background"
     >
       <NoContext v-if="route.meta.requiresContext && context == ''" />
       <router-view v-else />
diff --git a/src/components/TabOrchestrator.vue b/src/components/TabOrchestrator.vue
index e50615b..f0193a7 100644
--- a/src/components/TabOrchestrator.vue
+++ b/src/components/TabOrchestrator.vue
@@ -116,7 +116,7 @@ const closeAndSetActiveTab = (id: string, force = false) => {
           <span class="truncate">{{ tab.title }}</span>
           <div
             @click="closeAndSetActiveTab(tab.id)"
-            class="hidden group-hover:block absolute right-1 p-0.5 rounded-sm bg-opacity-50 bg-white hover:bg-white text-background"
+            class="hidden group-hover:block absolute right-1 p-0.5 rounded-sm bg-opacity-50 bg-accent hover:bg-accent text-foreground"
           >
             <Close class="h-3" />
           </div>
diff --git a/src/components/monaco/themes/GithubLight.ts b/src/components/monaco/themes/GithubLight.ts
new file mode 100644
index 0000000..f6724c2
--- /dev/null
+++ b/src/components/monaco/themes/GithubLight.ts
@@ -0,0 +1,348 @@
+export default {
+  base: "vs",
+  inherit: true,
+  rules: [
+    {
+      background: "ffffff",
+      token: "",
+    },
+    {
+      foreground: "6a737d",
+      token: "comment",
+    },
+    {
+      foreground: "6a737d",
+      token: "punctuation.definition.comment",
+    },
+    {
+      foreground: "6a737d",
+      token: "string.comment",
+    },
+    {
+      foreground: "005cc5",
+      token: "constant",
+    },
+    {
+      foreground: "005cc5",
+      token: "entity.name.constant",
+    },
+    {
+      foreground: "005cc5",
+      token: "variable.other.constant",
+    },
+    {
+      foreground: "005cc5",
+      token: "variable.language",
+    },
+    {
+      foreground: "6f42c1",
+      token: "entity",
+    },
+    {
+      foreground: "6f42c1",
+      token: "entity.name",
+    },
+    {
+      foreground: "24292e",
+      token: "variable.parameter.function",
+    },
+    {
+      foreground: "22863a",
+      token: "entity.name.tag",
+    },
+    {
+      foreground: "d73a49",
+      token: "keyword",
+    },
+    {
+      foreground: "d73a49",
+      token: "storage",
+    },
+    {
+      foreground: "d73a49",
+      token: "storage.type",
+    },
+    {
+      foreground: "24292e",
+      token: "storage.modifier.package",
+    },
+    {
+      foreground: "24292e",
+      token: "storage.modifier.import",
+    },
+    {
+      foreground: "24292e",
+      token: "storage.type.java",
+    },
+    {
+      foreground: "032f62",
+      token: "string",
+    },
+    {
+      foreground: "032f62",
+      token: "punctuation.definition.string",
+    },
+    {
+      foreground: "032f62",
+      token: "string punctuation.section.embedded source",
+    },
+    {
+      foreground: "005cc5",
+      token: "support",
+    },
+    {
+      foreground: "005cc5",
+      token: "meta.property-name",
+    },
+    {
+      foreground: "e36209",
+      token: "variable",
+    },
+    {
+      foreground: "24292e",
+      token: "variable.other",
+    },
+    {
+      foreground: "b31d28",
+      fontStyle: "bold italic underline",
+      token: "invalid.broken",
+    },
+    {
+      foreground: "b31d28",
+      fontStyle: "bold italic underline",
+      token: "invalid.deprecated",
+    },
+    {
+      foreground: "fafbfc",
+      background: "b31d28",
+      fontStyle: "italic underline",
+      token: "invalid.illegal",
+    },
+    {
+      foreground: "fafbfc",
+      background: "d73a49",
+      fontStyle: "italic underline",
+      token: "carriage-return",
+    },
+    {
+      foreground: "b31d28",
+      fontStyle: "bold italic underline",
+      token: "invalid.unimplemented",
+    },
+    {
+      foreground: "b31d28",
+      token: "message.error",
+    },
+    {
+      foreground: "24292e",
+      token: "string source",
+    },
+    {
+      foreground: "005cc5",
+      token: "string variable",
+    },
+    {
+      foreground: "032f62",
+      token: "source.regexp",
+    },
+    {
+      foreground: "032f62",
+      token: "string.regexp",
+    },
+    {
+      foreground: "032f62",
+      token: "string.regexp.character-class",
+    },
+    {
+      foreground: "032f62",
+      token: "string.regexp constant.character.escape",
+    },
+    {
+      foreground: "032f62",
+      token: "string.regexp source.ruby.embedded",
+    },
+    {
+      foreground: "032f62",
+      token: "string.regexp string.regexp.arbitrary-repitition",
+    },
+    {
+      foreground: "22863a",
+      fontStyle: "bold",
+      token: "string.regexp constant.character.escape",
+    },
+    {
+      foreground: "005cc5",
+      token: "support.constant",
+    },
+    {
+      foreground: "005cc5",
+      token: "support.variable",
+    },
+    {
+      foreground: "005cc5",
+      token: "meta.module-reference",
+    },
+    {
+      foreground: "735c0f",
+      token: "markup.list",
+    },
+    {
+      foreground: "005cc5",
+      fontStyle: "bold",
+      token: "markup.heading",
+    },
+    {
+      foreground: "005cc5",
+      fontStyle: "bold",
+      token: "markup.heading entity.name",
+    },
+    {
+      foreground: "22863a",
+      token: "markup.quote",
+    },
+    {
+      foreground: "24292e",
+      fontStyle: "italic",
+      token: "markup.italic",
+    },
+    {
+      foreground: "24292e",
+      fontStyle: "bold",
+      token: "markup.bold",
+    },
+    {
+      foreground: "005cc5",
+      token: "markup.raw",
+    },
+    {
+      foreground: "b31d28",
+      background: "ffeef0",
+      token: "markup.deleted",
+    },
+    {
+      foreground: "b31d28",
+      background: "ffeef0",
+      token: "meta.diff.header.from-file",
+    },
+    {
+      foreground: "b31d28",
+      background: "ffeef0",
+      token: "punctuation.definition.deleted",
+    },
+    {
+      foreground: "22863a",
+      background: "f0fff4",
+      token: "markup.inserted",
+    },
+    {
+      foreground: "22863a",
+      background: "f0fff4",
+      token: "meta.diff.header.to-file",
+    },
+    {
+      foreground: "22863a",
+      background: "f0fff4",
+      token: "punctuation.definition.inserted",
+    },
+    {
+      foreground: "e36209",
+      background: "ffebda",
+      token: "markup.changed",
+    },
+    {
+      foreground: "e36209",
+      background: "ffebda",
+      token: "punctuation.definition.changed",
+    },
+    {
+      foreground: "f6f8fa",
+      background: "005cc5",
+      token: "markup.ignored",
+    },
+    {
+      foreground: "f6f8fa",
+      background: "005cc5",
+      token: "markup.untracked",
+    },
+    {
+      foreground: "6f42c1",
+      fontStyle: "bold",
+      token: "meta.diff.range",
+    },
+    {
+      foreground: "005cc5",
+      token: "meta.diff.header",
+    },
+    {
+      foreground: "005cc5",
+      fontStyle: "bold",
+      token: "meta.separator",
+    },
+    {
+      foreground: "005cc5",
+      token: "meta.output",
+    },
+    {
+      foreground: "586069",
+      token: "brackethighlighter.tag",
+    },
+    {
+      foreground: "586069",
+      token: "brackethighlighter.curly",
+    },
+    {
+      foreground: "586069",
+      token: "brackethighlighter.round",
+    },
+    {
+      foreground: "586069",
+      token: "brackethighlighter.square",
+    },
+    {
+      foreground: "586069",
+      token: "brackethighlighter.angle",
+    },
+    {
+      foreground: "586069",
+      token: "brackethighlighter.quote",
+    },
+    {
+      foreground: "b31d28",
+      token: "brackethighlighter.unmatched",
+    },
+    {
+      foreground: "b31d28",
+      token: "sublimelinter.mark.error",
+    },
+    {
+      foreground: "e36209",
+      token: "sublimelinter.mark.warning",
+    },
+    {
+      foreground: "959da5",
+      token: "sublimelinter.gutter-mark",
+    },
+    {
+      foreground: "032f62",
+      fontStyle: "underline",
+      token: "constant.other.reference.link",
+    },
+    {
+      foreground: "032f62",
+      fontStyle: "underline",
+      token: "string.other.link",
+    },
+  ],
+  colors: {
+    "editor.foreground": "#24292e",
+    "editor.background": "#ffffff",
+    "editor.selectionBackground": "#c8c8fa",
+    "editor.inactiveSelectionBackground": "#fafbfc",
+    "editor.lineHighlightBackground": "#fafbfc",
+    "editorCursor.foreground": "#24292e",
+    "editorWhitespace.foreground": "#959da5",
+    "editorIndentGuide.background": "#959da5",
+    "editorIndentGuide.activeBackground": "#24292e",
+    "editor.selectionHighlightBorder": "#fafbfc",
+  },
+} as IStandaloneThemeData;
diff --git a/src/components/settings/Navigation.vue b/src/components/settings/Navigation.vue
index 2b495db..33adc89 100644
--- a/src/components/settings/Navigation.vue
+++ b/src/components/settings/Navigation.vue
@@ -4,6 +4,7 @@ import NavigationItem from "@/components/settings/NavigationItem.vue";
 <template>
   <nav class="flex flex-col space-y-1">
     <NavigationItem :to="{ name: 'SettingsGeneral' }" title="General" />
+    <NavigationItem :to="{ name: 'SettingsAppearance' }" title="Appearance" />
     <NavigationItem :to="{ name: 'SettingsClusters' }" title="Clusters" />
   </nav>
 </template>
diff --git a/src/components/settings/NavigationItem.vue b/src/components/settings/NavigationItem.vue
index f5500ba..b971ea1 100644
--- a/src/components/settings/NavigationItem.vue
+++ b/src/components/settings/NavigationItem.vue
@@ -16,7 +16,8 @@ const props = defineProps<{
       :class="
         cn(
           'w-full text-left justify-start',
-          !isActive && 'bg-transparent hover:bg-muted'
+          !isActive &&
+            'bg-background text-foreground hover:bg-muted shadow-none'
         )
       "
     >
diff --git a/src/components/ui/scroll-area/ScrollBar.vue b/src/components/ui/scroll-area/ScrollBar.vue
index b6f4987..c9a428a 100644
--- a/src/components/ui/scroll-area/ScrollBar.vue
+++ b/src/components/ui/scroll-area/ScrollBar.vue
@@ -25,6 +25,6 @@ const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
       )
     "
   >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-white opacity-25" />
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>
 </template>
diff --git a/src/providers/SettingsContextProvider.ts b/src/providers/SettingsContextProvider.ts
index bf28662..52ac219 100644
--- a/src/providers/SettingsContextProvider.ts
+++ b/src/providers/SettingsContextProvider.ts
@@ -28,6 +28,9 @@ export interface SettingsContextState {
     };
     contextSettings: ContextSettings[];
     collapsedNavigationGroups: string[];
+    appearance: {
+      colorScheme: "auto" | "light" | "dark";
+    };
   };
 }
 
@@ -47,6 +50,9 @@ export default {
         },
         contextSettings: [],
         collapsedNavigationGroups: [],
+        appearance: {
+          colorScheme: "auto",
+        },
       },
     });
     provide(SettingsContextStateKey, toRefs(state));
diff --git a/src/router.ts b/src/router.ts
index f70c78f..fee3b89 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -16,6 +16,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "SettingsGeneral",
         component: () => import("./views/settings/General.vue"),
       },
+      {
+        path: "appearance",
+        name: "SettingsAppearance",
+        component: () => import("./views/settings/Appearance.vue"),
+      },
       {
         path: "clusters",
         name: "SettingsClusters",
diff --git a/src/views/ObjectEditor.vue b/src/views/ObjectEditor.vue
index a4780a9..f94eb43 100644
--- a/src/views/ObjectEditor.vue
+++ b/src/views/ObjectEditor.vue
@@ -4,8 +4,9 @@ import Loading from "@/components/Loading.vue";
 import { Command } from "@tauri-apps/api/shell";
 import { writeFile, removeFile, BaseDirectory } from "@tauri-apps/api/fs";
 import { tempdir } from "@tauri-apps/api/os";
-import loader from "@monaco-editor/loader";
-import Theme from "@/components/monaco/themes/BrillianceBlack";
+import loader, { Monaco } from "@monaco-editor/loader";
+import LightTheme from "@/components/monaco/themes/GithubLight";
+import DarkTheme from "@/components/monaco/themes/BrillianceBlack";
 import { Button } from "@/components/ui/button";
 import {
   AlertDialog,
@@ -20,6 +21,12 @@ import {
 import { Kubernetes } from "@/services/Kubernetes";
 import yaml from "js-yaml";
 import { useToast } from "@/components/ui/toast";
+import { useColorMode } from "@vueuse/core";
+
+const colorMode = useColorMode();
+watch(colorMode, (value) => {
+  monacoEditor?.editor.setTheme(value);
+});
 
 const props = defineProps<{
   context: string;
@@ -29,6 +36,7 @@ const props = defineProps<{
   useKubeCtl: boolean;
 }>();
 
+let monacoEditor: Monaco | null = null;
 const editorElement = ref<HTMLElement | null>(null);
 const originalContents = ref<string>("");
 const editContents = ref<string>("");
@@ -74,15 +82,17 @@ onMounted(() => {
       editContents.value = stdOutData;
 
       loader.init().then((monaco) => {
+        monacoEditor = monaco;
         const model = monaco.editor.createModel(editContents.value, "yaml");
         model.onDidChangeContent(() => {
           editContents.value = model.getValue();
         });
 
-        monaco.editor.defineTheme("BrillianceBlack", Theme);
+        monaco.editor.defineTheme("light", LightTheme);
+        monaco.editor.defineTheme("dark", DarkTheme);
         monaco.editor.create(editorElement.value!, {
           model,
-          theme: "BrillianceBlack",
+          theme: colorMode.value,
           automaticLayout: true,
           minimap: {
             enabled: false,
diff --git a/src/views/Shell.vue b/src/views/Shell.vue
index 5ce4a16..d6cefd8 100644
--- a/src/views/Shell.vue
+++ b/src/views/Shell.vue
@@ -7,6 +7,16 @@ import { Event, listen } from "@tauri-apps/api/event";
 import { V1Container, V1Pod } from "@kubernetes/client-node";
 import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
 import { injectStrict } from "@/lib/utils";
+import { useColorMode } from "@vueuse/core";
+const colorMode = useColorMode();
+
+watch(colorMode, (value) => {
+  terminal.options.theme = {
+    background: value === "dark" ? "#000000" : "#ffffff",
+    foreground: value === "dark" ? "#ffffff" : "#000000",
+    cursor: value === "dark" ? "#ffffff" : "#000000",
+  };
+});
 
 let terminal: Terminal;
 let fitAddon: FitAddon;
@@ -59,8 +69,9 @@ const openTerminal = () => {
       fontSize: 14,
       fontFamily: "monospace",
       theme: {
-        background: "#000000",
-        foreground: "#ffffff",
+        background: colorMode.value === "dark" ? "#000000" : "#ffffff",
+        foreground: colorMode.value === "dark" ? "#ffffff" : "#000000",
+        cursor: colorMode.value === "dark" ? "#ffffff" : "#000000",
       },
     });
 
diff --git a/src/views/settings/Appearance.vue b/src/views/settings/Appearance.vue
new file mode 100644
index 0000000..820a875
--- /dev/null
+++ b/src/views/settings/Appearance.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useColorMode } from "@vueuse/core";
+
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
+import { injectStrict } from "@/lib/utils";
+
+const { settings } = injectStrict(SettingsContextStateKey);
+const colorMode = useColorMode();
+
+watch(
+  settings.value,
+  (value) => {
+    colorMode.value = value.appearance.colorScheme;
+  },
+  { deep: true }
+);
+</script>
+<template>
+  <div class="max-w-2xl">
+    <FormField name="username">
+      <FormItem>
+        <FormLabel>Color Scheme</FormLabel>
+        <FormControl>
+          <Select v-model="settings.appearance.colorScheme">
+            <SelectTrigger>
+              <SelectValue placeholder="Select a color scheme" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="auto">System</SelectItem>
+                <SelectItem value="light">Light</SelectItem>
+                <SelectItem value="dark">Dark</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormDescription>
+          Either light or dark, depending on your preference
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </div>
+</template>
