theme: update styles to match bomb.sh

astro.config.mjs

@@ -6,6 +6,11 @@ import topics from "starlight-sidebar-topics";
 import starlightMarkdown from "starlight-markdown";
 import mermaid from "astro-mermaid";
 import { fileURLToPath } from "node:url";
+import { ecThemes } from "./src/ec-themes.mjs";
+
+/** Pick a value per code theme; keeps styleOverrides below readable. */
+const byTheme = (dark, light) => ({ theme }) =>
+	theme.type === "dark" ? dark : light;
 
 const docsRoot = fileURLToPath(new URL(".", import.meta.url));
 
@@ -37,13 +42,58 @@ export default defineConfig({
 			],
 			components: {
 				Head: "./src/starlightOverrides/Head.astro",
+				Header: "./src/starlightOverrides/Header.astro",
+				SiteTitle: "./src/starlightOverrides/SiteTitle.astro",
+				Footer: "./src/starlightOverrides/Footer.astro",
+				MarkdownContent: "./src/starlightOverrides/MarkdownContent.astro",
+				MobileMenuFooter: "./src/starlightOverrides/MobileMenuFooter.astro",
 			},
 			expressiveCode: {
-				themes: ['github-dark-high-contrast', 'github-light-high-contrast'],
+				themes: ecThemes,
 				styleOverrides: {
+					codeFontFamily: '"dm-mono", ui-monospace, monospace',
+					uiFontFamily: '"dm-mono", ui-monospace, monospace',
+					borderRadius: "4px",
+					borderWidth: "1px",
+					borderColor: byTheme("#2b2e38", "#c4c7cf"),
+					codeBackground: byTheme("#000000", "#ffffff"),
+					frames: {
+						shadowColor: "transparent",
+						frameBoxShadowCssValue: "none",
+						terminalBackground: byTheme("#000000", "#ffffff"),
+						terminalTitlebarBackground: "transparent",
+						terminalTitlebarBorderBottomColor: "transparent",
+						terminalTitlebarForeground: byTheme("#8a8e9b", "#6c6e79"),
+						terminalTitlebarDotsForeground: byTheme("#484a54", "#c4c7cf"),
+						editorTabBarBackground: "transparent",
+						editorTabBarBorderColor: "transparent",
+						editorTabBarBorderBottomColor: "transparent",
+						editorActiveTabBackground: "transparent",
+						editorActiveTabForeground: byTheme("#f4f5f9", "#0a0a0d"),
+						editorActiveTabBorderColor: "transparent",
+						editorActiveTabIndicatorTopColor: byTheme("#ff00d2", "#b8009c"),
+						editorActiveTabIndicatorBottomColor: "transparent",
+					},
 					twoSlash: {
-						cursorColor: 'rgba(255 0 210)'
-					}
+						cursorColor: "#ff00d2",
+						borderColor: byTheme("#2b2e38", "#c4c7cf"),
+						background: byTheme("#191b23", "#ffffff"),
+						textColor: byTheme("#f4f5f9", "#0a0a0d"),
+						hoverUnderlineColor: byTheme("#8a8e9b", "#a9abb6"),
+						tagColor: byTheme("#00e5ff", "#00798a"),
+						linkColor: byTheme("#00e5ff", "#00798a"),
+						linkColorHover: byTheme("#ffffff", "#0a0a0d"),
+						errorColor: byTheme("#ff3e47", "#d21f28"),
+						warnColor: byTheme("#e8cf27", "#a37e00"),
+						suggestionColor: byTheme("#07f53f", "#00842e"),
+						messageColor: byTheme("#c4c7cf", "#484a54"),
+						completionBoxBackground: byTheme("#191b23", "#ffffff"),
+						completionBoxBorder: byTheme("#2b2e38", "#c4c7cf"),
+						completionBoxColor: byTheme("#f4f5f9", "#0a0a0d"),
+						completionBoxMatchedColor: byTheme("#00e5ff", "#00798a"),
+						completionBoxHoverBackground: byTheme("#2b2e38", "#f4f5f9"),
+						highlightHue: "311",
+					},
 				},
 				plugins: [ecTwoSlash({
 					twoslashOptions: {
@@ -66,7 +116,7 @@ export default defineConfig({
 					tag: "link",
 					attrs: {
 						rel: "stylesheet",
-						href: "https://use.typekit.net/bst3mzh.css?v=5",
+						href: "https://use.typekit.net/bst3mzh.css?v=7",
 					},
 				},
 				{

package.json

@@ -19,6 +19,7 @@
     "@bomb.sh/tty": "^0.8.0",
     "@clack/core": "^1.4.3",
     "@clack/prompts": "^1.7.0",
+    "@fontsource-variable/inter": "^5.3.0",
     "@types/node": "^22.19.3",
     "@webcontainer/api": "^1.6.1",
     "@webcontainer/snapshot": "^0.1.0",

src/ec-themes.mjs

@@ -0,0 +1,136 @@
+// 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),
+];