marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix mermaid diagram dark mode styling 

Fixes #706
pull/723/head
James Panther 2023-11-26 11:43:02 +11:00
parent 1373cfd3e4
commit 6e4ace75f8
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased] ## [Unreleased]
### Fixed
- Some Mermaid diagram elements not styled correctly in dark mode ([#706](https://github.com/jpanther/congo/issues/706))
## [2.7.5] - 2023-11-25 ## [2.7.5] - 2023-11-25
### Added ### Added

22
assets/js/mermaid.js
View File

@ -2,19 +2,29 @@ function css(name) {
return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")"; return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
} }
let isDark = document.documentElement.classList.contains("dark");
mermaid.initialize({ mermaid.initialize({
theme: "base", theme: "base",
themeVariables: { themeVariables: {
background: css("--color-neutral"), background: css("--color-neutral"),
primaryColor: css("--color-primary-200"), primaryTextColor: isDark ? css("--color-neutral-200") : css("--color-neutral-700"),
secondaryColor: css("--color-secondary-200"), primaryColor: isDark ? css("--color-primary-700") : css("--color-primary-200"),
tertiaryColor: css("--color-neutral-100"), secondaryColor: isDark ? css("--color-secondary-700") : css("--color-secondary-200"),
primaryBorderColor: css("--color-primary-400"), tertiaryColor: isDark ? css("--color-neutral-700") : css("--color-neutral-100"),
primaryBorderColor: isDark ? css("--color-primary-500") : css("--color-primary-400"),
secondaryBorderColor: css("--color-secondary-400"), secondaryBorderColor: css("--color-secondary-400"),
tertiaryBorderColor: css("--color-neutral-400"), tertiaryBorderColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
lineColor: css("--color-neutral-600"), lineColor: isDark ? css("--color-neutral-300") : css("--color-neutral-600"),
fontFamily: fontFamily:
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
fontSize: "16px", fontSize: "16px",
pieTitleTextSize: "19px",
pieSectionTextSize: "16px",
pieLegendTextSize: "16px",
pieStrokeWidth: "1px",
pieOuterStrokeWidth: "0.5px",
pieStrokeColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
pieOpacity: "1",
}, },
}); });