Add SwitchTheme to MyApp

pages/_app.js

@@ -1,24 +1,56 @@
-import React, {useEffect} from 'react'
+import React, {useEffect, useMemo, useState} from 'react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles'
+import {createMuiTheme, ThemeProvider, makeStyles} from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
+import {Box, useMediaQuery} from '@material-ui/core'
 
-const darkTheme = createMuiTheme({
+import SwitchTheme from '../components/switch-theme'
-  palette: {
+
-    type: 'dark',
+const useStyles = makeStyles({
-    primary: {
+  switch: {
-      light: '#81c784',
+    position: 'absolute',
-      main: '#4caf50',
+    right: '1em',
-      dark: '#388e3c',
+    top: '95px',
-      contrastText: '#fff'
+    zIndex: 9990,
-    }
+    cursor: 'pointer'
+  },
+  switchFixed: {
+    position: 'fixed',
+    right: '1em',
+    top: '95px',
+    zIndex: 9990,
+    cursor: 'pointer'
   }
 })
 
 export default function MyApp(props) {
   const {Component, pageProps} = props
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const [darkMode, setDarkMode] = useState(prefersDarkMode)
+  const [switchFixed, setSwitchFixed] = useState(false)
+  const classes = useStyles()
+
+  const darkTheme = useMemo(() => createMuiTheme({
+    palette: {
+      type: darkMode ? 'dark' : 'light',
+      primary: {
+        light: '#81c784',
+        main: '#4caf50',
+        dark: '#388e3c',
+        contrastText: '#fff'
+      }
+    }
+  }), [darkMode])
+
+  useEffect(() => {
+    if (prefersDarkMode) {
+      setDarkMode(true)
+    } else {
+      setDarkMode(false)
+    }
+  }, [prefersDarkMode])
 
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
@@ -27,10 +59,21 @@ export default function MyApp(props) {
     }
   }, [])
 
+  useEffect(() => {
+    if (props.router.pathname.slice(0, 5) === '/teks') {
+      setSwitchFixed(true)
+    } else {
+      setSwitchFixed(false)
+    }
+  }, [props])
+
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Provider session={pageProps.session}>
+        <Box className={switchFixed ? classes.switchFixed : classes.switch}>
+          <SwitchTheme darkMode={darkMode} setDarkMode={setDarkMode} />
+        </Box>
         {Component.auth ? (
           <Auth><Component {...pageProps} /></Auth>
         ) : (
@@ -66,7 +109,8 @@ function Auth({children}) {
 
 MyApp.propTypes = {
   Component: PropTypes.elementType.isRequired,
-  pageProps: PropTypes.object.isRequired
+  pageProps: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired
 }
 
 Auth.propTypes = {