Merge pull request #4542 from Sebastian-Webster/fix-transparent-background

fix(#4541): fixed transparent background not appearing with dark mode

Author: junedchhipa

src/modules/Core.js

@@ -96,8 +96,10 @@ export default class Core {
     })
 
     gl.dom.Paper.node.style.background =
-      cnf.theme.mode === 'dark' && !cnf.chart.background
-        ? 'rgba(0, 0, 0, 0.8)'
+    cnf.theme.mode === 'dark' && !cnf.chart.background
+      ? '#424242'
+      : cnf.theme.mode === 'light' && !cnf.chart.background
+        ? '#fff'
         : cnf.chart.background
 
     this.setSVGDimensions()

src/modules/Theme.js

@@ -179,11 +179,6 @@ export default class Theme {
     options.chart = options.chart || {}
     options.tooltip = options.tooltip || {}
     const mode = options.theme.mode
-    const background = mode === 'dark'
-      ? '#424242'
-      : mode === 'light'
-        ? '#fff'
-        : options.chart.background || '#fff'
     const palette = mode === 'dark'
       ? 'palette4'
       : mode === 'light'
@@ -197,7 +192,6 @@ export default class Theme {
 
     options.tooltip.theme = mode || 'light'
     options.chart.foreColor = foreColor
-    options.chart.background = background
     options.theme.palette = palette
 
     return options

src/modules/settings/Config.js

@@ -277,10 +277,6 @@ export default class Config {
         opts.chart.foreColor = '#f6f7f8'
       }
 
-      if (!opts.chart.background) {
-        opts.chart.background = '#424242'
-      }
-
       if (!opts.theme.palette) {
         opts.theme.palette = 'palette4'
       }

src/modules/settings/Options.js

@@ -270,7 +270,7 @@ export default class Options {
             speed: 350,
           },
         },
-        background: 'transparent',
+        background: '',
         locales: [en],
         defaultLocale: 'en',
         dropShadow: {
@@ -1115,7 +1115,7 @@ export default class Options {
       },
       yaxis: this.yAxis,
       theme: {
-        mode: 'light',
+        mode: '',
         palette: 'palette1', // If defined, it will overwrite globals.colors variable
         monochrome: {
           // monochrome allows you to select just 1 color and fill out the rest with light/dark shade (intensity can be selected)