diff --git a/src/constants/editor/themes.ts b/src/constants/editor/themes.ts index a038a5c..fa4c8d0 100644 --- a/src/constants/editor/themes.ts +++ b/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), - langs: SUPPORTED_LANGUAGES.map((lang) => lang.key), + themes: SUPPORTED_THEMES.map((theme) => theme.value), + 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);