chore(template-explorer): tweak theme

packages/template-explorer/src/index.ts

@@ -4,6 +4,7 @@ import { compile as ssrCompile } from '@vue/compiler-ssr'
 import { compilerOptions, initOptions, ssrMode } from './options'
 import { watchEffect } from '@vue/runtime-dom'
 import { SourceMapConsumer } from 'source-map'
+import theme from './theme'
 
 declare global {
   interface Window {
@@ -19,8 +20,21 @@ interface PersistedState {
   options: CompilerOptions
 }
 
+const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
+  fontSize: 14,
+  scrollBeyondLastLine: false,
+  renderWhitespace: 'selection',
+  minimap: {
+    enabled: false
+  }
+}
+
 window.init = () => {
   const monaco = window.monaco
+
+  monaco.editor.defineTheme('my-theme', theme)
+  monaco.editor.setTheme('my-theme')
+
   const persistedState: PersistedState = JSON.parse(
     decodeURIComponent(window.location.hash.slice(1)) ||
       localStorage.getItem('state') ||
@@ -94,22 +108,11 @@ window.init = () => {
     }
   }
 
-  const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
-    theme: 'vs-dark',
-    fontSize: 14,
-    wordWrap: 'on',
-    scrollBeyondLastLine: false,
-    renderWhitespace: 'selection',
-    contextmenu: false,
-    minimap: {
-      enabled: false
-    }
-  }
-
   const editor = monaco.editor.create(document.getElementById('source')!, {
     value: persistedState.src || `<div>Hello World!</div>`,
     language: 'html',
-    ...sharedEditorOptions
+    ...sharedEditorOptions,
+    wordWrap: 'bounded'
   })
 
   editor.getModel()!.updateOptions({

packages/template-explorer/src/theme.ts

@@ -0,0 +1,244 @@
+export default {
+  base: 'vs-dark' as const,
+  inherit: true,
+  rules: [
+    {
+      foreground: 'de935f',
+      token: 'number'
+    },
+    {
+      foreground: '969896',
+      token: 'comment'
+    },
+    {
+      foreground: 'ced1cf',
+      token: 'keyword.operator.class'
+    },
+    {
+      foreground: 'ced1cf',
+      token: 'constant.other'
+    },
+    {
+      foreground: 'ced1cf',
+      token: 'source.php.embedded.line'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'variable'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'support.other.variable'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'string.other.link'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'string.regexp'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'entity.name.tag'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'entity.other.attribute-name'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'meta.tag'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'declaration.tag'
+    },
+    {
+      foreground: 'cc6666',
+      token: 'markup.deleted.git_gutter'
+    },
+    {
+      foreground: 'de935f',
+      token: 'constant.numeric'
+    },
+    {
+      foreground: 'de935f',
+      token: 'constant.language'
+    },
+    {
+      foreground: 'de935f',
+      token: 'support.constant'
+    },
+    {
+      foreground: 'de935f',
+      token: 'constant.character'
+    },
+    {
+      foreground: 'de935f',
+      token: 'variable.parameter'
+    },
+    {
+      foreground: 'de935f',
+      token: 'punctuation.section.embedded'
+    },
+    {
+      foreground: 'de935f',
+      token: 'keyword.other.unit'
+    },
+    {
+      foreground: 'f0c674',
+      token: 'entity.name.class'
+    },
+    {
+      foreground: 'f0c674',
+      token: 'entity.name.type.class'
+    },
+    {
+      foreground: 'f0c674',
+      token: 'support.type'
+    },
+    {
+      foreground: 'f0c674',
+      token: 'support.class'
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'string'
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'constant.other.symbol'
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'entity.other.inherited-class'
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'markup.heading'
+    },
+    {
+      foreground: 'b5bd68',
+      token: 'markup.inserted.git_gutter'
+    },
+    {
+      foreground: '8abeb7',
+      token: 'keyword.operator'
+    },
+    {
+      foreground: '8abeb7',
+      token: 'constant.other.color'
+    },
+    {
+      foreground: '81a2be',
+      token: 'entity.name.function'
+    },
+    {
+      foreground: '81a2be',
+      token: 'meta.function-call'
+    },
+    {
+      foreground: '81a2be',
+      token: 'support.function'
+    },
+    {
+      foreground: '81a2be',
+      token: 'keyword.other.special-method'
+    },
+    {
+      foreground: '81a2be',
+      token: 'meta.block-level'
+    },
+    {
+      foreground: '81a2be',
+      token: 'markup.changed.git_gutter'
+    },
+    {
+      foreground: 'b294bb',
+      token: 'keyword'
+    },
+    {
+      foreground: 'b294bb',
+      token: 'storage'
+    },
+    {
+      foreground: 'b294bb',
+      token: 'storage.type'
+    },
+    {
+      foreground: 'b294bb',
+      token: 'entity.name.tag.css'
+    },
+    {
+      foreground: 'ced2cf',
+      background: 'df5f5f',
+      token: 'invalid'
+    },
+    {
+      foreground: 'ced2cf',
+      background: '82a3bf',
+      token: 'meta.separator'
+    },
+    {
+      foreground: 'ced2cf',
+      background: 'b798bf',
+      token: 'invalid.deprecated'
+    },
+    {
+      foreground: 'ffffff',
+      token: 'markup.inserted.diff'
+    },
+    {
+      foreground: 'ffffff',
+      token: 'markup.deleted.diff'
+    },
+    {
+      foreground: 'ffffff',
+      token: 'meta.diff.header.to-file'
+    },
+    {
+      foreground: 'ffffff',
+      token: 'meta.diff.header.from-file'
+    },
+    {
+      foreground: '718c00',
+      token: 'markup.inserted.diff'
+    },
+    {
+      foreground: '718c00',
+      token: 'meta.diff.header.to-file'
+    },
+    {
+      foreground: 'c82829',
+      token: 'markup.deleted.diff'
+    },
+    {
+      foreground: 'c82829',
+      token: 'meta.diff.header.from-file'
+    },
+    {
+      foreground: 'ffffff',
+      background: '4271ae',
+      token: 'meta.diff.header.from-file'
+    },
+    {
+      foreground: 'ffffff',
+      background: '4271ae',
+      token: 'meta.diff.header.to-file'
+    },
+    {
+      foreground: '3e999f',
+      fontStyle: 'italic',
+      token: 'meta.diff.range'
+    }
+  ],
+  colors: {
+    'editor.foreground': '#C5C8C6',
+    'editor.background': '#1D1F21',
+    'editor.selectionBackground': '#373B41',
+    'editor.lineHighlightBackground': '#282A2E',
+    'editorCursor.foreground': '#AEAFAD',
+    'editorWhitespace.foreground': '#4B4E55'
+  }
+}

packages/template-explorer/style.css

@@ -1,6 +1,8 @@
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --bg: #1D1F21;
+  --border: #333;
 }
 
 #header {
@@ -10,8 +12,8 @@ body {
   right: 0;
   height: 60px;
   box-sizing: border-box;
-  background-color: #1e1e1e;
-  border-bottom: 1px solid #333;
+  background-color: var(--bg);
+  border-bottom: 1px solid var(--border);
   padding: 0.3em 1.6em;
   color: #fff;
   z-index: 1;
@@ -44,8 +46,8 @@ h1 {
   display: none;
   margin-top: 15px;
   list-style-type: none;
-  background-color: #1e1e1e;
-  border: 1px solid #333;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
   padding: 15px 30px;
 }