feat: custom theming for code blocks
Some checks failed
Code Analysis / SonarQube (push) Failing after 1m26s
Node.js CI / Lint and Test (push) Successful in 1m30s

This commit is contained in:
Naomi Carrigan 2025-03-05 16:41:11 -08:00
parent 38149e092e
commit dd5fa6f7a2
Signed by: naomi
SSH Key Fingerprint: SHA256:rca1iUI2OhAM6n4FIUaFcZcicmri0jgocqKiTTAfrt8
2 changed files with 428 additions and 1 deletions

View File

@ -1,8 +1,12 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import starlight from "@astrojs/starlight"; import starlight from "@astrojs/starlight";
import { ExpressiveCodeTheme } from "@astrojs/starlight/expressive-code"
import themeJson from "./src/styles/theme.json"
import { navigation } from "./src/components/navigation.ts"; import { navigation } from "./src/components/navigation.ts";
const sakuraDreams = ExpressiveCodeTheme.fromJSONString(JSON.stringify(themeJson));
export default defineConfig({ export default defineConfig({
site: "https://docs.nhcarrigan.com", site: "https://docs.nhcarrigan.com",
integrations: [starlight({ integrations: [starlight({
@ -64,5 +68,9 @@ export default defineConfig({
"./src/styles/style.css", "./src/styles/style.css",
"./src/fonts/font-face.css" "./src/fonts/font-face.css"
], ],
})] expressiveCode: {
themes: [sakuraDreams]
}
}),
]
}); });

419
src/styles/theme.json Normal file
View File

