The built-in forest theme washed out in dark mode. The base theme with explicit themeVariables uses mint and lime fills that carry forest ink, sage lines and titles that read on light and dark pages, and forest text on the mint edge-label chips. Verified across the flowchart, state, and sequence diagrams in both color modes.
- commit
- 047763186e9f79ba87217b014740ec3f000eddd6
- parent
- 62a6b5d70449bad424a2091ed970dadb6811dea4
- author
- Dami <dami.etoile@gmail.com>
| M | website/ | 43 | +++++++++++++++++++++++++++++- |
@@ -122,7 +122,48 @@ const config: Config = {
122122 themeConfig: {123123 image: "img/lofi-social-card.png",124124 mermaid: {125- theme: { light: "forest", dark: "forest" },125+ // one custom brand palette for both color modes: filled shapes carry126+ // their own text color (mint/lime with forest ink), and floating text127+ // and lines use a mid sage that stays readable on light and dark pages128+ theme: { light: "base", dark: "base" },129+ options: {130+ themeVariables: {131+ fontFamily: '"Karla", system-ui, -apple-system, sans-serif',132+ primaryColor: "#99e5bd",133+ primaryTextColor: "#18231f",134+ primaryBorderColor: "#39725c",135+ secondaryColor: "#d5f26a",136+ secondaryTextColor: "#18231f",137+ secondaryBorderColor: "#39725c",138+ tertiaryColor: "#c9eeda",139+ tertiaryTextColor: "#18231f",140+ tertiaryBorderColor: "#39725c",141+ lineColor: "#6f9d88",142+ // floating labels render on the mint edge-label chip, so they carry143+ // forest ink; standalone titles use the mid sage via titleColor144+ textColor: "#18231f",145+ clusterBkg: "rgba(153, 229, 189, 0.16)",146+ clusterBorder: "#39725c",147+ titleColor: "#6f9d88",148+ clusterTextColor: "#6f9d88",149+ edgeLabelBackground: "#99e5bd",150+ actorBkg: "#99e5bd",151+ actorTextColor: "#18231f",152+ actorBorder: "#39725c",153+ actorLineColor: "#6f9d88",154+ signalColor: "#6f9d88",155+ signalTextColor: "#6f9d88",156+ labelBoxBkgColor: "#d5f26a",157+ labelBoxBorderColor: "#39725c",158+ labelTextColor: "#18231f",159+ loopTextColor: "#6f9d88",160+ activationBkgColor: "#d5f26a",161+ activationBorderColor: "#39725c",162+ noteBkgColor: "#d5f26a",163+ noteTextColor: "#18231f",164+ noteBorderColor: "#39725c",165+ },166+ },126167 },127168 colorMode: {128169 respectPrefersColorScheme: true,