Add theme based syntax highlighting for code blocks

2025-12-20 12:21:13 -05:00 · 2024-07-21 12:04:18 -04:00
parent 6e96dc529b
commit c11ab41d01
11 changed files with 1725 additions and 44 deletions
--- a/src/providers/SidebarProvider.ts
+++ b/src/providers/SidebarProvider.ts
@@ -52,6 +52,14 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
 			}
 		})

+		// Listen for when color changes
+		vscode.workspace.onDidChangeConfiguration((e) => {
+			if (e.affectsConfiguration("workbench.colorTheme")) {
+				// Sends latest theme name to webview
+				this.postStateToWebview()
+			}
+		})
+
 		// if the extension is starting a new session, clear previous task state
 		this.clearTask()
 	}
@@ -215,7 +223,13 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
 		])
 		this.postMessageToWebview({
 			type: "state",
-			state: { didOpenOnce: !!didOpenOnce, apiKey, maxRequestsPerTask, claudeMessages },
+			state: {
+				didOpenOnce: !!didOpenOnce,
+				apiKey,
+				maxRequestsPerTask,
+				themeName: vscode.workspace.getConfiguration("workbench").get<string>("colorTheme"),
+				claudeMessages,
+			},
 		})
 	}

--- a/src/shared/ExtensionMessage.ts
+++ b/src/shared/ExtensionMessage.ts
@@ -2,26 +2,42 @@

 // webview will hold state
 export interface ExtensionMessage {
-    type: "action" | "state"
-    text?: string
-    action?: "plusButtonTapped" | "settingsButtonTapped" | "didBecomeVisible"
-    state?: { didOpenOnce: boolean, apiKey?: string, maxRequestsPerTask?: number, claudeMessages: ClaudeMessage[] }
+	type: "action" | "state"
+	text?: string
+	action?: "plusButtonTapped" | "settingsButtonTapped" | "didBecomeVisible"
+	state?: ExtensionState
+}
+
+export interface ExtensionState {
+	didOpenOnce: boolean
+	apiKey?: string
+	maxRequestsPerTask?: number
+	themeName?: string
+	claudeMessages: ClaudeMessage[]
 }

 export interface ClaudeMessage {
-    ts: number
-    type: "ask" | "say"
-    ask?: ClaudeAsk
-    say?: ClaudeSay
-    text?: string
+	ts: number
+	type: "ask" | "say"
+	ask?: ClaudeAsk
+	say?: ClaudeSay
+	text?: string
 }

 export type ClaudeAsk = "request_limit_reached" | "followup" | "command" | "completion_result" | "tool"
-export type ClaudeSay = "task" | "error" | "api_req_started" | "api_req_finished" | "text" | "command_output" | "completion_result" | "user_feedback"
+export type ClaudeSay =
+	| "task"
+	| "error"
+	| "api_req_started"
+	| "api_req_finished"
+	| "text"
+	| "command_output"
+	| "completion_result"
+	| "user_feedback"

 export interface ClaudeSayTool {
-    tool: "editedExistingFile" | "newFileCreated" | "readFile" | "listFiles"
-    path?: string
-    diff?: string
-    content?: string
+	tool: "editedExistingFile" | "newFileCreated" | "readFile" | "listFiles"
+	path?: string
+	diff?: string
+	content?: string
 }
--- a/webview-ui/src/App.tsx
+++ b/webview-ui/src/App.tsx
@@ -21,6 +21,7 @@ const App: React.FC = () => {
 	const [showWelcome, setShowWelcome] = useState<boolean>(false)
 	const [apiKey, setApiKey] = useState<string>("")
 	const [maxRequestsPerTask, setMaxRequestsPerTask] = useState<string>("")
+	const [vscodeThemeName, setVscodeThemeName] = useState<string | undefined>(undefined)
 	const [claudeMessages, setClaudeMessages] = useState<ClaudeMessage[]>([])

 	useEffect(() => {
@@ -39,6 +40,7 @@ const App: React.FC = () => {
 							? message.state!.maxRequestsPerTask.toString()
 							: ""
 					)
+					setVscodeThemeName(message.state!.themeName)
 					setClaudeMessages(message.state!.claudeMessages)
 					break
 				case "action":
@@ -77,7 +79,7 @@ const App: React.FC = () => {
 						/>
 					)}
 					{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
-					<ChatView messages={claudeMessages} isHidden={showSettings} />
+					<ChatView messages={claudeMessages} isHidden={showSettings} vscodeThemeName={vscodeThemeName} />
 				</>
 			)}
 		</>
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/webview-ui/src/components/ChatRow.tsx
@@ -1,16 +1,16 @@
+import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage"
+import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 import React, { useState } from "react"
-import { ClaudeMessage, ClaudeAsk, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage"
-import { VSCodeButton, VSCodeProgressRing, VSCodeBadge } from "@vscode/webview-ui-toolkit/react"
 import { COMMAND_OUTPUT_STRING } from "../utilities/combineCommandSequences"
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { dark } from "react-syntax-highlighter/dist/esm/styles/prism"
-import CodeBlock from "./CodeBlock"
+import { SyntaxHighlighterStyle } from "../utilities/getSyntaxHighlighterStyleFromTheme"
+import CodeBlock from "./CodeBlock/CodeBlock"

 interface ChatRowProps {
 	message: ClaudeMessage
+	syntaxHighlighterStyle: SyntaxHighlighterStyle
 }

-const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
+const ChatRow: React.FC<ChatRowProps> = ({ message, syntaxHighlighterStyle }) => {
 	const [isExpanded, setIsExpanded] = useState(false)
 	const cost = message.text != null && message.say === "api_req_started" ? JSON.parse(message.text).cost : undefined

@@ -126,7 +126,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 									borderRadius: "3px",
 									padding: "8px",
 									whiteSpace: "pre-line",
-									wordWrap: "break-word"
+									wordWrap: "break-word",
 								}}>
 								<span>{message.text}</span>
 							</div>
@@ -188,7 +188,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 											{toolIcon("edit")}
 											<span style={{ fontWeight: "bold" }}>Claude wants to edit this file:</span>
 										</div>
-										<CodeBlock diff={tool.diff!} path={tool.path!} />
+										<CodeBlock
+											diff={tool.diff!}
+											path={tool.path!}
+											syntaxHighlighterStyle={syntaxHighlighterStyle}
+										/>
 									</>
 								)
 							case "newFileCreated":
@@ -200,7 +204,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 												Claude wants to create a new file:
 											</span>
 										</div>
-										<CodeBlock code={tool.content!} path={tool.path!} />
+										<CodeBlock
+											code={tool.content!}
+											path={tool.path!}
+											syntaxHighlighterStyle={syntaxHighlighterStyle}
+										/>
 									</>
 								)
 							case "readFile":
@@ -210,7 +218,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 											{toolIcon("file-code")}
 											<span style={{ fontWeight: "bold" }}>Claude wants to read this file:</span>
 										</div>
-										<CodeBlock code={tool.content!} path={tool.path!} />
+										<CodeBlock
+											code={tool.content!}
+											path={tool.path!}
+											syntaxHighlighterStyle={syntaxHighlighterStyle}
+										/>
 									</>
 								)
 							case "listFiles":
@@ -222,7 +234,12 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 												Claude wants to view this directory:
 											</span>
 										</div>
-										<CodeBlock code={tool.content!} path={tool.path!} language="shell-session" />
+										<CodeBlock
+											code={tool.content!}
+											path={tool.path!}
+											language="shell-session"
+											syntaxHighlighterStyle={syntaxHighlighterStyle}
+										/>
 									</>
 								)
 						}
@@ -260,7 +277,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 								</div>
 								<div style={contentStyle}>
 									<div>
-										<CodeBlock code={command} language="shell-session" />
+										<CodeBlock
+											code={command}
+											language="shell-session"
+											syntaxHighlighterStyle={syntaxHighlighterStyle}
+										/>
 									</div>

 									{output && (
@@ -268,7 +289,11 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 											<p style={{ ...contentStyle, margin: "10px 0 10px 0" }}>
 												{COMMAND_OUTPUT_STRING}
 											</p>
-											<CodeBlock code={output} language="shell-session" />
+											<CodeBlock
+												code={output}
+												language="shell-session"
+												syntaxHighlighterStyle={syntaxHighlighterStyle}
+											/>
 										</>
 									)}
 								</div>
@@ -318,7 +343,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 	return (
 		<div
 			style={{
-				padding: "10px 20px 10px 20px",
+				padding: "10px 15px 10px 15px",
 			}}>
 			{renderContent()}
 			{isExpanded && message.say === "api_req_started" && (
@@ -326,6 +351,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 					<CodeBlock
 						code={JSON.stringify(JSON.parse(message.text || "{}").request, null, 2)}
 						language="json"
+						syntaxHighlighterStyle={syntaxHighlighterStyle}
 					/>
 				</div>
 			)}
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -9,13 +9,16 @@ import { getApiMetrics } from "../utilities/getApiMetrics"
 import { vscode } from "../utilities/vscode"
 import ChatRow from "./ChatRow"
 import TaskHeader from "./TaskHeader"
+import { getSyntaxHighlighterStyleFromTheme } from "../utilities/getSyntaxHighlighterStyleFromTheme"
+import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus"

 interface ChatViewProps {
 	messages: ClaudeMessage[]
 	isHidden: boolean
+	vscodeThemeName?: string
 }
 // maybe instead of storing state in App, just make chatview  always show so dont conditionally load/unload? need to make sure messages are persisted (i remember seeing something about how webviews can be frozen in docs)
-const ChatView = ({ messages, isHidden }: ChatViewProps) => {
+const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined
 	const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort)
 	const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])
@@ -34,6 +37,16 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 	const [primaryButtonText, setPrimaryButtonText] = useState<string | undefined>(undefined)
 	const [secondaryButtonText, setSecondaryButtonText] = useState<string | undefined>(undefined)

+	const [syntaxHighlighterStyle, setSyntaxHighlighterStyle] = useState(vsDarkPlus)
+
+	useEffect(() => {
+		if (!vscodeThemeName) return
+		const theme = getSyntaxHighlighterStyleFromTheme(vscodeThemeName)
+		if (theme) {
+			setSyntaxHighlighterStyle(theme)
+		}
+	}, [vscodeThemeName])
+
 	const scrollToBottom = (instant: boolean = false) => {
 		const options = {
 			containerId: "chat-view-container",
@@ -320,7 +333,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 					overflowY: "auto",
 				}}>
 				{modifiedMessages.map((message, index) => (
-					<ChatRow key={index} message={message} />
+					<ChatRow key={index} message={message} syntaxHighlighterStyle={syntaxHighlighterStyle} />
 				))}
 			</div>
 			<div
--- a/webview-ui/src/components/CodeBlock/CodeBlock.tsx
+++ b/webview-ui/src/components/CodeBlock/CodeBlock.tsx
@@ -1,8 +1,9 @@
-import React, { useMemo, useState } from "react"
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import { getLanguageFromPath } from "../utilities/getLanguageFromPath"
+import { useMemo, useState } from "react"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { getLanguageFromPath } from "../../utilities/getLanguageFromPath"
+import { SyntaxHighlighterStyle } from "../../utilities/getSyntaxHighlighterStyleFromTheme"
+
 /*
 const vscodeSyntaxStyle: React.CSSProperties = {
 	backgroundColor: "var(--vscode-editor-background)",
@@ -62,13 +63,12 @@ interface CodeBlockProps {
 	diff?: string
 	language?: string | undefined
 	path?: string
+	syntaxHighlighterStyle: SyntaxHighlighterStyle
 }

-const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
+const CodeBlock = ({ code, diff, language, path, syntaxHighlighterStyle }: CodeBlockProps) => {
 	const [isExpanded, setIsExpanded] = useState(false)

-	const backgroundColor = oneDark['pre[class*="language-"]'].background as string
-
 	/*
    We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work.

@@ -83,13 +83,11 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
 		[path, language, code]
 	)

-	console.log(inferredLanguage)
-
 	return (
 		<div
 			style={{
 				borderRadius: "3px",
-				backgroundColor: backgroundColor,
+				backgroundColor: "var(--vscode-editor-background)",
 				overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
 			}}>
 			{path && (
@@ -132,7 +130,16 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
 					<SyntaxHighlighter
 						wrapLines={false}
 						language={diff ? "diff" : inferredLanguage} // "diff" automatically colors changed lines in green/red
-						style={oneDark}
+						style={{
+							...syntaxHighlighterStyle,
+							// Our syntax highlighter style doesn't always match the vscode theme 1:1, so we'll apply sensible styles here that vscode exposes to us
+							'code[class*="language-"]': {
+								background: "var(--vscode-editor-background)",
+							},
+							'pre[class*="language-"]': {
+								background: "var(--vscode-editor-background)",
+							},
+						}}
 						customStyle={{
 							margin: 0,
 							padding: "6px 10px",
--- a/webview-ui/src/utilities/getSyntaxHighlighterStyleFromTheme.ts
+++ b/webview-ui/src/utilities/getSyntaxHighlighterStyleFromTheme.ts
@@ -0,0 +1,89 @@
+import * as defaultThemes from "react-syntax-highlighter/dist/esm/styles/prism"
+import * as generatedThemes from "./vscode-themes"
+
+/*
+VSCode extension webviews have a notoriously difficult time syntax highlighting with styles from the user's theme. We don’t have access to css variables like --vscode-function-color that map to all the token styles react-syntax-highlighter expects. Fortunately, react-syntax-highlighter comes with many built-in themes that we can map to popular VSCode themes. We can also use the few editor css variables exposed to use like --vscode-editor-background (see CodeBlock.tsx), which 99% of the time results in syntax highlighting identical to how the user's editor looks. This approach avoids the overhead of using VSCode's Monaco editor and the monaco-vscode-textmate-theme-converter as some other extensions do, and allows us to take advantage of all the benefits of react-syntax-highlighter.
+For themes that don't have a 1:1 match with react-syntax-highlighter built-in themes, we can use Claude to generate style objects based on the results from the "Developer: Generate Color Theme From Current Settings" command.
+
+https://github.com/microsoft/vscode/issues/56356
+*/
+
+// See https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD for available styles react-syntax-highlighter provides
+const defaultSyntaxHighlighterThemes: { [key: string]: string } = {
+	// Vscode built-in
+	"Default Dark Modern": "vscDarkPlus",
+	"Dark+": "vscDarkPlus",
+	"Default Dark+": "vscDarkPlus",
+	"Dark (Visual Studio)": "vscDarkPlus",
+	"Visual Studio Dark": "vscDarkPlus",
+	"Dark High Contrast": "vscDarkPlus",
+	"Default High Contrast": "vscDarkPlus",
+	"Light High Contrast": "vs",
+	"Default High Contrast Light": "vs", // FIXME: some text renders white
+	"Default Light Modern": "vs",
+	"Light+": "vs",
+	"Default Light+": "vs",
+	"Light (Visual Studio)": "vs",
+	"Visual Studio Light": "vs",
+
+	// Third party
+	Anysphere: "nightOwl",
+	Abyss: "materialOceanic",
+	"Kimbie Dark": "cb",
+	Monokai: "darcula",
+	"Monokai Dimmed": "darcula",
+	"Solarized Dark": "solarizedDarkAtom",
+	"Solarized Light": "solarizedlight",
+	"Quiet Light": "solarizedlight",
+	"Tomorrow Night Blue": "lucario",
+	Dracula: "dracula",
+	"Dracula Theme": "dracula",
+	"Dracula Theme Soft": "dracula",
+	"Night Owl": "nightOwl",
+	"Material Theme": "materialDark",
+	"Material Theme Lighter": "materialLight",
+	"Material Theme Lighter High Contrast": "materialLight",
+	"One Dark Pro": "oneDark",
+	"One Dark Pro Darker": "oneDark",
+	"One Dark Pro Flat": "oneDark",
+	"One Dark Pro Mix": "oneDark",
+	"One Light": "oneLight",
+	"Winter is Coming": "nord",
+	"Atom One Dark": "oneDark",
+	"SynthWave '84": "synthwave84",
+}
+
+// Themes that don't have an already provided 1:1 syntax highlighter style
+// These style objects are built with Claude using the results from "Developer: Generate Color Theme From Current Settings" command
+const generatedSyntaxHighlighterThemes: { [key: string]: string } = {
+	"Github Dark": "githubDark",
+	"GitHub Dark Colorblind (Beta)": "githubDark",
+	"GitHub Dark Colorblind": "githubDark",
+	"GitHub Dark Default": "githubDark",
+	"GitHub Dark Dimmed": "githubDark",
+	"GitHub Dark High Contrast": "githubDark",
+
+	"Github Light": "githubLight",
+	"GitHub Light Colorblind (Beta)": "githubLight",
+	"GitHub Light Colorblind": "githubLight",
+	"GitHub Light Default": "githubLight",
+	"GitHub Light High Contrast": "githubLight",
+}
+
+export type SyntaxHighlighterStyle = { [key: string]: React.CSSProperties }
+
+export function getSyntaxHighlighterStyleFromTheme(themeName: string): SyntaxHighlighterStyle | undefined {
+	const defaultSyntaxHighlighterTheme = Object.entries(defaultSyntaxHighlighterThemes).find(([key]) =>
+		key.toLowerCase().startsWith(themeName.toLowerCase())
+	)?.[1]
+	if (defaultSyntaxHighlighterTheme && defaultSyntaxHighlighterTheme in defaultThemes) {
+		return defaultThemes[defaultSyntaxHighlighterTheme as keyof typeof defaultThemes]
+	} else {
+		const generatedSyntaxHighlighterTheme = Object.entries(generatedSyntaxHighlighterThemes).find(([key]) =>
+			key.toLowerCase().startsWith(themeName.toLowerCase())
+		)?.[1]
+		if (generatedSyntaxHighlighterTheme && generatedSyntaxHighlighterTheme in generatedThemes) {
+			return generatedThemes[generatedSyntaxHighlighterTheme as keyof typeof generatedThemes]
+		}
+	}
+}
--- a/webview-ui/src/utilities/vscode-themes/github-dark.ts
+++ b/webview-ui/src/utilities/vscode-themes/github-dark.ts
@@ -0,0 +1,503 @@
+const theme: { [key: string]: React.CSSProperties } = {
+	'code[class*="language-"]': {
+		color: "#e1e4e8",
+		background: "#24292e",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "2",
+		OTabSize: "2",
+		tabSize: "2",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+	},
+	'pre[class*="language-"]': {
+		color: "#e1e4e8",
+		background: "#24292e",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "2",
+		OTabSize: "2",
+		tabSize: "2",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+		padding: "1em",
+		margin: "0.5em 0",
+		overflow: "auto",
+		borderRadius: "0.3em",
+	},
+	'code[class*="language-"]::-moz-selection': {
+		background: "#3392ff44",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"] *::-moz-selection': {
+		background: "#3392ff44",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'pre[class*="language-"] *::-moz-selection': {
+		background: "#3392ff44",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"]::selection': {
+		background: "#3392ff44",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"] *::selection': {
+		background: "#3392ff44",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'pre[class*="language-"] *::selection': {
+		background: "#3392ff44",
+		color: "inherit",
+		textShadow: "none",
+	},
+	':not(pre) > code[class*="language-"]': {
+		background: "#24292e",
+		padding: "0.1em",
+		borderRadius: "0.3em",
+		whiteSpace: "normal",
+	},
+	comment: {
+		color: "#6A737D",
+		fontStyle: "italic",
+	},
+	prolog: {
+		color: "#6A737D",
+	},
+	cdata: {
+		color: "#6A737D",
+	},
+	doctype: {
+		color: "#e1e4e8",
+	},
+	punctuation: {
+		color: "#e1e4e8",
+	},
+	entity: {
+		color: "#e1e4e8",
+		cursor: "help",
+	},
+	"attr-name": {
+		color: "#79B8FF",
+	},
+	"class-name": {
+		color: "#B392F0",
+	},
+	boolean: {
+		color: "#79B8FF",
+	},
+	constant: {
+		color: "#79B8FF",
+	},
+	number: {
+		color: "#79B8FF",
+	},
+	atrule: {
+		color: "#79B8FF",
+	},
+	keyword: {
+		color: "#F97583",
+	},
+	property: {
+		color: "#79B8FF",
+	},
+	tag: {
+		color: "#85E89D",
+	},
+	symbol: {
+		color: "#79B8FF",
+	},
+	deleted: {
+		color: "#FDAEB7",
+		background: "#86181D",
+	},
+	important: {
+		color: "#F97583",
+	},
+	selector: {
+		color: "#85E89D",
+	},
+	string: {
+		color: "#9ECBFF",
+	},
+	char: {
+		color: "#9ECBFF",
+	},
+	builtin: {
+		color: "#79B8FF",
+	},
+	inserted: {
+		color: "#85E89D",
+		background: "#144620",
+	},
+	regex: {
+		color: "#DBEDFF",
+	},
+	"attr-value": {
+		color: "#9ECBFF",
+	},
+	"attr-value > .token.punctuation": {
+		color: "#9ECBFF",
+	},
+	variable: {
+		color: "#FFAB70",
+	},
+	operator: {
+		color: "#F97583",
+	},
+	function: {
+		color: "#B392F0",
+	},
+	url: {
+		color: "#79B8FF",
+	},
+	"attr-value > .token.punctuation.attr-equals": {
+		color: "#e1e4e8",
+	},
+	"special-attr > .token.attr-value > .token.value.css": {
+		color: "#e1e4e8",
+	},
+	".language-css .token.selector": {
+		color: "#85E89D",
+	},
+	".language-css .token.property": {
+		color: "#79B8FF",
+	},
+	".language-css .token.function": {
+		color: "#79B8FF",
+	},
+	".language-css .token.url > .token.function": {
+		color: "#79B8FF",
+	},
+	".language-css .token.url > .token.string.url": {
+		color: "#9ECBFF",
+	},
+	".language-css .token.important": {
+		color: "#F97583",
+	},
+	".language-css .token.atrule .token.rule": {
+		color: "#F97583",
+	},
+	".language-javascript .token.operator": {
+		color: "#F97583",
+	},
+	".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
+		{
+			color: "#FDAEB7",
+		},
+	".language-json .token.operator": {
+		color: "#e1e4e8",
+	},
+	".language-json .token.null.keyword": {
+		color: "#79B8FF",
+	},
+	".language-markdown .token.url": {
+		color: "#e1e4e8",
+	},
+	".language-markdown .token.url > .token.operator": {
+		color: "#e1e4e8",
+	},
+	".language-markdown .token.url-reference.url > .token.string": {
+		color: "#e1e4e8",
+	},
+	".language-markdown .token.url > .token.content": {
+		color: "#79B8FF",
+	},
+	".language-markdown .token.url > .token.url": {
+		color: "#79B8FF",
+	},
+	".language-markdown .token.url-reference.url": {
+		color: "#79B8FF",
+	},
+	".language-markdown .token.blockquote.punctuation": {
+		color: "#6A737D",
+		fontStyle: "italic",
+	},
+	".language-markdown .token.hr.punctuation": {
+		color: "#6A737D",
+		fontStyle: "italic",
+	},
+	".language-markdown .token.code-snippet": {
+		color: "#9ECBFF",
+	},
+	".language-markdown .token.bold .token.content": {
+		color: "#79B8FF",
+	},
+	".language-markdown .token.italic .token.content": {
+		color: "#B392F0",
+	},
+	".language-markdown .token.strike .token.content": {
+		color: "#FDAEB7",
+	},
+	".language-markdown .token.strike .token.punctuation": {
+		color: "#FDAEB7",
+	},
+	".language-markdown .token.list.punctuation": {
+		color: "#FDAEB7",
+	},
+	".language-markdown .token.title.important > .token.punctuation": {
+		color: "#FDAEB7",
+	},
+	bold: {
+		fontWeight: "bold",
+	},
+	italic: {
+		fontStyle: "italic",
+	},
+	namespace: {
+		opacity: "0.8",
+	},
+	"token.tab:not(:empty):before": {
+		color: "#6A737D",
+	},
+	"token.cr:before": {
+		color: "#6A737D",
+	},
+	"token.lf:before": {
+		color: "#6A737D",
+	},
+	"token.space:before": {
+		color: "#6A737D",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
+		marginRight: "0.4em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+		background: "#2f363d",
+		color: "#959da5",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+		background: "#2f363d",
+		color: "#959da5",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+		background: "#2f363d",
+		color: "#959da5",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+		background: "#444d56",
+		color: "#e1e4e8",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+		background: "#444d56",
+		color: "#e1e4e8",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+		background: "#444d56",
+		color: "#e1e4e8",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+		background: "#444d56",
+		color: "#e1e4e8",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+		background: "#444d56",
+		color: "#e1e4e8",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+		background: "#444d56",
+		color: "#e1e4e8",
+	},
+	".line-highlight.line-highlight": {
+		background: "#2b3036",
+	},
+	".line-highlight.line-highlight:before": {
+		background: "#2f363d",
+		color: "#e1e4e8",
+		padding: "0.1em 0.6em",
+		borderRadius: "0.3em",
+		boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
+	},
+	".line-highlight.line-highlight[data-end]:after": {
+		background: "#2f363d",
+		color: "#e1e4e8",
+		padding: "0.1em 0.6em",
+		borderRadius: "0.3em",
+		boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
+	},
+	"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+		backgroundColor: "#2b3036",
+	},
+	".line-numbers.line-numbers .line-numbers-rows": {
+		borderRightColor: "#444d56",
+	},
+	".command-line .command-line-prompt": {
+		borderRightColor: "#444d56",
+	},
+	".line-numbers .line-numbers-rows > span:before": {
+		color: "#444d56",
+	},
+	".command-line .command-line-prompt > span:before": {
+		color: "#444d56",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-1": {
+		color: "#FDAEB7",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-5": {
+		color: "#FDAEB7",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-9": {
+		color: "#FDAEB7",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-2": {
+		color: "#9ECBFF",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-6": {
+		color: "#9ECBFF",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-10": {
+		color: "#9ECBFF",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-3": {
+		color: "#79B8FF",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-7": {
+		color: "#79B8FF",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-11": {
+		color: "#79B8FF",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-4": {
+		color: "#B392F0",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-8": {
+		color: "#B392F0",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-12": {
+		color: "#B392F0",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+		backgroundColor: "#86181D",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+		backgroundColor: "#86181D",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
+		backgroundColor: "#86181D",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+		backgroundColor: "#144620",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+		backgroundColor: "#144620",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#144620",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#144620",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#144620",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#144620",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
+		backgroundColor: "#144620",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
+		backgroundColor: "#144620",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
+		backgroundColor: "#144620",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
+		backgroundColor: "#144620",
+	},
+	".prism-previewer.prism-previewer:before": {
+		borderColor: "#1b1f23",
+	},
+	".prism-previewer-gradient.prism-previewer-gradient div": {
+		borderColor: "#1b1f23",
+		borderRadius: "0.3em",
+	},
+	".prism-previewer-color.prism-previewer-color:before": {
+		borderRadius: "0.3em",
+	},
+	".prism-previewer-easing.prism-previewer-easing:before": {
+		borderRadius: "0.3em",
+	},
+	".prism-previewer.prism-previewer:after": {
+		borderTopColor: "#1b1f23",
+	},
+	".prism-previewer-flipped.prism-previewer-flipped.after": {
+		borderBottomColor: "#1b1f23",
+	},
+	".prism-previewer-angle.prism-previewer-angle:before": {
+		background: "#1f2428",
+	},
+	".prism-previewer-time.prism-previewer-time:before": {
+		background: "#1f2428",
+	},
+	".prism-previewer-easing.prism-previewer-easing": {
+		background: "#1f2428",
+	},
+	".prism-previewer-angle.prism-previewer-angle circle": {
+		stroke: "#e1e4e8",
+		strokeOpacity: "1",
+	},
+	".prism-previewer-time.prism-previewer-time circle": {
+		stroke: "#e1e4e8",
+		strokeOpacity: "1",
+	},
+	".prism-previewer-easing.prism-previewer-easing circle": {
+		stroke: "#e1e4e8",
+		fill: "transparent",
+	},
+	".prism-previewer-easing.prism-previewer-easing path": {
+		stroke: "#e1e4e8",
+	},
+	".prism-previewer-easing.prism-previewer-easing line": {
+		stroke: "#e1e4e8",
+	},
+}
+
+export default theme
--- a/webview-ui/src/utilities/vscode-themes/github-light.ts
+++ b/webview-ui/src/utilities/vscode-themes/github-light.ts
@@ -0,0 +1,506 @@
+const theme: { [key: string]: React.CSSProperties } = {
+	'code[class*="language-"]': {
+		background: "#ffffff",
+		color: "#24292e",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "2",
+		OTabSize: "2",
+		tabSize: "2",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+	},
+	'pre[class*="language-"]': {
+		background: "#ffffff",
+		color: "#24292e",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "2",
+		OTabSize: "2",
+		tabSize: "2",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+		padding: "1em",
+		margin: "0.5em 0",
+		overflow: "auto",
+		borderRadius: "0.3em",
+	},
+	'code[class*="language-"]::-moz-selection': {
+		background: "#0366d625",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"] *::-moz-selection': {
+		background: "#0366d625",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'pre[class*="language-"] *::-moz-selection': {
+		background: "#0366d625",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"]::selection': {
+		background: "#0366d625",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"] *::selection': {
+		background: "#0366d625",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'pre[class*="language-"] *::selection': {
+		background: "#0366d625",
+		color: "inherit",
+		textShadow: "none",
+	},
+	':not(pre) > code[class*="language-"]': {
+		padding: "0.2em 0.3em",
+		borderRadius: "0.3em",
+		whiteSpace: "normal",
+	},
+	comment: {
+		color: "#6A737D",
+		fontStyle: "italic",
+	},
+	prolog: {
+		color: "#6A737D",
+	},
+	cdata: {
+		color: "#6A737D",
+	},
+	doctype: {
+		color: "#24292e",
+	},
+	punctuation: {
+		color: "#24292e",
+	},
+	entity: {
+		color: "#24292e",
+		cursor: "help",
+	},
+	"attr-name": {
+		color: "#6F42C1",
+	},
+	"class-name": {
+		color: "#6F42C1",
+	},
+	boolean: {
+		color: "#005CC5",
+	},
+	constant: {
+		color: "#005CC5",
+	},
+	number: {
+		color: "#005CC5",
+	},
+	atrule: {
+		color: "#005CC5",
+	},
+	keyword: {
+		color: "#D73A49",
+	},
+	property: {
+		color: "#005CC5",
+	},
+	tag: {
+		color: "#22863A",
+	},
+	symbol: {
+		color: "#005CC5",
+	},
+	deleted: {
+		color: "#B31D28",
+		background: "#FFEEF0",
+	},
+	important: {
+		color: "#D73A49",
+	},
+	selector: {
+		color: "#22863A",
+	},
+	string: {
+		color: "#032F62",
+	},
+	char: {
+		color: "#032F62",
+	},
+	builtin: {
+		color: "#005CC5",
+	},
+	inserted: {
+		color: "#22863A",
+		background: "#F0FFF4",
+	},
+	regex: {
+		color: "#032F62",
+	},
+	"attr-value": {
+		color: "#032F62",
+	},
+	"attr-value > .token.punctuation": {
+		color: "#032F62",
+	},
+	variable: {
+		color: "#E36209",
+	},
+	operator: {
+		color: "#D73A49",
+	},
+	function: {
+		color: "#6F42C1",
+	},
+	url: {
+		color: "#005CC5",
+	},
+	"attr-value > .token.punctuation.attr-equals": {
+		color: "#24292e",
+	},
+	"special-attr > .token.attr-value > .token.value.css": {
+		color: "#24292e",
+	},
+	".language-css .token.selector": {
+		color: "#22863A",
+	},
+	".language-css .token.property": {
+		color: "#005CC5",
+	},
+	".language-css .token.function": {
+		color: "#005CC5",
+	},
+	".language-css .token.url > .token.function": {
+		color: "#005CC5",
+	},
+	".language-css .token.url > .token.string.url": {
+		color: "#032F62",
+	},
+	".language-css .token.important": {
+		color: "#D73A49",
+	},
+	".language-css .token.atrule .token.rule": {
+		color: "#D73A49",
+	},
+	".language-javascript .token.operator": {
+		color: "#D73A49",
+	},
+	".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
+		{
+			color: "#B31D28",
+		},
+	".language-json .token.operator": {
+		color: "#24292e",
+	},
+	".language-json .token.null.keyword": {
+		color: "#005CC5",
+	},
+	".language-markdown .token.url": {
+		color: "#24292e",
+	},
+	".language-markdown .token.url > .token.operator": {
+		color: "#24292e",
+	},
+	".language-markdown .token.url-reference.url > .token.string": {
+		color: "#24292e",
+	},
+	".language-markdown .token.url > .token.content": {
+		color: "#005CC5",
+	},
+	".language-markdown .token.url > .token.url": {
+		color: "#005CC5",
+	},
+	".language-markdown .token.url-reference.url": {
+		color: "#005CC5",
+	},
+	".language-markdown .token.blockquote.punctuation": {
+		color: "#6A737D",
+		fontStyle: "italic",
+	},
+	".language-markdown .token.hr.punctuation": {
+		color: "#6A737D",
+		fontStyle: "italic",
+	},
+	".language-markdown .token.code-snippet": {
+		color: "#032F62",
+	},
+	".language-markdown .token.bold .token.content": {
+		color: "#005CC5",
+	},
+	".language-markdown .token.italic .token.content": {
+		color: "#6F42C1",
+	},
+	".language-markdown .token.strike .token.content": {
+		color: "#B31D28",
+	},
+	".language-markdown .token.strike .token.punctuation": {
+		color: "#B31D28",
+	},
+	".language-markdown .token.list.punctuation": {
+		color: "#B31D28",
+	},
+	".language-markdown .token.title.important > .token.punctuation": {
+		color: "#B31D28",
+	},
+	bold: {
+		fontWeight: "bold",
+	},
+	italic: {
+		fontStyle: "italic",
+	},
+	namespace: {
+		opacity: "0.8",
+	},
+	"token.tab:not(:empty):before": {
+		color: "#24292e33",
+		textShadow: "none",
+	},
+	"token.cr:before": {
+		color: "#24292e33",
+		textShadow: "none",
+	},
+	"token.lf:before": {
+		color: "#24292e33",
+		textShadow: "none",
+	},
+	"token.space:before": {
+		color: "#24292e33",
+		textShadow: "none",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
+		marginRight: "0.4em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+		background: "#f6f8fa",
+		color: "#24292e",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+		background: "#f6f8fa",
+		color: "#24292e",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+		background: "#f6f8fa",
+		color: "#24292e",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+		background: "#e1e4e8",
+		color: "#2f363d",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+		background: "#e1e4e8",
+		color: "#2f363d",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+		background: "#e1e4e8",
+		color: "#2f363d",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+		background: "#e1e4e8",
+		color: "#2f363d",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+		background: "#e1e4e8",
+		color: "#2f363d",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+		background: "#e1e4e8",
+		color: "#2f363d",
+	},
+	".line-highlight.line-highlight": {
+		background: "#f6f8fa",
+	},
+	".line-highlight.line-highlight:before": {
+		background: "#f6f8fa",
+		color: "#24292e",
+		padding: "0.1em 0.6em",
+		borderRadius: "0.3em",
+		boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
+	},
+	".line-highlight.line-highlight[data-end]:after": {
+		background: "#f6f8fa",
+		color: "#24292e",
+		padding: "0.1em 0.6em",
+		borderRadius: "0.3em",
+		boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
+	},
+	"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+		backgroundColor: "#f6f8fa",
+	},
+	".line-numbers.line-numbers .line-numbers-rows": {
+		borderRightColor: "#e1e4e8",
+	},
+	".command-line .command-line-prompt": {
+		borderRightColor: "#e1e4e8",
+	},
+	".line-numbers .line-numbers-rows > span:before": {
+		color: "#1b1f234d",
+	},
+	".command-line .command-line-prompt > span:before": {
+		color: "#1b1f234d",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-1": {
+		color: "#B31D28",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-5": {
+		color: "#B31D28",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-9": {
+		color: "#B31D28",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-2": {
+		color: "#22863A",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-6": {
+		color: "#22863A",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-10": {
+		color: "#22863A",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-3": {
+		color: "#005CC5",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-7": {
+		color: "#005CC5",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-11": {
+		color: "#005CC5",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-4": {
+		color: "#6F42C1",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-8": {
+		color: "#6F42C1",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-12": {
+		color: "#6F42C1",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
+		backgroundColor: "#FFEEF0",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
+		backgroundColor: "#F0FFF4",
+	},
+	".prism-previewer.prism-previewer:before": {
+		borderColor: "#ffffff",
+	},
+	".prism-previewer-gradient.prism-previewer-gradient div": {
+		borderColor: "#ffffff",
+		borderRadius: "0.3em",
+	},
+	".prism-previewer-color.prism-previewer-color:before": {
+		borderRadius: "0.3em",
+	},
+	".prism-previewer-easing.prism-previewer-easing:before": {
+		borderRadius: "0.3em",
+	},
+	".prism-previewer.prism-previewer:after": {
+		borderTopColor: "#ffffff",
+	},
+	".prism-previewer-flipped.prism-previewer-flipped.after": {
+		borderBottomColor: "#ffffff",
+	},
+	".prism-previewer-angle.prism-previewer-angle:before": {
+		background: "#f6f8fa",
+	},
+	".prism-previewer-time.prism-previewer-time:before": {
+		background: "#f6f8fa",
+	},
+	".prism-previewer-easing.prism-previewer-easing": {
+		background: "#f6f8fa",
+	},
+	".prism-previewer-angle.prism-previewer-angle circle": {
+		stroke: "#24292e",
+		strokeOpacity: "1",
+	},
+	".prism-previewer-time.prism-previewer-time circle": {
+		stroke: "#24292e",
+		strokeOpacity: "1",
+	},
+	".prism-previewer-easing.prism-previewer-easing circle": {
+		stroke: "#24292e",
+		fill: "transparent",
+	},
+	".prism-previewer-easing.prism-previewer-easing path": {
+		stroke: "#24292e",
+	},
+	".prism-previewer-easing.prism-previewer-easing line": {
+		stroke: "#24292e",
+	},
+}
+
+export default theme
--- a/webview-ui/src/utilities/vscode-themes/index.ts
+++ b/webview-ui/src/utilities/vscode-themes/index.ts
@@ -0,0 +1,2 @@
+export { default as githubLight } from "./github-light"
+export { default as githubDark } from "./github-dark"
--- a/webview-ui/src/utilities/vscode-themes/one-dark-example.ts
+++ b/webview-ui/src/utilities/vscode-themes/one-dark-example.ts
@@ -0,0 +1,503 @@
+const theme: { [key: string]: React.CSSProperties } = {
+	'code[class*="language-"]': {
+		background: "hsl(220, 13%, 18%)",
+		color: "hsl(220, 14%, 71%)",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "2",
+		OTabSize: "2",
+		tabSize: "2",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+	},
+	'pre[class*="language-"]': {
+		background: "hsl(220, 13%, 18%)",
+		color: "hsl(220, 14%, 71%)",
+		textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+		fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+		direction: "ltr",
+		textAlign: "left",
+		whiteSpace: "pre",
+		wordSpacing: "normal",
+		wordBreak: "normal",
+		lineHeight: "1.5",
+		MozTabSize: "2",
+		OTabSize: "2",
+		tabSize: "2",
+		WebkitHyphens: "none",
+		MozHyphens: "none",
+		msHyphens: "none",
+		hyphens: "none",
+		padding: "1em",
+		margin: "0.5em 0",
+		overflow: "auto",
+		borderRadius: "0.3em",
+	},
+	'code[class*="language-"]::-moz-selection': {
+		background: "hsl(220, 13%, 28%)",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"] *::-moz-selection': {
+		background: "hsl(220, 13%, 28%)",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'pre[class*="language-"] *::-moz-selection': {
+		background: "hsl(220, 13%, 28%)",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"]::selection': {
+		background: "hsl(220, 13%, 28%)",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'code[class*="language-"] *::selection': {
+		background: "hsl(220, 13%, 28%)",
+		color: "inherit",
+		textShadow: "none",
+	},
+	'pre[class*="language-"] *::selection': {
+		background: "hsl(220, 13%, 28%)",
+		color: "inherit",
+		textShadow: "none",
+	},
+	':not(pre) > code[class*="language-"]': {
+		padding: "0.2em 0.3em",
+		borderRadius: "0.3em",
+		whiteSpace: "normal",
+	},
+	comment: {
+		color: "hsl(220, 10%, 40%)",
+		fontStyle: "italic",
+	},
+	prolog: {
+		color: "hsl(220, 10%, 40%)",
+	},
+	cdata: {
+		color: "hsl(220, 10%, 40%)",
+	},
+	doctype: {
+		color: "hsl(220, 14%, 71%)",
+	},
+	punctuation: {
+		color: "hsl(220, 14%, 71%)",
+	},
+	entity: {
+		color: "hsl(220, 14%, 71%)",
+		cursor: "help",
+	},
+	"attr-name": {
+		color: "hsl(29, 54%, 61%)",
+	},
+	"class-name": {
+		color: "hsl(29, 54%, 61%)",
+	},
+	boolean: {
+		color: "hsl(29, 54%, 61%)",
+	},
+	constant: {
+		color: "hsl(29, 54%, 61%)",
+	},
+	number: {
+		color: "hsl(29, 54%, 61%)",
+	},
+	atrule: {
+		color: "hsl(29, 54%, 61%)",
+	},
+	keyword: {
+		color: "hsl(286, 60%, 67%)",
+	},
+	property: {
+		color: "hsl(355, 65%, 65%)",
+	},
+	tag: {
+		color: "hsl(355, 65%, 65%)",
+	},
+	symbol: {
+		color: "hsl(355, 65%, 65%)",
+	},
+	deleted: {
+		color: "hsl(355, 65%, 65%)",
+	},
+	important: {
+		color: "hsl(355, 65%, 65%)",
+	},
+	selector: {
+		color: "hsl(95, 38%, 62%)",
+	},
+	string: {
+		color: "hsl(95, 38%, 62%)",
+	},
+	char: {
+		color: "hsl(95, 38%, 62%)",
+	},
+	builtin: {
+		color: "hsl(95, 38%, 62%)",
+	},
+	inserted: {
+		color: "hsl(95, 38%, 62%)",
+	},
+	regex: {
+		color: "hsl(95, 38%, 62%)",
+	},
+	"attr-value": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	"attr-value > .token.punctuation": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	variable: {
+		color: "hsl(207, 82%, 66%)",
+	},
+	operator: {
+		color: "hsl(207, 82%, 66%)",
+	},
+	function: {
+		color: "hsl(207, 82%, 66%)",
+	},
+	url: {
+		color: "hsl(187, 47%, 55%)",
+	},
+	"attr-value > .token.punctuation.attr-equals": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	"special-attr > .token.attr-value > .token.value.css": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	".language-css .token.selector": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".language-css .token.property": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	".language-css .token.function": {
+		color: "hsl(187, 47%, 55%)",
+	},
+	".language-css .token.url > .token.function": {
+		color: "hsl(187, 47%, 55%)",
+	},
+	".language-css .token.url > .token.string.url": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	".language-css .token.important": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	".language-css .token.atrule .token.rule": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	".language-javascript .token.operator": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
+		{
+			color: "hsl(5, 48%, 51%)",
+		},
+	".language-json .token.operator": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	".language-json .token.null.keyword": {
+		color: "hsl(29, 54%, 61%)",
+	},
+	".language-markdown .token.url": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	".language-markdown .token.url > .token.operator": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	".language-markdown .token.url-reference.url > .token.string": {
+		color: "hsl(220, 14%, 71%)",
+	},
+	".language-markdown .token.url > .token.content": {
+		color: "hsl(207, 82%, 66%)",
+	},
+	".language-markdown .token.url > .token.url": {
+		color: "hsl(187, 47%, 55%)",
+	},
+	".language-markdown .token.url-reference.url": {
+		color: "hsl(187, 47%, 55%)",
+	},
+	".language-markdown .token.blockquote.punctuation": {
+		color: "hsl(220, 10%, 40%)",
+		fontStyle: "italic",
+	},
+	".language-markdown .token.hr.punctuation": {
+		color: "hsl(220, 10%, 40%)",
+		fontStyle: "italic",
+	},
+	".language-markdown .token.code-snippet": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	".language-markdown .token.bold .token.content": {
+		color: "hsl(29, 54%, 61%)",
+	},
+	".language-markdown .token.italic .token.content": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	".language-markdown .token.strike .token.content": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".language-markdown .token.strike .token.punctuation": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".language-markdown .token.list.punctuation": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".language-markdown .token.title.important > .token.punctuation": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	bold: {
+		fontWeight: "bold",
+	},
+	italic: {
+		fontStyle: "italic",
+	},
+	namespace: {
+		opacity: "0.8",
+	},
+	"token.tab:not(:empty):before": {
+		color: "hsla(220, 14%, 71%, 0.15)",
+		textShadow: "none",
+	},
+	"token.cr:before": {
+		color: "hsla(220, 14%, 71%, 0.15)",
+		textShadow: "none",
+	},
+	"token.lf:before": {
+		color: "hsla(220, 14%, 71%, 0.15)",
+		textShadow: "none",
+	},
+	"token.space:before": {
+		color: "hsla(220, 14%, 71%, 0.15)",
+		textShadow: "none",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
+		marginRight: "0.4em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+		background: "hsl(220, 13%, 26%)",
+		color: "hsl(220, 9%, 55%)",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+		background: "hsl(220, 13%, 26%)",
+		color: "hsl(220, 9%, 55%)",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+		background: "hsl(220, 13%, 26%)",
+		color: "hsl(220, 9%, 55%)",
+		padding: "0.1em 0.4em",
+		borderRadius: "0.3em",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+		background: "hsl(220, 13%, 28%)",
+		color: "hsl(220, 14%, 71%)",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+		background: "hsl(220, 13%, 28%)",
+		color: "hsl(220, 14%, 71%)",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+		background: "hsl(220, 13%, 28%)",
+		color: "hsl(220, 14%, 71%)",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+		background: "hsl(220, 13%, 28%)",
+		color: "hsl(220, 14%, 71%)",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+		background: "hsl(220, 13%, 28%)",
+		color: "hsl(220, 14%, 71%)",
+	},
+	"div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+		background: "hsl(220, 13%, 28%)",
+		color: "hsl(220, 14%, 71%)",
+	},
+	".line-highlight.line-highlight": {
+		background: "hsla(220, 100%, 80%, 0.04)",
+	},
+	".line-highlight.line-highlight:before": {
+		background: "hsl(220, 13%, 26%)",
+		color: "hsl(220, 14%, 71%)",
+		padding: "0.1em 0.6em",
+		borderRadius: "0.3em",
+		boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
+	},
+	".line-highlight.line-highlight[data-end]:after": {
+		background: "hsl(220, 13%, 26%)",
+		color: "hsl(220, 14%, 71%)",
+		padding: "0.1em 0.6em",
+		borderRadius: "0.3em",
+		boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
+	},
+	"pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+		backgroundColor: "hsla(220, 100%, 80%, 0.04)",
+	},
+	".line-numbers.line-numbers .line-numbers-rows": {
+		borderRightColor: "hsla(220, 14%, 71%, 0.15)",
+	},
+	".command-line .command-line-prompt": {
+		borderRightColor: "hsla(220, 14%, 71%, 0.15)",
+	},
+	".line-numbers .line-numbers-rows > span:before": {
+		color: "hsl(220, 14%, 45%)",
+	},
+	".command-line .command-line-prompt > span:before": {
+		color: "hsl(220, 14%, 45%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-1": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-5": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-9": {
+		color: "hsl(355, 65%, 65%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-2": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-6": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-10": {
+		color: "hsl(95, 38%, 62%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-3": {
+		color: "hsl(207, 82%, 66%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-7": {
+		color: "hsl(207, 82%, 66%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-11": {
+		color: "hsl(207, 82%, 66%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-4": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-8": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	".rainbow-braces .token.token.punctuation.brace-level-12": {
+		color: "hsl(286, 60%, 67%)",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+		backgroundColor: "hsla(353, 100%, 66%, 0.15)",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+		backgroundColor: "hsla(353, 100%, 66%, 0.15)",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
+		backgroundColor: "hsla(353, 95%, 66%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+		backgroundColor: "hsla(137, 100%, 55%, 0.15)",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+		backgroundColor: "hsla(137, 100%, 55%, 0.15)",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	"pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
+		backgroundColor: "hsla(135, 73%, 55%, 0.25)",
+	},
+	".prism-previewer.prism-previewer:before": {
+		borderColor: "hsl(224, 13%, 17%)",
+	},
+	".prism-previewer-gradient.prism-previewer-gradient div": {
+		borderColor: "hsl(224, 13%, 17%)",
+		borderRadius: "0.3em",
+	},
+	".prism-previewer-color.prism-previewer-color:before": {
+		borderRadius: "0.3em",
+	},
+	".prism-previewer-easing.prism-previewer-easing:before": {
+		borderRadius: "0.3em",
+	},
+	".prism-previewer.prism-previewer:after": {
+		borderTopColor: "hsl(224, 13%, 17%)",
+	},
+	".prism-previewer-flipped.prism-previewer-flipped.after": {
+		borderBottomColor: "hsl(224, 13%, 17%)",
+	},
+	".prism-previewer-angle.prism-previewer-angle:before": {
+		background: "hsl(219, 13%, 22%)",
+	},
+	".prism-previewer-time.prism-previewer-time:before": {
+		background: "hsl(219, 13%, 22%)",
+	},
+	".prism-previewer-easing.prism-previewer-easing": {
+		background: "hsl(219, 13%, 22%)",
+	},
+	".prism-previewer-angle.prism-previewer-angle circle": {
+		stroke: "hsl(220, 14%, 71%)",
+		strokeOpacity: "1",
+	},
+	".prism-previewer-time.prism-previewer-time circle": {
+		stroke: "hsl(220, 14%, 71%)",
+		strokeOpacity: "1",
+	},
+	".prism-previewer-easing.prism-previewer-easing circle": {
+		stroke: "hsl(220, 14%, 71%)",
+		fill: "transparent",
+	},
+	".prism-previewer-easing.prism-previewer-easing path": {
+		stroke: "hsl(220, 14%, 71%)",
+	},
+	".prism-previewer-easing.prism-previewer-easing line": {
+		stroke: "hsl(220, 14%, 71%)",
+	},
+}
+export default theme