diff --git a/packages/web/index.html.tpl b/packages/web/index.html.tpl
index 69fb1621c..b188f34f9 100644
--- a/packages/web/index.html.tpl
+++ b/packages/web/index.html.tpl
@@ -15,6 +15,7 @@
+
diff --git a/packages/web/public/tokens.css b/packages/web/public/tokens.css
new file mode 100644
index 000000000..3074887a6
--- /dev/null
+++ b/packages/web/public/tokens.css
@@ -0,0 +1,178 @@
+.hljs {
+ background: var(--token-base);
+ color: var(--token-text);
+}
+
+.hljs-subst {
+ color: var(--token-subst);
+}
+
+.hljs-formula {
+ color: var(--token-formula);
+}
+
+.hljs-attr {
+ color: var(--token-attr);
+}
+
+.hljs-property {
+ color: var(--token-property);
+}
+
+.hljs-params {
+ color: var(--token-params);
+}
+
+.hljs-comment {
+ color: var(--token-comment);
+}
+
+.hljs-tag {
+ color: var(--token-tag);
+}
+
+.hljs-punctuation {
+ color: var(--token-punctuation);
+}
+
+.hljs-tag .hljs-name {
+ color: var(--token-tag-name);
+}
+
+.hljs-tag .hljs-attr {
+ color: var(--token-tag-attr);
+}
+
+.hljs-keyword {
+ color: var(--token-keyword);
+}
+
+.hljs-attribute {
+ color: var(--token-attribute);
+}
+
+.hljs-selector-tag {
+ color: var(--token-selector-tag);
+}
+
+.hljs-meta .hljs-keyword {
+ color: var(--token-meta-keyword);
+}
+
+.hljs-doctag {
+ color: var(--token-doctag);
+}
+
+.hljs-name {
+ color: var(--token-name);
+}
+
+.hljs-type {
+ color: var(--token-type);
+}
+
+.hljs-string {
+ color: var(--token-string);
+}
+
+.hljs-number {
+ color: var(--token-number);
+}
+
+.hljs-selector-id {
+ color: var(--token-selector-id);
+}
+
+.hljs-selector-class {
+ color: var(--token-selector-class);
+}
+
+.hljs-quote {
+ color: var(--token-quote);
+}
+
+.hljs-template-tag {
+ color: var(--token-template-tag);
+}
+
+.hljs-deletion {
+ color: var(--token-deletion);
+}
+
+.hljs-title {
+ color: var(--token-title);
+}
+
+.hljs-section {
+ color: var(--token-section);
+}
+
+.hljs-regexp {
+ color: var(--token-regexp);
+}
+
+.hljs-symbol {
+ color: var(--token-symbol);
+}
+
+.hljs-variable {
+ color: var(--token-variable);
+}
+
+.hljs-template-variable {
+ color: var(--token-template-variable);
+}
+
+.hljs-link {
+ color: var(--token-link);
+}
+
+.hljs-selector-attr {
+ color: var(--token-selector-attr);
+}
+
+.hljs-operator {
+ color: var(--token-operator);
+}
+
+.hljs-selector-pseudo {
+ color: var(--token-selector-pseudo);
+}
+
+.hljs-literal {
+ color: var(--token-literal);
+}
+
+.hljs-built_in {
+ color: var(--token-built_in);
+}
+
+.hljs-bullet {
+ color: var(--token-bullet);
+}
+
+.hljs-code {
+ color: var(--token-code);
+}
+
+.hljs-addition {
+ color: var(--token-addition);
+}
+
+.hljs-meta {
+ color: var(--token-meta);
+}
+
+.hljs-meta .hljs-string {
+ color: var(--token-meta-string);
+}
+
+.hljs-emphasis {
+ color: var(--token-emphasis);
+ font-style: italic;
+}
+
+.hljs-strong {
+ color: var(--token-strong);
+ font-weight: bold;
+}
diff --git a/packages/web/src/celldata/XmlCellView.svelte b/packages/web/src/celldata/XmlCellView.svelte
index ea52859a5..ca18a81dd 100644
--- a/packages/web/src/celldata/XmlCellView.svelte
+++ b/packages/web/src/celldata/XmlCellView.svelte
@@ -14,6 +14,7 @@
.wrapper {
overflow: scroll;
position: absolute;
+ background: var(--token-base);
top: 0;
left: 0;
right: 0;
diff --git a/packages/web/src/celldata/XmlHighlighter.svelte b/packages/web/src/celldata/XmlHighlighter.svelte
index f681a107d..72530bc23 100644
--- a/packages/web/src/celldata/XmlHighlighter.svelte
+++ b/packages/web/src/celldata/XmlHighlighter.svelte
@@ -4,8 +4,6 @@
import xmlFormat from 'xml-formatter';
import { afterUpdate, onMount } from 'svelte';
- import 'highlight.js/styles/vs.css';
-
export let code = '';
$: formattedCode = xmlFormat(code);
diff --git a/packages/web/src/plugins/ThemeDark.svelte b/packages/web/src/plugins/ThemeDark.svelte
index b982b24c2..7afba20f4 100644
--- a/packages/web/src/plugins/ThemeDark.svelte
+++ b/packages/web/src/plugins/ThemeDark.svelte
@@ -72,5 +72,33 @@
--theme-icon-inv-green: #8fd460;
--theme-icon-inv-red: #e84749;
+
+ --token-base: #303030;
+ --token-text: #ddd;
+ --token-keyword: white;
+ --token-selector-tag: white;
+ --token-literal: white;
+ --token-section: white;
+ --token-link: white;
+ --token-subst: #ddd; /* default - using text color */
+ --token-string: #d88;
+ --token-title: #d88;
+ --token-name: #d88;
+ --token-type: #d88;
+ --token-attribute: #d88;
+ --token-symbol: #d88;
+ --token-bullet: #d88;
+ --token-built_in: #d88;
+ --token-addition: #d88;
+ --token-variable: #d88;
+ --token-template-tag: #d88;
+ --token-template-variable: #d88;
+ --token-comment: #979797;
+ --token-quote: #979797;
+ --token-deletion: #979797;
+ --token-meta: #979797;
+ --token-doctag: inherit; /* Inherits text color, but uses bold */
+ --token-strong: bold;
+ --token-emphasis: italic;
}
diff --git a/packages/web/src/plugins/ThemeLight.svelte b/packages/web/src/plugins/ThemeLight.svelte
index 64b6fe7fc..f0f6baace 100644
--- a/packages/web/src/plugins/ThemeLight.svelte
+++ b/packages/web/src/plugins/ThemeLight.svelte
@@ -45,7 +45,6 @@
--theme-bg-hover: #ccc;
--theme-bg-selected: #91d5ff; /* blue-3 */
--theme-bg-selected-point: #40a9ff; /* blue-5 */
-
--theme-bg-statusbar-inv: #0050b3;
--theme-bg-statusbar-inv-hover: #096dd9;
@@ -67,5 +66,35 @@
--theme-icon-inv-green: #8fd460;
--theme-icon-inv-red: #e84749;
+ --token-base: white;
+ --token-text: black;
+ --token-comment: #008000;
+ --token-quote: #008000;
+ --token-variable: #008000;
+ --token-keyword: #00f;
+ --token-selector-tag: #00f;
+ --token-built_in: #00f;
+ --token-name: #00f;
+ --token-tag: #00f;
+ --token-string: #a31515;
+ --token-title: #a31515;
+ --token-section: #a31515;
+ --token-attribute: #a31515;
+ --token-literal: #a31515;
+ --token-template-tag: #a31515;
+ --token-template-variable: #a31515;
+ --token-type: #a31515;
+ --token-addition: #a31515;
+ --token-deletion: #2b91af;
+ --token-selector-attr: #2b91af;
+ --token-selector-pseudo: #2b91af;
+ --token-meta: #2b91af;
+ --token-doctag: #808080;
+ --token-attr: #f00;
+ --token-symbol: #00b0e8;
+ --token-bullet: #00b0e8;
+ --token-link: #00b0e8;
+ --token-emphasis: italic;
+ --token-strong: bold;
}