diff --git a/playground/src/Editor/MonacoThemes.tsx b/playground/src/Editor/MonacoThemes.tsx
index 8bf55e63ea..5d2080e55a 100644
--- a/playground/src/Editor/MonacoThemes.tsx
+++ b/playground/src/Editor/MonacoThemes.tsx
@@ -5,6 +5,27 @@
 import { useMonaco } from "@monaco-editor/react";
 import { useEffect } from "react";
 
+export const WHITE = "#ffffff";
+export const RADIATE = "#d7ff64";
+export const FLARE = "#6340ac";
+export const ROCK = "#78876e";
+export const GALAXY = "#261230";
+export const SPACE = "#30173d";
+export const COMET = "#6f5d6f";
+export const COSMIC = "#de5fe9";
+export const SUN = "#ffac2f";
+export const ELECTRON = "#46ebe1";
+export const AURORA = "#46eb74";
+export const CONSTELLATION = "#5f6de9";
+export const NEUTRON = "#cff3cf";
+export const PROTON = "#f6afbc";
+export const NEBULA = "#cdcbfb";
+export const SUPERNOVA = "#f1aff6";
+export const STARLIGHT = "#f4f4f1";
+export const LUNAR = "#fbf2fc";
+export const ASTEROID = "#e3cee3";
+export const CRATER = "#f0dfdf";
+
 export default function MonacoThemes() {
   const monaco = useMonaco();
 
@@ -251,395 +272,21 @@ export default function MonacoThemes() {
           token: "comment",
         },
         {
-          foreground: "#86b300",
+          foreground: ROCK,
           token: "string",
         },
         {
-          foreground: "#86b300",
-          token: "constant.other.symbol",
-        },
-        {
-          foreground: "#4cbf99",
-          token: "string.regexp",
-        },
-        {
-          foreground: "#4cbf99",
-          token: "constant.character",
-        },
-        {
-          foreground: "#4cbf99",
-          token: "constant.other",
-        },
-        {
-          foreground: "#a37acc",
-          token: "constant.numeric",
-        },
-        {
-          foreground: "#a37acc",
-          token: "constant.language",
-        },
-        {
-          foreground: "#5c6166",
-          token: "variable",
-        },
-        {
-          foreground: "#5c6166",
-          token: "variable.parameter.function-call",
-        },
-        {
-          foreground: "#f07171",
-          token: "variable.member",
-        },
-        {
-          fontStyle: "italic",
-          foreground: "#55b4d4",
-          token: "variable.language",
-        },
-        {
-          foreground: "#fa8d3e",
-          token: "storage",
-        },
-        {
-          foreground: "#fa8d3e",
+          foreground: SUN,
           token: "keyword",
         },
         {
-          foreground: "#ed9366",
-          token: "keyword.operator",
-        },
-        {
-          foreground: "#5c6166b3",
-          token: "punctuation.separator",
-        },
-        {
-          foreground: "#5c6166b3",
-          token: "punctuation.terminator",
-        },
-        {
-          foreground: "#5c6166",
-          token: "punctuation.section",
-        },
-        {
-          foreground: "#ed9366",
-          token: "punctuation.accessor",
-        },
-        {
-          foreground: "#fa8d3e",
-          token: "punctuation.definition.template-expression",
-        },
-        {
-          foreground: "#fa8d3e",
-          token: "punctuation.section.embedded",
-        },
-        {
-          foreground: "#5c6166",
-          token: "meta.embedded",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.java storage.type",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.haskell storage.type",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.c storage.type",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "entity.other.inherited-class",
-        },
-        {
-          foreground: "#fa8d3e",
-          token: "storage.type.function",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "source.java storage.type.primitive",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "entity.name.function",
-        },
-        {
-          foreground: "#a37acc",
-          token: "variable.parameter",
-        },
-        {
-          foreground: "#a37acc",
-          token: "meta.parameter",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "variable.function",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "variable.annotation",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "meta.function-call.generic",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "support.function.go",
-        },
-        {
-          foreground: "#f07171",
-          token: "support.function",
-        },
-        {
-          foreground: "#f07171",
-          token: "support.macro",
-        },
-        {
-          foreground: "#86b300",
-          token: "entity.name.import",
-        },
-        {
-          foreground: "#86b300",
-          token: "entity.name.package",
-        },
-        {
-          foreground: "#399ee6",
-          token: "entity.name",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "entity.name.tag",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "meta.tag.sgml",
-        },
-        {
-          foreground: "#399ee6",
-          token: "support.class.component",
-        },
-        {
-          foreground: "#55b4d480",
-          token: "punctuation.definition.tag.end",
-        },
-        {
-          foreground: "#55b4d480",
-          token: "punctuation.definition.tag.begin",
-        },
-        {
-          foreground: "#55b4d480",
-          token: "punctuation.definition.tag",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "entity.other.attribute-name",
-        },
-        {
-          fontStyle: "italic",
-          foreground: "#ed9366",
-          token: "support.constant",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "support.type",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "support.class",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "source.go storage.type",
-        },
-        {
-          foreground: "#e6ba7e",
-          token: "meta.decorator variable.other",
-        },
-        {
-          foreground: "#e6ba7e",
-          token: "meta.decorator punctuation.decorator",
-        },
-        {
-          foreground: "#e6ba7e",
-          token: "storage.type.annotation",
-        },
-        {
-          foreground: "#e65050",
-          token: "invalid",
-        },
-        {
-          foreground: "#c594c5",
-          token: "meta.diff",
-        },
-        {
-          foreground: "#c594c5",
-          token: "meta.diff.header",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "source.ruby variable.other.readwrite",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.css entity.name.tag",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.sass entity.name.tag",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.scss entity.name.tag",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.less entity.name.tag",
-        },
-        {
-          foreground: "#399ee6",
-          token: "source.stylus entity.name.tag",
-        },
-        {
-          foreground: "#787b8099",
-          token: "source.css support.type",
-        },
-        {
-          foreground: "#787b8099",
-          token: "source.sass support.type",
-        },
-        {
-          foreground: "#787b8099",
-          token: "source.scss support.type",
-        },
-        {
-          foreground: "#787b8099",
-          token: "source.less support.type",
-        },
-        {
-          foreground: "#787b8099",
-          token: "source.stylus support.type",
-        },
-        {
-          fontStyle: "normal",
-          foreground: "#55b4d4",
-          token: "support.type.property-name",
-        },
-        {
-          foreground: "#787b8099",
-          token: "constant.numeric.line-number.find-in-files - match",
-        },
-        {
-          foreground: "#fa8d3e",
-          token: "constant.numeric.line-number.match",
-        },
-        {
-          foreground: "#86b300",
-          token: "entity.name.filename.find-in-files",
-        },
-        {
-          foreground: "#e65050",
-          token: "message.error",
-        },
-        {
-          fontStyle: "bold",
-          foreground: "#86b300",
-          token: "markup.heading",
-        },
-        {
-          fontStyle: "bold",
-          foreground: "#86b300",
-          token: "markup.heading entity.name",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "markup.underline.link",
-        },
-        {
-          foreground: "#55b4d4",
-          token: "string.other.link",
-        },
-        {
-          fontStyle: "italic",
-          foreground: "#f07171",
-          token: "markup.italic",
-        },
-        {
-          fontStyle: "bold",
-          foreground: "#f07171",
-          token: "markup.bold",
-        },
-        {
-          fontStyle: "bold italic",
-          token: "markup.italic markup.bold",
-        },
-        {
-          fontStyle: "bold italic",
-          token: "markup.bold markup.italic",
-        },
-        {
-          background: "#5c616605",
-          token: "markup.raw",
-        },
-        {
-          background: "#5c61660f",
-          token: "markup.raw.inline",
-        },
-        {
-          fontStyle: "bold",
-          background: "#5c61660f",
-          foreground: "#787b8099",
-          token: "meta.separator",
-        },
-        {
-          foreground: "#4cbf99",
-          fontStyle: "italic",
-          token: "markup.quote",
-        },
-        {
-          foreground: "#f2ae49",
-          token: "markup.list punctuation.definition.list.begin",
-        },
-        {
-          foreground: "#6cbf43",
-          token: "markup.inserted",
-        },
-        {
-          foreground: "#478acc",
-          token: "markup.changed",
-        },
-        {
-          foreground: "#ff7383",
-          token: "markup.deleted",
-        },
-        {
-          foreground: "#e6ba7e",
-          token: "markup.strike",
-        },
-        {
-          background: "#5c61660f",
-          foreground: "#55b4d4",
-          token: "markup.table",
-        },
-        {
-          foreground: "#ed9366",
-          token: "text.html.markdown markup.inline.raw",
-        },
-        {
-          background: "#787b8099",
-          foreground: "#787b8099",
-          token: "text.html.markdown meta.dummy.line-break",
-        },
-        {
-          background: "#5c6166",
-          foreground: "#787b8099",
-          token: "punctuation.definition.markdown",
-        },
-        // Manual changes.
-        {
-          foreground: "#fa8d3e",
+          foreground: CONSTELLATION,
           token: "number",
         },
+        {
+          token: "tag",
+          foreground: ROCK,
+        },
       ],
       encodedTokensColors: [],
     });
