fix(settings): always start the dark mode switch in the correct posit…

…ion (#195)

src/components/dark-mode-toggle.tsx

@@ -0,0 +1,23 @@
+import Switch from 'react-switch';
+import useDarkMode from 'use-dark-mode';
+import { appDefaultDarkMode } from '../state';
+import { palette } from '../theme';
+
+function DarkModeToggle(): JSX.Element | null {
+  const darkMode = useDarkMode(appDefaultDarkMode);
+
+  // defer rendering of the toggle until the client has been hydrated
+  if (typeof window === 'undefined') return null;
+
+  return (
+    <Switch
+      id="dark-mode"
+      aria-checked={darkMode.value}
+      checked={darkMode.value}
+      onChange={darkMode.toggle}
+      onColor={palette.primary}
+    />
+  );
+}
+
+export default DarkModeToggle;

src/pages/settings.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react';
-import Switch from 'react-switch';
 import styled from '@emotion/styled';
 import Layout from '../components/layout';
 import NumericInput from '../components/numeric-input';
+import DarkModeToggle from '../components/dark-mode-toggle';
 import Content from '../elements/content';
 import BrandButton from '../elements/brand-button';
 import {
-  appDefaultDarkMode,
   appDefaultPartySize,
   appDefaultTipPercent,
-  useDarkMode,
   useDefaultPartySize,
   useDefaultTipPercent,
 } from '../state';
-import { rhythm, scale, palette } from '../theme';
+import { rhythm, scale } from '../theme';
 import { mq } from '../utils';
 
 const SettingsGrid = styled.section`
@@ -63,7 +61,6 @@ const SettingInput = styled(NumericInput)`
 const SettingsPage: React.FunctionComponent<
   import('reach__router').RouteComponentProps
 > = ({ navigate }) => {
-  const darkMode = useDarkMode(appDefaultDarkMode);
   const [defaultPartySize, setDefaultPartySize] = useDefaultPartySize(
     appDefaultPartySize,
   );
@@ -100,13 +97,7 @@ const SettingsPage: React.FunctionComponent<
         <SettingsGrid>
           <SingleRowSetting>
             <SettingLabel htmlFor="dark-mode">Dark mode:</SettingLabel>
-            <Switch
-              id="dark-mode"
-              aria-checked={darkMode.value}
-              checked={darkMode.value}
-              onChange={darkMode.toggle}
-              onColor={palette.primary}
-            />
+            <DarkModeToggle />
           </SingleRowSetting>
           <Setting>
             <SettingLabel htmlFor="default-party-size">

src/state/index.ts

@@ -1,7 +1,5 @@
 import createPersistedState from 'use-persisted-state';
 
-export { default as useDarkMode } from 'use-dark-mode';
-
 export const useDefaultPartySize = createPersistedState('defaultPartySize');
 export const useDefaultTipPercent = createPersistedState('defaultTipPercent');