From d525fbf82940442d8d47265b7d7d0a9af8c282bc Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Wed, 5 Nov 2025 11:55:31 -0600
Subject: feat(desktop): session router, interrupt agent, visual cleanup

---
 packages/desktop/src/context/sync.tsx | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

(limited to 'packages/desktop/src/context/sync.tsx')

diff --git a/packages/desktop/src/context/sync.tsx b/packages/desktop/src/context/sync.tsx
index 06fc05677..c60206b0b 100644
--- a/packages/desktop/src/context/sync.tsx
+++ b/packages/desktop/src/context/sync.tsx
@@ -1,16 +1,4 @@
-import type {
-  Message,
-  Agent,
-  Provider,
-  Session,
-  Part,
-  Config,
-  Path,
-  File,
-  FileNode,
-  Project,
-  Command,
-} from "@opencode-ai/sdk"
+import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode, Project } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createMemo } from "solid-js"
 import { Binary } from "@/utils/binary"
-- 
cgit v1.2.3


From e006e3355cff3de25e023edcee0b59985e7db66b Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Wed, 5 Nov 2025 16:32:05 -0600
Subject: feat(desktop): incrementally load sessions in side nav

---
 packages/desktop/src/context/sync.tsx | 22 +++++---
 packages/desktop/src/pages/layout.tsx | 95 ++++++++++++++++++++---------------
 2 files changed, 70 insertions(+), 47 deletions(-)

(limited to 'packages/desktop/src/context/sync.tsx')

diff --git a/packages/desktop/src/context/sync.tsx b/packages/desktop/src/context/sync.tsx
index c60206b0b..1e960397b 100644
--- a/packages/desktop/src/context/sync.tsx
+++ b/packages/desktop/src/context/sync.tsx
@@ -16,6 +16,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       config: Config
       path: Path
       session: Session[]
+      limit: number
+      more: boolean
       message: {
         [sessionID: string]: Message[]
       }
@@ -32,6 +34,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       agent: [],
       provider: [],
       session: [],
+      limit: 10,
+      more: false,
       message: {},
       part: {},
       node: [],
@@ -106,12 +110,14 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       path: () => sdk.client.path.get().then((x) => setStore("path", x.data!)),
       agent: () => sdk.client.app.agents().then((x) => setStore("agent", x.data ?? [])),
       session: () =>
-        sdk.client.session.list().then((x) =>
-          setStore(
-            "session",
-            (x.data ?? []).slice().sort((a, b) => a.id.localeCompare(b.id)),
-          ),
-        ),
+        sdk.client.session.list().then((x) => {
+          const sessions = (x.data ?? [])
+            .slice()
+            .sort((a, b) => a.id.localeCompare(b.id))
+            .slice(0, store.limit)
+          setStore("session", sessions)
+          setStore("more", sessions.length === store.limit)
+        }),
       config: () => sdk.client.config.get().then((x) => setStore("config", x.data!)),
       changes: () => sdk.client.file.status().then((x) => setStore("changes", x.data!)),
       node: () => sdk.client.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),
@@ -184,6 +190,10 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             }),
           )
         },
+        fetch: async (count = 10) => {
+          setStore("limit", (x) => x + count)
+          await load.session()
+        },
       },
       load,
       absolute,
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index 22f0a50de..1d9669604 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -1,5 +1,5 @@
 import { Button, Tooltip, DiffChanges } from "@opencode-ai/ui"
-import { createMemo, ParentProps, Show } from "solid-js"
+import { createMemo, For, ParentProps, Show } from "solid-js"
 import { getFilename } from "@/utils"
 import { DateTime } from "luxon"
 import { useSync } from "@/context/sync"
@@ -9,61 +9,74 @@ import { A, useParams } from "@solidjs/router"
 export default function Layout(props: ParentProps) {
   const params = useParams()
   const sync = useSync()
+
   return (
     <div class="relative h-screen flex flex-col">
       <header class="hidden h-12 shrink-0 bg-background-strong border-b border-border-weak-base"></header>
       <div class="h-[calc(100vh-0rem)] flex">
         <div class="w-70 shrink-0 bg-background-weak border-r border-border-weak-base flex flex-col items-start">
-          <div class="h-10 flex items-center self-stretch px-5 border-b border-border-weak-base">
+          <div class="h-10 shrink-0 flex items-center self-stretch px-5 border-b border-border-weak-base">
             <span class="text-14-regular overflow-hidden text-ellipsis">{getFilename(sync.data.path.directory)}</span>
           </div>
-          <div class="flex flex-col items-start gap-4 self-stretch flex-1 py-4 px-3">
+          <div class="flex flex-col items-start gap-4 self-stretch flex-1 py-4 px-3 overflow-hidden">
             <A href="/session" class="w-full">
               <Button class="w-full" size="large" icon="edit-small-2">
                 New Session
               </Button>
             </A>
-            <VList data={sync.data.session} class="no-scrollbar">
-              {(session) => {
-                const updated = createMemo(() => DateTime.fromMillis(session.time.updated))
-                return (
-                  <A
-                    data-active={session.id === params.id}
-                    href={`/session/${session.id}`}
-                    class="group/session focus:outline-none"
-                  >
-                    <Tooltip placement="right" value={session.title}>
-                      <div
-                        class="w-full mb-1.5 px-3 py-1 rounded-md 
+            <div class="w-full h-full overflow-y-auto no-scrollbar flex flex-col flex-1">
+              <nav class="w-full">
+                <For each={sync.data.session}>
+                  {(session) => {
+                    const updated = createMemo(() => DateTime.fromMillis(session.time.updated))
+                    return (
+                      <A
+                        data-active={session.id === params.id}
+                        href={`/session/${session.id}`}
+                        class="group/session focus:outline-none"
+                      >
+                        <Tooltip placement="right" value={session.title}>
+                          <div
+                            class="w-full mb-1.5 px-3 py-1 rounded-md 
                                group-data-[active=true]/session:bg-surface-raised-base-hover
                                group-hover/session:bg-surface-raised-base-hover
                                group-focus/session:bg-surface-raised-base-hover"
-                      >
-                        <div class="flex items-center self-stretch gap-6 justify-between">
-                          <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
-                            {session.title}
-                          </span>
-                          <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
-                            {Math.abs(updated().diffNow().as("seconds")) < 60
-                              ? "Now"
-                              : updated()
-                                  .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
-                                  ?.replace(" ago", "")
-                                  ?.replace(/ days?/, "d")
-                                  ?.replace(" min.", "m")
-                                  ?.replace(" hr.", "h")}
-                          </span>
-                        </div>
-                        <div class="flex justify-between items-center self-stretch">
-                          <span class="text-12-regular text-text-weak">{`${session.summary?.files || "No"} file${session.summary?.files !== 1 ? "s" : ""} changed`}</span>
-                          <Show when={session.summary}>{(summary) => <DiffChanges changes={summary()} />}</Show>
-                        </div>
-                      </div>
-                    </Tooltip>
-                  </A>
-                )
-              }}
-            </VList>
+                          >
+                            <div class="flex items-center self-stretch gap-6 justify-between">
+                              <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
+                                {session.title}
+                              </span>
+                              <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
+                                {Math.abs(updated().diffNow().as("seconds")) < 60
+                                  ? "Now"
+                                  : updated()
+                                      .toRelative({ style: "short", unit: ["days", "hours", "minutes"] })
+                                      ?.replace(" ago", "")
+                                      ?.replace(/ days?/, "d")
+                                      ?.replace(" min.", "m")
+                                      ?.replace(" hr.", "h")}
+                              </span>
+                            </div>
+                            <div class="flex justify-between items-center self-stretch">
+                              <span class="text-12-regular text-text-weak">{`${session.summary?.files || "No"} file${session.summary?.files !== 1 ? "s" : ""} changed`}</span>
+                              <Show when={session.summary}>{(summary) => <DiffChanges changes={summary()} />}</Show>
+                            </div>
+                          </div>
+                        </Tooltip>
+                      </A>
+                    )
+                  }}
+                </For>
+              </nav>
+              <Show when={sync.data.more}>
+                <button
+                  class="shrink-0 self-start p-3 text-12-medium text-text-weak hover:text-text-strong"
+                  onClick={() => sync.session.fetch()}
+                >
+                  Show more
+                </button>
+              </Show>
+            </div>
           </div>
         </div>
         <main class="size-full overflow-x-hidden">{props.children}</main>
-- 
cgit v1.2.3


From 96c57418f39bbf10e4538a6e0652baff7f0932fb Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 6 Nov 2025 15:13:02 -0600
Subject: feat(desktop): review flow

---
 packages/desktop/src/components/prompt-input.tsx |   1 +
 packages/desktop/src/context/local.tsx           |  17 +-
 packages/desktop/src/context/session.tsx         |   8 +-
 packages/desktop/src/context/sync.tsx            |  59 +++--
 packages/desktop/src/pages/layout.tsx            |   4 +-
 packages/desktop/src/pages/session.tsx           | 299 +++++++++++++++++++----
 packages/ui/src/components/accordion.tsx         |  11 +-
 packages/ui/src/components/button.css            |   5 +-
 packages/ui/src/components/diff-changes.tsx      |   7 +-
 packages/ui/src/components/icon.tsx              |   3 +
 packages/ui/src/components/tooltip.tsx           |   2 +-
 11 files changed, 340 insertions(+), 76 deletions(-)

(limited to 'packages/desktop/src/context/sync.tsx')

diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index 74443d6a5..15bc54c49 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -338,6 +338,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       // session.layout.copyTabs("", session.id)
     }
     session.layout.setActiveTab(undefined)
+    session.messages.setActive(undefined)
     const toAbsolutePath = (path: string) => (path.startsWith("/") ? path : sync.absolute(path))
 
     const attachments = session.prompt.current().filter((part) => part.type === "file")
diff --git a/packages/desktop/src/context/local.tsx b/packages/desktop/src/context/local.tsx
index 9dacc7100..1785bdf0c 100644
--- a/packages/desktop/src/context/local.tsx
+++ b/packages/desktop/src/context/local.tsx
@@ -464,9 +464,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
             opened: true,
             width: 240,
           },
+          review: {
+            state: "closed" as "open" | "closed" | "tab",
+          },
         }),
         {
-          name: "layout",
+          name: "default-layout",
         },
       )
 
@@ -487,6 +490,18 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
             setStore("sidebar", "width", width)
           },
         },
+        review: {
+          state: createMemo(() => store.review?.state ?? "closed"),
+          open() {
+            setStore("review", "state", "open")
+          },
+          close() {
+            setStore("review", "state", "closed")
+          },
+          tab() {
+            setStore("review", "state", "tab")
+          },
+        },
       }
     })()
 
diff --git a/packages/desktop/src/context/session.tsx b/packages/desktop/src/context/session.tsx
index 77ab3bc25..61fed945e 100644
--- a/packages/desktop/src/context/session.tsx
+++ b/packages/desktop/src/context/session.tsx
@@ -80,6 +80,7 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
     const model = createMemo(() =>
       last() ? sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID] : undefined,
     )
+    const diffs = createMemo(() => (props.sessionId ? (sync.data.session_diff[props.sessionId] ?? []) : []))
 
     const tokens = createMemo(() => {
       if (!last()) return
@@ -98,6 +99,7 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
       id: props.sessionId,
       info,
       working,
+      diffs,
       prompt: {
         current: createMemo(() => store.prompt),
         cursor: createMemo(() => store.cursorPosition),
@@ -139,8 +141,10 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
           if (tab.startsWith("file://")) {
             await local.file.open(tab.replace("file://", ""))
           }
-          if (!store.tabs.opened.includes(tab)) {
-            setStore("tabs", "opened", [...store.tabs.opened, tab])
+          if (tab !== "review") {
+            if (!store.tabs.opened.includes(tab)) {
+              setStore("tabs", "opened", [...store.tabs.opened, tab])
+            }
           }
           setStore("tabs", "active", tab)
         },
diff --git a/packages/desktop/src/context/sync.tsx b/packages/desktop/src/context/sync.tsx
index 1e960397b..c5b169a38 100644
--- a/packages/desktop/src/context/sync.tsx
+++ b/packages/desktop/src/context/sync.tsx
@@ -1,4 +1,17 @@
-import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode, Project } from "@opencode-ai/sdk"
+import type {
+  Message,
+  Agent,
+  Provider,
+  Session,
+  Part,
+  Config,
+  Path,
+  File,
+  FileNode,
+  Project,
+  FileDiff,
+  Todo,
+} from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createMemo } from "solid-js"
 import { Binary } from "@/utils/binary"
@@ -16,8 +29,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       config: Config
       path: Path
       session: Session[]
+      session_diff: {
+        [sessionID: string]: FileDiff[]
+      }
+      todo: {
+        [sessionID: string]: Todo[]
+      }
       limit: number
-      more: boolean
       message: {
         [sessionID: string]: Message[]
       }
@@ -34,8 +52,9 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       agent: [],
       provider: [],
       session: [],
+      session_diff: {},
+      todo: {},
       limit: 10,
-      more: false,
       message: {},
       part: {},
       node: [],
@@ -60,6 +79,12 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           )
           break
         }
+        case "session.diff":
+          setStore("session_diff", event.properties.sessionID, event.properties.diff)
+          break
+        case "todo.updated":
+          setStore("todo", event.properties.sessionID, event.properties.todos)
+          break
         case "message.updated": {
           const messages = store.message[event.properties.info.sessionID]
           if (!messages) {
@@ -116,7 +141,6 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             .sort((a, b) => a.id.localeCompare(b.id))
             .slice(0, store.limit)
           setStore("session", sessions)
-          setStore("more", sessions.length === store.limit)
         }),
       config: () => sdk.client.config.get().then((x) => setStore("config", x.data!)),
       changes: () => sdk.client.file.status().then((x) => setStore("changes", x.data!)),
@@ -161,22 +185,19 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           if (match.found) return store.session[match.index]
           return undefined
         },
-        async sync(sessionID: string, isRetry = false) {
-          const [session, messages] = await Promise.all([
-            sdk.client.session.get({ path: { id: sessionID } }),
+        async sync(sessionID: string, _isRetry = false) {
+          const [session, messages, todo, diff] = await Promise.all([
+            sdk.client.session.get({ path: { id: sessionID }, throwOnError: true }),
             sdk.client.session.messages({ path: { id: sessionID } }),
+            sdk.client.session.todo({ path: { id: sessionID } }),
+            sdk.client.session.diff({ path: { id: sessionID } }),
           ])
-
-          // If no messages and this might be a new session, retry after a delay
-          if (!isRetry && messages.data!.length === 0) {
-            setTimeout(() => this.sync(sessionID, true), 500)
-            return
-          }
-
           setStore(
             produce((draft) => {
               const match = Binary.search(draft.session, sessionID, (s) => s.id)
-              draft.session[match.index] = session.data!
+              if (match.found) draft.session[match.index] = session.data!
+              if (!match.found) draft.session.splice(match.index, 0, session.data!)
+              draft.todo[sessionID] = todo.data ?? []
               draft.message[sessionID] = messages
                 .data!.map((x) => x.info)
                 .slice()
@@ -187,13 +208,21 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
                   .map(sanitizePart)
                   .sort((a, b) => a.id.localeCompare(b.id))
               }
+              draft.session_diff[sessionID] = diff.data ?? []
             }),
           )
+
+          // If no messages and this might be a new session, retry after a delay
+          // if (!isRetry && messages.data!.length === 0) {
+          //   setTimeout(() => this.sync(sessionID, true), 500)
+          //   return
+          // }
         },
         fetch: async (count = 10) => {
           setStore("limit", (x) => x + count)
           await load.session()
         },
+        more: createMemo(() => store.session.length === store.limit),
       },
       load,
       absolute,
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index c5957a2d2..d88564007 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -80,7 +80,7 @@ export default function Layout(props: ParentProps) {
                   }}
                 </For>
               </nav>
-              <Show when={sync.data.more}>
+              <Show when={sync.session.more()}>
                 <button
                   class="shrink-0 self-start p-3 text-12-medium text-text-weak hover:text-text-strong"
                   onClick={() => sync.session.fetch()}
