Merge pull request #927 from makerdao/dark-mode-first-load

Dark mode first load fix

Author: torhector2

modules/app/components/layout/Header.tsx

@@ -134,6 +134,7 @@ const Header = (): JSX.Element => {
   const { network } = useWeb3();
   const { data: gas } = useGasPrice({ network });
   const [mode, setMode] = useColorMode();
+  const [renderedMode, setRenderedMode] = useState('light');
 
   const onToggleTheme = () => {
     const next = mode === 'dark' ? 'light' : 'dark';
@@ -142,6 +143,10 @@ const Header = (): JSX.Element => {
     setMode(next);
   };
 
+  useEffect(() => {
+    setRenderedMode(mode);
+  }, [mode]);
+
   return (
     <Box
       as="header"
@@ -164,7 +169,7 @@ const Header = (): JSX.Element => {
         <InternalLink href={'/'} title="View homepage">
           <IconButton aria-label="Sky home" sx={{ width: '70px', height: 4, p: 0 }}>
             <Icon
-              name={mode === 'dark' ? 'sky_white' : 'sky'}
+              name={renderedMode === 'dark' ? 'sky_white' : 'sky'}
               size="auto"
               sx={{ width: '70px', cursor: 'pointer' }}
             />

modules/home/components/Footer.tsx

@@ -144,7 +144,7 @@ export default function Footer({ locale = 'en' }: { locale?: string }): React.Re
       >
         <ContactSection
           heading="Official Community Channels"
-          icon={mode === 'dark' ? 'sky_white' : 'sky'}
+          icon={renderedMode === 'dark' ? 'sky_white' : 'sky'}
           logos={logos.sky}
         />
         <Flex