demo css dynamic colour palette

CHANGELOG.md

@@ -36,12 +36,11 @@ Documentation was added for future OpenProblems v2. This is still in development
 
 * `More information/Troubleshooting`: Describes the most common errors that can occur when contributing/developing.
 
-# openproblems.bio v2.1.2
-
 ## MINOR CHANGES
 
 * Updating task images from `.png` to `.svg` (#205).
 * Set funkyheatmap colors for dark mode via js instead of css (#208).
+* Set color palette dynamically for funkyheatmap (#210).
 
 # openproblems.bio v2.1.1
 

results/_blocks/_summary_figure.qmd

@@ -163,6 +163,6 @@ funkyheatmap(
 funkyheatmap = (await require('d3@7').then(d3 => {
   window.d3 = d3;
   window._ = _;
-  return import('https://unpkg.com/[email protected].8');
+  return import('https://unpkg.com/[email protected].9');
 })).default;
 ```

results/task_template.css

@@ -58,3 +58,8 @@ div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody {
 section#details details img.img-fluid {
     filter: invert(var(--invert-colors));
 }
+
+/* funkyheatmap */
+.quarto-figure .funkyheatmap .fh-geom {
+    filter: brightness(var(--brightness-dim));
+}

theme-dark.scss

@@ -18,3 +18,7 @@ $body-bg: #1d2527;
     --shadow-color: #000;
     --card-bg-color: #323839;
 }
+
+.quarto-figure .funkyheatmap {
+  --brightness-dim: 85%;
+}

theme-light.scss

@@ -14,4 +14,8 @@
 .card-shadow {
     --shadow-color: #5a6268;
     --card-bg-color: #ffffff;
-}
+}
+
+.quarto-figure .funkyheatmap {
+  --brightness-dim: 100%;
+}