Change color of ModeIcon

Sascha created 4 years ago

Will use contrastText which should always make the icon visible, but use fade
to dimme the contrast down.

Change summary

webui/src/components/Themer.tsx | 22 +++++++++++++++-------
1 file changed, 15 insertions(+), 7 deletions(-)

Detailed changes

webui/src/components/Themer.tsx

@@ -1,29 +1,37 @@
 import React, { createContext, useContext, useState } from 'react';
 
-import { ThemeProvider } from '@material-ui/core';
+import { fade, ThemeProvider } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton/IconButton';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import { Theme } from '@material-ui/core/styles';
 import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/styles';
 
 const ThemeContext = createContext({
   toggleMode: () => {},
   mode: '',
 });
 
+const useStyles = makeStyles((theme: Theme) => ({
+  iconButton: {
+    color: fade(theme.palette.primary.contrastText, 0.5),
+  },
+}));
+
 const LightSwitch = () => {
   const { mode, toggleMode } = useContext(ThemeContext);
   const nextMode = mode === 'light' ? 'dark' : 'light';
   const description = `Switch to ${nextMode} theme`;
+  const classes = useStyles();
 
   return (
     <Tooltip title={description}>
-      <IconButton onClick={toggleMode} aria-label={description}>
-        {mode === 'light' ? (
-          <WbSunnyRounded color="secondary" />
-        ) : (
-          <NightsStayRounded color="secondary" />
-        )}
+      <IconButton
+        onClick={toggleMode}
+        aria-label={description}
+        className={classes.iconButton}
+      >
+        {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
       </IconButton>
     </Tooltip>
   );