@@ -886,394 +533,28 @@ export default function MonacoThemes() {
           token: "comment",
         },
         {
-          foreground: "#aad94c",
+          foreground: RADIATE,
           token: "string",
         },
         {
-          foreground: "#aad94c",
-          token: "constant.other.symbol",
+          foreground: ELECTRON,
+          token: "number",
         },
         {
-          foreground: "#95e6cb",
-          token: "string.regexp",
+          foreground: STARLIGHT,
+          token: "identifier",
         },
         {
-          foreground: "#95e6cb",
-          token: "constant.character",
-        },
-        {
-          foreground: "#95e6cb",
-          token: "constant.other",
-        },
-        {
-          foreground: "#d2a6ff",
-          token: "constant.numeric",
-        },
-        {
-          foreground: "#d2a6ff",
-          token: "constant.language",
-        },
-        {
-          foreground: "#bfbdb6",
-          token: "variable",
-        },
-        {
-          foreground: "#bfbdb6",
-          token: "variable.parameter.function-call",
-        },
-        {
-          foreground: "#f07178",
-          token: "variable.member",
-        },
-        {
-          fontStyle: "italic",
-          foreground: "#39bae6",
-          token: "variable.language",
-        },
-        {
-          foreground: "#ff8f40",
-          token: "storage",
-        },
-        {
-          foreground: "#ff8f40",
+          foreground: SUN,
           token: "keyword",
         },
         {
-          foreground: "#f29668",
-          token: "keyword.operator",
+          foreground: PROTON,
+          token: "tag",
         },
         {
-          foreground: "#bfbdb6b3",
-          token: "punctuation.separator",
-        },
-        {
-          foreground: "#bfbdb6b3",
-          token: "punctuation.terminator",
-        },
-        {
-          foreground: "#bfbdb6",
-          token: "punctuation.section",
-        },
-        {
-          foreground: "#f29668",
-          token: "punctuation.accessor",
-        },
-        {
-          foreground: "#ff8f40",
-          token: "punctuation.definition.template-expression",
-        },
-        {
-          foreground: "#ff8f40",
-          token: "punctuation.section.embedded",
-        },
-        {
-          foreground: "#bfbdb6",
-          token: "meta.embedded",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.java storage.type",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.haskell storage.type",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.c storage.type",
-        },
-        {
-          foreground: "#39bae6",
-          token: "entity.other.inherited-class",
-        },
-        {
-          foreground: "#ff8f40",
-          token: "storage.type.function",
-        },
-        {
-          foreground: "#39bae6",
-          token: "source.java storage.type.primitive",
-        },
-        {
-          foreground: "#ffb454",
-          token: "entity.name.function",
-        },
-        {
-          foreground: "#d2a6ff",
-          token: "variable.parameter",
-        },
-        {
-          foreground: "#d2a6ff",
-          token: "meta.parameter",
-        },
-        {
-          foreground: "#ffb454",
-          token: "variable.function",
-        },
-        {
-          foreground: "#ffb454",
-          token: "variable.annotation",
-        },
-        {
-          foreground: "#ffb454",
-          token: "meta.function-call.generic",
-        },
-        {
-          foreground: "#ffb454",
-          token: "support.function.go",
-        },
-        {
-          foreground: "#f07178",
-          token: "support.function",
-        },
-        {
-          foreground: "#f07178",
-          token: "support.macro",
-        },
-        {
-          foreground: "#aad94c",
-          token: "entity.name.import",
-        },
-        {
-          foreground: "#aad94c",
-          token: "entity.name.package",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "entity.name",
-        },
-        {
-          foreground: "#39bae6",
-          token: "entity.name.tag",
-        },
-        {
-          foreground: "#39bae6",
-          token: "meta.tag.sgml",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "support.class.component",
-        },
-        {
-          foreground: "#39bae680",
-          token: "punctuation.definition.tag.end",
-        },
-        {
-          foreground: "#39bae680",
-          token: "punctuation.definition.tag.begin",
-        },
-        {
-          foreground: "#39bae680",
-          token: "punctuation.definition.tag",
-        },
-        {
-          foreground: "#ffb454",
-          token: "entity.other.attribute-name",
-        },
-        {
-          fontStyle: "italic",
-          foreground: "#f29668",
-          token: "support.constant",
-        },
-        {
-          foreground: "#39bae6",
-          token: "support.type",
-        },
-        {
-          foreground: "#39bae6",
-          token: "support.class",
-        },
-        {
-          foreground: "#39bae6",
-          token: "source.go storage.type",
-        },
-        {
-          foreground: "#e6b673",
-          token: "meta.decorator variable.other",
-        },
-        {
-          foreground: "#e6b673",
-          token: "meta.decorator punctuation.decorator",
-        },
-        {
-          foreground: "#e6b673",
-          token: "storage.type.annotation",
-        },
-        {
-          foreground: "#d95757",
-          token: "invalid",
-        },
-        {
-          foreground: "#c594c5",
-          token: "meta.diff",
-        },
-        {
-          foreground: "#c594c5",
-          token: "meta.diff.header",
-        },
-        {
-          foreground: "#ffb454",
-          token: "source.ruby variable.other.readwrite",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.css entity.name.tag",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.sass entity.name.tag",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.scss entity.name.tag",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.less entity.name.tag",
-        },
-        {
-          foreground: "#59c2ff",
-          token: "source.stylus entity.name.tag",
-        },
-        {
-          foreground: "#acb6bf8c",
-          token: "source.css support.type",
-        },
-        {
-          foreground: "#acb6bf8c",
-          token: "source.sass support.type",
-        },
-        {
-          foreground: "#acb6bf8c",
-          token: "source.scss support.type",
-        },
-        {
-          foreground: "#acb6bf8c",
-          token: "source.less support.type",
-        },
-        {
-          foreground: "#acb6bf8c",
-          token: "source.stylus support.type",
-        },
-        {
-          fontStyle: "normal",
-          foreground: "#39bae6",
-          token: "support.type.property-name",
-        },
-        {
-          foreground: "#acb6bf8c",
-          token: "constant.numeric.line-number.find-in-files - match",
-        },
-        {
-          foreground: "#ff8f40",
-          token: "constant.numeric.line-number.match",
-        },
-        {
-          foreground: "#aad94c",
-          token: "entity.name.filename.find-in-files",
-        },
-        {
-          foreground: "#d95757",
-          token: "message.error",
-        },
-        {
-          fontStyle: "bold",
-          foreground: "#aad94c",
-          token: "markup.heading",
-        },
-        {
-          fontStyle: "bold",
-          foreground: "#aad94c",
-          token: "markup.heading entity.name",
-        },
-        {
-          foreground: "#39bae6",
-          token: "markup.underline.link",
-        },
-        {
-          foreground: "#39bae6",
-          token: "string.other.link",
-        },
-        {
-          fontStyle: "italic",
-          foreground: "#f07178",
-          token: "markup.italic",
-        },
-        {
-          fontStyle: "bold",
-          foreground: "#f07178",
-          token: "markup.bold",
-        },
-        {
-          fontStyle: "bold italic",
-          token: "markup.italic markup.bold",
-        },
-        {
-          fontStyle: "bold italic",
-          token: "markup.bold markup.italic",
-        },
-        {
-          background: "#bfbdb605",
-          token: "markup.raw",
-        },
-        {
-          background: "#bfbdb60f",
-          token: "markup.raw.inline",
-        },
-        {
-          fontStyle: "bold",
-          background: "#bfbdb60f",
-          foreground: "#acb6bf8c",
-          token: "meta.separator",
-        },
-        {
-          foreground: "#95e6cb",
-          fontStyle: "italic",
-          token: "markup.quote",
-        },
-        {
-          foreground: "#ffb454",
-          token: "markup.list punctuation.definition.list.begin",
-        },
-        {
-          foreground: "#7fd962",
-          token: "markup.inserted",
-        },
-        {
-          foreground: "#73b8ff",
-          token: "markup.changed",
-        },
-        {
-          foreground: "#f26d78",
-          token: "markup.deleted",
-        },
-        {
-          foreground: "#e6b673",
-          token: "markup.strike",
-        },
-        {
-          background: "#bfbdb60f",
-          foreground: "#39bae6",
-          token: "markup.table",
-        },
-        {
-          foreground: "#f29668",
-          token: "text.html.markdown markup.inline.raw",
-        },
-        {
-          background: "#acb6bf8c",
-          foreground: "#acb6bf8c",
-          token: "text.html.markdown meta.dummy.line-break",
-        },
-        {
-          background: "#bfbdb6",
-          foreground: "#acb6bf8c",
-          token: "punctuation.definition.markdown",
-        },
-        // Manual changes.
-        {
-          foreground: "#fa8d3e",
-          token: "number",
+          foreground: ASTEROID,
+          token: "delimiter",
         },
       ],
       encodedTokensColors: [],
diff --git a/playground/tailwind.config.cjs b/playground/tailwind.config.cjs
index 018c317e51..b5e39cbb41 100644
--- a/playground/tailwind.config.cjs
+++ b/playground/tailwind.config.cjs
@@ -7,7 +7,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        "ayu-accent": "#fa8d3e",
+        "ayu-accent": "#ffac2f",
         "ayu-background": {
           DEFAULT: "#f8f9fa",
           dark: "#0b0e14",