diff --git a/.changeset/clever-guests-hammer.md b/.changeset/clever-guests-hammer.md
new file mode 100644
index 0000000..d605c23
--- /dev/null
+++ b/.changeset/clever-guests-hammer.md
@@ -0,0 +1,5 @@
+---
+"bright": minor
+---
+
+Dual themes for dark/light mode
diff --git a/lib/package.json b/lib/package.json
index 905b544..5f6a35b 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -13,7 +13,7 @@
   ],
   "scripts": {
     "build": "tsup src/index.tsx --format esm,cjs --dts",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts"
+    "watch": "tsup src/index.tsx --format esm,cjs --watch --dts"
   },
   "dependencies": {
     "@code-hike/lighter": "0.1.2"
diff --git a/lib/src/code.tsx b/lib/src/code.tsx
new file mode 100644
index 0000000..6aca4e8
--- /dev/null
+++ b/lib/src/code.tsx
@@ -0,0 +1,112 @@
+import { highlight, Lang, Theme } from "@code-hike/lighter"
+
+export async function Code({
+  code,
+  lang,
+  style,
+  className,
+  lineNumbers,
+  unstyled,
+  theme,
+  scheme,
+}: {
+  code: string
+  lang: Lang
+  style?: React.CSSProperties
+  className?: string
+  lineNumbers?: boolean
+  unstyled?: boolean
+  theme?: Theme
+  scheme?: "dark" | "light"
+}) {
+  const {
+    lines,
+    foreground,
+    background,
+    colorScheme,
+    selectionBackground,
+    lineNumberForeground,
+  } = await highlight(code, lang, theme)
+
+  const lineCount = lines.length
+  const digits = lineCount.toString().length
+
+  const kids = lines.map((tokens, i) => {
+    return (
+      <span key={i}>
+        {lineNumbers && (
+          <span className="bright-ln" style={{ width: `${digits}ch` }}>
+            {i + 1}
+          </span>
+        )}
+        {tokens.map((t, j) => (
+          <span key={j} style={t.style}>
+            {t.content}
+          </span>
+        ))}
+        <br />
+      </span>
+    )
+  })
+
+  const themeName = getThemeName(theme)
+  const codeSelector = `pre[data-bright-theme="${themeName}"]`
+  const css = `
+  ${displayStyle(scheme, codeSelector)}
+  ${codeSelector} ::selection {
+    background-color: ${selectionBackground};
+  }
+  ${codeSelector} .bright-ln { 
+    color: ${lineNumberForeground}; 
+    padding-right: 2ch; 
+    display: inline-block;
+    text-align: right;
+    user-select: none;
+  }`
+
+  return (
+    <pre
+      className={className}
+      data-bright-theme={themeName}
+      style={{
+        color: foreground,
+        background,
+        padding: "1em",
+        borderRadius: "4px",
+        colorScheme,
+        ...style,
+      }}
+    >
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      <code>{kids}</code>
+    </pre>
+  )
+}
+
+function displayStyle(
+  scheme: "dark" | "light" | undefined,
+  codeSelector: string
+) {
+  if (scheme === "dark") {
+    return `${codeSelector} {
+      display: block;
+    }
+    [data-theme="light"] ${codeSelector}  {
+      display: none;
+    }`
+  }
+  if (scheme === "light") {
+    return `${codeSelector} {
+      display: none;
+    }
+    [data-theme="light"] ${codeSelector} {
+      display: block;
+    }`
+  }
+  return ""
+}
+function getThemeName(theme?: Theme) {
+  if (!theme) return "default"
+  if (typeof theme === "string") return theme
+  return (theme as any).name
+}
diff --git a/lib/src/index.tsx b/lib/src/index.tsx
index b3c4d66..cbe4a96 100644
--- a/lib/src/index.tsx
+++ b/lib/src/index.tsx
@@ -1,5 +1,14 @@
 import React from "react"
-import { highlight, Theme, Lang } from "@code-hike/lighter"
+import { Theme, Lang } from "@code-hike/lighter"
+import { Code as InnerCode } from "./code"
+
+type DoubleTheme = {
+  dark: Theme
+  light: Theme
+  selector?: (scheme: "dark" | "light") => string
+}
+
+type BrightTheme = Theme | DoubleTheme
 
 type CodeProps = {
   lang: Lang
@@ -8,11 +17,11 @@ type CodeProps = {
   className?: string
   lineNumbers?: boolean
   unstyled?: boolean
-  theme?: Theme
+  theme?: BrightTheme
 }
 
 type CodeComponent = ((props: CodeProps) => Promise<JSX.Element>) & {
-  theme?: Theme
+  theme?: BrightTheme
 }
 
 export const Code: CodeComponent = async ({
@@ -24,61 +33,48 @@ export const Code: CodeComponent = async ({
   unstyled,
   theme,
 }) => {
-  const {
-    lines,
-    foreground,
-    background,
-    colorScheme,
-    selectionBackground,
-    lineNumberForeground,
-  } = await highlight(children, lang || "js", theme || Code.theme)
-
-  const lineCount = lines.length
-  const digits = lineCount.toString().length
-
-  const kids = lines.map((tokens, i) => {
+  const finalTheme = theme || Code.theme
+  if (finalTheme && (finalTheme as any).dark && (finalTheme as any).light) {
+    const doubleTheme = finalTheme as DoubleTheme
+    const darkTheme = doubleTheme.dark
+    const lightTheme = doubleTheme.light
     return (
-      <span key={i}>
-        {lineNumbers && (
-          <span className="bright-ln" style={{ width: `${digits}ch` }}>
-            {i + 1}
-          </span>
-        )}
-        {tokens.map((t, j) => (
-          <span key={j} style={t.style}>
-            {t.content}
-          </span>
-        ))}
-        <br />
-      </span>
+      <>
+        {/* @ts-expect-error Server Component */}
+        <InnerCode
+          code={children}
+          lang={lang || "js"}
+          style={style}
+          className={className}
+          lineNumbers={lineNumbers}
+          unstyled={unstyled}
+          theme={darkTheme}
+          scheme="dark"
+        />
+        {/* @ts-expect-error Server Component */}
+        <InnerCode
+          code={children}
+          lang={lang || "js"}
+          style={style}
+          className={className}
+          lineNumbers={lineNumbers}
+          unstyled={unstyled}
+          theme={lightTheme}
+          scheme="light"
+        />
+      </>
     )
-  })
-
+  }
   return (
-    <pre
+    /* @ts-expect-error Server Component */
+    <InnerCode
+      code={children}
+      lang={lang || "js"}
+      style={style}
       className={className}
-      style={{
-        color: foreground,
-        background,
-        // border: "1px solid " + background,
-        padding: "1em",
-        borderRadius: "4px",
-        colorScheme,
-        ...style,
-      }}
-    >
-      <style>{`
-      code ::selection {
-        background-color: ${selectionBackground}
-      }
-      .bright-ln { 
-        color: ${lineNumberForeground}; 
-        padding-right: 2ch; 
-        display: inline-block;
-        text-align: right;
-        user-select: none;
-      }`}</style>
-      <code>{kids}</code>
-    </pre>
+      lineNumbers={lineNumbers}
+      unstyled={unstyled}
+      theme={finalTheme}
+    />
   )
 }
diff --git a/web/app/bright/code.js b/web/app/bright/code.js
deleted file mode 100644
index 0125687..0000000
--- a/web/app/bright/code.js
+++ /dev/null
@@ -1,894 +0,0 @@
-import { highlight } from "@code-hike/lighter"
-
-export async function Code({
-  children,
-  lang,
-  style,
-  className,
-  lineNumbers,
-  unstyled,
-}) {
-  const {
-    lines,
-    foreground,
-    background,
-    colorScheme,
-    selectionBackground,
-    lineNumberForeground,
-  } = await highlight(children, lang, theme)
-
-  const lineCount = lines.length
-  const digits = lineCount.toString().length
-
-  const kids = lines.map((tokens, i) => {
-    return (
-      <span key={i}>
-        {lineNumbers && (
-          <span className="bright-ln" style={{ width: `${digits}ch` }}>
-            {i + 1}
-          </span>
-        )}
-        {tokens.map((t, j) => (
-          <span key={j} style={t.style}>
-            {t.content}
-          </span>
-        ))}
-        <br />
-      </span>
-    )
-  })
-
-  return (
-    <pre
-      className={className}
-      style={{
-        color: foreground,
-        background,
-        // border: "1px solid " + background,
-        padding: "1em",
-        borderRadius: "4px",
-        colorScheme,
-        ...style,
-      }}
-    >
-      <style>{`
-      code ::selection {
-        background-color: ${selectionBackground}
-      }
-      .bright-ln { 
-        color: ${lineNumberForeground}; 
-        padding-right: 2ch; 
-        display: inline-block;
-        text-align: right;
-        user-select: none;
-      }`}</style>
-      <code>{kids}</code>
-    </pre>
-  )
-}
-
-const theme = {
-  name: "material-darker",
-  semanticHighlighting: true,
-  tokenColors: [
-    {
-      name: "Global settings",
-      settings: {
-        background: "#212121",
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "String",
-      scope: "string",
-      settings: {
-        foreground: "#C3E88D",
-      },
-    },
-    {
-      name: "Punctuation",
-      scope: "punctuation, constant.other.symbol",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "String Escape",
-      scope:
-        "constant.character.escape, text.html constant.character.entity.named",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "Boolean",
-      scope: "constant.language.boolean",
-      settings: {
-        foreground: "#ff9cac",
-      },
-    },
-    {
-      name: "Number",
-      scope: "constant.numeric",
-      settings: {
-        foreground: "#F78C6C",
-      },
-    },
-    {
-      name: "Variable",
-      scope:
-        "variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "Other Keyword",
-      scope: "keyword.other",
-      settings: {
-        foreground: "#F78C6C",
-      },
-    },
-    {
-      name: "Keyword",
-      scope:
-        "keyword, modifier, variable.language.this, support.type.object, constant.language",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "Function call",
-      scope: "entity.name.function, support.function",
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "Storage",
-      scope: "storage.type, storage.modifier, storage.control",
-      settings: {
-        foreground: "#C792EA",
-      },
-    },
-    {
-      name: "Modules",
-      scope: "support.module, support.node",
-      settings: {
-        foreground: "#f07178",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Type",
-      scope: "support.type, constant.other.key",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "Type",
-      scope: "entity.name.type, entity.other.inherited-class, entity.other",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "Comment",
-      scope: "comment",
-      settings: {
-        foreground: "#545454",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Comment",
-      scope: "comment punctuation.definition.comment, string.quoted.docstring",
-      settings: {
-        foreground: "#545454",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Punctuation",
-      scope: "punctuation",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "Class",
-      scope:
-        "entity.name, entity.name.type.class, support.type, support.class, meta.use",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "Class variable",
-      scope:
-        "variable.object.property, meta.field.declaration entity.name.function",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "Class method",
-      scope: "meta.definition.method entity.name.function",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "Function definition",
-      scope: "meta.function entity.name.function",
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "Template expression",
-      scope:
-        "template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "Reset embedded/template expression colors",
-      scope: "meta.embedded, source.groovy.embedded, meta.template.expression",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "YAML key",
-      scope: "entity.name.tag.yaml",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "JSON key",
-      scope:
-        "meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "JSON constant",
-      scope: "constant.language.json",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "CSS class",
-      scope: "entity.other.attribute-name.class",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "CSS ID",
-      scope: "entity.other.attribute-name.id",
-      settings: {
-        foreground: "#F78C6C",
-      },
-    },
-    {
-      name: "CSS tag",
-      scope: "source.css entity.name.tag",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "CSS properties",
-      scope: "support.type.property-name.css",
-      settings: {
-        foreground: "#B2CCD6",
-      },
-    },
-    {
-      name: "HTML tag outer",
-      scope: "meta.tag, punctuation.definition.tag",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "HTML tag inner",
-      scope: "entity.name.tag",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "HTML tag attribute",
-      scope: "entity.other.attribute-name",
-      settings: {
-        foreground: "#C792EA",
-      },
-    },
-    {
-      name: "HTML entities",
-      scope: "punctuation.definition.entity.html",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "Markdown heading",
-      scope: "markup.heading",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "Markdown link text",
-      scope: "text.html.markdown meta.link.inline, meta.link.reference",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "Markdown list item",
-      scope: "text.html.markdown beginning.punctuation.definition.list",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "Markdown italic",
-      scope: "markup.italic",
-      settings: {
-        foreground: "#f07178",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Markdown bold",
-      scope: "markup.bold",
-      settings: {
-        foreground: "#f07178",
-        fontStyle: "bold",
-      },
-    },
-    {
-      name: "Markdown bold italic",
-      scope: "markup.bold markup.italic, markup.italic markup.bold",
-      settings: {
-        foreground: "#f07178",
-        fontStyle: "italic bold",
-      },
-    },
-    {
-      name: "Markdown code block",
-      scope:
-        "markup.fenced_code.block.markdown punctuation.definition.markdown",
-      settings: {
-        foreground: "#C3E88D",
-      },
-    },
-    {
-      name: "Markdown inline code",
-      scope: "markup.inline.raw.string.markdown",
-      settings: {
-        foreground: "#C3E88D",
-      },
-    },
-    {
-      name: "INI property name",
-      scope: "keyword.other.definition.ini",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "INI section title",
-      scope: "entity.name.section.group-title.ini",
-      settings: {
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "C# class",
-      scope: "source.cs meta.class.identifier storage.type",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "C# class method",
-      scope: "source.cs meta.method.identifier entity.name.function",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "C# function call",
-      scope:
-        "source.cs meta.method-call meta.method, source.cs entity.name.function",
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "C# type",
-      scope: "source.cs storage.type",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "C# return type",
-      scope: "source.cs meta.method.return-type",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "C# preprocessor",
-      scope: "source.cs meta.preprocessor",
-      settings: {
-        foreground: "#545454",
-      },
-    },
-    {
-      name: "C# namespace",
-      scope: "source.cs entity.name.type.namespace",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "JSX Text",
-      scope: "meta.jsx.children, SXNested",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "JSX Components name",
-      scope: "support.class.component",
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "C-related Block Level Variables",
-      scope: "source.cpp meta.block variable.other",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "Member Access Meta",
-      scope: "source.python meta.member.access.python",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "Function Call",
-      scope:
-        "source.python meta.function-call.python, meta.function-call.arguments",
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "Blocks",
-      scope: "meta.block",
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "Function Call",
-      scope: "entity.name.function.call",
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "Namespaces",
-      scope:
-        "source.php support.other.namespace, source.php meta.use support.class",
-      settings: {
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "Constant keywords",
-      scope: "constant.keyword",
-      settings: {
-        foreground: "#89DDFF",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Entity name",
-      scope: "entity.name.function",
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "Global settings",
-      settings: {
-        background: "#212121",
-        foreground: "#EEFFFF",
-      },
-    },
-    {
-      name: "Markup Deleted",
-      scope: ["markup.deleted"],
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "Markup Inserted",
-      scope: ["markup.inserted"],
-      settings: {
-        foreground: "#C3E88D",
-      },
-    },
-    {
-      name: "Markup Underline",
-      scope: ["markup.underline"],
-      settings: {
-        fontStyle: "underline",
-      },
-    },
-    {
-      name: "Keyword Control",
-      scope: ["keyword.control"],
-      settings: {
-        foreground: "#89DDFF",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Parameter",
-      scope: ["variable.parameter"],
-      settings: {
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Python - Self Parameter",
-      scope: ["variable.parameter.function.language.special.self.python"],
-      settings: {
-        foreground: "#f07178",
-        fontStyle: "italic",
-      },
-    },
-    {
-      name: "Python - Format Placeholder",
-      scope: ["constant.character.format.placeholder.other.python"],
-      settings: {
-        foreground: "#F78C6C",
-      },
-    },
-    {
-      name: "Markdown - Blockquote",
-      scope: ["markup.quote"],
-      settings: {
-        fontStyle: "italic",
-        foreground: "#89DDFF",
-      },
-    },
-    {
-      name: "Markdown - Fenced Language",
-      scope: ["markup.fenced_code.block"],
-      settings: {
-        foreground: "#EEFFFF90",
-      },
-    },
-    {
-      name: "Markdown - Blockquote Punctuation",
-      scope: ["punctuation.definition.quote"],
-      settings: {
-        foreground: "#ff9cac",
-      },
-    },
-    {
-      name: "JSON Key - Level 0",
-      scope: ["meta.structure.dictionary.json support.type.property-name.json"],
-      settings: {
-        foreground: "#C792EA",
-      },
-    },
-    {
-      name: "JSON Key - Level 1",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#FFCB6B",
-      },
-    },
-    {
-      name: "JSON Key - Level 2",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#F78C6C",
-      },
-    },
-    {
-      name: "JSON Key - Level 3",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#f07178",
-      },
-    },
-    {
-      name: "JSON Key - Level 4",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#916b53",
-      },
-    },
-    {
-      name: "JSON Key - Level 5",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#82AAFF",
-      },
-    },
-    {
-      name: "JSON Key - Level 6",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#ff9cac",
-      },
-    },
-    {
-      name: "JSON Key - Level 7",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#C792EA",
-      },
-    },
-    {
-      name: "JSON Key - Level 8",
-      scope: [
-        "meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
-      ],
-      settings: {
-        foreground: "#C3E88D",
-      },
-    },
-  ],
-  colors: {
-    focusBorder: "#FFFFFF00",
-    foreground: "#EEFFFF",
-    "button.background": "#61616150",
-    "button.foreground": "#ffffff",
-    "dropdown.background": "#212121",
-    "input.background": "#2B2B2B",
-    "inputOption.activeBorder": "#EEFFFF30",
-    "list.activeSelectionBackground": "#212121",
-    "list.activeSelectionForeground": "#80CBC4",
-    "list.dropBackground": "#f0717880",
-    "list.focusBackground": "#EEFFFF20",
-    "list.focusForeground": "#EEFFFF",
-    "list.highlightForeground": "#80CBC4",
-    "list.hoverBackground": "#212121",
-    "list.inactiveSelectionBackground": "#00000030",
-    "activityBar.background": "#212121",
-    "activityBar.dropBackground": "#f0717880",
-    "activityBarBadge.background": "#80CBC4",
-    "activityBarBadge.foreground": "#000000",
-    "badge.background": "#00000030",
-    "badge.foreground": "#545454",
-    "sideBar.background": "#212121",
-    "sideBarSectionHeader.background": "#212121",
-    "editorGroup.dropBackground": "#f0717880",
-    "editorGroup.focusedEmptyBorder": "#f07178",
-    "editorGroupHeader.tabsBackground": "#212121",
-    "tab.border": "#212121",
-    "tab.activeBorder": "#80CBC4",
-    "tab.inactiveBackground": "#212121",
-    "tab.activeModifiedBorder": "#616161",
-    "tab.inactiveModifiedBorder": "#904348",
-    "tab.unfocusedActiveModifiedBorder": "#c05a60",
-    "tab.unfocusedInactiveModifiedBorder": "#904348",
-    "editor.background": "#212121",
-    "editor.foreground": "#EEFFFF",
-    "editorLineNumber.foreground": "#424242",
-    "editorLineNumber.activeForeground": "#616161",
-    "editorCursor.foreground": "#FFCC00",
-    "editor.selectionBackground": "#61616150",
-    "editor.selectionHighlightBackground": "#FFCC0020",
-    "editor.wordHighlightBackground": "#ff9cac30",
-    "editor.wordHighlightStrongBackground": "#C3E88D30",
-    "editor.findMatchHighlight": "#EEFFFF",
-    "editor.findRangeHighlightBackground": "#FFCB6B30",
-    "editor.lineHighlightBorder": "#00000000",
-    "editor.rangeHighlightBackground": "#FFFFFF0d",
-    "editorWhitespace.foreground": "#EEFFFF40",
-    "editorWidget.background": "#212121",
-    "editorHoverWidget.background": "#212121",
-    "editorMarkerNavigation.background": "#EEFFFF05",
-    "peekView.border": "#00000030",
-    "peekViewEditor.background": "#EEFFFF05",
-    "peekViewResult.background": "#EEFFFF05",
-    "peekViewTitle.background": "#EEFFFF05",
-    "panel.background": "#212121",
-    "panel.border": "#21212160",
-    "panelTitle.activeBorder": "#80CBC4",
-    "panelTitle.inactiveForeground": "#EEFFFF",
-    "notebook.focusedCellBorder": "#80CBC4",
-    "notebook.inactiveFocusedCellBorder": "#80CBC450",
-    "statusBar.background": "#212121",
-    "statusBar.debuggingBackground": "#C792EA",
-    "statusBar.debuggingForeground": "#ffffff",
-    "statusBar.noFolderBackground": "#212121",
-    "statusBarItem.activeBackground": "#f0717880",
-    "statusBarItem.hoverBackground": "#54545420",
-    "statusBarItem.remoteBackground": "#80CBC4",
-    "statusBarItem.remoteForeground": "#000000",
-    "titleBar.activeBackground": "#212121",
-    "pickerGroup.border": "#FFFFFF1a",
-    "terminal.ansiBlack": "#000000",
-    "terminal.ansiBlue": "#82AAFF",
-    "terminal.ansiBrightBlack": "#545454",
-    "terminal.ansiBrightBlue": "#82AAFF",
-    "terminal.ansiBrightCyan": "#89DDFF",
-    "terminal.ansiBrightGreen": "#C3E88D",
-    "terminal.ansiBrightMagenta": "#C792EA",
-    "terminal.ansiBrightRed": "#f07178",
-    "terminal.ansiBrightWhite": "#ffffff",
-    "terminal.ansiBrightYellow": "#FFCB6B",
-    "terminal.ansiCyan": "#89DDFF",
-    "terminal.ansiGreen": "#C3E88D",
-    "terminal.ansiMagenta": "#C792EA",
-    "terminal.ansiRed": "#f07178",
-    "terminal.ansiWhite": "#ffffff",
-    "terminal.ansiYellow": "#FFCB6B",
-    "debugToolBar.background": "#212121",
-    "debugConsole.errorForeground": "#f07178",
-    "debugConsole.infoForeground": "#89DDFF",
-    "debugConsole.warningForeground": "#FFCB6B",
-    "selection.background": "#00000080",
-    "editorRuler.foreground": "#424242",
-    "widget.shadow": "#00000030",
-    "scrollbar.shadow": "#00000030",
-    "editorLink.activeForeground": "#EEFFFF",
-    "progressBar.background": "#80CBC4",
-    "pickerGroup.foreground": "#80CBC4",
-    "tree.indentGuidesStroke": "#424242",
-    "terminalCursor.foreground": "#FFCB6B",
-    "terminalCursor.background": "#000000",
-    "inputOption.activeBackground": "#EEFFFF30",
-    "textLink.foreground": "#80CBC4",
-    "textLink.activeForeground": "#EEFFFF",
-    "sideBar.foreground": "#616161",
-    "sideBar.border": "#21212160",
-    "sideBarTitle.foreground": "#EEFFFF",
-    "sideBarSectionHeader.border": "#21212160",
-    "panel.dropBackground": "#EEFFFF",
-    "panelTitle.activeForeground": "#FFFFFF",
-    "editor.lineHighlightBackground": "#00000050",
-    "editor.findMatchBackground": "#000000",
-    "editor.findMatchHighlightBackground": "#00000050",
-    "editor.findMatchBorder": "#80CBC4",
-    "editor.findMatchHighlightBorder": "#ffffff30",
-    "editorIndentGuide.background": "#42424270",
-    "editorIndentGuide.activeBackground": "#424242",
-    "editorGroup.border": "#00000030",
-    "editorGutter.modifiedBackground": "#82AAFF60",
-    "editorGutter.addedBackground": "#C3E88D60",
-    "editorGutter.deletedBackground": "#f0717860",
-    "activityBar.border": "#21212160",
-    "activityBar.foreground": "#EEFFFF",
-    "activityBar.activeBorder": "#80CBC4",
-    "extensionBadge.remoteForeground": "#EEFFFF",
-    "scrollbarSlider.background": "#EEFFFF20",
-    "scrollbarSlider.hoverBackground": "#EEFFFF10",
-    "scrollbarSlider.activeBackground": "#80CBC4",
-    "tab.unfocusedActiveBorder": "#545454",
-    "tab.activeForeground": "#FFFFFF",
-    "tab.inactiveForeground": "#616161",
-    "tab.activeBackground": "#212121",
-    "tab.unfocusedActiveForeground": "#EEFFFF",
-    "editorWidget.resizeBorder": "#80CBC4",
-    "editorWidget.border": "#80CBC4",
-    "statusBar.border": "#21212160",
-    "statusBar.foreground": "#616161",
-    "editorBracketMatch.border": "#FFCC0050",
-    "editorBracketMatch.background": "#212121",
-    "editorOverviewRuler.findMatchForeground": "#80CBC4",
-    "editorOverviewRuler.border": "#212121",
-    "editorOverviewRuler.errorForeground": "#f0717840",
-    "editorOverviewRuler.infoForeground": "#82AAFF40",
-    "editorOverviewRuler.warningForeground": "#FFCB6B40",
-    "editorInfo.foreground": "#82AAFF70",
-    "editorWarning.foreground": "#FFCB6B70",
-    "editorError.foreground": "#f0717870",
-    "editorHoverWidget.border": "#FFFFFF10",
-    "titleBar.activeForeground": "#EEFFFF",
-    "titleBar.inactiveBackground": "#212121",
-    "titleBar.inactiveForeground": "#616161",
-    "titleBar.border": "#21212160",
-    "input.foreground": "#EEFFFF",
-    "input.placeholderForeground": "#EEFFFF60",
-    "input.border": "#FFFFFF10",
-    "inputValidation.errorBorder": "#f07178",
-    "inputValidation.infoBorder": "#82AAFF",
-    "inputValidation.warningBorder": "#FFCB6B",
-    "dropdown.border": "#FFFFFF10",
-    "quickInput.background": "#212121",
-    "quickInput.foreground": "#616161",
-    "list.hoverForeground": "#FFFFFF",
-    "list.inactiveSelectionForeground": "#80CBC4",
-    "quickInput.list.focusBackground": "#EEFFFF20",
-    "editorSuggestWidget.background": "#212121",
-    "editorSuggestWidget.foreground": "#EEFFFF",
-    "editorSuggestWidget.highlightForeground": "#80CBC4",
-    "editorSuggestWidget.selectedBackground": "#00000050",
-    "editorSuggestWidget.border": "#FFFFFF10",
-    "diffEditor.insertedTextBackground": "#89DDFF20",
-    "diffEditor.removedTextBackground": "#ff9cac20",
-    "notifications.background": "#212121",
-    "notifications.foreground": "#EEFFFF",
-    "notificationLink.foreground": "#80CBC4",
-    "extensionButton.prominentBackground": "#C3E88D90",
-    "extensionButton.prominentHoverBackground": "#C3E88D",
-    "extensionButton.prominentForeground": "#000000",
-    "peekViewEditorGutter.background": "#EEFFFF05",
-    "peekViewTitleDescription.foreground": "#EEFFFF60",
-    "peekViewResult.matchHighlightBackground": "#61616150",
-    "peekViewEditor.matchHighlightBackground": "#61616150",
-    "peekViewResult.selectionBackground": "#61616170",
-    "gitDecoration.deletedResourceForeground": "#f0717890",
-    "gitDecoration.conflictingResourceForeground": "#FFCB6B90",
-    "gitDecoration.modifiedResourceForeground": "#82AAFF90",
-    "gitDecoration.untrackedResourceForeground": "#C3E88D90",
-    "gitDecoration.ignoredResourceForeground": "#61616190",
-    "breadcrumb.background": "#212121",
-    "breadcrumb.foreground": "#616161",
-    "breadcrumb.focusForeground": "#EEFFFF",
-    "breadcrumb.activeSelectionForeground": "#80CBC4",
-    "breadcrumbPicker.background": "#212121",
-    "menu.background": "#212121",
-    "menu.foreground": "#EEFFFF",
-    "menu.selectionBackground": "#00000050",
-    "menu.selectionForeground": "#80CBC4",
-    "menu.selectionBorder": "#00000030",
-    "menu.separatorBackground": "#EEFFFF",
-    "menubar.selectionBackground": "#00000030",
-    "menubar.selectionForeground": "#80CBC4",
-    "menubar.selectionBorder": "#00000030",
-    "settings.dropdownForeground": "#EEFFFF",
-    "settings.dropdownBackground": "#212121",
-    "settings.numberInputForeground": "#EEFFFF",
-    "settings.numberInputBackground": "#212121",
-    "settings.textInputForeground": "#EEFFFF",
-    "settings.textInputBackground": "#212121",
-    "settings.headerForeground": "#80CBC4",
-    "settings.modifiedItemIndicator": "#80CBC4",
-    "settings.checkboxBackground": "#212121",
-    "settings.checkboxForeground": "#EEFFFF",
-    "listFilterWidget.background": "#00000030",
-    "listFilterWidget.outline": "#00000030",
-    "listFilterWidget.noMatchesOutline": "#00000030",
-  },
-}
diff --git a/web/app/test/page.js b/web/app/test/page.js
index 0de385b..138fb61 100644
--- a/web/app/test/page.js
+++ b/web/app/test/page.js
@@ -1,11 +1,26 @@
 import { Code } from "bright"
 
-Code.theme = "dracula"
+Code.theme = {
+  light: "min-light",
+  dark: "dracula",
+  selector: (scheme) => `[data-theme="${scheme}"]`,
+}
 
 export default function Page() {
   return (
-    <div>
-      <Code>console.log(1)</Code>
-    </div>
+    <>
+      <div data-theme="dark">
+        <Code lineNumbers>console.log(12)</Code>
+      </div>
+      <div>
+        <Code lineNumbers>console.log(12)</Code>
+      </div>
+      <div data-theme="light">
+        <Code lineNumbers>console.log(12)</Code>
+      </div>
+      <div data-theme="foo">
+        <Code lineNumbers>console.log(12)</Code>
+      </div>
+    </>
   )
 }