diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index bba300989fe6e29590318fc9a72f46b3a93feb86..8d807d62f3f597457cbff1e0544390d4ef37bb71 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -2,7 +2,7 @@ import * as fs from "fs"
 import { tmpdir } from "os"
 import * as path from "path"
 import app from "./styleTree/app"
-import { ColorScheme, createColorScheme } from "./themes/common/colorScheme"
+import { ColorScheme, createColorScheme } from "./theme/colorScheme"
 import snakeCase from "./utils/snakeCase"
 import { themes } from "./themes"
 
@@ -35,7 +35,9 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
     }
 }
 
-const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme))
+const colorSchemes: ColorScheme[] = themes.map((theme) =>
+    createColorScheme(theme)
+)
 
 // Write new themes to theme directory
 writeThemes(colorSchemes, `${assetsDirectory}/themes`)
diff --git a/styles/src/common.ts b/styles/src/common.ts
index 5b6ddff4226fe379e7589cda8658ef7986f18838..ee47bcc6bdc01a0f64557374bcc66febd9a97873 100644
--- a/styles/src/common.ts
+++ b/styles/src/common.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js"
-export * from "./themes/common"
+export * from "./theme"
 export { chroma }
 
 export const fontFamilies = {
@@ -27,7 +27,7 @@ export type FontWeight =
     | "bold"
     | "extra_bold"
     | "black"
-    
+
 export const fontWeights: { [key: string]: FontWeight } = {
     thin: "thin",
     extra_light: "extra_light",
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index a9700a8d9994f0b8f63b74862b8db26c873a37da..7398432ec3cd337c622ea9235e2743d17925b95b 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -18,7 +18,7 @@ import tooltip from "./tooltip"
 import terminal from "./terminal"
 import contactList from "./contactList"
 import incomingCallNotification from "./incomingCallNotification"
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import feedback from "./feedback"
 import welcome from "./welcome"
 import copilot from "./copilot"
diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts
index 5e33967b50c30975184ead9094f75d2b3fdbe71d..bbb4aae5e1b9d35f21f2d78897f368691c006e72 100644
--- a/styles/src/styleTree/assistant.ts
+++ b/styles/src/styleTree/assistant.ts
@@ -1,85 +1,85 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
 
 export default function assistant(colorScheme: ColorScheme) {
-    const layer = colorScheme.highest;
+    const layer = colorScheme.highest
     return {
-      container: {
-        background: editor(colorScheme).background,
-        padding: { left: 12 }
-      },
-      header: {
-        border: border(layer, "default", { bottom: true, top: true }),
-        margin: { bottom: 6, top: 6 },
-        background: editor(colorScheme).background
-      },
-      userSender: {
-        ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
-      },
-      assistantSender: {
-        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
-      },
-      systemSender: {
-        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
-      },
-      sentAt: {
-        margin: { top: 2, left: 8 },
-        ...text(layer, "sans", "default", { size: "2xs" }),
-      },
-      modelInfoContainer: {
-        margin: { right: 16, top: 4 },
-      },
-      model: {
-        background: background(layer, "on"),
-        border: border(layer, "on", { overlay: true }),
-        padding: 4,
-        cornerRadius: 4,
-        ...text(layer, "sans", "default", { size: "xs" }),
-        hover: {
-          background: background(layer, "on", "hovered"),
-        }
-      },
-      remainingTokens: {
-        background: background(layer, "on"),
-        border: border(layer, "on", { overlay: true }),
-        padding: 4,
-        margin: { left: 4 },
-        cornerRadius: 4,
-        ...text(layer, "sans", "positive", { size: "xs" }),
-      },
-      noRemainingTokens: {
-        background: background(layer, "on"),
-        border: border(layer, "on", { overlay: true }),
-        padding: 4,
-        margin: { left: 4 },
-        cornerRadius: 4,
-        ...text(layer, "sans", "negative", { size: "xs" }),
-      },
-      errorIcon: {
-        margin: { left: 8 },
-        color: foreground(layer, "negative"),
-        width: 12,
-      },
-      apiKeyEditor: {
-          background: background(layer, "on"),
-          cornerRadius: 6,
-          text: text(layer, "mono", "on"),
-          placeholderText: text(layer, "mono", "on", "disabled", {
-              size: "xs",
-          }),
-          selection: colorScheme.players[0],
-          border: border(layer, "on"),
-          padding: {
-              bottom: 4,
-              left: 8,
-              right: 8,
-              top: 4,
-          },
-      },
-      apiKeyPrompt: {
-        padding: 10,
-        ...text(layer, "sans", "default", { size: "xs" }),
-      }
+        container: {
+            background: editor(colorScheme).background,
+            padding: { left: 12 },
+        },
+        header: {
+            border: border(layer, "default", { bottom: true, top: true }),
+            margin: { bottom: 6, top: 6 },
+            background: editor(colorScheme).background,
+        },
+        userSender: {
+            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
+        },
+        assistantSender: {
+            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
+        },
+        systemSender: {
+            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
+        },
+        sentAt: {
+            margin: { top: 2, left: 8 },
+            ...text(layer, "sans", "default", { size: "2xs" }),
+        },
+        modelInfoContainer: {
+            margin: { right: 16, top: 4 },
+        },
+        model: {
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            padding: 4,
+            cornerRadius: 4,
+            ...text(layer, "sans", "default", { size: "xs" }),
+            hover: {
+                background: background(layer, "on", "hovered"),
+            },
+        },
+        remainingTokens: {
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            padding: 4,
+            margin: { left: 4 },
+            cornerRadius: 4,
+            ...text(layer, "sans", "positive", { size: "xs" }),
+        },
+        noRemainingTokens: {
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            padding: 4,
+            margin: { left: 4 },
+            cornerRadius: 4,
+            ...text(layer, "sans", "negative", { size: "xs" }),
+        },
+        errorIcon: {
+            margin: { left: 8 },
+            color: foreground(layer, "negative"),
+            width: 12,
+        },
+        apiKeyEditor: {
+            background: background(layer, "on"),
+            cornerRadius: 6,
+            text: text(layer, "mono", "on"),
+            placeholderText: text(layer, "mono", "on", "disabled", {
+                size: "xs",
+            }),
+            selection: colorScheme.players[0],
+            border: border(layer, "on"),
+            padding: {
+                bottom: 4,
+                left: 8,
+                right: 8,
+                top: 4,
+            },
+        },
+        apiKeyPrompt: {
+            padding: 10,
+            ...text(layer, "sans", "default", { size: "xs" }),
+        },
     }
 }
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 038a009007b5c3a7299f245d6a9a1690de0e2f65..c49e1f194c7fbcd16a4f1ac0a5bc7f996fd53dcc 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
 
 export default function commandPalette(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index efd4a956727c7d7cad42078292346dda32b55165..a575dad52725d77dff8951be97a4fb7eb0949449 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -1,5 +1,5 @@
 import { fontFamilies, fontSizes, FontWeight } from "../common"
-import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
+import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
 
 function isStyleSet(key: any): key is StyleSets {
     return [
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index 7b76cde444a68ff6ab57a0a22afa2dcfb71e52db..e45647c3d62576f9a2db9644bf635f0562b74cef 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -1,5 +1,5 @@
 import picker from "./picker"
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function contactFinder(colorScheme: ColorScheme): any {
diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts
index 8ff5d903d852017328de8e21403d9cb7177cb895..a597e44d9f38ba54cc5ae706c0d61ab7822cb5c8 100644
--- a/styles/src/styleTree/contactList.ts
+++ b/styles/src/styleTree/contactList.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 
 export default function contactsPanel(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts
index 186f7e8685fc5a823c1444ee759d4eb9926e02c6..85a0b9d0de1bb61f5d2f67a82da93a509ac4b9be 100644
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, foreground, text } from "./components"
 
 const avatarSize = 12
diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts
index 5e865aff177b1f12e43549d80f91f9e98364b938..5946bfb82cf01712d19453a8b3f57018f8eac2b8 100644
--- a/styles/src/styleTree/contactsPopover.ts
+++ b/styles/src/styleTree/contactsPopover.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function contactsPopover(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index b4a21deba4a7d21c0372dc34ff204922cdcf5b1b..f14cd90219b5f5eddf5dd91fc64e01e120581f1f 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
 
 export default function contextMenu(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts
index 9fa86cd741234a421eade8f02161729e8ab502f0..8614cb69764e06a3c64ac304ec028366a5315eeb 100644
--- a/styles/src/styleTree/copilot.ts
+++ b/styles/src/styleTree/copilot.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
 
 export default function copilot(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 66074aa684bc5719ac7ce7061e4afb8b28b7e95e..55f3da6e900f79a0f02f936b73dde9c376043027 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,9 +1,9 @@
-import { withOpacity } from "../utils/color"
-import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
+import { withOpacity } from "../theme/color"
+import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import { buildSyntax } from "../themes/common/syntax"
+import { buildSyntax } from "../theme/syntax"
 
 export default function editor(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
@@ -186,7 +186,10 @@ export default function editor(colorScheme: ColorScheme) {
                 },
             },
             source: {
-                text: text(colorScheme.middle, "sans", { size: "sm", weight: "bold", }),
+                text: text(colorScheme.middle, "sans", {
+                    size: "sm",
+                    weight: "bold",
+                }),
             },
             message: {
                 highlightText: text(colorScheme.middle, "sans", {
@@ -250,7 +253,7 @@ export default function editor(colorScheme: ColorScheme) {
                     right: true,
                     left: true,
                     bottom: false,
-                }
+                },
             },
             git: {
                 deleted: isLight
@@ -262,7 +265,7 @@ export default function editor(colorScheme: ColorScheme) {
                 inserted: isLight
                     ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
                     : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
-            }
+            },
         },
         compositionMark: {
             underline: {
diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts
index ba688d1e2ee8067b5618f712fcdad0a30f62874f..5eef4b42792131b9b4de128c708d5e17dd28dc14 100644
--- a/styles/src/styleTree/feedback.ts
+++ b/styles/src/styleTree/feedback.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function feedback(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index b01402e069804f0ae464a49777de432c9271d175..f8988f1f3a42a2791ad70f2128f4454283dc744c 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function HoverPopover(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/incomingCallNotification.ts b/styles/src/styleTree/incomingCallNotification.ts
index 8a57554fce9562810de364a9c721f3694cbdd469..c42558059c7b74be4e384c169049cf0c0155a956 100644
--- a/styles/src/styleTree/incomingCallNotification.ts
+++ b/styles/src/styleTree/incomingCallNotification.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function incomingCallNotification(
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 66a0d2c126a0f31fb07bece5d3725c9e375a73ca..d84bd6fc7a2cec4a818f920bfc62040c638e4b71 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
 
 export default function picker(colorScheme: ColorScheme): any {
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index 127cbdb353d3d8c2ff921abae262605bda103bea..cf0f07dd8c519d6c8476dabc71fb57bc1e21971f 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, text } from "./components"
 
 export default function projectDiagnostics(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index d2cc1294526470f33d75cee3da4cbdb52eee00e0..a86ae010b605fc26f206cdc4219d9594c496e079 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
@@ -24,8 +24,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
                 : colorScheme.ramps.green(0.5).hex(),
             conflict: isLight
                 ? colorScheme.ramps.red(0.6).hex()
-                : colorScheme.ramps.red(0.5).hex()
-        }
+                : colorScheme.ramps.red(0.5).hex(),
+        },
     }
 
     let entry = {
@@ -44,7 +44,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "active"),
             text: text(layer, "mono", "active", { size: "sm" }),
         },
-        status
+        status,
     }
 
     return {
@@ -79,7 +79,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             text: text(layer, "mono", "on", { size: "sm" }),
             background: withOpacity(background(layer, "on"), 0.9),
             border: border(layer),
-            status
+            status,
         },
         ignoredEntry: {
             ...entry,
@@ -88,7 +88,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             active: {
                 ...entry.active,
                 iconColor: foreground(layer, "variant"),
-            }
+            },
         },
         cutEntry: {
             ...entry,
diff --git a/styles/src/styleTree/projectSharedNotification.ts b/styles/src/styleTree/projectSharedNotification.ts
index af731f8850ca51d5f9d2a48a9f78579fe3f602d1..d05eb1b0c51953b34ac7b08727c81447a66bc047 100644
--- a/styles/src/styleTree/projectSharedNotification.ts
+++ b/styles/src/styleTree/projectSharedNotification.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function projectSharedNotification(
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 2094a2e369739327d968a6616ebab0b373f916f0..d69c4bb2d919d2b70054deba22f16e3db9eb39f6 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 
 export default function search(colorScheme: ColorScheme) {
@@ -30,7 +30,7 @@ export default function search(colorScheme: ColorScheme) {
         ...editor,
         minWidth: 100,
         maxWidth: 250,
-    };
+    }
 
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
diff --git a/styles/src/styleTree/sharedScreen.ts b/styles/src/styleTree/sharedScreen.ts
index cd0d44236ec97d50da1ae5c96463236ff401f34c..2563e718ff2a6d3013f4bc235901aa06cb32b4ba 100644
--- a/styles/src/styleTree/sharedScreen.ts
+++ b/styles/src/styleTree/sharedScreen.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background } from "./components"
 
 export default function sharedScreen(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts
index 2e057ed783140e60a15d61d2f4f35bb010a30e48..8d88f05c53466b718d5efd189cfdf6a321499ba2 100644
--- a/styles/src/styleTree/simpleMessageNotification.ts
+++ b/styles/src/styleTree/simpleMessageNotification.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 const headerPadding = 8
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index eca537c150d566e7fe454d7f32b5a652cc5c6328..a8d926f40e44d0f372278fae7961e70693bf605e 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function statusBar(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 39a1ef0407ce92b966e45f19f17a89c3c248c59c..c5b397b34a3e176207b75f965aadbceeb4611e37 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 
 export default function tabBar(colorScheme: ColorScheme) {
@@ -96,7 +96,7 @@ export default function tabBar(colorScheme: ColorScheme) {
             },
             active: {
                 color: foreground(layer, "accent"),
-            }
+            },
         },
         paneButtonContainer: {
             background: tab.background,
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index 4158ace300de0dc9fb0c3c3f3707949c5b610e2e..8a7eb7a549a18acbb17b115c8306e245e7a8dec3 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 
 export default function terminal(colorScheme: ColorScheme) {
     /**
diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts
index bb66cd413cddb2556b337ade3fe9a238cc59088b..1666ce5658776bd8c3072ee98a3233bcb8cf5a68 100644
--- a/styles/src/styleTree/tooltip.ts
+++ b/styles/src/styleTree/tooltip.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function tooltip(colorScheme: ColorScheme) {
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index 44472a766265bb81ab9c6f9d5003dfd58ea8675b..281012e62f562ac721ab17c4c72afb458e1d59f1 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
 
 const headerPadding = 8
diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts
index 23e29c4a4049a5704703f8d28e874e186b83fcf7..10e6e02b953addb6e44165b1a387eb284e852d1c 100644
--- a/styles/src/styleTree/welcome.ts
+++ b/styles/src/styleTree/welcome.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import {
     border,
     background,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index ec992c9c0b368aa7ee792aa3b2ce5c2da3045d2c..ae8de178f88c5abfb3fb76af4cda4e386ff748d1 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import {
     background,
     border,
@@ -123,7 +123,7 @@ export default function workspace(colorScheme: ColorScheme) {
             cursor: "Arrow",
             background: isLight
                 ? withOpacity(background(colorScheme.lowest), 0.8)
-                : withOpacity(background(colorScheme.highest), 0.6)
+                : withOpacity(background(colorScheme.highest), 0.6),
         },
         zoomedPaneForeground: {
             margin: 16,
@@ -143,7 +143,7 @@ export default function workspace(colorScheme: ColorScheme) {
             },
             right: {
                 border: border(layer, { left: true }),
-            }
+            },
         },
         paneDivider: {
             color: borderColor(layer),
diff --git a/styles/src/utils/color.ts b/styles/src/theme/color.ts
similarity index 100%
rename from styles/src/utils/color.ts
rename to styles/src/theme/color.ts
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/theme/colorScheme.ts
similarity index 99%
rename from styles/src/themes/common/colorScheme.ts
rename to styles/src/theme/colorScheme.ts
index d4ef2ae0132068613664c494f7818e4d4021c916..9a810730867ad82fa57265a8232ab397a51d84f4 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/theme/colorScheme.ts
@@ -5,7 +5,7 @@ import {
     ThemeConfig,
     ThemeAppearance,
     ThemeConfigInputColors,
-} from "../../themeConfig"
+} from "./themeConfig"
 import { getRamps } from "./ramps"
 
 export interface ColorScheme {
diff --git a/styles/src/themes/common/index.ts b/styles/src/theme/index.ts
similarity index 69%
rename from styles/src/themes/common/index.ts
rename to styles/src/theme/index.ts
index cd7cf9b0f47b73d922f1877d7ed3ef1e2696788d..2bf625521c19711178278d28feb88e0bba86f773 100644
--- a/styles/src/themes/common/index.ts
+++ b/styles/src/theme/index.ts
@@ -1,4 +1,4 @@
 export * from "./colorScheme"
 export * from "./ramps"
 export * from "./syntax"
-export * from "../../themeConfig"
+export * from "./themeConfig"
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/theme/ramps.ts
similarity index 98%
rename from styles/src/themes/common/ramps.ts
rename to styles/src/theme/ramps.ts
index ef93ee163f05ff5f5557838fe4f1d0751f4c626f..f8c44ba3f97e5c24814d5df68ce58a8a97aafb72 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/theme/ramps.ts
@@ -3,7 +3,7 @@ import { RampSet } from "./colorScheme"
 import {
     ThemeConfigInputColors,
     ThemeConfigInputColorsKeys,
-} from "../../themeConfig"
+} from "./themeConfig"
 
 export function colorRamp(color: Color): Scale {
     let endColor = color.desaturate(1).brighten(5)
diff --git a/styles/src/themes/common/syntax.ts b/styles/src/theme/syntax.ts
similarity index 99%
rename from styles/src/themes/common/syntax.ts
rename to styles/src/theme/syntax.ts
index 258b845142cc296491badf15ad6adc08beaf94d4..380fd3178617fd167ba911fc49be72f3513ccf27 100644
--- a/styles/src/themes/common/syntax.ts
+++ b/styles/src/theme/syntax.ts
@@ -1,5 +1,5 @@
 import deepmerge from "deepmerge"
-import { FontWeight, fontWeights } from "../../common"
+import { FontWeight, fontWeights } from "../common"
 import { ColorScheme } from "./colorScheme"
 import chroma from "chroma-js"
 
diff --git a/styles/src/themeConfig.ts b/styles/src/theme/themeConfig.ts
similarity index 98%
rename from styles/src/themeConfig.ts
rename to styles/src/theme/themeConfig.ts
index 5c62b94c52b2f4ea560c6a77093753b39581ab6d..0342d0226d7afdcc2c5c95bc440541694fe3efe5 100644
--- a/styles/src/themeConfig.ts
+++ b/styles/src/theme/themeConfig.ts
@@ -1,5 +1,5 @@
 import { Scale, Color } from "chroma-js"
-import { Syntax } from "./themes/common/syntax"
+import { Syntax } from "./syntax"
 
 interface ThemeMeta {
     /** The name of the theme */
diff --git a/styles/src/themes/index.ts b/styles/src/themes/index.ts
index 52ce1b93272d8f1e0553943c44385ee10b56831e..75853bc042747ac9138a6e3fb47c3ac5e98a2e6c 100644
--- a/styles/src/themes/index.ts
+++ b/styles/src/themes/index.ts
@@ -1,4 +1,4 @@
-import { ThemeConfig } from "./common"
+import { ThemeConfig } from "../theme"
 import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark"
 import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard"
 import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft"