feat(theme): Add dark mode color palette

src/App.tsx

@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@mui/material/styles';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { LicenseInfo as MuiXLicense } from '@mui/x-license';
 import { isNotFalsy } from '@seedcompany/common';
@@ -11,7 +10,7 @@ import { SessionProvider } from './components/Session';
 import { SnackbarProvider } from './components/Snackbar';
 import { UploadProvider as FileUploadProvider } from './components/Upload';
 import { Root } from './scenes/Root';
-import { createTheme } from './theme';
+import { ThemeProvider } from './theme/ThemeProvider';
 
 const logRocketAppId = process.env.RAZZLE_LOG_ROCKET_APP_ID;
 if (logRocketAppId) {
@@ -49,7 +48,7 @@ MuiXLicense.setLicenseKey(process.env.MUI_X_LICENSE_KEY!);
  * Order still matters (the first is the outer most component)
  */
 export const appProviders = [
-  <ThemeProvider key="theme" theme={createTheme()} />,
+  <ThemeProvider key="theme" />,
   <LocalizationProvider key="i10n" dateAdapter={LuxonCalenderDateUtils} />,
   <SnackbarProvider key="snackbar" />, // needed by apollo
   <ApolloProvider key="apollo" />,

src/components/posts/PostList.tsx

@@ -37,7 +37,9 @@ export const PostList = ({
     <div>
       <Grid container spacing={2} alignItems="center">
         <Grid item>
-          <Typography variant="h3">Posts</Typography>
+          <Typography variant="h3" color="text.primary">
+            Posts
+          </Typography>
         </Grid>
         <Grid item>
           <Tooltip title="Add Post">

src/scenes/Dashboard/DashboardLayout.tsx

@@ -11,14 +11,23 @@ export const DashboardLayout = ({ children }: ChildrenProp) => (
       mb: 2,
       gap: 2,
       overflowY: 'scroll',
+      backgroundColor: 'background.default',
     }}
   >
     <Helmet title="My Dashboard" />
 
     <Typography
       component="h1"
       variant="h3"
-      sx={{ backgroundColor: '#E3F0F4', p: 4, borderRadius: 1 }}
+      sx={{
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark'
+            ? theme.palette.background.paper
+            : '#E3F0F4',
+        color: 'text.primary',
+        p: 4,
+        borderRadius: 1,
+      }}
     >
       My Dashboard
     </Typography>

src/scenes/Languages/List/LanguageList.tsx

@@ -7,7 +7,7 @@ export const LanguageList = () => {
     <Stack sx={{ flex: 1, padding: 4, pt: 2 }}>
       <Helmet title="Languages" />
       <Stack component="main" sx={{ flex: 1 }}>
-        <Typography variant="h2" paragraph>
+        <Typography variant="h2" paragraph color="text.primary">
           Languages
         </Typography>
         <Stack sx={{ flex: 1, containerType: 'size' }}>

src/scenes/Partners/List/PartnerList.tsx

@@ -7,7 +7,7 @@ export const PartnerList = () => {
     <Stack sx={{ flex: 1, padding: 4, pt: 2 }}>
       <Helmet title="Partners" />
       <Stack component="main" sx={{ flex: 1 }}>
-        <Typography variant="h2" paragraph>
+        <Typography variant="h2" paragraph color="text.primary">
           Partners
         </Typography>
         <Stack sx={{ flex: 1, containerType: 'size' }}>

src/scenes/Projects/Overview/ProjectOverview.tsx

@@ -207,6 +207,7 @@ export const ProjectOverview = () => {
           <header className={classes.header}>
             <Typography
               variant="h2"
+              color="text.primary"
               className={cx(classes.name, project ? null : classes.nameLoading)}
             >
               {!project ? (
@@ -258,7 +259,7 @@ export const ProjectOverview = () => {
           </header>
 
           <div className={classes.subheader}>
-            <Typography variant="h4">
+            <Typography variant="h4" color="text.primary">
               {project ? 'Project Overview' : <Skeleton width={200} />}
             </Typography>
             {project && (
@@ -456,7 +457,7 @@ export const ProjectOverview = () => {
               </span>
             </Grid>
             <Grid item>
-              <Typography variant="h4">
+              <Typography variant="h4" color="text.primary">
                 {project ? 'Upload Files' : <Skeleton width="12ch" />}
               </Typography>
             </Grid>
@@ -512,7 +513,7 @@ export const ProjectOverview = () => {
 
           <Grid container spacing={2} alignItems="center">
             <Grid item>
-              <Typography variant="h3">
+              <Typography variant="h3" color="text.primary">
                 {project && engagements.data ? (
                   !engagements.data.canRead ? (
                     <Redacted

src/scenes/Root/MainLayout.tsx

@@ -1,42 +1,41 @@
+import { Box } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Outlet } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 import { CommentsBar } from '~/components/Comments/CommentsBar';
 import { Error } from '../../components/Error';
 import { useAuthRequired } from '../Authentication';
 import { CreateDialogProviders } from './Creates';
 import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    flex: 1,
-    display: 'flex',
-    height: '100vh',
-  },
-  main: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-  },
-}));
-
 export const MainLayout = () => {
   useAuthRequired();
 
-  const { classes } = useStyles();
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        flex: 1,
+        display: 'flex',
+        height: '100vh',
+        bgcolor: 'background.default',
+      }}
+    >
       <CreateDialogProviders>
         <Sidebar />
       </CreateDialogProviders>
-      <div className={classes.main}>
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
         <Header />
         <ErrorBoundary fallback={<Error show page />}>
           <Outlet />
         </ErrorBoundary>
-      </div>
+      </Box>
       <CommentsBar />
-    </div>
+    </Box>
   );
 };

src/scenes/Root/Root.tsx

@@ -1,5 +1,4 @@
 import loadable from '@loadable/component';
-import { CssBaseline } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Route, Routes } from 'react-router-dom';
 import { Error, NotFoundRoute } from '../../components/Error';
@@ -101,7 +100,6 @@ export const Root = () => {
 
   return (
     <>
-      <CssBaseline />
       <AppMetadata />
       <ErrorBoundary fallback={<Error show page />}>{routes}</ErrorBoundary>
     </>

src/scenes/Root/Sidebar/sidebar.theme.ts

@@ -10,7 +10,7 @@ export const sidebarTheme = createMuiTheme({
     ...base.palette,
     background: {
       ...base.palette.background,
-      paper: '#3c444e',
+      paper: '#2e3d46', // Dark Gray from Seed Company brand colors
     },
   },
   components: {

src/scenes/Users/Detail/UserDetail.tsx

@@ -51,7 +51,9 @@ export const UserDetail = () => {
     >
       <Helmet title={user?.fullName ?? undefined} />
       {error ? (
-        <Typography variant="h4">Error loading person</Typography>
+        <Typography variant="h4" color="text.primary">
+          Error loading person
+        </Typography>
       ) : (
         <>
           <Box

src/scenes/Users/List/UserList.tsx

@@ -7,7 +7,7 @@ export const UserList = () => {
     <Stack sx={{ flex: 1, padding: 4, pt: 2 }}>
       <Helmet title="People" />
       <Stack component="main" sx={{ flex: 1 }}>
-        <Typography variant="h2" paragraph>
+        <Typography variant="h2" paragraph color="text.primary">
           People
         </Typography>
         <Stack sx={{ flex: 1, containerType: 'size' }}>

src/theme/ThemeProvider.tsx

@@ -0,0 +1,17 @@
+import { CssBaseline, useMediaQuery } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ReactNode, useMemo } from 'react';
+import { createTheme } from './createTheme';
+
+export const ThemeProvider = ({ children }: { children?: ReactNode }) => {
+  const isDark = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const theme = useMemo(() => createTheme({ dark: isDark }), [isDark]);
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      <CssBaseline enableColorScheme />
+      {children}
+    </MuiThemeProvider>
+  );
+};

src/theme/overrides.ts

@@ -18,19 +18,24 @@ export const appComponents = ({
       },
     },
     MuiCssBaseline: {
-      styleOverrides: {
+      styleOverrides: (theme) => ({
+        html: {
+          backgroundColor: theme.palette.background.default,
+        },
+        body: {
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+        },
         '#root': {
           minHeight: '100vh',
           display: 'flex',
         },
-        // Idk what this iframe is, but it's overlaying over everything and showing nothing.
-        // Disable pointer events so DevTools will select through it.
         ...(process.env.NODE_ENV !== 'production' && {
           'body > iframe': {
             pointerEvents: 'none',
           },
         }),
-      },
+      }),
     },
     MuiButton: {
       styleOverrides: {

src/theme/palette.ts

@@ -1,15 +1,15 @@
-import { PaletteColor, PaletteColorOptions } from '@mui/material';
+import type { PaletteColor, PaletteColorOptions } from '@mui/material';
 import { grey } from '@mui/material/colors';
-import { PaletteOptions } from '@mui/material/styles';
-import { Role } from '~/api/schema/schema.graphql';
+import type { PaletteOptions } from '@mui/material/styles';
+import type { Role } from '~/api/schema.graphql';
 
 export const createPalette = ({ dark }: { dark?: boolean }) => {
   const mainGreen = '#1EA973';
-  const roleLuminance = dark ? 32 : 84;
+  const roleLuminance = dark ? 50 : 32;
   const palette: PaletteOptions = {
     mode: dark ? 'dark' : 'light',
     background: {
-      default: dark ? '#303030' : grey[50], // MUI v4 default
+      default: dark ? '#303030' : grey[50],
     },
     primary: {
       main: mainGreen,
@@ -30,19 +30,15 @@ export const createPalette = ({ dark }: { dark?: boolean }) => {
       main: '#f2994a',
     },
     text: {
-      // Close to #3c444e while still using alpha
+      // Close to #3c44e while still using alpha
       ...(!dark ? { primary: 'rgba(0, 0, 0, 0.75)' } : {}),
-      // Close to #8f928b while still using alpha
-      // Still it looks so contrast-less for form labels
-      // secondary: 'rgba(0, 0, 0, 0.45)',
     },
 
-    // TODO theme.palette.augmentColor()
     roles: {
       FieldPartner: { main: `hsl(187deg, 71%, ${roleLuminance}%)` }, // #B2EBF2 / hsl(187deg, 71%, 82%)
       Translator: { main: `hsl(36deg, 100%, ${roleLuminance}%)` }, // #FFE0B2 / hsl(36deg, 100%, 85%)
       ProjectManager: { main: `hsl(291deg, 46%, ${roleLuminance}%)` }, // #E1BEE7 / hsl(291deg, 46%, 83%)
-      Marketing: { main: `hsl(88deg, 51%, ${roleLuminance}%)` }, // '#DCEDC8 / hsl(88deg, 51%, 86%)
+      Marketing: { main: `hsl(88deg, 51%, ${roleLuminance}%)` }, // #DCEDC8 / hsl(88deg, 51%, 86%)
     },
   };