diff --git a/packages/app/index.html b/packages/app/index.html
index 2c3a0eabd40..bc42910f4d5 100644
--- a/packages/app/index.html
+++ b/packages/app/index.html
@@ -19,6 +19,10 @@
       ;(function () {
         const savedTheme = localStorage.getItem("theme") || "oc-1"
         document.documentElement.setAttribute("data-theme", savedTheme)
+        const savedThemeMode = localStorage.getItem("theme-mode")
+        if (savedThemeMode === "light" || savedThemeMode === "dark") {
+          document.documentElement.setAttribute("data-theme-mode", savedThemeMode)
+        }
       })()
     </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 5efba6d994b..6f185e8a09b 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -89,8 +89,28 @@ export default function Layout(props: ParentProps) {
   const providers = useProviders()
   const dialog = useDialog()
   const command = useCommand()
+  const initialThemeMode = (() => {
+    const stored = localStorage.getItem("theme-mode")
+    if (stored === "light" || stored === "dark") return stored
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+  })()
+  const [themeMode, setThemeMode] = createSignal<"light" | "dark">(initialThemeMode)
+
+  const applyThemeMode = (mode: "light" | "dark") => {
+    setThemeMode(mode)
+    localStorage.setItem("theme-mode", mode)
+    document.documentElement.setAttribute("data-theme-mode", mode)
+  }
+
+  const toggleThemeMode = () => {
+    applyThemeMode(themeMode() === "dark" ? "light" : "dark")
+  }
 
   onMount(async () => {
+    const storedThemeMode = localStorage.getItem("theme-mode")
+    if (storedThemeMode === "light" || storedThemeMode === "dark") {
+      document.documentElement.setAttribute("data-theme-mode", storedThemeMode)
+    }
     if (platform.checkUpdate && platform.update && platform.restart) {
       const { updateAvailable, version } = await platform.checkUpdate()
       if (updateAvailable) {
@@ -748,6 +768,17 @@ export default function Layout(props: ParentProps) {
           </DragDropProvider>
         </div>
         <div class="flex flex-col gap-1.5 self-stretch items-start shrink-0 px-2 py-3">
+          <Tooltip placement="right" value={`Theme: ${themeMode() === "dark" ? "Dark" : "Light"}`} inactive={expanded()}>
+            <Button
+              class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
+              variant="ghost"
+              size="large"
+              icon="settings-gear"
+              onClick={toggleThemeMode}
+            >
+              <Show when={expanded()}>Theme: {themeMode() === "dark" ? "Dark" : "Light"}</Show>
+            </Button>
+          </Tooltip>
           <Switch>
             <Match when={!providers.paid().length && expanded()}>
               <div class="rounded-md bg-background-stronger shadow-xs-border-base">
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
index faeb1a1fde0..ffcd2a6da11 100644
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -19,6 +19,10 @@
       ;(function () {
         const savedTheme = localStorage.getItem("theme") || "oc-1"
         document.documentElement.setAttribute("data-theme", savedTheme)
+        const savedThemeMode = localStorage.getItem("theme-mode")
+        if (savedThemeMode === "light" || savedThemeMode === "dark") {
+          document.documentElement.setAttribute("data-theme-mode", savedThemeMode)
+        }
       })()
     </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 6584a5e6487..1e72227e9c9 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -321,6 +321,265 @@
   --avatar-text-lime: #5d770d;
 
   @media (prefers-color-scheme: dark) {
+    &:not([data-theme-mode="light"]) {
+      color-scheme: dark;
+      --text-mix-blend-mode: plus-lighter;
+
+      /* OC-1-dark */
+      --background-base: var(--smoke-dark-1);
+      --background-weak: #1c1717;
+      --background-strong: #151313;
+      --background-stronger: #191515;
+      --surface-base: var(--smoke-dark-alpha-2);
+      --base: var(--smoke-dark-alpha-2);
+      --surface-base-hover: #e0b7b716;
+      --surface-base-active: var(--smoke-dark-alpha-3);
+      --surface-base-interactive-active: var(--cobalt-dark-alpha-2);
+      --base2: var(--smoke-dark-alpha-2);
+      --base3: var(--smoke-dark-alpha-2);
+      --surface-inset-base: #0e0b0b7f;
+      --surface-inset-base-hover: #0e0b0b7f;
+      --surface-inset-strong: #060505cc;
+      --surface-inset-strong-hover: #060505cc;
+      --surface-raised-base: var(--smoke-dark-alpha-3);
+      --surface-float-base: var(--smoke-dark-1);
+      --surface-float-base-hover: var(--smoke-dark-2);
+      --surface-raised-base-hover: var(--smoke-dark-alpha-4);
+      --surface-raised-base-active: var(--smoke-dark-alpha-5);
+      --surface-raised-strong: var(--smoke-dark-alpha-4);
+      --surface-raised-strong-hover: var(--smoke-dark-alpha-6);
+      --surface-raised-stronger: var(--smoke-dark-alpha-6);
+      --surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
+      --surface-weak: var(--smoke-dark-alpha-4);
+      --surface-weaker: var(--smoke-dark-alpha-5);
+      --surface-strong: var(--smoke-dark-alpha-7);
+      --surface-raised-stronger-non-alpha: var(--smoke-dark-3);
+      --surface-brand-base: var(--yuzu-light-9);
+      --surface-brand-hover: var(--yuzu-light-10);
+      --surface-interactive-base: var(--cobalt-light-3);
+      --surface-interactive-hover: var(--cobalt-light-4);
+      --surface-interactive-weak: var(--cobalt-light-2);
+      --surface-interactive-weak-hover: var(--cobalt-light-3);
+      --surface-success-base: var(--apple-light-3);
+      --surface-success-weak: var(--apple-light-2);
+      --surface-success-strong: var(--apple-light-9);
+      --surface-warning-base: var(--solaris-light-3);
+      --surface-warning-weak: var(--solaris-light-2);
+      --surface-warning-strong: var(--solaris-light-9);
+      --surface-critical-base: var(--ember-dark-3);
+      --surface-critical-weak: var(--ember-dark-2);
+      --surface-critical-strong: var(--ember-dark-9);
+      --surface-info-base: var(--lilac-light-3);
+      --surface-info-weak: var(--lilac-light-2);
+      --surface-info-strong: var(--lilac-light-9);
+      --surface-diff-unchanged-base: var(--smoke-dark-1);
+      --surface-diff-skip-base: var(--smoke-dark-alpha-1);
+      --surface-diff-hidden-base: var(--blue-dark-2);
+      --surface-diff-hidden-weak: var(--blue-dark-1);
+      --surface-diff-hidden-weaker: var(--blue-dark-3);
+      --surface-diff-hidden-strong: var(--blue-dark-5);
+      --surface-diff-hidden-stronger: var(--blue-dark-11);
+      --surface-diff-add-base: var(--mint-dark-3);
+      --surface-diff-add-weak: var(--mint-dark-4);
+      --surface-diff-add-weaker: var(--mint-dark-3);
+      --surface-diff-add-strong: var(--mint-dark-5);
+      --surface-diff-add-stronger: var(--mint-dark-11);
+      --surface-diff-delete-base: var(--ember-dark-3);
+      --surface-diff-delete-weak: var(--ember-dark-4);
+      --surface-diff-delete-weaker: var(--ember-dark-3);
+      --surface-diff-delete-strong: var(--ember-dark-5);
+      --surface-diff-delete-stronger: var(--ember-dark-11);
+      --input-base: var(--smoke-dark-2);
+      --input-hover: var(--smoke-dark-2);
+      --input-active: var(--cobalt-dark-1);
+      --input-selected: var(--cobalt-dark-2);
+      --input-focus: var(--cobalt-dark-1);
+      --input-disabled: var(--smoke-dark-4);
+      --text-base: var(--smoke-dark-alpha-11);
+      --text-weak: var(--smoke-dark-alpha-9);
+      --text-weaker: var(--smoke-dark-alpha-8);
+      --text-strong: var(--smoke-dark-alpha-12);
+      --text-invert-base: var(--smoke-dark-alpha-11);
+      --text-invert-weak: var(--smoke-dark-alpha-9);
+      --text-invert-weaker: var(--smoke-dark-alpha-8);
+      --text-invert-strong: var(--smoke-dark-alpha-12);
+      --text-interactive-base: var(--cobalt-dark-11);
+      --text-on-brand-base: var(--smoke-dark-alpha-11);
+      --text-on-interactive-base: var(--smoke-dark-12);
+      --text-on-interactive-weak: var(--smoke-dark-alpha-11);
+      --text-on-success-base: var(--apple-dark-9);
+      --text-on-critical-base: var(--ember-dark-9);
+      --text-on-critical-weak: var(--ember-dark-8);
+      --text-on-critical-strong: var(--ember-dark-12);
+      --text-on-warning-base: var(--smoke-dark-alpha-11);
+      --text-on-info-base: var(--smoke-dark-alpha-11);
+      --text-diff-add-base: var(--mint-dark-11);
+      --text-diff-delete-base: var(--ember-dark-9);
+      --text-diff-delete-strong: var(--ember-dark-12);
+      --text-diff-add-strong: var(--mint-dark-8);
+      --text-on-info-weak: var(--smoke-dark-alpha-9);
+      --text-on-info-strong: var(--smoke-dark-alpha-12);
+      --text-on-warning-weak: var(--smoke-dark-alpha-9);
+      --text-on-warning-strong: var(--smoke-dark-alpha-12);
+      --text-on-success-weak: var(--apple-dark-8);
+      --text-on-success-strong: var(--apple-dark-12);
+      --text-on-brand-weak: var(--smoke-dark-alpha-9);
+      --text-on-brand-weaker: var(--smoke-dark-alpha-8);
+      --text-on-brand-strong: var(--smoke-dark-alpha-12);
+      --button-secondary-base: #231f1f;
+      --button-secondary-hover: #2a2727;
+      --border-base: var(--smoke-dark-alpha-7);
+      --border-hover: var(--smoke-dark-alpha-8);
+      --border-active: var(--smoke-dark-alpha-9);
+      --border-selected: var(--cobalt-dark-alpha-11);
+      --border-disabled: var(--smoke-dark-alpha-8);
+      --border-focus: var(--smoke-dark-alpha-9);
+      --border-weak-base: var(--smoke-dark-alpha-6);
+      --border-strong-base: var(--smoke-dark-alpha-8);
+      --border-strong-hover: var(--smoke-dark-alpha-7);
+      --border-strong-active: var(--smoke-dark-alpha-8);
+      --border-strong-selected: var(--cobalt-dark-alpha-6);
+      --border-strong-disabled: var(--smoke-dark-alpha-6);
+      --border-strong-focus: var(--smoke-dark-alpha-8);
+      --border-weak-hover: var(--smoke-dark-alpha-7);
+      --border-weak-active: var(--smoke-dark-alpha-8);
+      --border-weak-selected: var(--cobalt-dark-alpha-6);
+      --border-weak-disabled: var(--smoke-dark-alpha-6);
+      --border-weak-focus: var(--smoke-dark-alpha-8);
+      --border-interactive-base: var(--cobalt-light-7);
+      --border-interactive-hover: var(--cobalt-light-8);
+      --border-interactive-active: var(--cobalt-light-9);
+      --border-interactive-selected: var(--cobalt-light-9);
+      --border-interactive-disabled: var(--smoke-light-8);
+      --border-interactive-focus: var(--cobalt-light-9);
+      --border-success-base: var(--apple-light-6);
+      --border-success-hover: var(--apple-light-7);
+      --border-success-selected: var(--apple-light-9);
+      --border-warning-base: var(--solaris-light-6);
+      --border-warning-hover: var(--solaris-light-7);
+      --border-warning-selected: var(--solaris-light-9);
+      --border-critical-base: var(--ember-dark-5);
+      --border-critical-hover: var(--ember-dark-7);
+      --border-critical-selected: var(--ember-dark-9);
+      --border-info-base: var(--lilac-light-6);
+      --border-info-hover: var(--lilac-light-7);
+      --border-info-selected: var(--lilac-light-9);
+      --icon-base: var(--smoke-dark-9);
+      --icon-hover: var(--smoke-dark-10);
+      --icon-active: var(--smoke-dark-11);
+      --icon-selected: var(--smoke-dark-12);
+      --icon-disabled: var(--smoke-dark-7);
+      --icon-focus: var(--smoke-dark-12);
+      --icon-invert-base: var(--smoke-dark-1);
+      --icon-weak-base: var(--smoke-dark-6);
+      --icon-weak-hover: var(--smoke-light-7);
+      --icon-weak-active: var(--smoke-light-8);
+      --icon-weak-selected: var(--smoke-light-9);
+      --icon-weak-disabled: var(--smoke-light-4);
+      --icon-weak-focus: var(--smoke-light-9);
+      --icon-strong-base: var(--smoke-dark-12);
+      --icon-strong-hover: #f6f3f3;
+      --icon-strong-active: #fcfcfc;
+      --icon-strong-selected: #fdfcfc;
+      --icon-strong-disabled: var(--smoke-dark-8);
+      --icon-strong-focus: #fdfcfc;
+      --icon-brand-base: var(--white);
+      --icon-interactive-base: var(--cobalt-dark-9);
+      --icon-success-base: var(--apple-dark-7);
+      --icon-success-hover: var(--apple-dark-8);
+      --icon-success-active: var(--apple-dark-11);
+      --icon-warning-base: var(--amber-dark-7);
+      --icon-warning-hover: var(--amber-dark-8);
+      --icon-warning-active: var(--amber-dark-11);
+      --icon-critical-base: var(--ember-dark-9);
+      --icon-critical-hover: var(--ember-dark-11);
+      --icon-critical-active: var(--ember-dark-12);
+      --icon-info-base: var(--lilac-dark-7);
+      --icon-info-hover: var(--lilac-dark-8);
+      --icon-info-active: var(--lilac-dark-11);
+      --icon-on-brand-base: var(--smoke-light-alpha-11);
+      --icon-on-brand-hover: var(--smoke-light-alpha-12);
+      --icon-on-brand-selected: var(--smoke-light-alpha-12);
+      --icon-on-interactive-base: var(--smoke-dark-12);
+      --icon-agent-plan-base: var(--purple-dark-9);
+      --icon-agent-docs-base: var(--amber-dark-9);
+      --icon-agent-ask-base: var(--cyan-dark-9);
+      --icon-agent-build-base: var(--cobalt-dark-11);
+      --icon-on-success-base: var(--apple-dark-alpha-9);
+      --icon-on-success-hover: var(--apple-dark-alpha-10);
+      --icon-on-success-selected: var(--apple-dark-alpha-11);
+      --icon-on-warning-base: var(--amber-darkalpha-9);
+      --icon-on-warning-hover: var(--amber-darkalpha-10);
+      --icon-on-warning-selected: var(--amber-darkalpha-11);
+      --icon-on-critical-base: var(--ember-dark-alpha-9);
+      --icon-on-critical-hover: var(--ember-dark-alpha-10);
+      --icon-on-critical-selected: var(--ember-dark-alpha-11);
+      --icon-on-info-base: var(--lilac-dark-9);
+      --icon-on-info-hover: var(--lilac-dark-alpha-10);
+      --icon-on-info-selected: var(--lilac-dark-alpha-11);
+      --icon-diff-add-base: var(--mint-dark-11);
+      --icon-diff-add-hover: var(--mint-dark-10);
+      --icon-diff-add-active: var(--mint-dark-11);
+      --icon-diff-delete-base: var(--ember-dark-9);
+      --icon-diff-delete-hover: var(--ember-dark-10);
+      --syntax-comment: var(--text-weak);
+      --syntax-regexp: var(--text-base);
+      --syntax-string: #00ceb9;
+      --syntax-keyword: var(--text-weak);
+      --syntax-primitive: #ffba92;
+      --syntax-operator: var(--text-weak);
+      --syntax-variable: var(--text-strong);
+      --syntax-property: #ff9ae2;
+      --syntax-type: #ecf58c;
+      --syntax-constant: #93e9f6;
+      --syntax-punctuation: var(--text-weak);
+      --syntax-object: var(--text-strong);
+      --syntax-success: var(--apple-dark-10);
+      --syntax-warning: var(--amber-dark-10);
+      --syntax-critical: var(--ember-dark-10);
+      --syntax-info: #93e9f6;
+      --syntax-diff-add: var(--mint-dark-11);
+      --syntax-diff-delete: var(--ember-dark-11);
+      --syntax-diff-unknown: #ff0000;
+      --markdown-heading: #9d7cd8;
+      --markdown-text: #eeeeee;
+      --markdown-link: #fab283;
+      --markdown-link-text: #56b6c2;
+      --markdown-code: #7fd88f;
+      --markdown-block-quote: #e5c07b;
+      --markdown-emph: #e5c07b;
+      --markdown-strong: #f5a742;
+      --markdown-horizontal-rule: #808080;
+      --markdown-list-item: #fab283;
+      --markdown-list-enumeration: #56b6c2;
+      --markdown-image: #fab283;
+      --markdown-image-text: #56b6c2;
+      --markdown-code-block: #eeeeee;
+      --border-color: #ffffff;
+      --border-weaker-base: var(--smoke-dark-alpha-3);
+      --border-weaker-hover: var(--smoke-dark-alpha-4);
+      --border-weaker-active: var(--smoke-dark-alpha-6);
+      --border-weaker-selected: var(--cobalt-dark-alpha-3);
+      --border-weaker-disabled: var(--smoke-dark-alpha-2);
+      --border-weaker-focus: var(--smoke-dark-alpha-6);
+      --button-ghost-hover: var(--smoke-dark-alpha-2);
+      --button-ghost-hover2: var(--smoke-dark-alpha-3);
+      --avatar-background-pink: #501b3f;
+      --avatar-background-mint: #033a34;
+      --avatar-background-orange: #5f2a06;
+      --avatar-background-purple: #432155;
+      --avatar-background-cyan: #0f3058;
+      --avatar-background-lime: #2b3711;
+      --avatar-text-pink: #e34ba9;
+      --avatar-text-mint: #95f3d9;
+      --avatar-text-orange: #ff802b;
+      --avatar-text-purple: #9d5bd2;
+      --avatar-text-cyan: #369eff;
+      --avatar-text-lime: #c4f042;
+    }
+  }
+
+  &[data-theme-mode="dark"] {
     color-scheme: dark;
     --text-mix-blend-mode: plus-lighter;
 
@@ -816,6 +1075,247 @@ html[data-theme="oc-2-paper"] {
   --button-ghost-hover2: var(--ink-light-alpha-3);
 
   @media (prefers-color-scheme: dark) {
+    &:not([data-theme-mode="light"]) {
+
+      --background-base: var(--ink-dark-1);
+      --background-weak: #171c1c;
+      --background-strong: #131515;
+      --background-stronger: #151919;
+      --surface-base: var(--ink-dark-alpha-2);
+      --base: var(--ink-dark-alpha-2);
+      --surface-base-hover: #b8e0e00f;
+      --surface-base-active: var(--ink-dark-alpha-3);
+      --surface-base-interactive-active: var(--cobalt-light-alpha-3);
+      --base2: var(--ink-dark-alpha-2);
+      --base3: var(--ink-dark-alpha-2);
+      --surface-inset-base: #0b0e0e7f;
+      --surface-inset-base-hover: #0b0e0e7f;
+      --surface-inset-strong: #050606cc;
+      --surface-inset-strong-hover: #050606cc;
+      --surface-raised-base: var(--ink-light-alpha-1);
+      --surface-float-base: var(--ink-dark-1);
+      --surface-float-base-hover: var(--ink-dark-2);
+      --surface-raised-base-hover: var(--ink-light-alpha-2);
+      --surface-raised-base-active: var(--ink-light-alpha-3);
+      --surface-raised-strong: var(--ink-light-1);
+      --surface-raised-strong-hover: var(--white);
+      --surface-raised-stronger: var(--white);
+      --surface-raised-stronger-hover: var(--white);
+      --surface-weak: var(--ink-dark-alpha-4);
+      --surface-weaker: var(--ink-dark-alpha-5);
+      --surface-strong: var(--ink-dark-alpha-7);
+      --surface-raised-stronger-non-alpha: var(--white);
+      --surface-brand-base: var(--yuzu-light-9);
+      --surface-brand-hover: var(--yuzu-light-10);
+      --surface-interactive-base: var(--cobalt-light-3);
+      --surface-interactive-hover: var(--cobalt-light-4);
+      --surface-interactive-weak: var(--cobalt-light-2);
+      --surface-interactive-weak-hover: var(--cobalt-light-3);
+      --surface-success-base: var(--apple-light-3);
+      --surface-success-weak: var(--apple-light-2);
+      --surface-success-strong: var(--apple-light-9);
+      --surface-warning-base: var(--solaris-light-3);
+      --surface-warning-weak: var(--solaris-light-2);
+      --surface-warning-strong: var(--solaris-light-9);
+      --surface-critical-base: var(--ember-light-3);
+      --surface-critical-weak: var(--ember-light-2);
+      --surface-critical-strong: var(--ember-light-9);
+      --surface-info-base: var(--lilac-light-3);
+      --surface-info-weak: var(--lilac-light-2);
+      --surface-info-strong: var(--lilac-light-9);
+      --surface-diff-unchanged-base: #ffffff00;
+      --surface-diff-skip-base: var(--ink-light-2);
+      --surface-diff-hidden-base: var(--blue-light-3);
+      --surface-diff-hidden-weak: var(--blue-light-2);
+      --surface-diff-hidden-weaker: var(--blue-light-1);
+      --surface-diff-hidden-strong: var(--blue-light-5);
+      --surface-diff-hidden-stronger: var(--blue-light-9);
+      --surface-diff-add-base: var(--mint-light-3);
+      --surface-diff-add-weak: var(--mint-light-2);
+      --surface-diff-add-weaker: var(--mint-light-1);
+      --surface-diff-add-strong: var(--mint-light-5);
+      --surface-diff-add-stronger: var(--mint-light-9);
+      --surface-diff-delete-base: var(--ember-light-3);
+      --surface-diff-delete-weak: var(--ember-light-2);
+      --surface-diff-delete-weaker: var(--ember-light-1);
+      --surface-diff-delete-strong: var(--ember-light-6);
+      --surface-diff-delete-stronger: var(--ember-light-9);
+      --text-base: var(--ink-light-11);
+      --input-base: var(--ink-light-1);
+      --input-hover: var(--ink-light-2);
+      --input-active: var(--cobalt-light-1);
+      --input-selected: var(--cobalt-light-4);
+      --input-focus: var(--cobalt-light-1);
+      --input-disabled: var(--ink-light-4);
+      --text-weak: var(--ink-light-9);
+      --text-weaker: var(--ink-light-8);
+      --text-strong: var(--ink-light-12);
+      --text-interactive-base: var(--cobalt-light-9);
+      --text-on-brand-base: var(--ink-light-alpha-11);
+      --text-on-interactive-base: var(--ink-light-1);
+      --text-on-interactive-weak: var(--ink-light-alpha-11);
+      --text-on-success-base: var(--apple-light-10);
+      --text-on-critical-base: var(--ember-light-10);
+      --text-on-critical-weak: var(--ember-light-8);
+      --text-on-critical-strong: var(--ember-light-12);
+      --text-on-warning-base: var(--ink-dark-alpha-11);
+      --text-on-info-base: var(--ink-dark-alpha-11);
+      --text-diff-add-base: var(--mint-light-11);
+      --text-diff-delete-base: var(--ember-light-10);
+      --text-diff-delete-strong: var(--ember-light-12);
+      --text-diff-add-strong: var(--mint-light-12);
+      --text-on-info-weak: var(--ink-dark-alpha-9);
+      --text-on-info-strong: var(--ink-dark-alpha-12);
+      --text-on-warning-weak: var(--ink-dark-alpha-9);
+      --text-on-warning-strong: var(--ink-dark-alpha-12);
+      --text-on-success-weak: var(--apple-light-6);
+      --text-on-success-strong: var(--apple-light-12);
+      --text-on-brand-weak: var(--ink-light-alpha-9);
+      --text-on-brand-weaker: var(--ink-light-alpha-8);
+      --text-on-brand-strong: var(--ink-light-alpha-12);
+      --button-secondary-base: #fcfdfd;
+      --button-secondary-hover: #f9fafa;
+      --border-base: var(--ink-light-alpha-7);
+      --border-hover: var(--ink-light-alpha-8);
+      --border-active: var(--ink-light-alpha-9);
+      --border-selected: var(--cobalt-light-alpha-9);
+      --border-disabled: var(--ink-light-alpha-8);
+      --border-focus: var(--ink-light-alpha-9);
+      --border-weak-base: var(--ink-light-alpha-5);
+      --border-strong-base: var(--ink-light-alpha-7);
+      --border-strong-hover: var(--ink-light-alpha-8);
+      --border-strong-active: var(--ink-light-alpha-7);
+      --border-strong-selected: var(--cobalt-light-alpha-6);
+      --border-strong-disabled: var(--ink-light-alpha-6);
+      --border-strong-focus: var(--ink-light-alpha-7);
+      --border-weak-hover: var(--ink-light-alpha-6);
+      --border-weak-active: var(--ink-light-alpha-7);
+      --border-weak-selected: var(--cobalt-light-alpha-5);
+      --border-weak-disabled: var(--ink-light-alpha-6);
+      --border-weak-focus: var(--ink-light-alpha-7);
+      --border-interactive-base: var(--cobalt-light-7);
+      --border-interactive-hover: var(--cobalt-light-8);
+      --border-interactive-active: var(--cobalt-light-9);
+      --border-interactive-selected: var(--cobalt-light-9);
+      --border-interactive-disabled: var(--ink-light-8);
+      --border-interactive-focus: var(--cobalt-light-9);
+      --border-success-base: var(--apple-light-6);
+      --border-success-hover: var(--apple-light-7);
+      --border-success-selected: var(--apple-light-9);
+      --border-warning-base: var(--solaris-light-6);
+      --border-warning-hover: var(--solaris-light-7);
+      --border-warning-selected: var(--solaris-light-9);
+      --border-critical-base: var(--ember-light-6);
+      --border-critical-hover: var(--ember-light-7);
+      --border-critical-selected: var(--ember-light-9);
+      --border-info-base: var(--lilac-light-6);
+      --border-info-hover: var(--lilac-light-7);
+      --border-info-selected: var(--lilac-light-9);
+      --icon-base: var(--ink-light-9);
+      --icon-hover: var(--ink-light-11);
+      --icon-active: var(--ink-light-12);
+      --icon-selected: var(--ink-light-12);
+      --icon-disabled: var(--ink-light-8);
+      --icon-focus: var(--ink-light-12);
+      --icon-invert-base: #ffffff;
+      --icon-weak-base: var(--ink-light-7);
+      --icon-weak-hover: var(--ink-light-8);
+      --icon-weak-active: var(--ink-light-9);
+      --icon-weak-selected: var(--ink-light-10);
+      --icon-weak-disabled: var(--ink-light-6);
+      --icon-weak-focus: var(--ink-light-9);
+      --icon-strong-base: var(--ink-light-12);
+      --icon-strong-hover: #131515;
+      --icon-strong-active: #020202;
+      --icon-strong-selected: #020202;
+      --icon-strong-disabled: var(--ink-light-8);
+      --icon-strong-focus: #020202;
+      --icon-brand-base: var(--ink-light-12);
+      --icon-interactive-base: var(--cobalt-light-9);
+      --icon-success-base: var(--apple-light-7);
+      --icon-success-hover: var(--apple-light-8);
+      --icon-success-active: var(--apple-light-11);
+      --icon-warning-base: var(--amber-light-7);
+      --icon-warning-hover: var(--amber-light-8);
+      --icon-warning-active: var(--amber-light-11);
+      --icon-critical-base: var(--ember-light-10);
+      --icon-critical-hover: var(--ember-light-11);
+      --icon-critical-active: var(--ember-light-12);
+      --icon-info-base: var(--lilac-light-7);
+      --icon-info-hover: var(--lilac-light-8);
+      --icon-info-active: var(--lilac-light-11);
+      --icon-on-brand-base: var(--ink-light-alpha-11);
+      --icon-on-brand-hover: var(--ink-light-alpha-12);
+      --icon-on-brand-selected: var(--ink-light-alpha-12);
+      --icon-on-interactive-base: var(--ink-light-1);
+      --icon-agent-plan-base: var(--purple-light-9);
+      --icon-agent-docs-base: var(--amber-light-9);
+      --icon-agent-ask-base: var(--cyan-light-9);
+      --icon-agent-build-base: var(--cobalt-light-9);
+      --icon-on-success-base: var(--apple-light-alpha-9);
+      --icon-on-success-hover: var(--apple-light-alpha-10);
+      --icon-on-success-selected: var(--apple-light-alpha-11);
+      --icon-on-warning-base: var(--amber-lightalpha-9);
+      --icon-on-warning-hover: var(--amber-lightalpha-10);
+      --icon-on-warning-selected: var(--amber-lightalpha-11);
+      --icon-on-critical-base: var(--ember-light-alpha-9);
+      --icon-on-critical-hover: var(--ember-light-alpha-10);
+      --icon-on-critical-selected: var(--ember-light-alpha-11);
+      --icon-on-info-base: var(--lilac-light-9);
+      --icon-on-info-hover: var(--lilac-light-alpha-10);
+      --icon-on-info-selected: var(--lilac-light-alpha-11);
+      --icon-diff-add-base: var(--mint-light-11);
+      --icon-diff-add-hover: var(--mint-light-12);
+      --icon-diff-add-active: var(--mint-light-12);
+      --icon-diff-delete-base: var(--ember-light-10);
+      --icon-diff-delete-hover: var(--ember-light-11);
+      --syntax-comment: var(--text-weak);
+      --syntax-regexp: var(--text-base);
+      --syntax-string: #007663;
+      --syntax-keyword: var(--text-weak);
+      --syntax-primitive: #fb7f51;
+      --syntax-operator: var(--text-weak);
+      --syntax-variable: var(--text-strong);
+      --syntax-property: #ec6cc8;
+      --syntax-type: #738400;
+      --syntax-constant: #00b2b9;
+      --syntax-punctuation: var(--text-weak);
+      --syntax-object: var(--text-strong);
+      --syntax-success: var(--apple-light-10);
+      --syntax-warning: var(--amber-light-10);
+      --syntax-critical: var(--ember-light-9);
+      --syntax-info: #0091a7;
+      --syntax-diff-add: var(--mint-light-11);
+      --syntax-diff-delete: var(--ember-light-11);
+      --syntax-diff-unknown: #ff0000;
+      --markdown-heading: #d68c27;
+      --markdown-text: #1a1a1a;
+      --markdown-link: #3b7dd8;
+      --markdown-link-text: #318795;
+      --markdown-code: #3d9a57;
+      --markdown-block-quote: #b0851f;
+      --markdown-emph: #b0851f;
+      --markdown-strong: #d68c27;
+      --markdown-horizontal-rule: #8a8a8a;
+      --markdown-list-item: #3b7dd8;
+      --markdown-list-enumeration: #318795;
+      --markdown-image: #3b7dd8;
+      --markdown-image-text: #318795;
+      --markdown-code-block: #1a1a1a;
+      --border-color: #ffffff;
+      --border-weaker-base: var(--ink-light-alpha-3);
+      --border-weaker-hover: var(--ink-light-alpha-4);
+      --border-weaker-active: var(--ink-light-alpha-6);
+      --border-weaker-selected: var(--cobalt-light-alpha-4);
+      --border-weaker-disabled: var(--ink-light-alpha-2);
+      --border-weaker-focus: var(--ink-light-alpha-6);
+      --button-ghost-hover: var(--ink-light-alpha-2);
+      --button-ghost-hover2: var(--ink-light-alpha-3);
+  
+    }
+  }
+
+  &[data-theme-mode="dark"] {
     --background-base: var(--ink-dark-1);
     --background-weak: #171c1c;
     --background-strong: #131515;
@@ -1050,5 +1550,6 @@ html[data-theme="oc-2-paper"] {
     --border-weaker-focus: var(--ink-light-alpha-6);
     --button-ghost-hover: var(--ink-light-alpha-2);
     --button-ghost-hover2: var(--ink-light-alpha-3);
+  
   }
 }