feat: add themes to xml view

packages/web/index.html.tpl

@@ -15,6 +15,7 @@
     <link rel="manifest" href="manifest.json" />
 
     <link rel="stylesheet" href="global.css" />
+    <link rel="stylesheet" href="tokens.css" />
     <link rel="stylesheet" href="dimensions.css" />
     <link rel="stylesheet" href="bulma.css" />
     <link rel="stylesheet" href="icon-colors.css" />

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;
+}

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;

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);

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;
   }
 </style>

packages/web/src/plugins/ThemeLight.svelte

@@ -46,7 +46,6 @@
     --theme-bg-selected: #91d5ff; /* blue-3 */
     --theme-bg-selected-point: #40a9ff; /* blue-5 */
 
-
     --theme-bg-statusbar-inv: #0050b3;
     --theme-bg-statusbar-inv-hover: #096dd9;
     --theme-bg-statusbar-inv-font: #222;
@@ -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;
   }
 </style>