Files
triggerdotdev--trigger.dev/apps/webapp/app/components/code/shikiTheme.ts
T
2026-07-13 13:32:57 +08:00

223 lines
6.5 KiB
TypeScript

import type { ThemeRegistrationAny } from "streamdown";
// Custom Shiki theme matching the Trigger.dev VS Code dark theme.
// Colors taken directly from the VS Code extension's tokenColors.
export const triggerDarkTheme: ThemeRegistrationAny = {
name: "trigger-dark",
type: "dark",
colors: {
"editor.background": "var(--color-code-background)",
"editor.foreground": "var(--color-code-foreground)",
"editorLineNumber.foreground": "var(--color-code-line-number)",
},
tokenColors: [
// Control flow keywords: pink-purple
{
scope: [
"keyword.control",
"keyword.operator.delete",
"keyword.other.using",
"keyword.other.operator",
"entity.name.operator",
],
settings: { foreground: "var(--color-code-keyword)" },
},
// Storage type (const, let, var, function, class): purple
{
scope: "storage.type",
settings: { foreground: "var(--color-code-storage)" },
},
// Storage modifiers (async, export, etc.): purple
{
scope: ["storage.modifier", "keyword.operator.noexcept"],
settings: { foreground: "var(--color-code-storage)" },
},
// Keyword operator expressions (new, typeof, instanceof, etc.): purple
{
scope: [
"keyword.operator.new",
"keyword.operator.expression",
"keyword.operator.cast",
"keyword.operator.sizeof",
"keyword.operator.instanceof",
"keyword.operator.logical.python",
"keyword.operator.wordlike",
],
settings: { foreground: "var(--color-code-storage)" },
},
// Types and namespaces: hot pink
{
scope: [
"support.class",
"support.type",
"entity.name.type",
"entity.name.namespace",
"entity.name.scope-resolution",
"entity.name.class",
"entity.other.inherited-class",
],
settings: { foreground: "var(--color-code-type)" },
},
// Functions: lime/yellow-green
{
scope: ["entity.name.function", "support.function"],
settings: { foreground: "var(--color-code-function)" },
},
// Variables and parameters: light lavender
{
scope: [
"variable",
"meta.definition.variable.name",
"support.variable",
"entity.name.variable",
"constant.other.placeholder",
],
settings: { foreground: "var(--color-code-variable)" },
},
// Constants and enums: medium purple
{
scope: ["variable.other.constant", "variable.other.enummember"],
settings: { foreground: "var(--color-code-constant)" },
},
// this/self: purple-blue
{
scope: "variable.language",
settings: { foreground: "var(--color-code-language)" },
},
// Object literal keys: medium purple-blue
{
scope: "meta.object-literal.key",
settings: { foreground: "var(--color-code-object-key)" },
},
// Strings: sage green
{
scope: ["string", "meta.embedded.assembly"],
settings: { foreground: "var(--color-code-string)" },
},
// String interpolation punctuation: blue-purple
{
scope: [
"punctuation.definition.template-expression.begin",
"punctuation.definition.template-expression.end",
"punctuation.section.embedded",
],
settings: { foreground: "var(--color-code-template-punctuation)" },
},
// Template expression reset
{
scope: "meta.template.expression",
settings: { foreground: "var(--color-code-plain)" },
},
// Operators: gray (same as foreground)
{
scope: "keyword.operator",
settings: { foreground: "var(--color-code-foreground)" },
},
// Comments: olive gray
{
scope: "comment",
settings: { foreground: "var(--color-code-comment)" },
},
// Language constants (true, false, null, undefined): purple-blue
{
scope: "constant.language",
settings: { foreground: "var(--color-code-language)" },
},
// Numeric constants: light green
{
scope: [
"constant.numeric",
"keyword.operator.plus.exponent",
"keyword.operator.minus.exponent",
],
settings: { foreground: "var(--color-code-number)" },
},
// Regex: dark red
{
scope: "constant.regexp",
settings: { foreground: "var(--color-code-regexp-constant)" },
},
// HTML/JSX tags: purple-blue
{
scope: "entity.name.tag",
settings: { foreground: "var(--color-code-language)" },
},
// Tag brackets: dark gray
{
scope: "punctuation.definition.tag",
settings: { foreground: "var(--color-code-muted)" },
},
// HTML/JSX attributes: light purple
{
scope: "entity.other.attribute-name",
settings: { foreground: "var(--color-code-attribute)" },
},
// Escape characters: gold
{
scope: "constant.character.escape",
settings: { foreground: "var(--color-code-escape)" },
},
// Regex string: dark red
{
scope: "string.regexp",
settings: { foreground: "var(--color-code-regexp)" },
},
// Storage: purple-blue
{
scope: "storage",
settings: { foreground: "var(--color-code-language)" },
},
// TS-specific: type casts, math/dom/json constants
{
scope: [
"meta.type.cast.expr",
"meta.type.new.expr",
"support.constant.math",
"support.constant.dom",
"support.constant.json",
],
settings: { foreground: "var(--color-code-language)" },
},
// Markdown headings: purple-blue bold
{
scope: "markup.heading",
settings: { foreground: "var(--color-code-language)", fontStyle: "bold" },
},
// Markup bold: purple-blue
{
scope: "markup.bold",
settings: { foreground: "var(--color-code-language)", fontStyle: "bold" },
},
// Markup inline raw: sage green
{
scope: "markup.inline.raw",
settings: { foreground: "var(--color-code-string)" },
},
// Markup inserted: light green
{
scope: "markup.inserted",
settings: { foreground: "var(--color-code-number)" },
},
// Markup deleted: sage green
{
scope: "markup.deleted",
settings: { foreground: "var(--color-code-string)" },
},
// Markup changed: purple-blue
{
scope: "markup.changed",
settings: { foreground: "var(--color-code-language)" },
},
// Invalid: red
{
scope: "invalid",
settings: { foreground: "var(--color-code-invalid)" },
},
// JSX text content
{
scope: ["meta.jsx.children"],
settings: { foreground: "var(--color-code-jsx-text)" },
},
],
};