Feature: Dark Mode

.devcontainer/devcontainer.json

@@ -21,6 +21,10 @@
       ],
     }
   },
+  "containerEnv": {
+    "CHOKIDAR_USEPOLLING":"true",
+    "WATCHPACK_POLLING":"true"
+  },
   "forwardPorts": [
     // Application and Storybook
     3000,

context/AuthContext.tsx

@@ -22,8 +22,9 @@ import {
 import router from 'next/router';
 import { createContext, useContext, useEffect, useState } from 'react';
 
-type TAuthContext = {
+export type TAuthContext = {
   user: FirebaseAuthUser | null;
+  loading: Boolean;
   signInWithProvider: TSignInAction;
   signWithMagic: TSignInAction;
   logout: () => void;
@@ -36,16 +37,20 @@ export const useAuth = () => useContext(AuthContext);
 // eslint-disable-next-line no-undef
 export const AuthContextProvider = ({ children }: TContextProviderProps) => {
   const [user, setUser] = useState<FirebaseAuthUser | null>(null);
+  const [loading, setLoading] = useState<Boolean>(true);
   const { setAlert } = useAlert();
 
   useEffect(() => {
+    setLoading(true);
     const unsubscribe = onAuthStateChanged(
       auth,
       (user: FirebaseAuthUser | null) => {
         if (user) {
           setUser(user);
+          setLoading(false);
         } else {
           setUser(null);
+          setLoading(false);
         }
       },
     );
@@ -153,7 +158,7 @@ export const AuthContextProvider = ({ children }: TContextProviderProps) => {
 
   return (
     <AuthContext.Provider
-      value={{ user, signInWithProvider, signWithMagic, logout }}
+      value={{ user, loading, signInWithProvider, signWithMagic, logout }}
     >
       {children}
     </AuthContext.Provider>

context/ColorContext.tsx

@@ -0,0 +1,53 @@
+import { TContextProviderProps } from '@context/types';
+import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { getDesignTokens } from '@src/theme';
+
+const { palette: lightPalette } = getDesignTokens('light');
+const { palette: darkPalette } = getDesignTokens('dark');
+
+export const theme = extendTheme({
+  typography: {
+    fontFamily:[
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+  },
+  cssVarPrefix:'omshub',
+  colorSchemes:{
+    light:{
+      palette: lightPalette
+    },
+    dark:{
+      palette: darkPalette
+    }
+  },
+  components: {
+     MuiDrawer: {
+       styleOverrides: {
+         paper: {
+           backgroundColor: "123",
+           boxShadow:"",
+           backgroundImage:"",
+         }
+       }
+     }
+ }
+})
+
+export const ColorProvider = ({ children }: TContextProviderProps) => {
+
+
+  return (
+      <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange> 
+        {children}
+      </CssVarsProvider>
+  );
+};

context/MenuContext.tsx

@@ -6,10 +6,10 @@ const MenuContext = createContext<any>({});
 export const useMenu = () => useContext(MenuContext);
 
 export const MenuContextProvider = ({ children }: TContextProviderProps) => {
-  const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const [loginOpen, setLoginOpen] = useState(false);
 
-  const handleLoginModalOpen = () => setLoginModalOpen(true);
-  const handleLoginModalClose = () => setLoginModalOpen(false);
+  const handleLoginOpen = () => setLoginOpen(true);
+  const handleLoginClose = () => setLoginOpen(false);
 
   const [profileMenuAnchorEl, setProfileMenuAnchorEl] =
     React.useState<null | HTMLElement>(null);
@@ -37,9 +37,9 @@ export const MenuContextProvider = ({ children }: TContextProviderProps) => {
     <MenuContext.Provider
       value={{
         profileMenuAnchorEl,
-        loginModalOpen,
-        handleLoginModalOpen,
-        handleLoginModalClose,
+        loginOpen,
+        handleLoginOpen,
+        handleLoginClose,
         handleProfileMenuOpen,
         handleProfileMenuClose,
         mobileNavMenuAnchorEl,

package.json

@@ -33,9 +33,10 @@
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.14.2",
+    "@mui/material": "^5.14.5",
     "@mui/x-data-grid": "^6.6.0",
     "@toast-ui/react-editor": "^3.2.2",
     "firebase": "^9.15.0",

pages/_app.tsx

@@ -1,19 +1,19 @@
 import { AlertBar } from '@components/AlertBar';
 import { AlertContextProvider } from '@context/AlertContext';
 import { AuthContextProvider } from '@context/AuthContext';
+import { ColorProvider } from '@context/ColorContext';
 import { MenuContextProvider } from '@context/MenuContext';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
 import { NavBar } from '@src/components/NavBar';
 import createEmotionCache from '@src/createEmotionCache';
-import theme from '@src/theme';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
+
 interface MyAppProps extends AppProps {
   emotionCache?: EmotionCache;
   fallback: object;
@@ -23,26 +23,29 @@ const MyApp = ({
   Component,
   emotionCache = clientSideEmotionCache,
   pageProps,
-}: MyAppProps) => (
+}: MyAppProps) => { 
+
+
+  return (
   <CacheProvider value={emotionCache}>
+    <ColorProvider>
     <AlertContextProvider>
       <AuthContextProvider>
         <Head>
           <meta name='viewport' content='initial-scale=1, width=device-width' />
           <title>OMSHub</title>
         </Head>
-        <ThemeProvider theme={theme}>
           <CssBaseline />
           <MenuContextProvider>
             <NavBar />
             <AlertBar />
           </MenuContextProvider>
-          <Component {...pageProps} />
-        </ThemeProvider>
+          {<Component {...pageProps} />}
         {/* <Copyright /> */}
       </AuthContextProvider>
     </AlertContextProvider>
+    </ColorProvider>
   </CacheProvider>
-);
+)};
 
 export default MyApp;

pages/_document.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
-import theme from '@src/theme';
+import { getInitColorSchemeScript, useTheme } from '@mui/material/styles';
 import createEmotionCache from '@src/createEmotionCache';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+import React from 'react';
 
-export default class MyDocument extends Document {
-  render() {
+
+export default function MyDocument(props:any){
+
+  const theme = useTheme()
     return (
       <Html lang='en'>
         <Head>
@@ -17,20 +19,20 @@ export default class MyDocument extends Document {
             href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
           />
           {/* Inject MUI styles first to match with the prepend: true configuration. */}
-          {(this.props as any).emotionStyleTags}
+          {(props as any).emotionStyleTags}
         </Head>
         <body>
+          {getInitColorSchemeScript()}
           <Main />
           <NextScript />
         </body>
       </Html>
     );
-  }
 }
 
 // `getInitialProps` belongs to `_document` (instead of `_app`),
 // it's compatible with static-site generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
+MyDocument.getInitialProps = async (ctx:any) => {
   // Resolution order
   //
   // On the server:
@@ -63,7 +65,7 @@ MyDocument.getInitialProps = async (ctx) => {
   ctx.renderPage = () =>
     originalRenderPage({
       enhanceApp: (App: any) =>
-        (function EnhanceApp(props) {
+        (function EnhanceApp(props:any) {
           return <App emotionCache={cache} {...props} />;
         }),
     });
@@ -83,6 +85,9 @@ MyDocument.getInitialProps = async (ctx) => {
 
   return {
     ...initialProps,
-    emotionStyleTags,
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      ...emotionStyleTags,
+    ],
   };
 };

pages/about.tsx

@@ -17,31 +17,31 @@ const About: NextPage = () => (
       <Typography variant='h4' component='h1' gutterBottom>
         Welcome to OMSHub!
       </Typography>
-      <Typography variant='subtitle1' paragraph color='primary' marginTop={2}>
+      <Typography variant='h5' paragraph  marginTop={2}>
         About this project
       </Typography>
-      <Typography variant='body2' paragraph marginTop={1} align='center'>
+      <Typography variant='body1' paragraph marginTop={1} align='center'>
         This is an open-source, community-driven project. The goal of this site
         is to facilitate current and prospective Georgia Tech OMSx students with
         effective determination their own courses selection, guided by the
         advice and wisdom of their peers.
       </Typography>
-      <Typography variant='body2' paragraph marginTop={1} align='center'>
+      <Typography variant='body1' paragraph marginTop={1} align='center'>
         To request a feature or to report an issue, visit our&nbsp;
-        <Link href='https://github.com/omshub'>GitHub organization</Link>.
+        <Link color='primary.contrastText' href='https://github.com/omshub'>GitHub organization</Link>.
       </Typography>
-      <Typography variant='body2' paragraph marginTop={1} align='center'>
+      <Typography variant='body1' paragraph marginTop={1} align='center'>
         To engage with the community regarding this project, join our&nbsp;
-        <Link href='https://discord.gg/DtdV4Qg3WY'>Discord server</Link>.
+        <Link color='primary.contrastText' href='https://discord.gg/DtdV4Qg3WY'>Discord server</Link>.
       </Typography>
-      <Typography variant='subtitle1' paragraph color='primary' marginTop={2}>
+      <Typography variant='h5' paragraph marginTop={2}>
         Terms of Use & Privacy
       </Typography>
-      <Typography variant='body2' paragraph marginTop={1} align='center'>
+      <Typography variant='body1' paragraph marginTop={1} align='center'>
         We are currently in the process of esablishing a non-profit organization
         and charter to govern this project via decentralized ownership.
       </Typography>
-      <Typography variant='body2' paragraph marginTop={1} align='center'>
+      <Typography variant='body1' paragraph marginTop={1} align='center'>
         We are still working out the appropriate &quot;legalese&quot;, however,
         the basic premise is simple: You own your own data on this platform, and
         this is a strictly non-profit venture (i.e., you data is a contribution