From 6e4ace75f8e498e8c271b3e288ad11a044a52321 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Sun, 26 Nov 2023 11:43:02 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20mermaid=20diagram=20dark?=
 =?UTF-8?q?=20mode=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #706
---
 CHANGELOG.md         |  4 ++++
 assets/js/mermaid.js | 22 ++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e551bad..e62a187e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [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
 
 ### Added
diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
index 94795fe4..9704c86c 100644
--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@@ -2,19 +2,29 @@ function css(name) {
   return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
 }
 
+let isDark = document.documentElement.classList.contains("dark");
+
 mermaid.initialize({
   theme: "base",
   themeVariables: {
     background: css("--color-neutral"),
-    primaryColor: css("--color-primary-200"),
-    secondaryColor: css("--color-secondary-200"),
-    tertiaryColor: css("--color-neutral-100"),
-    primaryBorderColor: css("--color-primary-400"),
+    primaryTextColor: isDark ? css("--color-neutral-200") : css("--color-neutral-700"),
+    primaryColor: isDark ? css("--color-primary-700") : css("--color-primary-200"),
+    secondaryColor: isDark ? css("--color-secondary-700") : css("--color-secondary-200"),
+    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"),
-    tertiaryBorderColor: css("--color-neutral-400"),
-    lineColor: css("--color-neutral-600"),
+    tertiaryBorderColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
+    lineColor: isDark ? css("--color-neutral-300") : css("--color-neutral-600"),
     fontFamily:
       "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
     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",
   },
 });