chore: adds light mode theme to dev tools

docs/components/CodeExample.client.vue

@@ -29,7 +29,6 @@ const stopWatch = watch(el, () => {
   })
   stopWatch()
 
-
   let ignoreEvent = false
   function updateHeight() {
     const width = container.clientWidth
@@ -48,8 +47,10 @@ const stopWatch = watch(el, () => {
     updateHeight()
   })
   function runInsideWorker(code: string) {
-    var blob = new Blob(['self.onmessage = ', code], { type: 'text/javascript' });
-    var url = URL.createObjectURL(blob);
+    var blob = new Blob(["self.onmessage = ", code], {
+      type: "text/javascript",
+    })
+    var url = URL.createObjectURL(blob)
   }
   updateHeight()
 })

docs/monaco-config.ts

@@ -6,6 +6,7 @@ import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
 import tempoDeclarations from "../dist/index.d.ts?raw"
 import nightOwl from "~/src/night-owl"
+import chromeTools from "~/src/chrome-tools"
 
 if (typeof window !== "undefined") {
   self.MonacoEnvironment = {
@@ -32,5 +33,11 @@ if (typeof window !== "undefined") {
     }
   `)
   monaco.editor.defineTheme("night-owl", nightOwl)
-  monaco.editor.setTheme("night-owl")
+  monaco.editor.defineTheme("chrome-dev-tools", chromeTools)
+  const isDarkMode = false
+  if (isDarkMode) {
+    monaco.editor.setTheme("night-owl")
+  } else {
+    monaco.editor.setTheme("chrome-dev-tools")
+  }
 }

docs/src/chrome-tools.ts

@@ -0,0 +1,112 @@
+import type { editor } from "monaco-editor"
+
+export default {
+  base: "vs",
+  inherit: true,
+  rules: [
+    {
+      background: "FFFFFF",
+      token: "",
+    },
+    {
+      foreground: "c41a16",
+      token: "string",
+    },
+    {
+      foreground: "1c00cf",
+      token: "constant.numeric",
+    },
+    {
+      foreground: "aa0d91",
+      token: "keyword",
+    },
+    {
+      foreground: "000000",
+      token: "keyword.operator",
+    },
+    {
+      foreground: "aa0d91",
+      token: "constant.language",
+    },
+    {
+      foreground: "990000",
+      token: "support.class.exception",
+    },
+    {
+      foreground: "000000",
+      token: "entity.name.function",
+    },
+    {
+      fontStyle: "bold underline",
+      token: "entity.name.type",
+    },
+    {
+      fontStyle: "italic",
+      token: "variable.parameter",
+    },
+    {
+      foreground: "007400",
+      token: "comment",
+    },
+    {
+      foreground: "ff0000",
+      token: "invalid",
+    },
+    {
+      background: "e71a1100",
+      token: "invalid.deprecated.trailing-whitespace",
+    },
+    {
+      foreground: "000000",
+      background: "fafafafc",
+      token: "text source",
+    },
+    {
+      foreground: "aa0d91",
+      token: "meta.tag",
+    },
+    {
+      foreground: "aa0d91",
+      token: "declaration.tag",
+    },
+    {
+      foreground: "000000",
+      fontStyle: "bold",
+      token: "support",
+    },
+    {
+      foreground: "aa0d91",
+      token: "storage",
+    },
+    {
+      fontStyle: "bold underline",
+      token: "entity.name.section",
+    },
+    {
+      foreground: "000000",
+      fontStyle: "bold",
+      token: "entity.name.function.frame",
+    },
+    {
+      foreground: "333333",
+      token: "meta.tag.preprocessor.xml",
+    },
+    {
+      foreground: "994500",
+      fontStyle: "italic",
+      token: "entity.other.attribute-name",
+    },
+    {
+      foreground: "881280",
+      token: "entity.name.tag",
+    },
+  ],
+  colors: {
+    "editor.foreground": "#000000",
+    "editor.background": "#FFFFFF",
+    "editor.selectionBackground": "#BAD6FD",
+    "editor.lineHighlightBackground": "#0000001A",
+    "editorCursor.foreground": "#000000",
+    "editorWhitespace.foreground": "#B3B3B3F4",
+  },
+} as editor.IStandaloneThemeData