set colors from the theme

Primajin · Feb 20, 2021 · adb3890 · adb3890
1 parent 6cba359
commit adb3890
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -7,6 +7,7 @@ import {
   darken,
 } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
+import set from 'lodash/set';
 import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale';
 import { blue, pink } from '@material-ui/core/colors';
 import darkScrollbar from '@material-ui/core/darkScrollbar';
@@ -225,15 +226,6 @@ export function ThemeProvider(props) {
         spacing,
       },
       dense ? highDensity : null,
-      {
-        components: {
-          MuiCssBaseline: {
-            styleOverrides: {
-              body: paletteMode === 'dark' ? darkScrollbar() : null,
-            },
-          },
-        },
-      },
       languageMap[userLanguage],
     );
 
@@ -243,6 +235,17 @@ export function ThemeProvider(props) {
     nextTheme.palette.background.level1 =
       paletteMode === 'light' ? '#fff' : nextTheme.palette.grey[900];
 
+    if (paletteMode === 'dark') {
+      const options = {
+        track: nextTheme.palette.background.level2,
+        thumb: nextTheme.palette.background.level1,
+        active: nextTheme.palette.background.paper,
+      };
+      set(nextTheme, 'components.MuiCssBaseline.styleOverrides.body', darkScrollbar(options));
+    } else {
+      set(nextTheme, 'components.MuiCssBaseline.styleOverrides.body', null);
+    }
+
     return nextTheme;
   }, [dense, direction, paletteColors, paletteMode, spacing, userLanguage]);