Merge pull request #46 from brown-ccv/vega-darkmode-option

fix: make dark mode opt out-able for vega mixin
brown-ccv · Nov 11, 2020 · bcb58f6 · bcb58f6
2 parents 7cb4417 + e67d438
commit bcb58f6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/src/mixins/vega-base-mixin.js b/src/mixins/vega-base-mixin.js
@@ -37,6 +37,11 @@ const vegaBaseMixin = {
         return {};
       },
     },
+    enableDarkmode: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     actionsWidth() {
@@ -45,6 +50,36 @@ const vegaBaseMixin = {
     spec() {
       return _.merge({}, this.baseSpec, this.specOverride);
     },
+    darkmodeConfig() {
+      // check for dark mode, if so, make labels/axes and such white
+      if (this.enableDarkmode) {
+        if (
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+          const contrastColor = 'white';
+          return {
+            axis: {
+              domainColor: contrastColor,
+              gridColor: contrastColor,
+              labelColor: contrastColor,
+              tickColor: contrastColor,
+              titleColor: contrastColor,
+            },
+            legend: {
+              labelColor: contrastColor,
+              titleColor: contrastColor,
+            },
+            title: {
+              color: contrastColor,
+              subtitleColor: contrastColor,
+            },
+          };
+        }
+      }
+
+      return {};
+    },
   },
   watch: {
     spec() {
@@ -53,45 +88,22 @@ const vegaBaseMixin = {
     includeActions() {
       this.updatePlot();
     },
+    darkmodeConfig() {
+      this.updatePlot();
+    },
   },
   data() {
     return {
       view: null,
       fullId: null,
       resizeObserver: null,
       parentElement: null,
-      darkmodeConfig: {},
     };
   },
   mounted() {
     // add random number to id to ensure uniqueness - important for storybook
     this.fullId = this.id + Math.floor(Math.random() * Math.floor(1000));
 
-    // check for dark mode, if so, make labels/axes and such white
-    if (
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-      const contrastColor = 'white';
-      this.darkmodeConfig = {
-        axis: {
-          domainColor: contrastColor,
-          gridColor: contrastColor,
-          labelColor: contrastColor,
-          tickColor: contrastColor,
-          titleColor: contrastColor,
-        },
-        legend: {
-          labelColor: contrastColor,
-          titleColor: contrastColor,
-        },
-        title: {
-          color: contrastColor,
-          subtitleColor: contrastColor,
-        },
-      };
-    }
-
     this.$nextTick(() => {
       const el = document.querySelector('#' + this.fullId);
       this.parentElement = el.parentElement;

diff --git a/src/stories/heatmap.stories.mdx b/src/stories/heatmap.stories.mdx
@@ -62,6 +62,7 @@ export const Template = (args, { argTypes }) => ({
               :variable-label="variableLabel"
               :include-actions="includeActions"
               :spec-override="specOverride"
+              :enable-darkmode="enableDarkmode"
             />
           </template>
         </DChartContainer>
@@ -90,7 +91,8 @@ export const Template = (args, { argTypes }) => ({
       { month: 3, station: 'B', temp: 2, depth: 3.2},
       { month: 3, station: 'C', temp: 2.3, depth: 3.9}
     ],
-    specOverride: {axes: [{orient: 'top'}]}
+    specOverride: {axes: [{orient: 'top'}]},
+    enableDarkmode: true,
   }}>
     {Template.bind({})}
   </Story>

diff --git a/src/stories/multilinechart.stories.mdx b/src/stories/multilinechart.stories.mdx
@@ -64,6 +64,7 @@ export const Template = (args, { argTypes }) => ({
               :variable-label="variableLabel"
               :include-actions="includeActions"
               :spec-override="specOverride"
+              :enable-darkmode="enableDarkmode"
             />
           </template>
         </DChartContainer>
@@ -93,6 +94,7 @@ export const Template = (args, { argTypes }) => ({
       { month: 3, station: 'C', temp: 2.3, depth: 3.9}
     ],
     specOverride: {axes: [{orient: 'top'}]},
+    enableDarkmode: true,
   }}>
     {Template.bind({})}
   </Story>