feat: added experimental support for system / light / dark color schemes

- Adhere color scheme to system preference - Added option to override color scheme through Settings / Appearance closes #9
unxsist · Apr 20, 2024 · 084c679 · 084c679
1 parent 815bc14
commit 084c679
Show file tree

Hide file tree

Showing 14 changed files with 461 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>