@ -0,0 +1,419 @@
{
"$schema": "vscode://schemas/color-theme",
"type": "light",
"colors": {
"activityBar.background": "#ffd6e0",
"activityBar.foreground": "#d87093",
"activityBarBadge.background": "#ff69b4",
"activityBarBadge.foreground": "#ffffff",
"button.background": "#ff69b4",
"button.foreground": "#ffffff",
"dropdown.background": "#fff0f5",
"dropdown.foreground": "#d87093",
"editor.background": "#ffefef",
"editor.foreground": "#d87093",
"editor.lineHighlightBackground": "#1073cf2d",
"editor.lineHighlightBorder": "#9fced11f",
"editor.selectionBackground": "#ffb6c1",
"editor.selectionHighlightBackground": "#ffb6c180",
"editor.wordHighlightBackground": "#ffb6c180",
"editorCursor.foreground": "#ff69b4",
"editorGroupHeader.tabsBackground": "#ffe4e8",
"editorWhitespace.foreground": "#ffe4e8",
"focusBorder": "#ff69b4",
"input.background": "#fff0f5",
"input.foreground": "#d87093",
"input.placeholderForeground": "#ff77a8",
"list.activeSelectionBackground": "#ffefef",
"list.activeSelectionForeground": "#d87093",
"list.hoverBackground": "#fff0f5",
"list.hoverForeground": "#d87093",
"sideBar.background": "#fff0f5",
"sideBar.foreground": "#d87093",
"sideBarTitle.foreground": "#ff69b4",
"statusBar.background": "#ffd6e0",
"statusBar.foreground": "#d87093",
"statusBar.noFolderBackground": "#ffefef",
"tab.activeBackground": "#ffefef",
"tab.activeForeground": "#d87093",
"tab.inactiveBackground": "#ffd6e0",
"tab.inactiveForeground": "#ff77a8",
"terminal.ansiBlack": "#ffe4e8",
"terminal.ansiBlue": "#db7093",
"terminal.ansiBrightBlack": "#ffefef",
"terminal.ansiBrightBlue": "#f08080",
"terminal.ansiBrightCyan": "#ffc0cb",
"terminal.ansiBrightGreen": "#ff77a8",
"terminal.ansiBrightMagenta": "#ff9aac",
"terminal.ansiBrightRed": "#ff0066",
"terminal.ansiBrightWhite": "#fff5f7",
"terminal.ansiBrightYellow": "#ffa6c9",
"terminal.ansiCyan": "#ffafc5",
"terminal.ansiGreen": "#ff69b4",
"terminal.ansiMagenta": "#ff85a2",
"terminal.ansiRed": "#ff1493",
"terminal.ansiWhite": "#ffd1dc",
"terminal.ansiYellow": "#ffb6c1",
"terminal.background": "#ffefef",
"terminal.foreground": "#d87093",
"titleBar.activeBackground": "#ffd6e0",
"titleBar.activeForeground": "#d87093"
},
"tokenColors": [
{
"scope": [
"comment",
"punctuation.definition.comment"
],
"settings": {
"foreground": "#E5A3B5",
"fontStyle": "italic"
}
},
{
"scope": [
"string",
"string.quoted.single",
"string.quoted.double",
"string.quoted.triple",
"string.template",
"constant.character",
"constant.other.symbol"
],
"settings": {
"foreground": "#FF69B4"
}
},
{
"scope": [
"constant.numeric",
"constant.language",
"constant.character.escape",
"constant.other",
"support.constant"
],
"settings": {
"foreground": "#C96385"
}
},
{
"scope": [
"variable",
"variable.other",
"variable.parameter",
"variable.language",
"variable.object.property"
],
"settings": {
"foreground": "#D87093"
}
},
{
"scope": [
"keyword",
"keyword.control",
"keyword.operator",
"keyword.other",
"storage.type",
"storage.modifier",
"punctuation.decorator"
],
"settings": {
"foreground": "#E35A8F"
}
},
{
"scope": [
"entity.name.function",
"entity.name.method",
"support.function",
"meta.function-call",
"meta.method-call",
"meta.function.dart"
],
"settings": {
"foreground": "#D45A88"
}
},
{
"scope": [
"entity.name.type",
"entity.name.class",
"entity.name.struct",
"entity.name.enum",
"entity.name.union",
"entity.name.trait",
"entity.name.interface",
"support.class",
"support.type",
"meta.return-type"
],
"settings": {
"foreground": "#FF77A8",
"fontStyle": "bold"
}
},
{
"scope": [
"meta.decorator",
"meta.annotation",
"punctuation.definition.annotation"
],
"settings": {
"foreground": "#C96385"
}
},
{
"scope": [
"entity.name.tag",
"punctuation.definition.tag"
],
"settings": {
"foreground": "#E35A8F"
}
},
{
"scope": [
"entity.other.attribute-name",
"entity.other.attribute-name.html",
"entity.other.attribute-name.css",
"support.type.property-name.css",
"entity.other.attribute-name.class"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"support.type.primitive",
"support.type.builtin",
"keyword.type",
"storage.type.primitive",
"storage.type.built-in",
"support.type.primitive.dart"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"string.regexp",
"constant.character.escape.regex"
],
"settings": {
"foreground": "#FF69B4"
}
},
{
"scope": [
"markup.heading",
"entity.name.section"
],
"settings": {
"foreground": "#D45A88",
"fontStyle": "bold"
}
},
{
"scope": [
"markup.bold"
],
"settings": {
"fontStyle": "bold"
}
},
{
"scope": [
"markup.italic"
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
"markup.inline.raw",
"markup.fenced_code",
"markup.raw"
],
"settings": {
"foreground": "#FF69B4"
}
},
{
"scope": [
"support.type.property-name.json",
"support.type.property-name.jsonc"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"keyword.operator.expression",
"keyword.operator.new",
"keyword.operator.optional",
"keyword.operator.comparison",
"keyword.operator.arithmetic",
"keyword.operator.assignment",
"keyword.operator.logical"
],
"settings": {
"foreground": "#E35A8F"
}
},
{
"scope": [
"meta.embedded",
"source.groovy.embedded",
"meta.template.expression"
],
"settings": {
"foreground": "#D87093"
}
},
{
"scope": [
"meta.object-literal.key",
"variable.object.property",
"variable.other.property",
"variable.other.object.property"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"support.variable.property",
"support.variable.object.process",
"support.variable.object.node"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"source.rust storage.type.rust",
"source.rust entity.name.type.rust",
"source.rust entity.name.type.struct.rust"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"source.rust keyword.operator",
"source.rust keyword.operator.arithmetic",
"source.rust keyword.operator.logical"
],
"settings": {
"foreground": "#E35A8F"
}
},
{
"scope": [
"source.python support.type.python",
"source.python support.function.builtin.python"
],
"settings": {
"foreground": "#D45A88"
}
},
{
"scope": [
"source.cs entity.name.type.class.cs",
"source.cs storage.type.cs"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"source.dart support.class.dart",
"source.dart support.type.dart"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"source.prisma keyword.operator",
"source.prisma constant.language",
"source.prisma keyword.type"
],
"settings": {
"foreground": "#E35A8F"
}
},
{
"scope": [
"source.graphql support.type",
"source.graphql constant.character"
],
"settings": {
"foreground": "#FF77A8"
}
},
{
"scope": [
"source.sql keyword.other",
"source.sql storage.type"
],
"settings": {
"foreground": "#E35A8F"
}
},
{
"scope": [
"meta.jsx.children",
"meta.embedded.block.tsx",
"meta.embedded.block.jsx"
],
"settings": {
"foreground": "#D87093"
}
},
{
"scope": [
"meta.decorator.ts",
"meta.decorator.tsx",
"meta.decorator.angular"
],
"settings": {
"foreground": "#C96385"
}
},
{
"scope": "token.info-token",
"settings": {
"foreground": "#316BCD"
}
},
{
"scope": "token.warn-token",
"settings": {
"foreground": "#CD9731"
}
},
{
"scope": "token.error-token",
"settings": {
"foreground": "#CD3131"
}
},
{
"scope": "token.debug-token",
"settings": {
"foreground": "#800080"
}
}
]
}