ec-themes.mjs

// Monochrome Expressive Code themes: pure black & white, with hierarchy
// carried by grayscale dimming and font style instead of hue — code blocks
// read like the bomb.sh hero (white on black in a hairline frame). Terminal
// ANSI colors keep the brand palette so rendered terminal output still pops.
import { ExpressiveCodeTheme } from "@astrojs/starlight/expressive-code";

const palette = {
	dark: {
		bg: "#000000",
		fg: "#f4f5f9", // --color-gray-20
		bright: "#ffffff",
		string: "#a9abb6", // --color-gray-40
		punctuation: "#6c6e79", // --color-gray-60
		comment: "#484a54", // --color-gray-70
		selection: "#97979b33",
	},
	light: {
		bg: "#ffffff",
		fg: "#191b23", // --color-gray-90
		bright: "#000000",
		string: "#484a54", // --color-gray-70
		punctuation: "#8a8e9b", // --color-gray-50
		comment: "#a9abb6", // --color-gray-40
		selection: "#97979b33",
	},
};

function makeTheme(name, type, c) {
	return new ExpressiveCodeTheme({
		name,
		type,
		colors: {
			"editor.background": c.bg,
			"editor.foreground": c.fg,
			"editor.selectionBackground": c.selection,
			"editorLineNumber.foreground": c.comment,
			"terminal.ansiBlack": "#0a0a0d",
			"terminal.ansiRed": "#ff3e47",
			"terminal.ansiGreen": "#07f53f",
			"terminal.ansiYellow": "#e8cf27",
			"terminal.ansiBlue": "#054bff",
			"terminal.ansiMagenta": "#ff00d2",
			"terminal.ansiCyan": "#00e5ff",
			"terminal.ansiWhite": "#ffffff",
		},
		tokenColors: [
			{
				scope: ["comment", "punctuation.definition.comment"],
				settings: { foreground: c.comment, fontStyle: "italic" },
			},
			{
				scope: [
					"punctuation",
					"meta.brace",
					"punctuation.definition.tag",
					"keyword.operator",
				],
				settings: { foreground: c.punctuation },
			},
			{
				scope: [
					"keyword",
					"storage.type",
					"storage.modifier",
					"keyword.control",
					"entity.name.tag",
					"punctuation.definition.keyword",
				],
				settings: { foreground: c.bright, fontStyle: "bold" },
			},
			{
				scope: [
					"string",
					"string.template",
					"punctuation.definition.string",
					"markup.inline.raw",
				],
				settings: { foreground: c.string },
			},
			{
				scope: [
					"entity.name.function",
					"support.function",
					"meta.function-call entity.name.function",
					"variable.function",
					"entity.name.type",
					"entity.name.class",
					"support.type",
					"support.class",
					"entity.other.inherited-class",
					"constant.numeric",
					"constant.language",
					"constant.character",
					"constant.other",
					"variable.other.constant",
					"entity.other.attribute-name",
					"support.type.property-name.json",
				],
				settings: { foreground: c.bright },
			},
			{
				scope: ["variable", "variable.parameter", "meta.object-literal.key"],
				settings: { foreground: c.fg },
			},
			{
				scope: [
					"string.regexp",
					"constant.character.escape",
					"punctuation.definition.template-expression",
				],
				settings: { foreground: c.fg },
			},
			{
				scope: ["invalid", "markup.deleted"],
				settings: { foreground: c.punctuation },
			},
			{ scope: ["markup.inserted"], settings: { foreground: c.bright } },
			{ scope: ["markup.changed"], settings: { foreground: c.string } },
			{
				scope: ["markup.heading", "entity.name.section"],
				settings: { foreground: c.bright, fontStyle: "bold" },
			},
			{ scope: ["markup.bold"], settings: { fontStyle: "bold" } },
			{ scope: ["markup.italic"], settings: { fontStyle: "italic" } },
			{
				scope: ["markup.underline.link", "string.other.link"],
				settings: { foreground: c.fg, fontStyle: "underline" },
			},
		],
	});
}

export const ecThemes = [
	makeTheme("bombshell-dark", "dark", palette.dark),
	makeTheme("bombshell-light", "light", palette.light),
];