From 1a7df7aff82029bc003e5dc9b01fed6ecb5173ca Mon Sep 17 00:00:00 2001
From: amcdnl <amcdaniel2@gmail.com>
Date: Tue, 30 Jul 2024 15:30:39 -0400
Subject: [PATCH] add custom themes

---
 src/Markdown/CodeHighlighter.tsx |  12 +-
 src/Markdown/index.ts            |   1 +
 src/Markdown/themes/dark.ts      | 501 +++++++++++++++++++++++++++++++
 src/Markdown/themes/index.ts     |   2 +
 src/Markdown/themes/light.ts     | 499 ++++++++++++++++++++++++++++++
 5 files changed, 1012 insertions(+), 3 deletions(-)
 create mode 100644 src/Markdown/themes/dark.ts
 create mode 100644 src/Markdown/themes/index.ts
 create mode 100644 src/Markdown/themes/light.ts

diff --git a/src/Markdown/CodeHighlighter.tsx b/src/Markdown/CodeHighlighter.tsx
index df563f4..04e565a 100644
--- a/src/Markdown/CodeHighlighter.tsx
+++ b/src/Markdown/CodeHighlighter.tsx
@@ -1,8 +1,8 @@
 import React, { FC, PropsWithChildren, ReactElement } from 'react';
 import { Button, cn } from 'reablocks';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import CopyIcon from '@/assets/copy.svg?react';
+import { dark } from './themes';
 
 export interface CodeHighlighterProps extends PropsWithChildren {
   /**
@@ -24,6 +24,11 @@ export interface CodeHighlighterProps extends PropsWithChildren {
    * Icon to show for copy.
    */
   copyIcon?: ReactElement;
+
+  /**
+   * The theme to use for the code block.
+   */
+  theme?: Record<string, string>;
 }
 
 export const CodeHighlighter: FC<CodeHighlighterProps> = ({
@@ -31,7 +36,8 @@ export const CodeHighlighter: FC<CodeHighlighterProps> = ({
   children,
   copyClassName,
   copyIcon = <CopyIcon />,
-  language
+  language,
+  theme = dark
 }) => {
   const match = language?.match(/language-(\w+)/);
   const lang = match ? match[1] : 'text';
@@ -62,7 +68,7 @@ export const CodeHighlighter: FC<CodeHighlighterProps> = ({
       )}
       <SyntaxHighlighter
         language={lang}
-        style={oneDark}
+        style={theme}
       >
         {children}
       </SyntaxHighlighter>
diff --git a/src/Markdown/index.ts b/src/Markdown/index.ts
index 323b766..4fc2db3 100644
--- a/src/Markdown/index.ts
+++ b/src/Markdown/index.ts
@@ -2,3 +2,4 @@ export * from './Markdown';
 export * from './Table';
 export * from './CodeHighlighter';
 export * from './plugins';
+export * from './themes';
diff --git a/src/Markdown/themes/dark.ts b/src/Markdown/themes/dark.ts
new file mode 100644
index 0000000..8d6dceb
--- /dev/null
+++ b/src/Markdown/themes/dark.ts
@@ -0,0 +1,501 @@
+export const dark = {
+  'code[class*="language-"]': {
+    'background': '#11111f',
+    'color': '#e2e8f0',
+    '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': '#11111f',
+    'color': '#e2e8f0',
+    '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': '#1e293b',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'code[class*="language-"] *::-moz-selection': {
+    'background': '#1e293b',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'pre[class*="language-"] *::-moz-selection': {
+    'background': '#1e293b',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'code[class*="language-"]::selection': {
+    'background': '#1e293b',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'code[class*="language-"] *::selection': {
+    'background': '#1e293b',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'pre[class*="language-"] *::selection': {
+    'background': '#1e293b',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  ':not(pre) > code[class*="language-"]': {
+    'padding': '0.2em 0.3em',
+    'borderRadius': '0.3em',
+    'whiteSpace': 'normal'
+  },
+  'comment': {
+    'color': '#64748b',
+    'fontStyle': 'italic'
+  },
+  'prolog': {
+    'color': '#64748b'
+  },
+  'cdata': {
+    'color': '#64748b'
+  },
+  'doctype': {
+    'color': '#e2e8f0'
+  },
+  'punctuation': {
+    'color': '#e2e8f0'
+  },
+  'entity': {
+    'color': '#3b82f6',
+    'cursor': 'help'
+  },
+  'attr-name': {
+    'color': '#f59e0b'
+  },
+  'class-name': {
+    'color': '#f59e0b'
+  },
+  'boolean': {
+    'color': '#3b82f6'
+  },
+  'constant': {
+    'color': '#3b82f6'
+  },
+  'number': {
+    'color': '#3b82f6'
+  },
+  'atrule': {
+    'color': '#f59e0b'
+  },
+  'keyword': {
+    'color': '#f472b6'
+  },
+  'property': {
+    'color': '#3b82f6'
+  },
+  'tag': {
+    'color': '#3b82f6'
+  },
+  'symbol': {
+    'color': '#3b82f6'
+  },
+  'deleted': {
+    'color': '#ef4444'
+  },
+  'important': {
+    'color': '#f472b6'
+  },
+  'selector': {
+    'color': '#10b981'
+  },
+  'string': {
+    'color': '#10b981'
+  },
+  'char': {
+    'color': '#10b981'
+  },
+  'builtin': {
+    'color': '#10b981'
+  },
+  'inserted': {
+    'color': '#10b981'
+  },
+  'regex': {
+    'color': '#10b981'
+  },
+  'attr-value': {
+    'color': '#10b981'
+  },
+  'attr-value > .token.punctuation': {
+    'color': '#10b981'
+  },
+  'variable': {
+    'color': '#60a5fa'
+  },
+  'operator': {
+    'color': '#60a5fa'
+  },
+  'function': {
+    'color': '#60a5fa'
+  },
+  'url': {
+    'color': '#60a5fa'
+  },
+  'attr-value > .token.punctuation.attr-equals': {
+    'color': '#e2e8f0'
+  },
+  'special-attr > .token.attr-value > .token.value.css': {
+    'color': '#e2e8f0'
+  },
+  '.language-css .token.selector': {
+    'color': '#3b82f6'
+  },
+  '.language-css .token.property': {
+    'color': '#e2e8f0'
+  },
+  '.language-css .token.function': {
+    'color': '#60a5fa'
+  },
+  '.language-css .token.url > .token.function': {
+    'color': '#60a5fa'
+  },
+  '.language-css .token.url > .token.string.url': {
+    'color': '#10b981'
+  },
+  '.language-css .token.important': {
+    'color': '#f472b6'
+  },
+  '.language-css .token.atrule .token.rule': {
+    'color': '#f472b6'
+  },
+  '.language-javascript .token.operator': {
+    'color': '#f472b6'
+  },
+  '.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation': {
+    'color': '#ef4444'
+  },
+  '.language-json .token.operator': {
+    'color': '#e2e8f0'
+  },
+  '.language-json .token.null.keyword': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.url': {
+    'color': '#e2e8f0'
+  },
+  '.language-markdown .token.url > .token.operator': {
+    'color': '#e2e8f0'
+  },
+  '.language-markdown .token.url-reference.url > .token.string': {
+    'color': '#e2e8f0'
+  },
+  '.language-markdown .token.url > .token.content': {
+    'color': '#60a5fa'
+  },
+  '.language-markdown .token.url > .token.url': {
+    'color': '#60a5fa'
+  },
+  '.language-markdown .token.url-reference.url': {
+    'color': '#60a5fa'
+  },
+  '.language-markdown .token.blockquote.punctuation': {
+    'color': '#64748b',
+    'fontStyle': 'italic'
+  },
+  '.language-markdown .token.hr.punctuation': {
+    'color': '#64748b',
+    'fontStyle': 'italic'
+  },
+  '.language-markdown .token.code-snippet': {
+    'color': '#10b981'
+  },
+  '.language-markdown .token.bold .token.content': {
+    'color': '#f59e0b'
+  },
+  '.language-markdown .token.italic .token.content': {
+    'color': '#f472b6'
+  },
+  '.language-markdown .token.strike .token.content': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.strike .token.punctuation': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.list.punctuation': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.title.important > .token.punctuation': {
+    'color': '#3b82f6'
+  },
+  'bold': {
+    'fontWeight': 'bold'
+  },
+  'italic': {
+    'fontStyle': 'italic'
+  },
+  'namespace': {
+    'Opacity': '0.8'
+  },
+  'token.tab:not(:empty):before': {
+    'color': '#64748b',
+    'textShadow': 'none'
+  },
+  'token.cr:before': {
+    'color': '#64748b',
+    'textShadow': 'none'
+  },
+  'token.lf:before': {
+    'color': '#64748b',
+    'textShadow': 'none'
+  },
+  'token.space:before': {
+    'color': '#64748b',
+    'textShadow': 'none'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item': {
+    'marginRight': '0.4em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button': {
+    'background': '#1e293b',
+    'color': '#94a3b8',
+    'padding': '0.1em 0.4em',
+    'borderRadius': '0.3em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a': {
+    'background': '#1e293b',
+    'color': '#94a3b8',
+    'padding': '0.1em 0.4em',
+    'borderRadius': '0.3em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span': {
+    'background': '#1e293b',
+    'color': '#94a3b8',
+    'padding': '0.1em 0.4em',
+    'borderRadius': '0.3em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  '.line-highlight.line-highlight': {
+    'background': 'rgba(59, 130, 246, 0.08)'
+  },
+  '.line-highlight.line-highlight:before': {
+    'background': '#1e293b',
+    'color': '#e2e8f0',
+    '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': '#1e293b',
+    'color': '#e2e8f0',
+    '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': 'rgba(59, 130, 246, 0.08)'
+  },
+  '.line-numbers.line-numbers .line-numbers-rows': {
+    'borderRightColor': '#1e293b'
+  },
+  '.command-line .command-line-prompt': {
+    'borderRightColor': '#1e293b'
+  },
+  '.line-numbers .line-numbers-rows > span:before': {
+    'color': '#64748b'
+  },
+  '.command-line .command-line-prompt > span:before': {
+    'color': '#64748b'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-1': {
+    'color': '#3b82f6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-5': {
+    'color': '#3b82f6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-9': {
+    'color': '#3b82f6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-2': {
+    'color': '#10b981'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-6': {
+    'color': '#10b981'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-10': {
+    'color': '#10b981'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-3': {
+    'color': '#60a5fa'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-7': {
+    'color': '#60a5fa'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-11': {
+    'color': '#60a5fa'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-4': {
+    'color': '#f472b6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-8': {
+    'color': '#f472b6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-12': {
+    'color': '#f472b6'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix)': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.15)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix)': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.15)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(239, 68, 68, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix)': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.15)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix)': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.15)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(16, 185, 129, 0.25)'
+  },
+  '.prism-previewer.prism-previewer:before': {
+    'borderColor': '#11111f'
+  },
+  '.prism-previewer-gradient.prism-previewer-gradient div': {
+    'borderColor': '#11111f',
+    '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': '#11111f'
+  },
+  '.prism-previewer-flipped.prism-previewer-flipped.after': {
+    'borderBottomColor': '#11111f'
+  },
+  '.prism-previewer-angle.prism-previewer-angle:before': {
+    'background': '#1e293b'
+  },
+  '.prism-previewer-time.prism-previewer-time:before': {
+    'background': '#1e293b'
+  },
+  '.prism-previewer-easing.prism-previewer-easing': {
+    'background': '#1e293b'
+  },
+  '.prism-previewer-angle.prism-previewer-angle circle': {
+    'stroke': '#e2e8f0',
+    'strokeOpacity': '1'
+  },
+  '.prism-previewer-time.prism-previewer-time circle': {
+    'stroke': '#e2e8f0',
+    'strokeOpacity': '1'
+  },
+  '.prism-previewer-easing.prism-previewer-easing circle': {
+    'stroke': '#e2e8f0',
+    'fill': 'transparent'
+  },
+  '.prism-previewer-easing.prism-previewer-easing path': {
+    'stroke': '#e2e8f0'
+  },
+  '.prism-previewer-easing.prism-previewer-easing line': {
+    'stroke': '#e2e8f0'
+  }
+}
diff --git a/src/Markdown/themes/index.ts b/src/Markdown/themes/index.ts
new file mode 100644
index 0000000..4100599
--- /dev/null
+++ b/src/Markdown/themes/index.ts
@@ -0,0 +1,2 @@
+export * from './dark';
+export * from './light';
diff --git a/src/Markdown/themes/light.ts b/src/Markdown/themes/light.ts
new file mode 100644
index 0000000..327c279
--- /dev/null
+++ b/src/Markdown/themes/light.ts
@@ -0,0 +1,499 @@
+export const light = {
+  'code[class*="language-"]': {
+    'background': '#fff',
+    'color': '#1e293b',
+    'textShadow': 'none',
+    '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': '#fff',
+    'color': '#1e293b',
+    'textShadow': 'none',
+    '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',
+    'border': '1px solid #e2e8f0'
+  },
+  'code[class*="language-"]::-moz-selection': {
+    'background': '#e2e8f0',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'code[class*="language-"] *::-moz-selection': {
+    'background': '#e2e8f0',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'pre[class*="language-"] *::-moz-selection': {
+    'background': '#e2e8f0',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'code[class*="language-"]::selection': {
+    'background': '#e2e8f0',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'code[class*="language-"] *::selection': {
+    'background': '#e2e8f0',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  'pre[class*="language-"] *::selection': {
+    'background': '#e2e8f0',
+    'color': 'inherit',
+    'textShadow': 'none'
+  },
+  ':not(pre) > code[class*="language-"]': {
+    'padding': '0.2em 0.3em',
+    'borderRadius': '0.3em',
+    'whiteSpace': 'normal',
+    'background': '#f1f5f9'
+  },
+  'comment': {
+    'color': '#64748b',
+    'fontStyle': 'italic'
+  },
+  'prolog': {
+    'color': '#64748b'
+  },
+  'cdata': {
+    'color': '#64748b'
+  },
+  'doctype': {
+    'color': '#1e293b'
+  },
+  'punctuation': {
+    'color': '#64748b'
+  },
+  'entity': {
+    'color': '#3b82f6',
+    'cursor': 'help'
+  },
+  'attr-name': {
+    'color': '#ea580c'
+  },
+  'class-name': {
+    'color': '#ea580c'
+  },
+  'boolean': {
+    'color': '#3b82f6'
+  },
+  'constant': {
+    'color': '#3b82f6'
+  },
+  'number': {
+    'color': '#3b82f6'
+  },
+  'atrule': {
+    'color': '#ea580c'
+  },
+  'keyword': {
+    'color': '#9333ea'
+  },
+  'property': {
+    'color': '#3b82f6'
+  },
+  'tag': {
+    'color': '#3b82f6'
+  },
+  'symbol': {
+    'color': '#3b82f6'
+  },
+  'deleted': {
+    'color': '#dc2626'
+  },
+  'important': {
+    'color': '#9333ea'
+  },
+  'selector': {
+    'color': '#16a34a'
+  },
+  'string': {
+    'color': '#16a34a'
+  },
+  'char': {
+    'color': '#16a34a'
+  },
+  'builtin': {
+    'color': '#16a34a'
+  },
+  'inserted': {
+    'color': '#16a34a'
+  },
+  'regex': {
+    'color': '#16a34a'
+  },
+  'attr-value': {
+    'color': '#16a34a'
+  },
+  'attr-value > .token.punctuation': {
+    'color': '#16a34a'
+  },
+  'variable': {
+    'color': '#3b82f6'
+  },
+  'operator': {
+    'color': '#3b82f6'
+  },
+  'function': {
+    'color': '#3b82f6'
+  },
+  'url': {
+    'color': '#3b82f6'
+  },
+  'attr-value > .token.punctuation.attr-equals': {
+    'color': '#64748b'
+  },
+  'special-attr > .token.attr-value > .token.value.css': {
+    'color': '#1e293b'
+  },
+  '.language-css .token.selector': {
+    'color': '#3b82f6'
+  },
+  '.language-css .token.property': {
+    'color': '#1e293b'
+  },
+  '.language-css .token.function': {
+    'color': '#3b82f6'
+  },
+  '.language-css .token.url > .token.function': {
+    'color': '#3b82f6'
+  },
+  '.language-css .token.url > .token.string.url': {
+    'color': '#16a34a'
+  },
+  '.language-css .token.important': {
+    'color': '#9333ea'
+  },
+  '.language-css .token.atrule .token.rule': {
+    'color': '#9333ea'
+  },
+  '.language-javascript .token.operator': {
+    'color': '#9333ea'
+  },
+  '.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation': {
+    'color': '#dc2626'
+  },
+  '.language-json .token.operator': {
+    'color': '#1e293b'
+  },
+  '.language-json .token.null.keyword': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.url': {
+    'color': '#1e293b'
+  },
+  '.language-markdown .token.url > .token.operator': {
+    'color': '#1e293b'
+  },
+  '.language-markdown .token.url-reference.url > .token.string': {
+    'color': '#1e293b'
+  },
+  '.language-markdown .token.url > .token.content': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.url > .token.url': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.url-reference.url': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.blockquote.punctuation': {
+    'color': '#64748b',
+    'fontStyle': 'italic'
+  },
+  '.language-markdown .token.hr.punctuation': {
+    'color': '#64748b',
+    'fontStyle': 'italic'
+  },
+  '.language-markdown .token.code-snippet': {
+    'color': '#16a34a'
+  },
+  '.language-markdown .token.bold .token.content': {
+    'color': '#ea580c'
+  },
+  '.language-markdown .token.italic .token.content': {
+    'color': '#9333ea'
+  },
+  '.language-markdown .token.strike .token.content': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.strike .token.punctuation': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.list.punctuation': {
+    'color': '#3b82f6'
+  },
+  '.language-markdown .token.title.important > .token.punctuation': {
+    'color': '#3b82f6'
+  },
+  'bold': {
+    'fontWeight': 'bold'
+  },
+  'italic': {
+    'fontStyle': 'italic'
+  },
+  'namespace': {
+    'Opacity': '0.8'
+  },
+  'token.tab:not(:empty):before': {
+    'color': '#94a3b8'
+  },
+  'token.cr:before': {
+    'color': '#94a3b8'
+  },
+  'token.lf:before': {
+    'color': '#94a3b8'
+  },
+  'token.space:before': {
+    'color': '#94a3b8'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item': {
+    'marginRight': '0.4em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button': {
+    'background': '#f1f5f9',
+    'color': '#475569',
+    'padding': '0.1em 0.4em',
+    'borderRadius': '0.3em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a': {
+    'background': '#f1f5f9',
+    'color': '#475569',
+    'padding': '0.1em 0.4em',
+    'borderRadius': '0.3em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span': {
+    'background': '#f1f5f9',
+    'color': '#475569',
+    'padding': '0.1em 0.4em',
+    'borderRadius': '0.3em'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  'div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus': {
+    'background': '#3b82f6',
+    'color': '#ffffff'
+  },
+  '.line-highlight.line-highlight': {
+    'background': 'rgba(59, 130, 246, 0.08)'
+  },
+  '.line-highlight.line-highlight:before': {
+    'background': '#f1f5f9',
+    'color': '#1e293b',
+    'padding': '0.1em 0.6em',
+    'borderRadius': '0.3em',
+    'boxShadow': '0 2px 0 0 rgba(0, 0, 0, 0.1)'
+  },
+  '.line-highlight.line-highlight[data-end]:after': {
+    'background': '#f1f5f9',
+    'color': '#1e293b',
+    'padding': '0.1em 0.6em',
+    'borderRadius': '0.3em',
+    'boxShadow': '0 2px 0 0 rgba(0, 0, 0, 0.1)'
+  },
+  'pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before': {
+    'backgroundColor': 'rgba(59, 130, 246, 0.08)'
+  },
+  '.line-numbers.line-numbers .line-numbers-rows': {
+    'borderRightColor': '#e2e8f0'
+  },
+  '.command-line .command-line-prompt': {
+    'borderRightColor': '#e2e8f0'
+  },
+  '.line-numbers .line-numbers-rows > span:before': {
+    'color': '#94a3b8'
+  },
+  '.command-line .command-line-prompt > span:before': {
+    'color': '#94a3b8'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-1': {
+    'color': '#3b82f6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-5': {
+    'color': '#3b82f6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-9': {
+    'color': '#3b82f6'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-2': {
+    'color': '#16a34a'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-6': {
+    'color': '#16a34a'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-10': {
+    'color': '#16a34a'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-3': {
+    'color': '#ea580c'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-7': {
+    'color': '#ea580c'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-11': {
+    'color': '#ea580c'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-4': {
+    'color': '#9333ea'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-8': {
+    'color': '#9333ea'
+  },
+  '.rainbow-braces .token.token.punctuation.brace-level-12': {
+    'color': '#9333ea'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix)': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.15)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix)': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.15)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(220, 38, 38, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix)': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.15)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix)': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.15)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  'pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection': {
+    'backgroundColor': 'rgba(22, 163, 74, 0.25)'
+  },
+  '.prism-previewer.prism-previewer:before': {
+    'borderColor': '#fff'
+  },
+  '.prism-previewer-gradient.prism-previewer-gradient div': {
+    'borderColor': '#fff',
+    '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': '#fff'
+  },
+  '.prism-previewer-flipped.prism-previewer-flipped.after': {
+    'borderBottomColor': '#fff'
+  },
+  '.prism-previewer-angle.prism-previewer-angle:before': {
+    'background': '#f1f5f9'
+  },
+  '.prism-previewer-time.prism-previewer-time:before': {
+    'background': '#f1f5f9'
+  },
+  '.prism-previewer-easing.prism-previewer-easing': {
+    'background': '#f1f5f9'
+  },
+  '.prism-previewer-angle.prism-previewer-angle circle': {
+    'stroke': '#1e293b',
+    'strokeOpacity': '1'
+  },
+  '.prism-previewer-time.prism-previewer-time circle': {
+    'stroke': '#1e293b',
+    'strokeOpacity': '1'
+  },
+  '.prism-previewer-easing.prism-previewer-easing circle': {
+    'stroke': '#1e293b',
+    'fill': 'transparent'
+  },
+  '.prism-previewer-easing.prism-previewer-easing path': {
+    'stroke': '#1e293b'
+  },
+  '.prism-previewer-easing.prism-previewer-easing line': {
+    'stroke': '#1e293b'
+  }
+}