switch to dark echarts theme if dark mode is enabled

andreasgerstmayr · Nov 23, 2024 · f2bc7cc · f2bc7cc
1 parent 9240212
commit f2bc7cc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/frontend/src/panels.ts b/frontend/src/panels.ts
@@ -38,7 +38,9 @@ export async function echarts(ctx: PanelCtx, elem: HTMLDivElement) {
     }
 
     const renderer = window.navigator.userAgent === "puppeteer" ? "svg" : undefined;
-    const chart = echartslib.init(elem, undefined, { renderer });
+    const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const theme = isDarkMode ? "dark" : undefined;
+    const chart = echartslib.init(elem, theme, { renderer });
     if (options.onClick) {
         chart.on("click", (options as any).onClick);
         delete options.onClick;
@@ -47,6 +49,9 @@ export async function echarts(ctx: PanelCtx, elem: HTMLDivElement) {
         chart.on("dblclick", (options as any).onDblClick);
         delete options.onDblClick;
     }
+    if (theme === "dark" && options.backgroundColor === undefined) {
+        options.backgroundColor = "transparent";
+    }
     chart.setOption(options);
 }
 

diff --git a/src/fava_dashboards/FavaDashboards.js b/src/fava_dashboards/FavaDashboards.js
diff --git a/src/fava_dashboards/templates/style.css b/src/fava_dashboards/templates/style.css
@@ -11,7 +11,7 @@
     text-align: center;
 }
 #dashboard a {
-    color: #333;
+    color: #333; /* --heading-color from fava */
 }
 
 /* set panel min-width to 100% on screens < 802px (navbar + padding + 2*300px) */
@@ -20,8 +20,9 @@
         min-width: 100%;
     }
 }
+
 @media (prefers-color-scheme: dark) {
-    #dashboard a{
-        color: #ccc !important
+    #dashboard a {
+        color: #d7dce2; /* --heading-color from fava */
     }
 }