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

@@ -150,7 +150,7 @@ funkyheatmap(
             oddRowBackground: 'var(--bs-body-bg)',
             evenRowBackground: 'var(--bs-button-hover)',
             textColor: 'var(--bs-body-color)',
-            strokeColor: 'var(--bs-body-color)',
+            strokeColor: 'var(--bs-dark)',
             headerColor: 'var(--bs-white)',
             hoverColor: 'var(--bs-body-color)'
         }
@@ -163,6 +163,6 @@ funkyheatmap(
 funkyheatmap = (await require('d3@7').then(d3 => {
   window.d3 = d3;
   window._ = _;
-  return import('https://unpkg.com/funkyheatmap-js@0.1.8');
+  return import('https://unpkg.com/funkyheatmap-js@0.1.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: hue-rotate(var(--hue-rotate)) brightness(var(--brightness-dim)) invert(var(--invert-colors)) brightness(var(--brightness-lighten));
+}

theme-dark.scss

@@ -18,3 +18,9 @@ $body-bg: #1d2527;
     --shadow-color: #000;
     --card-bg-color: #323839;
 }
+
+.quarto-figure .funkyheatmap {
+  --hue-rotate: 180deg;
+  --brightness-dim: 80%;
+  --brightness-lighten: 125%;
+}

theme-light.scss

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