@@ -95,7 +95,7 @@ export default function Layout(props: ParentProps) {
               as={"a"}
               href="https://opencode.ai/desktop-feedback"
               target="_blank"
-              class="hidden @[4rem]:flex w-full gap-2 text-12-medium text-text-base stroke-[1.5px]"
+              class="hidden @[4rem]:flex w-full text-12-medium text-text-base stroke-[1.5px]"
               variant="ghost"
               icon="speech-bubble"
             >
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 36eed718a..9f72191bc 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -13,6 +13,7 @@ import {
   Code,
   Tooltip,
   ProgressCircle,
+  Button,
 } from "@opencode-ai/ui"
 import { FileIcon } from "@/ui"
 import { MessageProgress } from "@/components/message-progress"
@@ -221,9 +222,9 @@ export default function Page() {
             </Switch>
             <IconButton
               icon="close"
-              class="mt-0.5 opacity-0 text-text-muted/60 group-data-[selected]/tab:opacity-100
-                       group-data-[selected]/tab:text-text group-data-[selected]/tab:hover:bg-border-subtle
-                       hover:opacity-100 group-hover/tab:opacity-100"
+              class="mt-0.5 opacity-0 group-data-[selected]/tab:opacity-100
+                     hover:bg-transparent
+                     hover:opacity-100 group-hover/tab:opacity-100"
               variant="ghost"
               onClick={() => props.onTabClose(props.tab)}
             />
@@ -289,56 +290,101 @@ export default function Page() {
                   <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
                 </Tooltip>
               </Tabs.Trigger>
-              {/* <Tabs.Trigger value="review">Review</Tabs.Trigger> */}
+              <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
+                <Tabs.Trigger value="review" class="flex gap-3 items-center group/tab pr-1">
+                  <Show when={session.diffs()}>
+                    <DiffChanges changes={session.diffs()} variant="bars" />
+                  </Show>
+                  <div class="flex items-center gap-1.5">
+                    <div>Review</div>
+                    <Show when={session.info()?.summary?.files}>
+                      <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
+                        {session.info()?.summary?.files ?? 0}
+                      </div>
+                    </Show>
+                    <IconButton
+                      icon="close"
+                      class="mt-0.5 -ml-1 opacity-0 group-data-[selected]/tab:opacity-100
+                             hover:bg-transparent hover:opacity-100 group-hover/tab:opacity-100"
+                      variant="ghost"
+                      onClick={local.layout.review.close}
+                    />
+                  </div>
+                </Tabs.Trigger>
+              </Show>
               <SortableProvider ids={session.layout.tabs.opened ?? []}>
                 <For each={session.layout.tabs.opened ?? []}>
                   {(tab) => <SortableTab tab={tab} onTabClick={handleTabClick} onTabClose={session.layout.closeTab} />}
                 </For>
               </SortableProvider>
               <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
-                <IconButton
-                  icon="plus-small"
-                  variant="ghost"
-                  iconSize="large"
-                  onClick={() => setStore("fileSelectOpen", true)}
-                />
+                <Tooltip value="Open file" class="flex items-center">
+                  <IconButton
+                    icon="plus-small"
+                    variant="ghost"
+                    iconSize="large"
+                    onClick={() => setStore("fileSelectOpen", true)}
+                  />
+                </Tooltip>
               </div>
             </Tabs.List>
           </div>
           <Tabs.Content value="chat" class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
-            <div class="relative px-6 pt-12 max-w-2xl w-full mx-auto flex flex-col flex-1 min-h-0">
-              <Show
-                when={session.id}
-                fallback={
-                  <div class="flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
-                    <div class="text-20-medium text-text-weaker">New session</div>
-                    <div class="flex justify-center items-center gap-3">
-                      <Icon name="folder" size="small" />
-                      <div class="text-12-medium text-text-weak">
-                        {getDirectory(sync.data.path.directory)}
-                        <span class="text-text-strong">{getFilename(sync.data.path.directory)}</span>
-                      </div>
+            <Show
+              when={session.id}
+              fallback={
+                <div class="size-full max-w-2xl mx-auto flex flex-col pb-45 px-6 justify-end items-start gap-4 flex-[1_0_0] self-stretch">
+                  <div class="text-20-medium text-text-weaker">New session</div>
+                  <div class="flex justify-center items-center gap-3">
+                    <Icon name="folder" size="small" />
+                    <div class="text-12-medium text-text-weak">
+                      {getDirectory(sync.data.path.directory)}
+                      <span class="text-text-strong">{getFilename(sync.data.path.directory)}</span>
                     </div>
-                    <div class="flex justify-center items-center gap-3">
-                      <Icon name="pencil-line" size="small" />
-                      <div class="text-12-medium text-text-weak">
-                        Last modified&nbsp;
-                        <span class="text-text-strong">
-                          {DateTime.fromMillis(sync.data.project.time.created).toRelative()}
-                        </span>
-                      </div>
+                  </div>
+                  <div class="flex justify-center items-center gap-3">
+                    <Icon name="pencil-line" size="small" />
+                    <div class="text-12-medium text-text-weak">
+                      Last modified&nbsp;
+                      <span class="text-text-strong">
+                        {DateTime.fromMillis(sync.data.project.time.created).toRelative()}
+                      </span>
                     </div>
                   </div>
-                }
-              >
-                {(_) => {
-                  return (
-                    <div class="pt-3 flex flex-col flex-1 min-h-0">
-                      <div class="flex-1 min-h-0">
+                </div>
+              }
+            >
+              {(_) => {
+                return (
+                  <div
+                    classList={{
+                      "w-full grid flex-1 _gap-6 min-h-0": true,
+                      "grid-cols-2": local.layout.review.state() === "open",
+                      "max-w-2xl mx-auto": local.layout.review.state() !== "open",
+                    }}
+                  >
+                    <div class="relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0">
+                      <div class="h-8 flex shrink-0 self-stretch items-center justify-end">
+                        <Show when={local.layout.review.state() === "closed" && session.diffs().length}>
+                          <Button icon="layout-right" onClick={local.layout.review.open}>
+                            Review
+                          </Button>
+                        </Show>
+                      </div>
+                      <div
+                        classList={{
+                          "flex-1 min-h-0": true,
+                          "flex items-start justify-start": local.layout.review.state() === "open",
+                        }}
+                      >
                         <Show when={session.messages.user().length > 1}>
                           <ul
                             role="list"
-                            class="absolute right-full mr-8 hidden w-60 shrink-0 @7xl:flex flex-col items-start gap-1"
+                            classList={{
+                              "mr-8 shrink-0 flex flex-col items-start": true,
+                              "absolute right-full w-60 @7xl:gap-2": local.layout.review.state() !== "open",
+                              "": local.layout.review.state() === "open",
+                            }}
                           >
                             <For each={session.messages.user()}>
                               {(message) => {
@@ -351,11 +397,43 @@ export default function Page() {
                                 const error = createMemo(() => assistantMessages().find((m) => m?.error)?.error)
                                 const working = createMemo(() => !message.summary?.body && !error())
 
+                                const handleClick = () => session.messages.setActive(message.id)
+
                                 return (
-                                  <li class="group/li flex items-center self-stretch">
+                                  <li
+                                    classList={{
+                                      "group/li flex items-center self-stretch justify-end": true,
+                                      "@7xl:justify-start": local.layout.review.state() !== "open",
+                                    }}
+                                  >
+                                    <Tooltip
+                                      placement="right"
+                                      gutter={8}
+                                      value={
+                                        <div class="flex items-center gap-2">
+                                          <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                                          {message.summary?.title}
+                                        </div>
+                                      }
+                                    >
+                                      <button
+                                        data-active={session.messages.active()?.id === message.id}
+                                        onClick={handleClick}
+                                        classList={{
+                                          "group/tick flex items-center justify-start h-2 w-8 -mr-3": true,
+                                          "data-[active=true]:[&>div]:bg-icon-strong-base data-[active=true]:[&>div]:w-full": true,
+                                          "@7xl:hidden": local.layout.review.state() !== "open",
+                                        }}
+                                      >
+                                        <div class="h-px w-5 bg-icon-base group-hover/tick:w-full group-hover/tick:bg-icon-strong-base" />
+                                      </button>
+                                    </Tooltip>
                                     <button
-                                      class="flex items-center self-stretch w-full gap-x-2 py-1 cursor-default"
-                                      onClick={() => session.messages.setActive(message.id)}
+                                      classList={{
+                                        "hidden items-center self-stretch w-full gap-x-2 cursor-default": true,
+                                        "@7xl:flex": local.layout.review.state() !== "open",
+                                      }}
+                                      onClick={handleClick}
                                     >
                                       <Switch>
                                         <Match when={working()}>
@@ -383,7 +461,7 @@ export default function Page() {
                             </For>
                           </ul>
                         </Show>
-                        <div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
+                        <div ref={messageScrollElement} class="grow w-full min-w-0 h-full overflow-y-auto no-scrollbar">
                           <For each={session.messages.user()}>
                             {(message) => {
                               const isActive = createMemo(() => session.messages.active()?.id === message.id)
@@ -423,7 +501,7 @@ export default function Page() {
                                     class="flex flex-col items-start self-stretch gap-8 pb-50"
                                   >
                                     {/* Title */}
-                                    <div class="py-2 flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10">
+                                    <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-10 pb-1">
                                       <div class="w-full text-14-medium text-text-strong">
                                         <Show
                                           when={titled()}
@@ -441,7 +519,7 @@ export default function Page() {
                                         </Show>
                                       </div>
                                     </div>
-                                    <div class="-mt-8">
+                                    <div class="-mt-9">
                                       <Message message={message} parts={parts()} />
                                     </div>
                                     {/* Summary */}
@@ -496,7 +574,7 @@ export default function Page() {
                                                     </div>
                                                   </Accordion.Trigger>
                                                 </Accordion.Header>
-                                                <Accordion.Content class="max-h-[300px] overflow-y-auto no-scrollbar">
+                                                <Accordion.Content class="max-h-[360px] overflow-y-auto no-scrollbar">
                                                   <Diff
                                                     before={{
                                                       name: diff.file!,
@@ -569,12 +647,135 @@ export default function Page() {
                         </div>
                       </div>
                     </div>
-                  )
-                }}
-              </Show>
-            </div>
+                    <Show when={local.layout.review.state() === "open"}>
+                      <div
+                        classList={{
+                          "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 border-l border-border-weak-base": true,
+                        }}
+                      >
+                        <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch">
+                          <div class="flex items-center gap-x-3">
+                            <Tooltip value="Close">
+                              <IconButton icon="align-right" variant="ghost" onClick={local.layout.review.close} />
+                            </Tooltip>
+                            <Tooltip value="Open in tab">
+                              <IconButton
+                                icon="expand"
+                                variant="ghost"
+                                onClick={() => {
+                                  local.layout.review.tab()
+                                  session.layout.setActiveTab("review")
+                                }}
+                              />
+                            </Tooltip>
+                          </div>
+                        </div>
+                        <div class="text-14-medium text-text-strong">All changes</div>
+                        <div class="h-full pb-40 overflow-y-auto no-scrollbar">
+                          <Accordion class="w-full" multiple>
+                            <For each={session.diffs()}>
+                              {(diff) => (
+                                <Accordion.Item value={diff.file} defaultOpen>
+                                  <Accordion.Header>
+                                    <Accordion.Trigger>
+                                      <div class="flex items-center justify-between w-full gap-5">
+                                        <div class="grow flex items-center gap-5 min-w-0">
+                                          <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                                          <div class="flex grow min-w-0">
+                                            <Show when={diff.file.includes("/")}>
+                                              <span class="text-text-base truncate-start">
+                                                {getDirectory(diff.file)}&lrm;
+                                              </span>
+                                            </Show>
+                                            <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
+                                          </div>
+                                        </div>
+                                        <div class="shrink-0 flex gap-4 items-center justify-end">
+                                          <DiffChanges changes={diff} />
+                                          <Icon name="chevron-grabber-vertical" size="small" />
+                                        </div>
+                                      </div>
+                                    </Accordion.Trigger>
+                                  </Accordion.Header>
+                                  <Accordion.Content>
+                                    <Diff
+                                      before={{
+                                        name: diff.file!,
+                                        contents: diff.before!,
+                                      }}
+                                      after={{
+                                        name: diff.file!,
+                                        contents: diff.after!,
+                                      }}
+                                    />
+                                  </Accordion.Content>
+                                </Accordion.Item>
+                              )}
+                            </For>
+                          </Accordion>
+                        </div>
+                      </div>
+                    </Show>
+                  </div>
+                )
+              }}
+            </Show>
           </Tabs.Content>
-          {/* <Tabs.Content value="review" class="select-text"></Tabs.Content> */}
+          <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
+            <Tabs.Content value="review" class="select-text">
+              <div
+                classList={{
+                  "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0": true,
+                }}
+              >
+                <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch">
+                  <div class="flex items-center gap-x-3"></div>
+                </div>
+                <div class="text-14-medium text-text-strong">All changes</div>
+                <div class="h-full pb-40 overflow-y-auto no-scrollbar">
+                  <Accordion class="w-full" multiple>
+                    <For each={session.diffs()}>
+                      {(diff) => (
+                        <Accordion.Item value={diff.file} defaultOpen>
+                          <Accordion.Header>
+                            <Accordion.Trigger>
+                              <div class="flex items-center justify-between w-full gap-5">
+                                <div class="grow flex items-center gap-5 min-w-0">
+                                  <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                                  <div class="flex grow min-w-0">
+                                    <Show when={diff.file.includes("/")}>
+                                      <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
+                                    </Show>
+                                    <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
+                                  </div>
+                                </div>
+                                <div class="shrink-0 flex gap-4 items-center justify-end">
+                                  <DiffChanges changes={diff} />
+                                  <Icon name="chevron-grabber-vertical" size="small" />
+                                </div>
+                              </div>
+                            </Accordion.Trigger>
+                          </Accordion.Header>
+                          <Accordion.Content>
+                            <Diff
+                              before={{
+                                name: diff.file!,
+                                contents: diff.before!,
+                              }}
+                              after={{
+                                name: diff.file!,
+                                contents: diff.after!,
+                              }}
+                            />
+                          </Accordion.Content>
+                        </Accordion.Item>
+                      )}
+                    </For>
+                  </Accordion>
+                </div>
+              </div>
+            </Tabs.Content>
+          </Show>
           <For each={session.layout.tabs.opened}>
             {(tab) => {
               const [file] = createResource(
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 535d38e3d..02f00b7be 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -1,9 +1,11 @@
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { splitProps } from "solid-js"
+import { createSignal, splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {
+  defaultOpen?: boolean
+}
 export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
@@ -23,11 +25,14 @@ function AccordionRoot(props: AccordionProps) {
 }
 
 function AccordionItem(props: AccordionItemProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
+  const [split, rest] = splitProps(props, ["class", "classList", "defaultOpen"])
+  const [open, setOpen] = createSignal(split.defaultOpen ?? false)
   return (
     <Kobalte.Item
       {...rest}
       data-slot="accordion-item"
+      onOpenChange={setOpen}
+      open={open()}
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index f76d7465b..017fa3f0f 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -74,14 +74,15 @@
   }
 
   &[data-size="normal"] {
+    height: 24px;
     padding: 0 6px;
     &[data-icon] {
-      padding: 0 6px 0 4px;
+      padding: 0 8px 0 6px;
     }
 
     font-size: var(--font-size-small);
     line-height: var(--line-height-large);
-    gap: calc(var(--spacing) * 0.5);
+    gap: 6px;
   }
 
   &[data-size="large"] {
diff --git a/packages/ui/src/components/diff-changes.tsx b/packages/ui/src/components/diff-changes.tsx
index 5b2b7362e..3095ddbdb 100644
--- a/packages/ui/src/components/diff-changes.tsx
+++ b/packages/ui/src/components/diff-changes.tsx
@@ -1,6 +1,7 @@
 import { createMemo, For, Match, Show, Switch } from "solid-js"
 
 export function DiffChanges(props: {
+  class?: string
   changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
   variant?: "default" | "bars"
 }) {
@@ -92,7 +93,11 @@ export function DiffChanges(props: {
 
   return (
     <Show when={variant() === "default" ? total() > 0 : true}>
-      <div data-component="diff-changes" data-variant={variant()}>
+      <div
+        data-component="diff-changes"
+        data-variant={variant()}
+        classList={{ [props.class ?? ""]: true }}
+      >
         <Switch>
           <Match when={variant() === "bars"}>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="none">
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 082bbea90..b61a54fe1 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -153,7 +153,10 @@ const newIcons = {
   stop: `<rect x="6" y="6" width="8" height="8" fill="currentColor"/>`,
   enter: `<path d="M5.83333 15.8334L2.5 12.5L5.83333 9.16671M3.33333 12.5H17.9167V4.58337H10" stroke="currentColor" stroke-linecap="square"/>`,
   "layout-left": `<path d="M2.91675 2.91699L2.91675 2.41699L2.41675 2.41699L2.41675 2.91699L2.91675 2.91699ZM17.0834 2.91699L17.5834 2.91699L17.5834 2.41699L17.0834 2.41699L17.0834 2.91699ZM17.0834 17.0837L17.0834 17.5837L17.5834 17.5837L17.5834 17.0837L17.0834 17.0837ZM2.91675 17.0837L2.41675 17.0837L2.41675 17.5837L2.91675 17.5837L2.91675 17.0837ZM7.41674 17.0837L7.41674 17.5837L8.41674 17.5837L8.41674 17.0837L7.91674 17.0837L7.41674 17.0837ZM8.41674 2.91699L8.41674 2.41699L7.41674 2.41699L7.41674 2.91699L7.91674 2.91699L8.41674 2.91699ZM2.91675 2.91699L2.91675 3.41699L17.0834 3.41699L17.0834 2.91699L17.0834 2.41699L2.91675 2.41699L2.91675 2.91699ZM17.0834 2.91699L16.5834 2.91699L16.5834 17.0837L17.0834 17.0837L17.5834 17.0837L17.5834 2.91699L17.0834 2.91699ZM17.0834 17.0837L17.0834 16.5837L2.91675 16.5837L2.91675 17.0837L2.91675 17.5837L17.0834 17.5837L17.0834 17.0837ZM2.91675 17.0837L3.41675 17.0837L3.41675 2.91699L2.91675 2.91699L2.41675 2.91699L2.41675 17.0837L2.91675 17.0837ZM7.91674 17.0837L8.41674 17.0837L8.41674 2.91699L7.91674 2.91699L7.41674 2.91699L7.41674 17.0837L7.91674 17.0837Z" fill="currentColor"/>`,
+  "layout-right": `<path d="M17.0832 2.91699L17.5832 2.91699L17.5832 2.41699L17.0832 2.41699L17.0832 2.91699ZM2.91651 2.91699L2.91651 2.41699L2.41651 2.41699L2.41651 2.91699L2.91651 2.91699ZM2.9165 17.0837L2.4165 17.0837L2.4165 17.5837L2.9165 17.5837L2.9165 17.0837ZM17.0832 17.0837L17.0832 17.5837L17.5832 17.5837L17.5832 17.0837L17.0832 17.0837ZM11.5832 17.0837L11.5832 17.5837L12.5832 17.5837L12.5832 17.0837L12.0832 17.0837L11.5832 17.0837ZM12.5832 2.91699L12.5832 2.41699L11.5832 2.41699L11.5832 2.91699L12.0832 2.91699L12.5832 2.91699ZM17.0832 2.91699L17.0832 2.41699L2.91651 2.41699L2.91651 2.91699L2.91651 3.41699L17.0832 3.41699L17.0832 2.91699ZM2.91651 2.91699L2.41651 2.91699L2.4165 17.0837L2.9165 17.0837L3.4165 17.0837L3.41651 2.91699L2.91651 2.91699ZM2.9165 17.0837L2.9165 17.5837L17.0832 17.5837L17.0832 17.0837L17.0832 16.5837L2.9165 16.5837L2.9165 17.0837ZM17.0832 17.0837L17.5832 17.0837L17.5832 2.91699L17.0832 2.91699L16.5832 2.91699L16.5832 17.0837L17.0832 17.0837ZM12.0832 17.0837L12.5832 17.0837L12.5832 2.91699L12.0832 2.91699L11.5832 2.91699L11.5832 17.0837L12.0832 17.0837Z" fill="currentColor"/>`,
   "speech-bubble": `<path d="M18.3334 10.0003C18.3334 5.57324 15.0927 2.91699 10.0001 2.91699C4.90749 2.91699 1.66675 5.57324 1.66675 10.0003C1.66675 11.1497 2.45578 13.1016 2.5771 13.3949C2.5878 13.4207 2.59839 13.4444 2.60802 13.4706C2.69194 13.6996 3.04282 14.9364 1.66675 16.7684C3.5186 17.6538 5.48526 16.1982 5.48526 16.1982C6.84592 16.9202 8.46491 17.0837 10.0001 17.0837C15.0927 17.0837 18.3334 14.4274 18.3334 10.0003Z" stroke="currentColor" stroke-linecap="square"/>`,
+  "align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
+  expand: `<path d="M4.58301 10.4163V15.4163H9.58301M10.4163 4.58301H15.4163V9.58301" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index c3d1947d3..e3784ed8e 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -29,7 +29,7 @@ export function Tooltip(props: TooltipProps) {
   })
 
   return (
-    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen} gutter={4}>
+    <KobalteTooltip forceMount gutter={4} {...others} open={open()} onOpenChange={setOpen}>
       <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
         {c()}
       </KobalteTooltip.Trigger>
-- 
cgit v1.2.3


From 3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 7 Nov 2025 12:48:12 -0600
Subject: feat(desktop): custom syntax colors

---
 packages/desktop/src/context/sync.tsx      |    8 +-
 packages/desktop/src/pages/session.tsx     |    3 +-
 packages/ui/src/components/code.tsx        |    3 +-
 packages/ui/src/components/diff.tsx        | 3937 +++-------------------------
 packages/ui/src/styles/tailwind/colors.css |    5 +
 packages/ui/src/styles/theme.css           |   59 +-
 theme-test.java                            |  461 ++++
 theme-test.md                              |  669 +++++
 theme-test.tsx                             |   68 +
 9 files changed, 1622 insertions(+), 3591 deletions(-)
 create mode 100644 theme-test.java
 create mode 100644 theme-test.md

(limited to 'packages/desktop/src/context/sync.tsx')

diff --git a/packages/desktop/src/context/sync.tsx b/packages/desktop/src/context/sync.tsx
index c5b169a38..bc9491fd3 100644
--- a/packages/desktop/src/context/sync.tsx
+++ b/packages/desktop/src/context/sync.tsx
@@ -188,7 +188,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
         async sync(sessionID: string, _isRetry = false) {
           const [session, messages, todo, diff] = await Promise.all([
             sdk.client.session.get({ path: { id: sessionID }, throwOnError: true }),
-            sdk.client.session.messages({ path: { id: sessionID } }),
+            sdk.client.session.messages({ path: { id: sessionID }, query: { limit: 100 } }),
             sdk.client.session.todo({ path: { id: sessionID } }),
             sdk.client.session.diff({ path: { id: sessionID } }),
           ])
@@ -211,12 +211,6 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
               draft.session_diff[sessionID] = diff.data ?? []
             }),
           )
-
-          // If no messages and this might be a new session, retry after a delay
-          // if (!isRetry && messages.data!.length === 0) {
-          //   setTimeout(() => this.sync(sessionID, true), 500)
-          //   return
-          // }
         },
         fetch: async (count = 10) => {
           setStore("limit", (x) => x + count)
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 30b8eab91..3dcc24e61 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -736,7 +736,7 @@ export default function Page() {
                   "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0": true,
                 }}
               >
-                <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch sticky top-0 bg-background-strong z-100">
+                <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch sticky top-0 bg-background-stronger z-100">
                   <div class="flex items-center gap-x-3"></div>
                 </div>
                 <div class="text-14-medium text-text-strong">All changes</div>
@@ -766,6 +766,7 @@ export default function Page() {
                           </Accordion.Header>
                           <Accordion.Content>
                             <Diff
+                              diffStyle="split"
                               before={{
                                 name: diff.file!,
                                 contents: diff.before!,
diff --git a/packages/ui/src/components/code.tsx b/packages/ui/src/components/code.tsx
index a31649788..6b95e6653 100644
--- a/packages/ui/src/components/code.tsx
+++ b/packages/ui/src/components/code.tsx
@@ -14,7 +14,8 @@ export function Code<T>(props: CodeProps<T>) {
 
   createEffect(() => {
     const instance = new File<T>({
-      theme: { dark: "oc-1-dark", light: "oc-1-light" }, // or any Shiki theme
+      theme: { dark: "oc-1-dark", light: "oc-1-light" },
+      // theme: { dark: "pierre-dark", light: "pierre-light" },
       overflow: "wrap", // or 'scroll'
       themeType: "system", // 'system', 'light', or 'dark'
       disableFileHeader: true,
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 6297a6422..09085b44c 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -57,6 +57,7 @@ export function Diff<T>(props: DiffProps<T>) {
     const instance = new FileDiff<T>({
       // theme: "pierre-light",
       theme: { dark: "oc-1-dark", light: "oc-1-light" },
+      // theme: { dark: "pierre-dark", light: "pierre-light" },
       // When using the 'themes' prop, 'themeType' allows you to force 'dark'
       // or 'light' theme, or inherit from the OS ('system') theme.
       themeType: "system",
@@ -180,1788 +181,385 @@ export function Diff<T>(props: DiffProps<T>) {
   )
 }
 
-registerCustomTheme("oc-1-light", () => {
-  return Promise.resolve({
-    name: "oc-1-light",
-    type: "light",
-    colors: {
-      "editor.background": "transparent",
-      "editor.foreground": "#070707",
-      foreground: "#070707",
-      focusBorder: "#008cff",
-      "selection.background": "#dfe7ff",
-      "editor.selectionBackground": "#008cff2e",
-      "editor.lineHighlightBackground": "#dfe7ff8c",
-      "editorCursor.foreground": "#008cff",
-      "editorLineNumber.foreground": "#84848A",
-      "editorLineNumber.activeForeground": "#6C6C71",
-      "editorIndentGuide.background": "#eeeeef",
-      "editorIndentGuide.activeBackground": "#dbdbdd",
-      "diffEditor.insertedTextBackground": "#00cab133",
-      "diffEditor.deletedTextBackground": "#ff2e3f33",
-      "sideBar.background": "#f8f8f8",
-      "sideBar.foreground": "#6C6C71",
-      "sideBar.border": "#eeeeef",
-      "sideBarTitle.foreground": "#070707",
-      "sideBarSectionHeader.background": "#f8f8f8",
-      "sideBarSectionHeader.foreground": "#6C6C71",
-      "sideBarSectionHeader.border": "#eeeeef",
-      "activityBar.background": "#f8f8f8",
-      "activityBar.foreground": "#070707",
-      "activityBar.border": "#eeeeef",
-      "activityBar.activeBorder": "#008cff",
-      "activityBarBadge.background": "#008cff",
-      "activityBarBadge.foreground": "#ffffff",
-      "titleBar.activeBackground": "#f8f8f8",
-      "titleBar.activeForeground": "#070707",
-      "titleBar.inactiveBackground": "#f8f8f8",
-      "titleBar.inactiveForeground": "#84848A",
-      "titleBar.border": "#eeeeef",
-      "list.activeSelectionBackground": "#dfe7ffcc",
-      "list.activeSelectionForeground": "#070707",
-      "list.inactiveSelectionBackground": "#dfe7ff73",
-      "list.hoverBackground": "#dfe7ff59",
-      "list.focusOutline": "#008cff",
-      "tab.activeBackground": "#ffffff",
-      "tab.activeForeground": "#070707",
-      "tab.activeBorderTop": "#008cff",
-      "tab.inactiveBackground": "#f8f8f8",
-      "tab.inactiveForeground": "#84848A",
-      "tab.border": "#eeeeef",
-      "editorGroupHeader.tabsBackground": "#f8f8f8",
-      "editorGroupHeader.tabsBorder": "#eeeeef",
-      "panel.background": "#f8f8f8",
-      "panel.border": "#eeeeef",
-      "panelTitle.activeBorder": "#008cff",
-      "panelTitle.activeForeground": "#070707",
-      "panelTitle.inactiveForeground": "#84848A",
-      "statusBar.background": "#f8f8f8",
-      "statusBar.foreground": "#6C6C71",
-      "statusBar.border": "#eeeeef",
-      "statusBar.noFolderBackground": "#f8f8f8",
-      "statusBar.debuggingBackground": "#ffca00",
-      "statusBar.debuggingForeground": "#ffffff",
-      "statusBarItem.remoteBackground": "#f8f8f8",
-      "statusBarItem.remoteForeground": "#6C6C71",
-      "input.background": "#f2f2f3",
-      "input.border": "#dbdbdd",
-      "input.foreground": "#070707",
-      "input.placeholderForeground": "#8E8E95",
-      "dropdown.background": "#f2f2f3",
-      "dropdown.border": "#dbdbdd",
-      "dropdown.foreground": "#070707",
-      "button.background": "#008cff",
-      "button.foreground": "#ffffff",
-      "button.hoverBackground": "#1a98ff",
-      "textLink.foreground": "#008cff",
-      "textLink.activeForeground": "#008cff",
-      "gitDecoration.addedResourceForeground": "#00cab1",
-      "gitDecoration.conflictingResourceForeground": "#ffca00",
-      "gitDecoration.modifiedResourceForeground": "#008cff",
-      "gitDecoration.deletedResourceForeground": "#ff2e3f",
-      "gitDecoration.untrackedResourceForeground": "#00cab1",
-      "gitDecoration.ignoredResourceForeground": "#84848A",
-      "terminal.titleForeground": "#6C6C71",
-      "terminal.titleInactiveForeground": "#84848A",
-      "terminal.background": "#f8f8f8",
-      "terminal.foreground": "#6C6C71",
-      "terminal.ansiBlack": "#1F1F21",
-      "terminal.ansiRed": "#ff2e3f",
-      "terminal.ansiGreen": "#0dbe4e",
-      "terminal.ansiYellow": "#ffca00",
-      "terminal.ansiBlue": "#008cff",
-      "terminal.ansiMagenta": "#c635e4",
-      "terminal.ansiCyan": "#08c0ef",
-      "terminal.ansiWhite": "#c6c6c8",
-      "terminal.ansiBrightBlack": "#1F1F21",
-      "terminal.ansiBrightRed": "#ff2e3f",
-      "terminal.ansiBrightGreen": "#0dbe4e",
-      "terminal.ansiBrightYellow": "#ffca00",
-      "terminal.ansiBrightBlue": "#008cff",
-      "terminal.ansiBrightMagenta": "#c635e4",
-      "terminal.ansiBrightCyan": "#08c0ef",
-      "terminal.ansiBrightWhite": "#c6c6c8",
+const colors = {
+  "editor.background": "transparent",
+  "editor.foreground": "var(--text-base)",
+  "gitDecoration.addedResourceForeground": "var(--syntax-diff-add)",
+  "gitDecoration.deletedResourceForeground": "var(--syntax-diff-delete)",
+  // "gitDecoration.conflictingResourceForeground": "#ffca00",
+  // "gitDecoration.modifiedResourceForeground": "#1a76d4",
+  // "gitDecoration.untrackedResourceForeground": "#00cab1",
+  // "gitDecoration.ignoredResourceForeground": "#84848A",
+  // "terminal.titleForeground": "#adadb1",
+  // "terminal.titleInactiveForeground": "#84848A",
+  // "terminal.background": "#141415",
+  // "terminal.foreground": "#adadb1",
+  // "terminal.ansiBlack": "#141415",
+  // "terminal.ansiRed": "#ff2e3f",
+  // "terminal.ansiGreen": "#0dbe4e",
+  // "terminal.ansiYellow": "#ffca00",
+  // "terminal.ansiBlue": "#008cff",
+  // "terminal.ansiMagenta": "#c635e4",
+  // "terminal.ansiCyan": "#08c0ef",
+  // "terminal.ansiWhite": "#c6c6c8",
+  // "terminal.ansiBrightBlack": "#141415",
+  // "terminal.ansiBrightRed": "#ff2e3f",
+  // "terminal.ansiBrightGreen": "#0dbe4e",
+  // "terminal.ansiBrightYellow": "#ffca00",
+  // "terminal.ansiBrightBlue": "#008cff",
+  // "terminal.ansiBrightMagenta": "#c635e4",
+  // "terminal.ansiBrightCyan": "#08c0ef",
+  // "terminal.ansiBrightWhite": "#c6c6c8",
+}
+
+const tokenColors = [
+  {
+    scope: ["comment", "punctuation.definition.comment", "string.comment"],
+    settings: {
+      foreground: "var(--syntax-comment)",
     },
-    tokenColors: [
-      {
-        scope: ["comment", "punctuation.definition.comment"],
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: "comment markup.link",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: ["string", "constant.other.symbol"],
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: ["punctuation.definition.string.begin", "punctuation.definition.string.end"],
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: ["constant.numeric", "constant.language.boolean"],
-        settings: {
-          foreground: "#1ca1c7",
-        },
-      },
-      {
-        scope: "constant",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "punctuation.definition.constant",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "constant.language",
-        settings: {
-          foreground: "#1ca1c7",
-        },
-      },
-      {
-        scope: "variable.other.constant",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "keyword",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "keyword.control",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["storage", "storage.type", "storage.modifier"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "token.storage",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.new",
-          "keyword.operator.expression.instanceof",
-          "keyword.operator.expression.typeof",
-          "keyword.operator.expression.void",
-          "keyword.operator.expression.delete",
-          "keyword.operator.expression.in",
-          "keyword.operator.expression.of",
-          "keyword.operator.expression.keyof",
-        ],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "keyword.operator.delete",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["variable", "identifier", "meta.definition.variable"],
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: [
-          "variable.other.readwrite",
-          "meta.object-literal.key",
-          "support.variable.property",
-          "support.variable.object.process",
-          "support.variable.object.node",
-        ],
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: "variable.language",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "variable.parameter.function",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "function.parameter",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "variable.parameter",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "variable.parameter.function.language.python",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "variable.parameter.function.python",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "support.function",
-          "entity.name.function",
-          "meta.function-call",
-          "meta.require",
-          "support.function.any-method",
-          "variable.function",
-        ],
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "keyword.other.special-method",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "entity.name.function",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "support.function.console",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: ["support.type", "entity.name.type", "entity.name.class", "storage.type"],
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: ["support.class", "entity.name.type.class"],
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: ["entity.name.class", "variable.other.class.js", "variable.other.class.ts"],
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: "entity.name.class.identifier.namespace.type",
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: "entity.name.type.namespace",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "entity.other.inherited-class",
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: "entity.name.namespace",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "keyword.operator",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["keyword.operator.logical", "keyword.operator.bitwise", "keyword.operator.channel"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.arithmetic",
-          "keyword.operator.comparison",
-          "keyword.operator.relational",
-          "keyword.operator.increment",
-          "keyword.operator.decrement",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.assignment",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.assignment.compound",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.assignment.compound.js",
-          "keyword.operator.assignment.compound.ts",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.ternary",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "keyword.operator.optional",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "punctuation",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.separator.delimiter",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.separator.key-value",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.terminator",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.brace",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.brace.square",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.brace.round",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "function.brace",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["punctuation.definition.parameters", "punctuation.definition.typeparameters"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["punctuation.definition.block", "punctuation.definition.tag"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["meta.tag.tsx", "meta.tag.jsx", "meta.tag.js", "meta.tag.ts"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "keyword.operator.expression.import",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "keyword.operator.module",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "support.type.object.console",
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: ["support.module.node", "support.type.object.module", "entity.name.type.module"],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "support.constant.math",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "support.constant.property.math",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "support.constant.json",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "support.type.object.dom",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["support.variable.dom", "support.variable.property.dom"],
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: "support.variable.property.process",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "meta.property.object",
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: "variable.parameter.function.js",
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: ["keyword.other.template.begin", "keyword.other.template.end"],
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: ["keyword.other.substitution.begin", "keyword.other.substitution.end"],
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.template-expression.begin",
-          "punctuation.definition.template-expression.end",
-        ],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "meta.template.expression",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.section.embedded",
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: "variable.interpolation",
-        settings: {
-          foreground: "#d47628",
-        },
-      },
-      {
-        scope: ["punctuation.section.embedded.begin", "punctuation.section.embedded.end"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "punctuation.quasi.element",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: [
-          "support.type.primitive.ts",
-          "support.type.builtin.ts",
-          "support.type.primitive.tsx",
-          "support.type.builtin.tsx",
-        ],
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: "support.type.type.flowtype",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "support.type.primitive",
-        settings: {
-          foreground: "#c635e4",
-        },
-      },
-      {
-        scope: "support.variable.magic.python",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "variable.parameter.function.language.special.self.python",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "punctuation.separator.period.python",
-          "punctuation.separator.element.python",
-          "punctuation.parenthesis.begin.python",
-          "punctuation.parenthesis.end.python",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.arguments.begin.python",
-          "punctuation.definition.arguments.end.python",
-          "punctuation.separator.arguments.python",
-          "punctuation.definition.list.begin.python",
-          "punctuation.definition.list.end.python",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.type.python",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.logical.python",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "meta.function-call.generic.python",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "constant.character.format.placeholder.other.python",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "meta.function.decorator.python",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: ["support.token.decorator.python", "meta.function.decorator.identifier.python"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "storage.modifier.lifetime.rust",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.function.std.rust",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "entity.name.lifetime.rust",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "variable.language.rust",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "keyword.operator.misc.rust",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "keyword.operator.sigil.rust",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "support.constant.core.rust",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: ["meta.function.c", "meta.function.cpp"],
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: [
-          "punctuation.section.block.begin.bracket.curly.cpp",
-          "punctuation.section.block.end.bracket.curly.cpp",
-          "punctuation.terminator.statement.c",
-          "punctuation.section.block.begin.bracket.curly.c",
-          "punctuation.section.block.end.bracket.curly.c",
-          "punctuation.section.parens.begin.bracket.round.c",
-          "punctuation.section.parens.end.bracket.round.c",
-          "punctuation.section.parameters.begin.bracket.round.c",
-          "punctuation.section.parameters.end.bracket.round.c",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.assignment.c",
-          "keyword.operator.comparison.c",
-          "keyword.operator.c",
-          "keyword.operator.increment.c",
-          "keyword.operator.decrement.c",
-          "keyword.operator.bitwise.shift.c",
-        ],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.assignment.cpp",
-          "keyword.operator.comparison.cpp",
-          "keyword.operator.cpp",
-          "keyword.operator.increment.cpp",
-          "keyword.operator.decrement.cpp",
-          "keyword.operator.bitwise.shift.cpp",
-        ],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["punctuation.separator.c", "punctuation.separator.cpp"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["support.type.posix-reserved.c", "support.type.posix-reserved.cpp"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["keyword.operator.sizeof.c", "keyword.operator.sizeof.cpp"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "variable.c",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["storage.type.annotation.java", "storage.type.object.array.java"],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "source.java",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: [
-          "punctuation.section.block.begin.java",
-          "punctuation.section.block.end.java",
-          "punctuation.definition.method-parameters.begin.java",
-          "punctuation.definition.method-parameters.end.java",
-          "meta.method.identifier.java",
-          "punctuation.section.method.begin.java",
-          "punctuation.section.method.end.java",
-          "punctuation.terminator.java",
-          "punctuation.section.class.begin.java",
-          "punctuation.section.class.end.java",
-          "punctuation.section.inner-class.begin.java",
-          "punctuation.section.inner-class.end.java",
-          "meta.method-call.java",
-          "punctuation.section.class.begin.bracket.curly.java",
-          "punctuation.section.class.end.bracket.curly.java",
-          "punctuation.section.method.begin.bracket.curly.java",
-          "punctuation.section.method.end.bracket.curly.java",
-          "punctuation.separator.period.java",
-          "punctuation.bracket.angle.java",
-          "punctuation.definition.annotation.java",
-          "meta.method.body.java",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.method.java",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: ["storage.modifier.import.java", "storage.type.java", "storage.type.generic.java"],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "keyword.operator.instanceof.java",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "meta.definition.variable.name.java",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "token.variable.parameter.java",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "import.storage.java",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "token.package.keyword",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "token.package",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "token.storage.type.java",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "keyword.operator.assignment.go",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: ["keyword.operator.arithmetic.go", "keyword.operator.address.go"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "entity.name.package.go",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "support.other.namespace.use.php",
-          "support.other.namespace.use-as.php",
-          "support.other.namespace.php",
-          "entity.other.alias.php",
-          "meta.interface.php",
-        ],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "keyword.operator.error-control.php",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "keyword.operator.type.php",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["punctuation.section.array.begin.php", "punctuation.section.array.end.php"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "storage.type.php",
-          "meta.other.type.phpdoc.php",
-          "keyword.other.type.php",
-          "keyword.other.array.phpdoc.php",
-        ],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "meta.function-call.php",
-          "meta.function-call.object.php",
-          "meta.function-call.static.php",
-        ],
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.parameters.begin.bracket.round.php",
-          "punctuation.definition.parameters.end.bracket.round.php",
-          "punctuation.separator.delimiter.php",
-          "punctuation.section.scope.begin.php",
-          "punctuation.section.scope.end.php",
-          "punctuation.terminator.expression.php",
-          "punctuation.definition.arguments.begin.bracket.round.php",
-          "punctuation.definition.arguments.end.bracket.round.php",
-          "punctuation.definition.storage-type.begin.bracket.round.php",
-          "punctuation.definition.storage-type.end.bracket.round.php",
-          "punctuation.definition.array.begin.bracket.round.php",
-          "punctuation.definition.array.end.bracket.round.php",
-          "punctuation.definition.begin.bracket.round.php",
-          "punctuation.definition.end.bracket.round.php",
-          "punctuation.definition.begin.bracket.curly.php",
-          "punctuation.definition.end.bracket.curly.php",
-          "punctuation.definition.section.switch-block.end.bracket.curly.php",
-          "punctuation.definition.section.switch-block.start.bracket.curly.php",
-          "punctuation.definition.section.switch-block.begin.bracket.curly.php",
-          "punctuation.definition.section.switch-block.end.bracket.curly.php",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "support.constant.ext.php",
-          "support.constant.std.php",
-          "support.constant.core.php",
-          "support.constant.parser-token.php",
-        ],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: ["entity.name.goto-label.php", "support.other.php"],
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.logical.php",
-          "keyword.operator.bitwise.php",
-          "keyword.operator.arithmetic.php",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.regexp.php",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "keyword.operator.comparison.php",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["keyword.operator.heredoc.php", "keyword.operator.nowdoc.php"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "variable.other.class.php",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "invalid.illegal.non-null-typehinted.php",
-        settings: {
-          foreground: "#f44747",
-        },
-      },
-      {
-        scope: "variable.other.generic-type.haskell",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "storage.type.haskell",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "storage.type.cs",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "entity.name.variable.local.cs",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "entity.name.label.cs",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "entity.name.scope-resolution.function.call",
-          "entity.name.scope-resolution.function.definition",
-        ],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.delayed.unison",
-          "punctuation.definition.list.begin.unison",
-          "punctuation.definition.list.end.unison",
-          "punctuation.definition.ability.begin.unison",
-          "punctuation.definition.ability.end.unison",
-          "punctuation.operator.assignment.as.unison",
-          "punctuation.separator.pipe.unison",
-          "punctuation.separator.delimiter.unison",
-          "punctuation.definition.hash.unison",
-        ],
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "support.constant.edge",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "support.type.prelude.elm",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.constant.elm",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "entity.global.clojure",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "meta.symbol.clojure",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "constant.keyword.clojure",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["meta.arguments.coffee", "variable.parameter.function.coffee"],
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "storage.modifier.import.groovy",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "meta.method.groovy",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "meta.definition.variable.name.groovy",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "meta.definition.class.inherited.classes.groovy",
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: "support.variable.semantic.hlsl",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "support.type.texture.hlsl",
-          "support.type.sampler.hlsl",
-          "support.type.object.hlsl",
-          "support.type.object.rw.hlsl",
-          "support.type.fx.hlsl",
-          "support.type.object.hlsl",
-        ],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["text.variable", "text.bracketed"],
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: ["support.type.swift", "support.type.vb.asp"],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "meta.scope.prerequisites.makefile",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "source.makefile",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "source.ini",
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: "constant.language.symbol.ruby",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["function.parameter.ruby", "function.parameter.cs"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "constant.language.symbol.elixir",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope:
-          "text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope:
-          "text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "entity.name.function.xi",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "entity.name.class.xi",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "constant.character.character-class.regexp.xi",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "constant.regexp.xi",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "keyword.control.xi",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "invalid.xi",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "beginning.punctuation.definition.quote.markdown.xi",
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: "beginning.punctuation.definition.list.markdown.xi",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: "constant.character.xi",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "accent.xi",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "wikiword.xi",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "constant.other.color.rgb-value.xi",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "punctuation.definition.tag.xi",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: ["support.constant.property-value.scss", "support.constant.property-value.css"],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: ["keyword.operator.css", "keyword.operator.scss", "keyword.operator.less"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: [
-          "support.constant.color.w3c-standard-color-name.css",
-          "support.constant.color.w3c-standard-color-name.scss",
-        ],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "punctuation.separator.list.comma.css",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.type.vendored.property-name.css",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.type.property-name.css",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.type.property-name",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.constant.property-value",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.constant.font-name",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "entity.other.attribute-name.class.css",
-        settings: {
-          foreground: "#16a994",
-          fontStyle: "normal",
-        },
-      },
-      {
-        scope: "entity.other.attribute-name.id",
-        settings: {
-          foreground: "#7b43f8",
-          fontStyle: "normal",
-        },
-      },
-      {
-        scope: [
-          "entity.other.attribute-name.pseudo-element",
-          "entity.other.attribute-name.pseudo-class",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "meta.selector",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "selector.sass",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "rgb-value",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "inline-color-decoration rgb-value",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "less rgb-value",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "control.elements",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "keyword.operator.less",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "entity.name.tag",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "entity.other.attribute-name",
-        settings: {
-          foreground: "#16a994",
-          fontStyle: "normal",
-        },
-      },
-      {
-        scope: "constant.character.entity",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "meta.tag",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "invalid.illegal.bad-ampersand.html",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "markup.heading",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: ["markup.heading punctuation.definition.heading", "entity.name.section"],
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "entity.name.section.markdown",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "punctuation.definition.heading.markdown",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "markup.heading.setext",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["markup.heading.setext.1.markdown", "markup.heading.setext.2.markdown"],
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: ["markup.bold", "todo.bold"],
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "punctuation.definition.bold",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "punctuation.definition.bold.markdown",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: ["markup.italic", "punctuation.definition.italic", "todo.emphasis"],
-        settings: {
-          foreground: "#fc2b73",
-          fontStyle: "italic",
-        },
-      },
-      {
-        scope: "emphasis md",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "markup.italic.markdown",
-        settings: {
-          fontStyle: "italic",
-        },
-      },
-      {
-        scope: ["markup.underline.link.markdown", "markup.underline.link.image.markdown"],
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: ["string.other.link.title.markdown", "string.other.link.description.markdown"],
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "punctuation.definition.metadata.markdown",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: ["markup.inline.raw.markdown", "markup.inline.raw.string.markdown"],
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: "punctuation.definition.list.begin.markdown",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "punctuation.definition.list.markdown",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "beginning.punctuation.definition.list.markdown",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.string.begin.markdown",
-          "punctuation.definition.string.end.markdown",
-        ],
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "markup.quote.markdown",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: "keyword.other.unit",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "markup.changed.diff",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: [
-          "meta.diff.header.from-file",
-          "meta.diff.header.to-file",
-          "punctuation.definition.from-file.diff",
-          "punctuation.definition.to-file.diff",
-        ],
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "markup.inserted.diff",
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: "markup.deleted.diff",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "string.regexp",
-        settings: {
-          foreground: "#17a5af",
-        },
-      },
-      {
-        scope: "constant.other.character-class.regexp",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "keyword.operator.quantifier.regexp",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "constant.character.escape",
-        settings: {
-          foreground: "#1ca1c7",
-        },
-      },
-      {
-        scope: "source.json meta.structure.dictionary.json > string.quoted.json",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope:
-          "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: [
-          "source.json meta.structure.dictionary.json > value.json > string.quoted.json",
-          "source.json meta.structure.array.json > value.json > string.quoted.json",
-          "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation",
-          "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",
-        ],
-        settings: {
-          foreground: "#199f43",
-        },
-      },
-      {
-        scope: [
-          "source.json meta.structure.dictionary.json > constant.language.json",
-          "source.json meta.structure.array.json > constant.language.json",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.type.property-name.json",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "support.type.property-name.json punctuation",
-        settings: {
-          foreground: "#d52c36",
-        },
-      },
-      {
-        scope: "punctuation.definition.block.sequence.item.yaml",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "block.scope.end",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "block.scope.begin",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "token.info-token",
-        settings: {
-          foreground: "#7b43f8",
-        },
-      },
-      {
-        scope: "token.warn-token",
-        settings: {
-          foreground: "#d5a910",
-        },
-      },
-      {
-        scope: "token.error-token",
-        settings: {
-          foreground: "#f44747",
-        },
-      },
-      {
-        scope: "token.debug-token",
-        settings: {
-          foreground: "#fc2b73",
-        },
-      },
-      {
-        scope: "invalid.illegal",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "invalid.broken",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "invalid.deprecated",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "invalid.unimplemented",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
+  },
+  {
+    scope: ["entity.other.attribute-name"],
+    settings: {
+      foreground: "var(--syntax-property)", // maybe attribute
+    },
+  },
+  {
+    scope: [
+      "constant",
+      "entity.name.constant",
+      "variable.other.constant",
+      "variable.language",
+      "entity",
+    ],
+    settings: {
+      foreground: "var(--syntax-constant)",
+    },
+  },
+  {
+    scope: ["entity.name", "meta.export.default", "meta.definition.variable"],
+    settings: {
+      foreground: "var(--syntax-type)",
+    },
+  },
+  {
+    scope: [
+      "variable.parameter.function",
+      "meta.jsx.children",
+      "meta.block",
+      "meta.tag.attributes",
+      "entity.name.constant",
+      "meta.object.member",
+      "meta.embedded.expression",
+      "meta.template.expression",
+      "string.other.begin.yaml",
+      "string.other.end.yaml",
+    ],
+    settings: {
+      foreground: "var(--syntax-punctuation)",
+    },
+  },
+  {
+    scope: ["entity.name.function", "support.type.primitive"],
+    settings: {
+      foreground: "var(--syntax-primitive)",
+    },
+  },
+  {
+    scope: ["support.class.component"],
+    settings: {
+      foreground: "var(--syntax-type)",
+    },
+  },
+  {
+    scope: "keyword",
+    settings: {
+      foreground: "var(--syntax-keyword)",
+    },
+  },
+  {
+    scope: [
+      "keyword.operator",
+      "storage.type.function.arrow",
+      "punctuation.separator.key-value.css",
+      "entity.name.tag.yaml",
+      "punctuation.separator.key-value.mapping.yaml",
     ],
-    semanticTokenColors: {
-      comment: "#84848A",
-      string: "#199f43",
-      number: "#1ca1c7",
-      regexp: "#17a5af",
-      keyword: "#fc2b73",
-      variable: "#d47628",
-      parameter: "#79797F",
-      property: "#d47628",
-      function: "#7b43f8",
-      method: "#7b43f8",
-      type: "#c635e4",
-      class: "#c635e4",
-      namespace: "#d5a910",
-      enumMember: "#08c0ef",
-      "variable.constant": "#d5a910",
-      "variable.defaultLibrary": "#d5a910",
+    settings: {
+      foreground: "var(--syntax-operator)",
+    },
+  },
+  {
+    scope: ["storage", "storage.type"],
+    settings: {
+      foreground: "var(--syntax-keyword)",
+    },
+  },
+  {
+    scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+    settings: {
+      foreground: "var(--syntax-primitive)",
+    },
+  },
+  {
+    scope: [
+      "string",
+      "punctuation.definition.string",
+      "string punctuation.section.embedded source",
+      "entity.name.tag",
+    ],
+    settings: {
+      foreground: "var(--syntax-string)",
+    },
+  },
+  {
+    scope: "support",
+    settings: {
+      foreground: "var(--syntax-primitive)",
+    },
+  },
+  {
+    scope: [
+      "support.type.object.module",
+      "variable.other.object",
+      "support.type.property-name.css",
+    ],
+    settings: {
+      foreground: "var(--syntax-object)",
+    },
+  },
+  {
+    scope: "meta.property-name",
+    settings: {
+      foreground: "var(--syntax-property)",
+    },
+  },
+  {
+    scope: "variable",
+    settings: {
+      foreground: "var(--syntax-variable)",
+    },
+  },
+  {
+    scope: "variable.other",
+    settings: {
+      foreground: "var(--syntax-variable)",
+    },
+  },
+  {
+    scope: [
+      "invalid.broken",
+      "invalid.illegal",
+      "invalid.unimplemented",
+      "invalid.deprecated",
+      "message.error",
+      "markup.deleted",
+      "meta.diff.header.from-file",
+      "punctuation.definition.deleted",
+      "brackethighlighter.unmatched",
+      "token.error-token",
+    ],
+    settings: {
+      foreground: "var(--syntax-critical)",
+    },
+  },
+  {
+    scope: "carriage-return",
+    settings: {
+      foreground: "var(--syntax-keyword)",
+    },
+  },
+  {
+    scope: "string source",
+    settings: {
+      foreground: "var(--syntax-variable)",
+    },
+  },
+  {
+    scope: "string variable",
+    settings: {
+      foreground: "var(--syntax-constant)",
+    },
+  },
+  {
+    scope: [
+      "source.regexp",
+      "string.regexp",
+      "string.regexp.character-class",
+      "string.regexp constant.character.escape",
+      "string.regexp source.ruby.embedded",
+      "string.regexp string.regexp.arbitrary-repitition",
+      "string.regexp constant.character.escape",
+    ],
+    settings: {
+      foreground: "var(--syntax-regexp)",
+    },
+  },
+  {
+    scope: "support.constant",
+    settings: {
+      foreground: "var(--syntax-primitive)",
+    },
+  },
+  {
+    scope: "support.variable",
+    settings: {
+      foreground: "var(--syntax-variable)",
+    },
+  },
+  {
+    scope: "meta.module-reference",
+    settings: {
+      foreground: "var(--syntax-info)",
+    },
+  },
+  {
+    scope: "punctuation.definition.list.begin.markdown",
+    settings: {
+      foreground: "var(--syntax-punctuation)",
+    },
+  },
+  {
+    scope: ["markup.heading", "markup.heading entity.name"],
+    settings: {
+      fontStyle: "bold",
+      foreground: "var(--syntax-info)",
+    },
+  },
+  {
+    scope: "markup.quote",
+    settings: {
+      foreground: "var(--syntax-info)",
+    },
+  },
+  {
+    scope: "markup.italic",
+    settings: {
+      fontStyle: "italic",
+      // foreground: "",
+    },
+  },
+  {
+    scope: "markup.bold",
+    settings: {
+      fontStyle: "bold",
+      foreground: "var(--text-strong)",
+    },
+  },
+  {
+    scope: [
+      "markup.raw",
+      "markup.inserted",
+      "meta.diff.header.to-file",
+      "punctuation.definition.inserted",
+      "markup.changed",
+      "punctuation.definition.changed",
+      "markup.ignored",
+      "markup.untracked",
+    ],
+    settings: {
+      foreground: "var(--text-base)",
+    },
+  },
+  {
+    scope: "meta.diff.range",
+    settings: {
+      fontStyle: "bold",
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: "meta.diff.header",
+    settings: {
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: "meta.separator",
+    settings: {
+      fontStyle: "bold",
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: "meta.output",
+    settings: {
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: "meta.export.default",
+    settings: {
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: [
+      "brackethighlighter.tag",
+      "brackethighlighter.curly",
+      "brackethighlighter.round",
+      "brackethighlighter.square",
+      "brackethighlighter.angle",
+      "brackethighlighter.quote",
+    ],
+    settings: {
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: ["constant.other.reference.link", "string.other.link"],
+    settings: {
+      fontStyle: "underline",
+      foreground: "var(--syntax-unknown)",
+    },
+  },
+  {
+    scope: "token.info-token",
+    settings: {
+      foreground: "var(--syntax-info)",
+    },
+  },
+  {
+    scope: "token.warn-token",
+    settings: {
+      foreground: "var(--syntax-warning)",
     },
+  },
+  {
+    scope: "token.debug-token",
+    settings: {
+      foreground: "var(--syntax-info)",
+    },
+  },
+]
+
+const semanticTokenColors = {
+  comment: "var(--syntax-comment)",
+  string: "var(--syntax-string)",
+  number: "var(--syntax-constant)",
+  regexp: "var(--syntax-regexp)",
+  keyword: "var(--syntax-keyword)",
+  variable: "var(--syntax-variable)",
+  parameter: "var(--syntax-variable)",
+  property: "var(--syntax-property)",
+  function: "var(--syntax-primitive)",
+  method: "var(--syntax-primitive)",
+  type: "var(--syntax-type)",
+  class: "var(--syntax-type)",
+  namespace: "var(--syntax-type)",
+  enumMember: "var(--syntax-primitive)",
+  "variable.constant": "var(--syntax-constant)",
+  "variable.defaultLibrary": "var(--syntax-unknown)",
+}
+
+registerCustomTheme("oc-1-light", () => {
+  return Promise.resolve({
+    type: "light",
+    name: "oc-1-light",
+    colors,
+    tokenColors,
+    semanticTokenColors,
   } as unknown as ThemeRegistrationResolved)
 })
 
@@ -1969,1783 +567,8 @@ registerCustomTheme("oc-1-dark", () => {
   return Promise.resolve({
     name: "oc-1-dark",
     type: "dark",
-    colors: {
-      "editor.background": "transparent",
-      "editor.foreground": "#fbfbfb",
-      foreground: "#fbfbfb",
-      focusBorder: "#1a76d4",
-      "selection.background": "#19253c",
-      "editor.selectionBackground": "#1a76d44d",
-      "editor.lineHighlightBackground": "#19253c8c",
-      "editorCursor.foreground": "#1a76d4",
-      "editorLineNumber.foreground": "#84848A",
-      "editorLineNumber.activeForeground": "#adadb1",
-      "editorIndentGuide.background": "#39393c",
-      "editorIndentGuide.activeBackground": "#2e2e30",
-      "diffEditor.insertedTextBackground": "#00cab11a",
-      "diffEditor.deletedTextBackground": "#ff2e3f1a",
-      "sideBar.background": "#141415",
-      "sideBar.foreground": "#adadb1",
-      "sideBar.border": "#070707",
-      "sideBarTitle.foreground": "#fbfbfb",
-      "sideBarSectionHeader.background": "#141415",
-      "sideBarSectionHeader.foreground": "#adadb1",
-      "sideBarSectionHeader.border": "#070707",
-      "activityBar.background": "#141415",
-      "activityBar.foreground": "#fbfbfb",
-      "activityBar.border": "#070707",
-      "activityBar.activeBorder": "#1a76d4",
-      "activityBarBadge.background": "#1a76d4",
-      "activityBarBadge.foreground": "#070707",
-      "titleBar.activeBackground": "#141415",
-      "titleBar.activeForeground": "#fbfbfb",
-      "titleBar.inactiveBackground": "#141415",
-      "titleBar.inactiveForeground": "#84848A",
-      "titleBar.border": "#070707",
-      "list.activeSelectionBackground": "#19253c99",
-      "list.activeSelectionForeground": "#fbfbfb",
-      "list.inactiveSelectionBackground": "#19253c73",
-      "list.hoverBackground": "#19253c59",
-      "list.focusOutline": "#1a76d4",
-      "tab.activeBackground": "#070707",
-      "tab.activeForeground": "#fbfbfb",
-      "tab.activeBorderTop": "#1a76d4",
-      "tab.inactiveBackground": "#141415",
-      "tab.inactiveForeground": "#84848A",
-      "tab.border": "#070707",
-      "editorGroupHeader.tabsBackground": "#141415",
-      "editorGroupHeader.tabsBorder": "#070707",
-      "panel.background": "#141415",
-      "panel.border": "#070707",
-      "panelTitle.activeBorder": "#1a76d4",
-      "panelTitle.activeForeground": "#fbfbfb",
-      "panelTitle.inactiveForeground": "#84848A",
-      "statusBar.background": "#141415",
-      "statusBar.foreground": "#adadb1",
-      "statusBar.border": "#070707",
-      "statusBar.noFolderBackground": "#141415",
-      "statusBar.debuggingBackground": "#ffca00",
-      "statusBar.debuggingForeground": "#070707",
-      "statusBarItem.remoteBackground": "#141415",
-      "statusBarItem.remoteForeground": "#adadb1",
-      "input.background": "#1F1F21",
-      "input.border": "#424245",
-      "input.foreground": "#fbfbfb",
-      "input.placeholderForeground": "#79797F",
-      "dropdown.background": "#1F1F21",
-      "dropdown.border": "#424245",
-      "dropdown.foreground": "#fbfbfb",
-      "button.background": "#1a76d4",
-      "button.foreground": "#070707",
-      "button.hoverBackground": "#186bc0",
-      "textLink.foreground": "#1a76d4",
-      "textLink.activeForeground": "#1a76d4",
-      "gitDecoration.addedResourceForeground": "#00cab1",
-      "gitDecoration.conflictingResourceForeground": "#ffca00",
-      "gitDecoration.modifiedResourceForeground": "#1a76d4",
-      "gitDecoration.deletedResourceForeground": "#ff2e3f",
-      "gitDecoration.untrackedResourceForeground": "#00cab1",
-      "gitDecoration.ignoredResourceForeground": "#84848A",
-      "terminal.titleForeground": "#adadb1",
-      "terminal.titleInactiveForeground": "#84848A",
-      "terminal.background": "#141415",
-      "terminal.foreground": "#adadb1",
-      "terminal.ansiBlack": "#141415",
-      "terminal.ansiRed": "#ff2e3f",
-      "terminal.ansiGreen": "#0dbe4e",
-      "terminal.ansiYellow": "#ffca00",
-      "terminal.ansiBlue": "#008cff",
-      "terminal.ansiMagenta": "#c635e4",
-      "terminal.ansiCyan": "#08c0ef",
-      "terminal.ansiWhite": "#c6c6c8",
-      "terminal.ansiBrightBlack": "#141415",
-      "terminal.ansiBrightRed": "#ff2e3f",
-      "terminal.ansiBrightGreen": "#0dbe4e",
-      "terminal.ansiBrightYellow": "#ffca00",
-      "terminal.ansiBrightBlue": "#008cff",
-      "terminal.ansiBrightMagenta": "#c635e4",
-      "terminal.ansiBrightCyan": "#08c0ef",
-      "terminal.ansiBrightWhite": "#c6c6c8",
-    },
-    tokenColors: [
-      {
-        scope: ["comment", "punctuation.definition.comment"],
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: "comment markup.link",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: ["string", "constant.other.symbol"],
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: ["punctuation.definition.string.begin", "punctuation.definition.string.end"],
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: ["constant.numeric", "constant.language.boolean"],
-        settings: {
-          foreground: "#68cdf2",
-        },
-      },
-      {
-        scope: "constant",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "punctuation.definition.constant",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "constant.language",
-        settings: {
-          foreground: "#68cdf2",
-        },
-      },
-      {
-        scope: "variable.other.constant",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "keyword",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "keyword.control",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["storage", "storage.type", "storage.modifier"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "token.storage",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.new",
-          "keyword.operator.expression.instanceof",
-          "keyword.operator.expression.typeof",
-          "keyword.operator.expression.void",
-          "keyword.operator.expression.delete",
-          "keyword.operator.expression.in",
-          "keyword.operator.expression.of",
-          "keyword.operator.expression.keyof",
-        ],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "keyword.operator.delete",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["variable", "identifier", "meta.definition.variable"],
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: [
-          "variable.other.readwrite",
-          "meta.object-literal.key",
-          "support.variable.property",
-          "support.variable.object.process",
-          "support.variable.object.node",
-        ],
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: "variable.language",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "variable.parameter.function",
-        settings: {
-          foreground: "#adadb1",
-        },
-      },
-      {
-        scope: "function.parameter",
-        settings: {
-          foreground: "#adadb1",
-        },
-      },
-      {
-        scope: "variable.parameter",
-        settings: {
-          foreground: "#adadb1",
-        },
-      },
-      {
-        scope: "variable.parameter.function.language.python",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "variable.parameter.function.python",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: [
-          "support.function",
-          "entity.name.function",
-          "meta.function-call",
-          "meta.require",
-          "support.function.any-method",
-          "variable.function",
-        ],
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "keyword.other.special-method",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "entity.name.function",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "support.function.console",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: ["support.type", "entity.name.type", "entity.name.class", "storage.type"],
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: ["support.class", "entity.name.type.class"],
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: ["entity.name.class", "variable.other.class.js", "variable.other.class.ts"],
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: "entity.name.class.identifier.namespace.type",
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: "entity.name.type.namespace",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "entity.other.inherited-class",
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: "entity.name.namespace",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "keyword.operator",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["keyword.operator.logical", "keyword.operator.bitwise", "keyword.operator.channel"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.arithmetic",
-          "keyword.operator.comparison",
-          "keyword.operator.relational",
-          "keyword.operator.increment",
-          "keyword.operator.decrement",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.assignment",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.assignment.compound",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.assignment.compound.js",
-          "keyword.operator.assignment.compound.ts",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.ternary",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "keyword.operator.optional",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "punctuation",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.separator.delimiter",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.separator.key-value",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.terminator",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.brace",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.brace.square",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.brace.round",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "function.brace",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["punctuation.definition.parameters", "punctuation.definition.typeparameters"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["punctuation.definition.block", "punctuation.definition.tag"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["meta.tag.tsx", "meta.tag.jsx", "meta.tag.js", "meta.tag.ts"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "keyword.operator.expression.import",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "keyword.operator.module",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "support.type.object.console",
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: ["support.module.node", "support.type.object.module", "entity.name.type.module"],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "support.constant.math",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "support.constant.property.math",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "support.constant.json",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "support.type.object.dom",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["support.variable.dom", "support.variable.property.dom"],
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: "support.variable.property.process",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "meta.property.object",
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: "variable.parameter.function.js",
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: ["keyword.other.template.begin", "keyword.other.template.end"],
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: ["keyword.other.substitution.begin", "keyword.other.substitution.end"],
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.template-expression.begin",
-          "punctuation.definition.template-expression.end",
-        ],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "meta.template.expression",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "punctuation.section.embedded",
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: "variable.interpolation",
-        settings: {
-          foreground: "#ffa359",
-        },
-      },
-      {
-        scope: ["punctuation.section.embedded.begin", "punctuation.section.embedded.end"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "punctuation.quasi.element",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: [
-          "support.type.primitive.ts",
-          "support.type.builtin.ts",
-          "support.type.primitive.tsx",
-          "support.type.builtin.tsx",
-        ],
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: "support.type.type.flowtype",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "support.type.primitive",
-        settings: {
-          foreground: "#d568ea",
-        },
-      },
-      {
-        scope: "support.variable.magic.python",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "variable.parameter.function.language.special.self.python",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "punctuation.separator.period.python",
-          "punctuation.separator.element.python",
-          "punctuation.parenthesis.begin.python",
-          "punctuation.parenthesis.end.python",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.arguments.begin.python",
-          "punctuation.definition.arguments.end.python",
-          "punctuation.separator.arguments.python",
-          "punctuation.definition.list.begin.python",
-          "punctuation.definition.list.end.python",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.type.python",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.logical.python",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "meta.function-call.generic.python",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "constant.character.format.placeholder.other.python",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "meta.function.decorator.python",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: ["support.token.decorator.python", "meta.function.decorator.identifier.python"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "storage.modifier.lifetime.rust",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.function.std.rust",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "entity.name.lifetime.rust",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "variable.language.rust",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "keyword.operator.misc.rust",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "keyword.operator.sigil.rust",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "support.constant.core.rust",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: ["meta.function.c", "meta.function.cpp"],
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: [
-          "punctuation.section.block.begin.bracket.curly.cpp",
-          "punctuation.section.block.end.bracket.curly.cpp",
-          "punctuation.terminator.statement.c",
-          "punctuation.section.block.begin.bracket.curly.c",
-          "punctuation.section.block.end.bracket.curly.c",
-          "punctuation.section.parens.begin.bracket.round.c",
-          "punctuation.section.parens.end.bracket.round.c",
-          "punctuation.section.parameters.begin.bracket.round.c",
-          "punctuation.section.parameters.end.bracket.round.c",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.assignment.c",
-          "keyword.operator.comparison.c",
-          "keyword.operator.c",
-          "keyword.operator.increment.c",
-          "keyword.operator.decrement.c",
-          "keyword.operator.bitwise.shift.c",
-        ],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.assignment.cpp",
-          "keyword.operator.comparison.cpp",
-          "keyword.operator.cpp",
-          "keyword.operator.increment.cpp",
-          "keyword.operator.decrement.cpp",
-          "keyword.operator.bitwise.shift.cpp",
-        ],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["punctuation.separator.c", "punctuation.separator.cpp"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["support.type.posix-reserved.c", "support.type.posix-reserved.cpp"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["keyword.operator.sizeof.c", "keyword.operator.sizeof.cpp"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "variable.c",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["storage.type.annotation.java", "storage.type.object.array.java"],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "source.java",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: [
-          "punctuation.section.block.begin.java",
-          "punctuation.section.block.end.java",
-          "punctuation.definition.method-parameters.begin.java",
-          "punctuation.definition.method-parameters.end.java",
-          "meta.method.identifier.java",
-          "punctuation.section.method.begin.java",
-          "punctuation.section.method.end.java",
-          "punctuation.terminator.java",
-          "punctuation.section.class.begin.java",
-          "punctuation.section.class.end.java",
-          "punctuation.section.inner-class.begin.java",
-          "punctuation.section.inner-class.end.java",
-          "meta.method-call.java",
-          "punctuation.section.class.begin.bracket.curly.java",
-          "punctuation.section.class.end.bracket.curly.java",
-          "punctuation.section.method.begin.bracket.curly.java",
-          "punctuation.section.method.end.bracket.curly.java",
-          "punctuation.separator.period.java",
-          "punctuation.bracket.angle.java",
-          "punctuation.definition.annotation.java",
-          "meta.method.body.java",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "meta.method.java",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: ["storage.modifier.import.java", "storage.type.java", "storage.type.generic.java"],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "keyword.operator.instanceof.java",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "meta.definition.variable.name.java",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "token.variable.parameter.java",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "import.storage.java",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "token.package.keyword",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "token.package",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "token.storage.type.java",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "keyword.operator.assignment.go",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: ["keyword.operator.arithmetic.go", "keyword.operator.address.go"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "entity.name.package.go",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "support.other.namespace.use.php",
-          "support.other.namespace.use-as.php",
-          "support.other.namespace.php",
-          "entity.other.alias.php",
-          "meta.interface.php",
-        ],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "keyword.operator.error-control.php",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "keyword.operator.type.php",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["punctuation.section.array.begin.php", "punctuation.section.array.end.php"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "storage.type.php",
-          "meta.other.type.phpdoc.php",
-          "keyword.other.type.php",
-          "keyword.other.array.phpdoc.php",
-        ],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "meta.function-call.php",
-          "meta.function-call.object.php",
-          "meta.function-call.static.php",
-        ],
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.parameters.begin.bracket.round.php",
-          "punctuation.definition.parameters.end.bracket.round.php",
-          "punctuation.separator.delimiter.php",
-          "punctuation.section.scope.begin.php",
-          "punctuation.section.scope.end.php",
-          "punctuation.terminator.expression.php",
-          "punctuation.definition.arguments.begin.bracket.round.php",
-          "punctuation.definition.arguments.end.bracket.round.php",
-          "punctuation.definition.storage-type.begin.bracket.round.php",
-          "punctuation.definition.storage-type.end.bracket.round.php",
-          "punctuation.definition.array.begin.bracket.round.php",
-          "punctuation.definition.array.end.bracket.round.php",
-          "punctuation.definition.begin.bracket.round.php",
-          "punctuation.definition.end.bracket.round.php",
-          "punctuation.definition.begin.bracket.curly.php",
-          "punctuation.definition.end.bracket.curly.php",
-          "punctuation.definition.section.switch-block.end.bracket.curly.php",
-          "punctuation.definition.section.switch-block.start.bracket.curly.php",
-          "punctuation.definition.section.switch-block.begin.bracket.curly.php",
-          "punctuation.definition.section.switch-block.end.bracket.curly.php",
-        ],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: [
-          "support.constant.ext.php",
-          "support.constant.std.php",
-          "support.constant.core.php",
-          "support.constant.parser-token.php",
-        ],
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: ["entity.name.goto-label.php", "support.other.php"],
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: [
-          "keyword.operator.logical.php",
-          "keyword.operator.bitwise.php",
-          "keyword.operator.arithmetic.php",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "keyword.operator.regexp.php",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "keyword.operator.comparison.php",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["keyword.operator.heredoc.php", "keyword.operator.nowdoc.php"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "variable.other.class.php",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "invalid.illegal.non-null-typehinted.php",
-        settings: {
-          foreground: "#f44747",
-        },
-      },
-      {
-        scope: "variable.other.generic-type.haskell",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "storage.type.haskell",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "storage.type.cs",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "entity.name.variable.local.cs",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "entity.name.label.cs",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "entity.name.scope-resolution.function.call",
-          "entity.name.scope-resolution.function.definition",
-        ],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.delayed.unison",
-          "punctuation.definition.list.begin.unison",
-          "punctuation.definition.list.end.unison",
-          "punctuation.definition.ability.begin.unison",
-          "punctuation.definition.ability.end.unison",
-          "punctuation.operator.assignment.as.unison",
-          "punctuation.separator.pipe.unison",
-          "punctuation.separator.delimiter.unison",
-          "punctuation.definition.hash.unison",
-        ],
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "support.constant.edge",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "support.type.prelude.elm",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.constant.elm",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "entity.global.clojure",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "meta.symbol.clojure",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "constant.keyword.clojure",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["meta.arguments.coffee", "variable.parameter.function.coffee"],
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "storage.modifier.import.groovy",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "meta.method.groovy",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "meta.definition.variable.name.groovy",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "meta.definition.class.inherited.classes.groovy",
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: "support.variable.semantic.hlsl",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "support.type.texture.hlsl",
-          "support.type.sampler.hlsl",
-          "support.type.object.hlsl",
-          "support.type.object.rw.hlsl",
-          "support.type.fx.hlsl",
-          "support.type.object.hlsl",
-        ],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["text.variable", "text.bracketed"],
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: ["support.type.swift", "support.type.vb.asp"],
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "meta.scope.prerequisites.makefile",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "source.makefile",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "source.ini",
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: "constant.language.symbol.ruby",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: ["function.parameter.ruby", "function.parameter.cs"],
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "constant.language.symbol.elixir",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope:
-          "text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope:
-          "text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "entity.name.function.xi",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "entity.name.class.xi",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "constant.character.character-class.regexp.xi",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "constant.regexp.xi",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "keyword.control.xi",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "invalid.xi",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "beginning.punctuation.definition.quote.markdown.xi",
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: "beginning.punctuation.definition.list.markdown.xi",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: "constant.character.xi",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "accent.xi",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "wikiword.xi",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "constant.other.color.rgb-value.xi",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "punctuation.definition.tag.xi",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: ["support.constant.property-value.scss", "support.constant.property-value.css"],
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: ["keyword.operator.css", "keyword.operator.scss", "keyword.operator.less"],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: [
-          "support.constant.color.w3c-standard-color-name.css",
-          "support.constant.color.w3c-standard-color-name.scss",
-        ],
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "punctuation.separator.list.comma.css",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.type.vendored.property-name.css",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.type.property-name.css",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.type.property-name",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.constant.property-value",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "support.constant.font-name",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "entity.other.attribute-name.class.css",
-        settings: {
-          foreground: "#61d5c0",
-          fontStyle: "normal",
-        },
-      },
-      {
-        scope: "entity.other.attribute-name.id",
-        settings: {
-          foreground: "#9d6afb",
-          fontStyle: "normal",
-        },
-      },
-      {
-        scope: [
-          "entity.other.attribute-name.pseudo-element",
-          "entity.other.attribute-name.pseudo-class",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "meta.selector",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "selector.sass",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "rgb-value",
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "inline-color-decoration rgb-value",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "less rgb-value",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "control.elements",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "keyword.operator.less",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "entity.name.tag",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "entity.other.attribute-name",
-        settings: {
-          foreground: "#61d5c0",
-          fontStyle: "normal",
-        },
-      },
-      {
-        scope: "constant.character.entity",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "meta.tag",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "invalid.illegal.bad-ampersand.html",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "markup.heading",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: ["markup.heading punctuation.definition.heading", "entity.name.section"],
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "entity.name.section.markdown",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "punctuation.definition.heading.markdown",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "markup.heading.setext",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: ["markup.heading.setext.1.markdown", "markup.heading.setext.2.markdown"],
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: ["markup.bold", "todo.bold"],
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "punctuation.definition.bold",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: "punctuation.definition.bold.markdown",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: ["markup.italic", "punctuation.definition.italic", "todo.emphasis"],
-        settings: {
-          foreground: "#ff678d",
-          fontStyle: "italic",
-        },
-      },
-      {
-        scope: "emphasis md",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "markup.italic.markdown",
-        settings: {
-          fontStyle: "italic",
-        },
-      },
-      {
-        scope: ["markup.underline.link.markdown", "markup.underline.link.image.markdown"],
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: ["string.other.link.title.markdown", "string.other.link.description.markdown"],
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "punctuation.definition.metadata.markdown",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: ["markup.inline.raw.markdown", "markup.inline.raw.string.markdown"],
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: "punctuation.definition.list.begin.markdown",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "punctuation.definition.list.markdown",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "beginning.punctuation.definition.list.markdown",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: [
-          "punctuation.definition.string.begin.markdown",
-          "punctuation.definition.string.end.markdown",
-        ],
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "markup.quote.markdown",
-        settings: {
-          foreground: "#84848A",
-        },
-      },
-      {
-        scope: "keyword.other.unit",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "markup.changed.diff",
-        settings: {
-          foreground: "#ffca00",
-        },
-      },
-      {
-        scope: [
-          "meta.diff.header.from-file",
-          "meta.diff.header.to-file",
-          "punctuation.definition.from-file.diff",
-          "punctuation.definition.to-file.diff",
-        ],
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "markup.inserted.diff",
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: "markup.deleted.diff",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "string.regexp",
-        settings: {
-          foreground: "#64d1db",
-        },
-      },
-      {
-        scope: "constant.other.character-class.regexp",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "keyword.operator.quantifier.regexp",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "constant.character.escape",
-        settings: {
-          foreground: "#68cdf2",
-        },
-      },
-      {
-        scope: "source.json meta.structure.dictionary.json > string.quoted.json",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope:
-          "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: [
-          "source.json meta.structure.dictionary.json > value.json > string.quoted.json",
-          "source.json meta.structure.array.json > value.json > string.quoted.json",
-          "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation",
-          "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",
-        ],
-        settings: {
-          foreground: "#5ecc71",
-        },
-      },
-      {
-        scope: [
-          "source.json meta.structure.dictionary.json > constant.language.json",
-          "source.json meta.structure.array.json > constant.language.json",
-        ],
-        settings: {
-          foreground: "#08c0ef",
-        },
-      },
-      {
-        scope: "support.type.property-name.json",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "support.type.property-name.json punctuation",
-        settings: {
-          foreground: "#ff6762",
-        },
-      },
-      {
-        scope: "punctuation.definition.block.sequence.item.yaml",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "block.scope.end",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "block.scope.begin",
-        settings: {
-          foreground: "#79797F",
-        },
-      },
-      {
-        scope: "token.info-token",
-        settings: {
-          foreground: "#9d6afb",
-        },
-      },
-      {
-        scope: "token.warn-token",
-        settings: {
-          foreground: "#ffd452",
-        },
-      },
-      {
-        scope: "token.error-token",
-        settings: {
-          foreground: "#f44747",
-        },
-      },
-      {
-        scope: "token.debug-token",
-        settings: {
-          foreground: "#ff678d",
-        },
-      },
-      {
-        scope: "invalid.illegal",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "invalid.broken",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "invalid.deprecated",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-      {
-        scope: "invalid.unimplemented",
-        settings: {
-          foreground: "#ffffff",
-        },
-      },
-    ],
-    semanticTokenColors: {
-      comment: "#84848A",
-      string: "#5ecc71",
-      number: "#68cdf2",
-      regexp: "#64d1db",
-      keyword: "#ff678d",
-      variable: "#ffa359",
-      parameter: "#adadb1",
-      property: "#ffa359",
-      function: "#9d6afb",
-      method: "#9d6afb",
-      type: "#d568ea",
-      class: "#d568ea",
-      namespace: "#ffca00",
-      enumMember: "#08c0ef",
-      "variable.constant": "#ffd452",
-      "variable.defaultLibrary": "#ffca00",
-    },
+    colors,
+    tokenColors,
+    semanticTokenColors,
   } as unknown as ThemeRegistrationResolved)
 })
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index a5f982d6f..95a497ba9 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -196,15 +196,20 @@
   --color-icon-diff-delete-base: var(--icon-diff-delete-base);
   --color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
   --color-syntax-comment: var(--syntax-comment);
+  --color-syntax-regexp: var(--syntax-regexp);
   --color-syntax-string: var(--syntax-string);
   --color-syntax-keyword: var(--syntax-keyword);
   --color-syntax-function: var(--syntax-function);
   --color-syntax-number: var(--syntax-number);
   --color-syntax-operator: var(--syntax-operator);
   --color-syntax-variable: var(--syntax-variable);
+  --color-syntax-property: var(--syntax-property);
+  --color-syntax-parameter: var(--syntax-parameter);
   --color-syntax-type: var(--syntax-type);
   --color-syntax-constant: var(--syntax-constant);
   --color-syntax-punctuation: var(--syntax-punctuation);
+  --color-syntax-namespace: var(--syntax-namespace);
+  --color-syntax-enum: var(--syntax-enum);
   --color-syntax-success: var(--syntax-success);
   --color-syntax-warning: var(--syntax-warning);
   --color-syntax-critical: var(--syntax-critical);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 6187eef9d..431d811da 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -268,20 +268,25 @@
   --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: #8a8a8a;
-  --syntax-string: #d68c27;
-  --syntax-keyword: #3b7dd8;
-  --syntax-function: #d1383d;
-  --syntax-number: #3d9a57;
-  --syntax-operator: #d68c27;
-  --syntax-variable: #b0851f;
-  --syntax-type: #318795;
-  --syntax-constant: #953170;
-  --syntax-punctuation: #1a1a1a;
-  --syntax-success: var(--apple-dark-10);
+  --syntax-comment: var(--text-weaker);
+  --syntax-regexp: var(--text-base);
+  --syntax-string: var(--mint-light-11);
+  --syntax-keyword: var(--text-weak);
+  --syntax-primitive: var(--ember-light-11);
+  --syntax-operator: var(--text-weak);
+  --syntax-variable: var(--text-strong);
+  --syntax-property: var(--lilac-light-11);
+  --syntax-type: var(--cobalt-light-11);
+  --syntax-constant: var(--lilac-light-11);
+  --syntax-punctuation: var(--text-weak);
+  --syntax-object: var(--blue-light-11);
+  --syntax-success: var(--apple-light-10);
   --syntax-warning: var(--amber-light-10);
-  --syntax-critical: var(--ember-dark-9);
-  --syntax-info: var(--lilac-dark-11);
+  --syntax-critical: var(--ember-light-9);
+  --syntax-info: var(--lilac-light-11);
+  --syntax-diff-add: var(--mint-light-11);
+  --syntax-diff-delete: var(--ember-light-11);
+  --syntax-unknown: red;
   --markdown-heading: #d68c27;
   --markdown-text: #1a1a1a;
   --markdown-link: #3b7dd8;
@@ -503,20 +508,24 @@
     --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: #808080;
-    --syntax-string: #9d7cd8;
-    --syntax-keyword: #fab283;
-    --syntax-function: #e06c75;
-    --syntax-number: #7fd88f;
-    --syntax-operator: #f5a742;
-    --syntax-variable: #e5c07b;
-    --syntax-type: #56b6c2;
-    --syntax-constant: #c2569a;
-    --syntax-punctuation: #eeeeee;
+    --syntax-comment: var(--text-weaker);
+    --syntax-regexp: var(--text-base);
+    --syntax-string: var(--mint-dark-11);
+    --syntax-keyword: var(--text-weak);
+    --syntax-primitive: var(--ember-dark-11);
+    --syntax-operator: var(--text-weak);
+    --syntax-variable: var(--text-strong);
+    --syntax-property: var(--lilac-dark-11);
+    --syntax-type: var(--cobalt-dark-11);
+    --syntax-constant: var(--lilac-dark-11);
+    --syntax-punctuation: var(--text-weak);
+    --syntax-object: var(--blue-dark-11);
     --syntax-success: var(--apple-dark-10);
     --syntax-warning: var(--amber-dark-10);
-    --syntax-critical: var(--ember-dark-10);
-    --syntax-info: var(--lilac-dark-10);
+    --syntax-critical: var(--ember-dark-9);
+    --syntax-info: var(--lilac-dark-11);
+    --syntax-diff-add: var(--mint-dark-11);
+    --syntax-diff-delete: var(--ember-dark-11);
     --markdown-heading: #9d7cd8;
     --markdown-text: #eeeeee;
     --markdown-link: #fab283;
diff --git a/theme-test.java b/theme-test.java
new file mode 100644
index 000000000..7c1b582af
--- /dev/null
+++ b/theme-test.java
@@ -0,0 +1,461 @@
+package com.example.theme;
+
+import java.util.*;
+import java.util.concurrent.*;
+import java.util.function.*;
+import java.util.stream.*;
+import java.time.*;
+import java.time.format.*;
+import java.net.*;
+import java.io.*;
+import java.nio.file.*;
+import java.sql.*;
+import java.lang.annotation.*;
+import java.math.BigDecimal;
+import java.math.BigInteger;
+
+// Enum definition
+public enum LogLevel {
+    DEBUG(0, "Debug"),
+    INFO(1, "Info"),
+    WARN(2, "Warning"),
+    ERROR(3, "Error");
+    
+    private final int level;
+    private final String description;
+    
+    LogLevel(int level, String description) {
+        this.level = level;
+        this.description = description;
+    }
+    
+    public int getLevel() { return level; }
+    public String getDescription() { return description; }
+}
+
+// Interface with generics
+public interface Repository<T extends Entity> {
+    Optional<T> findById(Long id);
+    List<T> findAll();
+    T save(T entity);
+    void delete(Long id);
+    Stream<T> stream();
+    
+    @FunctionalInterface
+    interface Predicate<T> {
+        boolean test(T t);
+    }
+}
+
+// Abstract class
+public abstract class AbstractService<T extends Entity> implements Repository<T> {
+    protected final Map<Long, T> cache = new ConcurrentHashMap<>();
+    protected volatile boolean initialized = false;
+    
+    @Override
+    public Optional<T> findById(Long id) {
+        return Optional.ofNullable(cache.get(id));
+    }
+    
+    @Override
+    public List<T> findAll() {
+        return new ArrayList<>(cache.values());
+    }
+    
+    @Override
+    public Stream<T> stream() {
+        return cache.values().stream();
+    }
+    
+    protected abstract void validate(T entity) throws ValidationException;
+}
+
+// Annotation definition
+@Retention(RetentionPolicy.RUNTIME)
+@Target({ElementType.TYPE, ElementType.METHOD})
+public @interface Service {
+    String value() default "";
+    boolean transactional() default true;
+    Class<?>[] exceptions() = {};
+}
+
+// Record class (Java 14+)
+public record User(
+    Long id,
+    String username,
+    String email,
+    @Deprecated String fullName,
+    LocalDateTime createdAt,
+    boolean active
+) implements Entity {
+    
+    public User {
+        Objects.requireNonNull(username, "Username cannot be null");
+        Objects.requireNonNull(email, "Email cannot be null");
+        Objects.requireNonNull(createdAt, "Created date cannot be null");
+    }
+    
+    public static User of(String username, String email) {
+        return new User(null, username, email, null, LocalDateTime.now(), true);
+    }
+    
+    public User withId(Long id) {
+        return new User(id, username, email, fullName, createdAt, active);
+    }
+}
+
+// Exception classes
+public class ValidationException extends RuntimeException {
+    private final List<String> errors;
+    
+    public ValidationException(String message) {
+        super(message);
+        this.errors = List.of(message);
+    }
+    
+    public ValidationException(List<String> errors) {
+        super(String.join(", ", errors));
+        this.errors = Collections.unmodifiableList(errors);
+    }
+    
+    public List<String> getErrors() { return errors; }
+}
+
+public class ResourceNotFoundException extends RuntimeException {
+    public ResourceNotFoundException(String resource, Long id) {
+        super(String.format("%s with id %d not found", resource, id));
+    }
+}
+
+// Service implementation
+@Service(value = "userService", transactional = true)
+public class UserService extends AbstractService<User> {
+    
+    private static final Logger logger = LoggerFactory.getLogger(UserService.class);
+    private static final int MAX_RETRY_ATTEMPTS = 3;
+    private static final Duration TIMEOUT = Duration.ofSeconds(30);
+    
+    private final EmailService emailService;
+    private final UserRepository userRepository;
+    private final PasswordEncoder passwordEncoder;
+    
+    @Inject
+    public UserService(EmailService emailService, 
+                       UserRepository userRepository,
+                       PasswordEncoder passwordEncoder) {
+        this.emailService = emailService;
+        this.userRepository = userRepository;
+        this.passwordEncoder = passwordEncoder;
+    }
+    
+    @Override
+    protected void validate(User user) throws ValidationException {
+        List<String> errors = new ArrayList<>();
+        
+        if (user.username() == null || user.username().trim().isEmpty()) {
+            errors.add("Username is required");
+        } else if (!user.username().matches("^[a-zA-Z0-9_]{3,20}$")) {
+            errors.add("Username must be 3-20 characters, alphanumeric and underscore only");
+        }
+        
+        if (user.email() == null || !user.email().matches("^[A-Za-z0-9+_.-]+@(.+)$")) {
+            errors.add("Valid email is required");
+        }
+        
+        if (!errors.isEmpty()) {
+            throw new ValidationException(errors);
+        }
+    }
+    
+    @Transactional
+    public User createUser(CreateUserRequest request) throws ValidationException {
+        logger.info("Creating new user: {}", request.username());
+        
+        // Check if user already exists
+        if (userRepository.findByUsername(request.username()).isPresent()) {
+            throw new ValidationException("Username already exists");
+        }
+        
+        if (userRepository.findByEmail(request.email()).isPresent()) {
+            throw new ValidationException("Email already exists");
+        }
+        
+        // Create new user
+        User user = User.of(request.username(), request.email())
+            .withId(generateId());
+        
+        validate(user);
+        
+        try {
+            User savedUser = userRepository.save(user);
+            cache.put(savedUser.id(), savedUser);
+            
+            // Send welcome email asynchronously
+            CompletableFuture.runAsync(() -> 
+                emailService.sendWelcomeEmail(savedUser)
+            ).exceptionally(throwable -> {
+                logger.error("Failed to send welcome email to user {}", savedUser.id(), throwable);
+                return null;
+            });
+            
+            logger.info("Successfully created user with ID: {}", savedUser.id());
+            return savedUser;
+            
+        } catch (DataAccessException e) {
+            logger.error("Database error while creating user", e);
+            throw new ServiceException("Failed to create user", e);
+        }
+    }
+    
+    public Optional<User> findByUsername(String username) {
+        return cache.values().stream()
+            .filter(user -> user.username().equals(username))
+            .findFirst();
+    }
+    
+    public List<User> findActiveUsers() {
+        return cache.values().stream()
+            .filter(User::active)
+            .sorted(Comparator.comparing(User::createdAt).reversed())
+            .collect(Collectors.toList());
+    }
+    
+    @Retry(maxAttempts = MAX_RETRY_ATTEMPTS, backoff = @Backoff(delay = 1000))
+    public User updateUser(Long id, UpdateUserRequest request) {
+        User existingUser = findById(id)
+            .orElseThrow(() -> new ResourceNotFoundException("User", id));
+        
+        User updatedUser = new User(
+            id,
+            request.username() != null ? request.username() : existingUser.username(),
+            request.email() != null ? request.email() : existingUser.email(),
+            existingUser.fullName(),
+            existingUser.createdAt(),
+            request.active() != null ? request.active() : existingUser.active()
+        );
+        
+        validate(updatedUser);
+        
+        try {
+            User savedUser = userRepository.save(updatedUser);
+            cache.put(id, savedUser);
+            return savedUser;
+        } catch (DataAccessException e) {
+            logger.error("Failed to update user with ID: {}", id, e);
+            throw new ServiceException("Failed to update user", e);
+        }
+    }
+    
+    @Async
+    public CompletableFuture<Void> deleteUser(Long id) {
+        return CompletableFuture.runAsync(() -> {
+            try {
+                userRepository.deleteById(id);
+                cache.remove(id);
+                logger.info("Successfully deleted user with ID: {}", id);
+            } catch (DataAccessException e) {
+                logger.error("Failed to delete user with ID: {}", id, e);
+                throw new ServiceException("Failed to delete user", e);
+            }
+        });
+    }
+    
+    private Long generateId() {
+        return System.currentTimeMillis() + (long)(Math.random() * 1000);
+    }
+}
+
+// Utility class
+public final class DateUtils {
+    
+    private DateUtils() {
+        // Utility class - prevent instantiation
+    }
+    
+    private static final DateTimeFormatter ISO_FORMATTER = 
+        DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSXXX");
+    
+    public static String formatIsoDateTime(LocalDateTime dateTime) {
+        return dateTime.atZone(ZoneId.systemDefault()).format(ISO_FORMATTER);
+    }
+    
+    public static LocalDateTime parseIsoDateTime(String isoString) {
+        return LocalDateTime.parse(isoString, ISO_FORMATTER);
+    }
+    
+    public static boolean isWithinLastDays(LocalDateTime dateTime, int days) {
+        return dateTime.isAfter(LocalDateTime.now().minusDays(days));
+    }
+}
+
+// Builder pattern
+public class UserQueryBuilder {
+    private String username;
+    private String email;
+    private Boolean active;
+    private LocalDateTime createdAfter;
+    private LocalDateTime createdBefore;
+    private SortOrder sortOrder = SortOrder.ASC;
+    private String sortBy = "createdAt";
+    private int limit = 100;
+    private int offset = 0;
+    
+    public UserQueryBuilder withUsername(String username) {
+        this.username = username;
+        return this;
+    }
+    
+    public UserQueryBuilder withEmail(String email) {
+        this.email = email;
+        return this;
+    }
+    
+    public UserQueryBuilder activeOnly(boolean active) {
+        this.active = active;
+        return this;
+    }
+    
+    public UserQueryBuilder createdAfter(LocalDateTime date) {
+        this.createdAfter = date;
+        return this;
+    }
+    
+    public UserQueryBuilder createdBefore(LocalDateTime date) {
+        this.createdBefore = date;
+        return this;
+    }
+    
+    public UserQueryBuilder sortBy(String field, SortOrder order) {
+        this.sortBy = field;
+        this.sortOrder = order;
+        return this;
+    }
+    
+    public UserQueryBuilder limit(int limit) {
+        this.limit = Math.max(1, Math.min(limit, 1000));
+        return this;
+    }
+    
+    public UserQueryBuilder offset(int offset) {
+        this.offset = Math.max(0, offset);
+        return this;
+    }
+    
+    public UserQuery build() {
+        return new UserQuery(username, email, active, createdAfter, createdBefore, 
+                            sortBy, sortOrder, limit, offset);
+    }
+}
+
+// Lambda expressions and streams
+public class StreamProcessor {
+    
+    private static final Map<String, Function<String, Object>> TYPE_CONVERTERS = Map.of(
+        "string", s -> s,
+        "int", Integer::parseInt,
+        "double", Double::parseDouble,
+        "boolean", Boolean::parseBoolean,
+        "bigdecimal", BigDecimal::new,
+        "bigint", BigInteger::new
+    );
+    
+    public Map<String, Object> processConfig(Properties properties) {
+        return properties.entrySet().stream()
+            .filter(entry -> entry.getKey() instanceof String)
+            .filter(entry -> entry.getValue() != null)
+            .collect(Collectors.toMap(
+                entry -> (String) entry.getKey(),
+                entry -> convertValue((String) entry.getKey(), (String) entry.getValue())
+            ));
+    }
+    
+    private Object convertValue(String key, String value) {
+        String type = determineType(key, value);
+        return TYPE_CONVERTERS.getOrDefault(type, Function.identity()).apply(value);
+    }
+    
+    private String determineType(String key, String value) {
+        if (value.equalsIgnoreCase("true") || value.equalsIgnoreCase("false")) {
+            return "boolean";
+        } else if (value.matches("-?\\d+")) {
+            return "int";
+        } else if (value.matches("-?\\d*\\.\\d+")) {
+            return "double";
+        } else if (key.toLowerCase().contains("amount") || key.toLowerCase().contains("price")) {
+            return "bigdecimal";
+        }
+        return "string";
+    }
+    
+    public List<String> validateEmails(List<String> emails) {
+        return emails.stream()
+            .filter(Objects::nonNull)
+            .map(String::trim)
+            .filter(email -> !email.isEmpty())
+            .filter(email -> email.matches("^[A-Za-z0-9+_.-]+@(.+)$"))
+            .distinct()
+            .collect(Collectors.toList());
+    }
+    
+    public CompletableFuture<List<User>> processUsersAsync(List<User> users) {
+        return CompletableFuture.supplyAsync(() -> 
+            users.parallelStream()
+                .filter(User::active)
+                .filter(user -> user.createdAt().isAfter(LocalDateTime.now().minusYears(1)))
+                .sorted(Comparator.comparing(User::username))
+                .collect(Collectors.toList())
+        );
+    }
+}
+
+// Main class for testing
+public class Main {
+    private static final Logger logger = LoggerFactory.getLogger(Main.class);
+    
+    public static void main(String[] args) {
+        try {
+            // Initialize application context
+            ApplicationContext context = new AnnotationConfigApplicationContext(AppConfig.class);
+            
+            // Get service bean
+            UserService userService = context.getBean(UserService.class);
+            
+            // Create test users
+            List<User> users = Arrays.asList(
+                User.of("john_doe", "john@example.com"),
+                User.of("jane_smith", "jane@example.com"),
+                User.of("bob_wilson", "bob@example.com")
+            );
+            
+            // Process users
+            List<CompletableFuture<User>> futures = users.stream()
+                .map(user -> {
+                    try {
+                        return CompletableFuture.completedFuture(userService.createUser(
+                            new CreateUserRequest(user.username(), user.email())
+                        ));
+                    } catch (ValidationException e) {
+                        logger.error("Failed to create user: {}", user.username(), e);
+                        return CompletableFuture.<User>failedFuture(e);
+                    }
+                })
+                .collect(Collectors.toList());
+            
+            // Wait for all to complete
+            CompletableFuture.allOf(futures.toArray(new CompletableFuture[0]))
+                .thenRun(() -> {
+                    logger.info("All users created successfully");
+                    System.out.println("Application started successfully!");
+                })
+                .exceptionally(throwable -> {
+                    logger.error("Failed to initialize users", throwable);
+                    System.err.println("Application startup failed!");
+                    return null;
+                });
+                
+        } catch (Exception e) {
+            logger.error("Application startup failed", e);
+            System.exit(1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-test.md b/theme-test.md
new file mode 100644
index 000000000..3863cc325
--- /dev/null
+++ b/theme-test.md
@@ -0,0 +1,669 @@
+# TextMate Grammar Token Examples
+
+This file contains examples of every major TextMate token style for theme testing.
+
+## Comments
+
+<!-- HTML comment -->
+
+// Single line comment
+/_ Multi-line comment _/
+
+# Shell comment
+
+/_ JSDoc comment with @param and @return _/
+
+## Strings
+
+"Double quoted string"
+'Single quoted string'
+`Backtick string`
+"String with \"escaped\" quotes"
+'String with \'escaped\' quotes'
+`String with \`escaped\` backticks`
+
+## Template Literals
+
+`Simple template literal`
+`Template with ${variable} interpolation`
+`Template with ${function.call()} expression`
+Multi-line template with ${nested.interpolation}
+
+## Numbers
+
+42
+-17
+3.14159
+-0.001
+1e10
+-2.5e-8
+0xFF
+0o755
+0b1010
+
+## Keywords
+
+if else elif for while do switch case default
+function class extends implements import export
+return break continue throw try catch finally
+var let const static async await yield
+new this super null undefined true false
+
+## Storage Types
+
+int float double string boolean char void
+static final abstract private public protected
+readonly volatile transient synchronized
+
+## Constants
+
+MAX_VALUE
+DEFAULT_TIMEOUT
+API_ENDPOINT
+PI
+E
+
+## Variables
+
+variableName
+\_privateVariable
+$specialVariable
+camelCase
+snake_case
+PascalCase
+kebab-case
+
+## Functions
+
+functionName()
+method.call()
+object.property()
+array[index]
+arrowFunction => expression
+
+## Operators
+
+- - - / % ++ --
+      == === != !== > < >= <=
+      && || ! & | ^ ~ << >> >>>
+      = += -= \*= /= %= &= |= ^= <<= >>= >>>=
+
+## Punctuation
+
+, ; : . ... ( ) [ ] { } < > / \\
+
+# @ $ % ^ & \* - \_ + = | ~ ` ?
+
+## Entities
+
+ClassName
+InterfaceName
+EnumName
+TypeName
+MethodName
+PropertyName
+
+## Tags
+
+<div>
+<span>
+<p>
+<a href="link">
+<img src="image.jpg" alt="description" />
+
+## Attributes
+
+class="container"
+id="main"
+data-value="123"
+disabled
+required
+readonly
+
+## CSS Selectors & Properties
+
+.container
+#header
+.button:hover
+input[type="text"]
+::before
+::after
+
+color: #ffffff;
+background: linear-gradient(45deg, #ff0000, #00ff00);
+font-size: 16px;
+margin: 0 auto;
+padding: 10px 20px;
+
+## Regular Expressions
+
+/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+/\d{3}-\d{3}-\d{4}/g
+/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})/
+
+## URLs & Paths
+
+https://example.com/path/to/resource
+file:///Users/username/project
+./relative/path
+../parent/directory
+/home/user/documents
+
+## JSON
+
+{
+"name": "example",
+"version": "1.0.0",
+"dependencies": {
+"react": "^18.0.0",
+"typescript": "^4.9.0"
+},
+"scripts": {
+"start": "node index.js",
+"test": "jest"
+}
+}
+
+## XML/HTML
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div class="content">
+        <h1>Title</h1>
+        <p>Paragraph text</p>
+    </div>
+</body>
+</html>
+
+## SQL
+
+SELECT u.id, u.name, u.email, COUNT(o.id) as order_count
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.active = true
+AND o.created_at >= '2023-01-01'
+GROUP BY u.id, u.name, u.email
+HAVING COUNT(o.id) > 5
+ORDER BY order_count DESC
+LIMIT 10;
+
+## GraphQL
+
+query GetUserProfile($userId: ID!, $includePosts: Boolean!) {
+user(id: $userId) {
+id
+name
+email
+avatar
+createdAt
+posts @include(if: $includePosts) {
+id
+title
+content
+publishedAt
+comments(first: 10) {
+edges {
+node {
+id
+author
+content
+createdAt
+}
+}
+}
+}
+}
+}
+
+## Shell/Bash
+
+#!/bin/bash
+
+# Variables
+
+PROJECT*DIR="/home/user/projects"
+BACKUP_DIR="$PROJECT_DIR/backups"
+TIMESTAMP=$(date +"%Y%m%d*%H%M%S")
+
+# Functions
+
+create*backup() {
+local source_dir=$1
+    local backup_file="$BACKUP_DIR/backup*$TIMESTAMP.tar.gz"
+
+    echo "Creating backup of $source_dir..."
+    tar -czf "$backup_file" "$source_dir"
+    echo "Backup created: $backup_file"
+
+}
+
+# Conditional logic
+
+if [ -d "$PROJECT_DIR" ]; then
+create_backup "$PROJECT_DIR"
+else
+echo "Project directory not found: $PROJECT_DIR"
+exit 1
+fi
+
+## Python
+
+import os
+import sys
+from typing import List, Dict, Optional
+import requests
+from dataclasses import dataclass
+
+@dataclass
+class User:
+id: int
+name: str
+email: Optional[str] = None
+active: bool = True
+
+    def __post_init__(self):
+        if not self.name.strip():
+            raise ValueError("Name cannot be empty")
+
+class UserService:
+def **init**(self, api_url: str):
+self.api_url = api_url
+self.session = requests.Session()
+
+    async def get_user(self, user_id: int) -> Optional[User]:
+        """Fetch user data from API."""
+        try:
+            response = await self.session.get(f"{self.api_url}/users/{user_id}")
+            response.raise_for_status()
+            data = response.json()
+            return User(**data)
+        except requests.RequestException as e:
+            print(f"Error fetching user {user_id}: {e}")
+            return None
+
+## Rust
+
+use std::collections::HashMap;
+use std::fs::File;
+use std::io::{self, Read};
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct User {
+pub id: u64,
+pub name: String,
+pub email: Option<String>, #[serde(default)]
+pub active: bool,
+pub created_at: chrono::DateTime<chrono::Utc>,
+}
+
+impl User {
+pub fn new(id: u64, name: String, email: Option<String>) -> Self {
+Self {
+id,
+name,
+email,
+active: true,
+created_at: chrono::Utc::now(),
+}
+}
+
+    pub fn display_name(&self) -> String {
+        match &self.email {
+            Some(email) => format!("{} <{}>", self.name, email),
+            None => self.name.clone(),
+        }
+    }
+
+}
+
+pub struct UserService {
+api_url: String,
+client: reqwest::Client,
+}
+
+impl UserService {
+pub fn new(api_url: String) -> Self {
+Self {
+api_url,
+client: reqwest::Client::new(),
+}
+}
+
+    pub async fn get_user(&self, user_id: u64) -> Result<User, Box<dyn std::error::Error>> {
+        let url = format!("{}/users/{}", self.api_url, user_id);
+        let response = self.client.get(&url).send().await?;
+        let user: User = response.json().await?;
+        Ok(user)
+    }
+
+}
+
+## Go
+
+package main
+
+import (
+"context"
+"encoding/json"
+"fmt"
+"log"
+"net/http"
+"time"
+"github.com/gorilla/mux"
+)
+
+type User struct {
+ID int64 `json:"id"`
+Name string `json:"name"`
+Email \*string `json:"email,omitempty"`
+Active bool `json:"active"`
+CreatedAt time.Time `json:"created_at"`
+}
+
+type UserService struct {
+re UserRepository
+}
+
+func NewUserService(repo UserRepository) \*UserService {
+return &UserService{repo: repo}
+}
+
+func (s *UserService) GetUser(ctx context.Context, id int64) (*User, error) {
+user, err := s.repo.FindByID(ctx, id)
+if err != nil {
+return nil, fmt.Errorf("failed to get user %d: %w", id, err)
+}
+return user, nil
+}
+
+func (s *UserService) CreateUser(ctx context.Context, req *CreateUserRequest) (\*User, error) {
+user := &User{
+Name: req.Name,
+Email: req.Email,
+Active: true,
+CreatedAt: time.Now(),
+}
+if err := s.repo.Create(ctx, user); err != nil {
+return nil, fmt.Errorf("failed to create user: %w", err)
+}
+return user, nil
+}
+
+## YAML
+
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+name: web-app
+namespace: production
+labels:
+app: web-app
+version: v1.2.3
+spec:
+replicas: 3
+selector:
+matchLabels:
+app: web-app
+template:
+metadata:
+labels:
+app: web-app
+tier: frontend
+spec:
+containers: - name: web-app
+image: nginx:1.21-alpine
+ports: - containerPort: 80
+protocol: TCP
+env: - name: NODE_ENV
+value: "production" - name: API_URL
+valueFrom:
+secretKeyRef:
+name: app-secrets
+key: api-url
+resources:
+requests:
+memory: "64Mi"
+cpu: "250m"
+limits:
+memory: "128Mi"
+cpu: "500m"
+livenessProbe:
+httpGet:
+path: /health
+port: 80
+initialDelaySeconds: 30
+periodSeconds: 10
+readinessProbe:
+httpGet:
+path: /ready
+port: 80
+initialDelaySeconds: 5
+periodSeconds: 5
+
+## TOML
+
+[project]
+name = "example-app"
+version = "1.0.0"
+description = "An example application"
+authors = ["John Doe <john@example.com>"]
+license = "MIT"
+readme = "README.md"
+homepage = "https://example.com"
+repository = "https://github.com/johndoe/example-app"
+keywords = ["web", "api", "rust"]
+categories = ["web-programming"]
+edition = "2021"
+
+[dependencies]
+tokio = { version = "1.0", features = ["full"] }
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+reqwest = { version = "0.11", features = ["json"] }
+chrono = { version = "0.4", features = ["serde"] }
+log = "0.4"
+env_logger = "0.10"
+
+[dev-dependencies]
+tokio-test = "0.4"
+mockito = "1.0"
+
+[[bin]]
+name = "server"
+path = "src/main.rs"
+
+[[bin]]
+name = "client"
+path = "src/client.rs"
+
+## Dockerfile
+
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+
+FROM base AS deps
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./
+RUN \
+ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+ elif [ -f package-lock.json ]; then npm ci; \
+ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
+
+# Rebuild the source code only when needed
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+
+# Learn more here: https://nextjs.org/telemetry
+
+# Uncomment the following line in case you want to disable telemetry during the build.
+
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+ if [ -f yarn.lock ]; then yarn run build; \
+ elif [ -f package-lock.json ]; then npm run build; \
+ elif [ -f pnpm-lock.yaml ]; then pnpm run build; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
+
+# Production image, copy all the files and run next
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# Uncomment the following line in case you want to disable telemetry during runtime.
+
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# set hostname to localhost
+
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+
+CMD ["node", "server.js"]
+
+## Makefile
+
+.PHONY: help build test clean install dev lint format
+
+# Default target
+
+.DEFAULT_GOAL := help
+
+# Variables
+
+APP_NAME := myapp
+VERSION := $(shell git describe --tags --always --dirty)
+BUILD_DIR := ./build
+DIST_DIR := ./dist
+GO_FILES := $(shell find . -name '\*.go' -type f)
+
+help: ## Show this help message
+@echo "Available targets:"
+@grep -E '^[a-zA-Z_-]+:._?## ._$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.\*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
+
+install: ## Install dependencies
+go mod download
+npm install
+
+build: ## Build the application
+@echo "Building $(APP_NAME) version $(VERSION)..."
+	mkdir -p $(BUILD_DIR)
+	go build -ldflags "-X main.version=$(VERSION)" -o $(BUILD_DIR)/$(APP_NAME) ./cmd/main.go
+
+test: ## Run tests
+go test -v ./...
+npm test
+
+lint: ## Run linters
+golangci-lint run
+npx eslint .
+
+format: ## Format code
+go fmt ./...
+npx prettier --write .
+
+dev: ## Run in development mode
+go run ./cmd/main.go --dev
+
+clean: ## Clean build artifacts
+rm -rf $(BUILD_DIR)
+rm -rf $(DIST_DIR)
+go clean -cache
+
+docker-build: ## Build Docker image
+docker build -t $(APP_NAME):$(VERSION) .
+docker tag $(APP_NAME):$(VERSION) $(APP_NAME):latest
+
+docker-run: ## Run Docker container
+docker run -p 8080:8080 $(APP_NAME):latest
+
+release: ## Create a new release
+@echo "Creating release $(VERSION)"
+git tag -a $(VERSION) -m "Release $(VERSION)"
+git push origin $(VERSION)
+goreleaser release --rm-dist
+
+## Git Diff
+
+diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
+index 1234567..abcdefg 100644
+--- a/src/components/UserProfile.tsx
++++ b/src/components/UserProfile.tsx
+@@ -10,7 +10,7 @@ interface User {
+id: number
+name: string
+email?: string
+
+- createdAt: Date
+
+* readonly createdAt: Date
+  active: boolean
+  }
+
+@@ -25,8 +25,12 @@ const UserProfile: FC<{ user: User }> = ({ user }) => {
+const [isEditing, setIsEditing] = useState(false)
+const [formData, setFormData] = useState(user)
+
+- const handleSubmit = async (e: React.FormEvent) => {
+- e.preventDefault()
+- // Handle form submission
+- }
+- return (
+
+* <div className="user-card">
+
+- <div className={`user-card ${user.active ? 'active' : 'inactive'}`}>
+    <h3>{user.name}</h3>
+    <p>{user.email}</p>
+  </div>
diff --git a/theme-test.tsx b/theme-test.tsx
index 16559bf70..61837473e 100644
--- a/theme-test.tsx
+++ b/theme-test.tsx
@@ -29,6 +29,8 @@ class Repository<T> {
   }
 
   public find(id: number): T | undefined {
+    const x = undefined
+    type x = { foo: undefined }
     return this.items.find((item) => item.id === id)
   }
 
@@ -66,6 +68,72 @@ const sql = `
   AND created_at > '${new Date().toISOString()}'
 `
 
+// String source examples (CSS-in-JS, GraphQL, etc.)
+const styledComponent = css`
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: white;
+      margin-bottom: 1rem;
+    }
+  }
+`
+
+const graphqlQuery = `
+  query GetUserProfile($userId: ID!) {
+    user(id: $userId) {
+      id
+      name
+      email
+      avatar
+      createdAt
+      posts {
+        id
+        title
+        content
+        publishedAt
+        comments {
+          id
+          author
+          content
+          createdAt
+        }
+      }
+    }
+  }
+`
+
+const htmlTemplate = `
+  <div class="user-card">
+    <img src="${user.avatar}" alt="${user.name}" class="avatar" />
+    <div class="user-info">
+      <h3>${user.name}</h3>
+      <p>${user.email}</p>
+      <span class="status ${user.active ? "active" : "inactive"}">
+        ${user.active ? "Active" : "Inactive"}
+      </span>
+    </div>
+    <div class="actions">
+      <button onclick="editUser(${user.id})">Edit</button>
+      <button onclick="deleteUser(${user.id})" class="danger">Delete</button>
+    </div>
+  </div>
+`
+
 // Arrow functions
 const debounce = <T extends (...args: any[]) => any>(
   func: T,
-- 
cgit v1.2.3