feat(theme): add multiple new themes to SUPPORTED_THEMES

src/constants/editor/themes.ts

@@ -4,6 +4,266 @@ import { shikiToMonaco } from "@shikijs/monaco";
 import { SUPPORTED_LANGUAGES } from "./languages";
 
 export const SUPPORTED_THEMES = [
+  {
+    key: "andromeeda",
+    value: "andromeeda",
+    label: "Andromeeda",
+  },
+  {
+    key: "aurora-x",
+    value: "aurora-x",
+    label: "Aurora X",
+  },
+  {
+    key: "ayu-dark",
+    value: "ayu-dark",
+    label: "Ayu Dark",
+  },
+  {
+    key: "catppuccin-frappe",
+    value: "catppuccin-frappe",
+    label: "Catppuccin Frappé",
+  },
+  {
+    key: "catppuccin-latte",
+    value: "catppuccin-latte",
+    label: "Catppuccin Latte",
+  },
+  {
+    key: "catppuccin-macchiato",
+    value: "catppuccin-macchiato",
+    label: "Catppuccin Macchiato",
+  },
+  {
+    key: "catppuccin-mocha",
+    value: "catppuccin-mocha",
+    label: "Catppuccin Mocha",
+  },
+  {
+    key: "dark-plus",
+    value: "dark-plus",
+    label: "Dark Plus",
+  },
+  {
+    key: "dracula",
+    value: "dracula",
+    label: "Dracula",
+  },
+  {
+    key: "dracula-soft",
+    value: "dracula-soft",
+    label: "Dracula Soft",
+  },
+  {
+    key: "everforest-dark",
+    value: "everforest-dark",
+    label: "Everforest Dark",
+  },
+  {
+    key: "everforest-light",
+    value: "everforest-light",
+    label: "Everforest Light",
+  },
+  {
+    key: "github-dark",
+    value: "github-dark",
+    label: "GitHub Dark",
+  },
+  // {
+  //   key: "github-dark-default",
+  //   value: "github-dark-default",
+  //   label: "GitHub Dark Default",
+  // },
+  // {
+  //   key: "github-dark-dimmed",
+  //   value: "github-dark-dimmed",
+  //   label: "GitHub Dark Dimmed",
+  // },
+  // {
+  //   key: "github-dark-high-contrast",
+  //   value: "github-dark-high-contrast",
+  //   label: "GitHub Dark High Contrast",
+  // },
+  {
+    key: "github-light",
+    value: "github-light",
+    label: "GitHub Light",
+  },
+  {
+    key: "github-light-default",
+    value: "github-light-default",
+    label: "GitHub Light Default",
+  },
+  {
+    key: "github-light-high-contrast",
+    value: "github-light-high-contrast",
+    label: "GitHub Light High Contrast",
+  },
+  {
+    key: "houston",
+    value: "houston",
+    label: "Houston",
+  },
+  {
+    key: "kanagawa-dragon",
+    value: "kanagawa-dragon",
+    label: "Kanagawa Dragon",
+  },
+  {
+    key: "kanagawa-lotus",
+    value: "kanagawa-lotus",
+    label: "Kanagawa Lotus",
+  },
+  {
+    key: "kanagawa-wave",
+    value: "kanagawa-wave",
+    label: "Kanagawa Wave",
+  },
+  {
+    key: "laserwave",
+    value: "laserwave",
+    label: "Laserwave",
+  },
+  {
+    key: "light-plus",
+    value: "light-plus",
+    label: "Light Plus",
+  },
+  {
+    key: "material-theme",
+    value: "material-theme",
+    label: "Material Theme",
+  },
+  {
+    key: "material-theme-darker",
+    value: "material-theme-darker",
+    label: "Material Theme Darker",
+  },
+  {
+    key: "material-theme-lighter",
+    value: "material-theme-lighter",
+    label: "Material Theme Lighter",
+  },
+  {
+    key: "material-theme-ocean",
+    value: "material-theme-ocean",
+    label: "Material Theme Ocean",
+  },
+  {
+    key: "material-theme-palenight",
+    value: "material-theme-palenight",
+    label: "Material Theme Palenight",
+  },
+  {
+    key: "min-dark",
+    value: "min-dark",
+    label: "Min Dark",
+  },
+  {
+    key: "min-light",
+    value: "min-light",
+    label: "Min Light",
+  },
+  {
+    key: "monokai",
+    value: "monokai",
+    label: "Monokai",
+  },
+  {
+    key: "night-owl",
+    value: "night-owl",
+    label: "Night Owl",
+  },
+  {
+    key: "nord",
+    value: "nord",
+    label: "Nord",
+  },
+  {
+    key: "one-dark-pro",
+    value: "one-dark-pro",
+    label: "One Dark Pro",
+  },
+  {
+    key: "one-light",
+    value: "one-light",
+    label: "One Light",
+  },
+  {
+    key: "plastic",
+    value: "plastic",
+    label: "Plastic",
+  },
+  {
+    key: "poimandres",
+    value: "poimandres",
+    label: "Poimandres",
+  },
+  {
+    key: "red",
+    value: "red",
+    label: "Red",
+  },
+  {
+    key: "rose-pine",
+    value: "rose-pine",
+    label: "Rosé Pine",
+  },
+  {
+    key: "rose-pine-dawn",
+    value: "rose-pine-dawn",
+    label: "Rosé Pine Dawn",
+  },
+  {
+    key: "rose-pine-moon",
+    value: "rose-pine-moon",
+    label: "Rosé Pine Moon",
+  },
+  {
+    key: "slack-dark",
+    value: "slack-dark",
+    label: "Slack Dark",
+  },
+  {
+    key: "slack-ochin",
+    value: "slack-ochin",
+    label: "Slack Ochin",
+  },
+  {
+    key: "snazzy-light",
+    value: "snazzy-light",
+    label: "Snazzy Light",
+  },
+  {
+    key: "solarized-dark",
+    value: "solarized-dark",
+    label: "Solarized Dark",
+  },
+  {
+    key: "solarized-light",
+    value: "solarized-light",
+    label: "Solarized Light",
+  },
+  {
+    key: "synthwave-84",
+    value: "synthwave-84",
+    label: "Synthwave '84",
+  },
+  {
+    key: "tokyo-night",
+    value: "tokyo-night",
+    label: "Tokyo Night",
+  },
+  // {
+  //   key: "vesper",
+  //   value: "vesper",
+  //   label: "Vesper",
+  // },
+  {
+    key: "vitesse-black",
+    value: "vitesse-black",
+    label: "Vitesse Black",
+  },
   {
     key: "vitesse-dark",
     value: "vitesse-dark",
@@ -20,12 +280,12 @@ export const DEFAULT_THEME = SUPPORTED_THEMES[0].value;
 
 export const highlightMonacoEditor = async (monaco: Monaco) => {
   const highlighter = await createHighlighter({
-    themes: SUPPORTED_THEMES.map((theme) => theme.key),
+    themes: SUPPORTED_THEMES.map((theme) => theme.value),
-    langs: SUPPORTED_LANGUAGES.map((lang) => lang.key),
+    langs: SUPPORTED_LANGUAGES.map((lang) => lang.value),
   });
 
   for (const lang of SUPPORTED_LANGUAGES) {
-    monaco.languages.register({ id: lang.key });
+    monaco.languages.register({ id: lang.value });
   }
 
   shikiToMonaco(highlighter, monaco);