feat: dark/Light mode option can be toggled via an option

Theme mode can now be toggled and set via option, instead of always following the systeme fix #314
wa0x6e · Feb 18, 2023 · 7e025fe · 7e025fe
1 parent b5b2b69
commit 7e025fe
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/src/cal-heatmap.scss b/src/cal-heatmap.scss
@@ -25,7 +25,7 @@
     stroke-width: 1px;
   }
 
-  @media (prefers-color-scheme: dark) {
+  &[data-theme='dark'] {
     .graph-rect {
       fill: #2d333b;
     }
@@ -98,7 +98,7 @@
     left: calc($arrow-size / -2);
   }
 
-  @media (prefers-color-scheme: dark) {
+  &[data-theme='dark'] {
     background: #636e7b;
     color: #cdd9e5;
   }

diff --git a/src/calendar/CalendarPainter.ts b/src/calendar/CalendarPainter.ts
@@ -38,11 +38,12 @@ export default class CalendarPainter {
   }
 
   setup(): boolean {
-    const { itemSelector } = this.calendar.options.options;
+    const { itemSelector, theme } = this.calendar.options.options;
 
     if (!this.root) {
       this.root = select(itemSelector)
         .append('svg')
+        .attr('data-theme', theme)
         .attr('class', 'cal-heatmap-container');
       this.root
         .attr('x', 0)

diff --git a/src/options/Options.ts b/src/options/Options.ts
@@ -114,6 +114,7 @@ export type OptionsType = {
   scale?: ScaleOptions;
   animationDuration: number;
   verticalOrientation: boolean;
+  theme: 'light' | 'dark';
 };
 
 type InternalOptionsType = {
@@ -271,6 +272,9 @@ export default class Options {
       // Animation duration, in ms
       animationDuration: 200,
 
+      // Theme mode: dark/light
+      theme: 'light',
+
       // Internally used options, do not edit not set
       x: {
         domainHorizontalLabelWidth: 0,

diff --git a/src/plugins/Tooltip.ts b/src/plugins/Tooltip.ts
@@ -110,6 +110,8 @@ export default class Tooltip implements IPlugin {
       this.root = document.body.appendChild(tooltipElem);
     }
 
+    this.root.setAttribute('data-theme', this.calendar.options.options.theme);
+
     this.popperInstance = createPopper<StrictModifiers>(
       virtualElement,
       this.root,