Merge pull request #193 from cboard-org/feature/add-dark-mode

Feature/add dark mode
cboard-org · Aug 23, 2024 · 32d4fb6 · 32d4fb6
2 parents 4029833 + 9c10e85
commit 32d4fb6
Show file tree

Hide file tree

Showing 20 changed files with 137 additions and 137 deletions.
diff --git a/src/app/[locale]/dashboard/[id]/@board/BoardContainer.tsx b/src/app/[locale]/dashboard/[id]/@board/BoardContainer.tsx
@@ -21,7 +21,6 @@ import EditIcon from '@mui/icons-material/Edit';
 import CloseIcon from '@mui/icons-material/Close';
 import Typography from '@mui/material/Typography';
 import styles from './styles';
-import theme from '@/theme';
 
 const BoardSection = () => {
   const message = useTranslations('Board.BoardContainer');
@@ -72,7 +71,11 @@ const BoardSection = () => {
       }}
     >
       <Box
-        bgcolor={isEditing ? theme.palette.primary.light : 'rgb(244, 244, 244)'}
+        bgcolor={
+          isEditing
+            ? (theme) => theme.palette.primary.light
+            : (theme) => theme.palette.grey[100]
+        }
         sx={styles.header}
       >
         <Box pr={2}>

diff --git a/src/app/[locale]/dashboard/[id]/@board/InitialContent.tsx b/src/app/[locale]/dashboard/[id]/@board/InitialContent.tsx
@@ -63,8 +63,6 @@ const PromptExamplesTextField = ({
           readOnly: true,
           style: {
             width: '100%',
-            color: 'black',
-            backgroundColor: 'white',
             border: 'none',
             fontSize: '15px',
             textAlignLast: 'center',

diff --git a/src/app/[locale]/dashboard/[id]/@board/styles.ts b/src/app/[locale]/dashboard/[id]/@board/styles.ts
@@ -11,8 +11,6 @@ export default {
     maxWidth: '250px',
   },
   textArea: {
-    backgroundColor: 'white',
-    color: 'black',
     pointerEvents: 'none',
     width: '100%',
     borderRadius,

diff --git a/src/app/[locale]/dashboard/[id]/@promptForm/PromptForm.tsx b/src/app/[locale]/dashboard/[id]/@promptForm/PromptForm.tsx
@@ -16,7 +16,6 @@ import IconButton from '@mui/material/IconButton';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import AutoFixNormalIcon from '@mui/icons-material/AutoFixNormal';
 import TuneIcon from '@mui/icons-material/Tune';
-import theme from '@/theme';
 import GridSizeSelect from './GridSizeSelect';
 import { useLocale, useTranslations } from 'next-intl';
 import { useBoundStore } from '@/providers/StoreProvider';
@@ -207,7 +206,6 @@ export function PromptForm() {
                     inputComponent: 'textarea',
                     style: {
                       fontSize: '1rem',
-                      color: theme.palette.text.primary,
                     },
                     endAdornment: <SubmitButton text={message('newBoard')} />,
                   }}

diff --git a/src/app/[locale]/dashboard/[id]/@promptForm/styles.ts b/src/app/[locale]/dashboard/[id]/@promptForm/styles.ts
@@ -1,6 +1,6 @@
 import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 import { INITIAL_CONTENT_MAX_WIDTH } from '../constants';
-import theme from '@/theme';
+import { Theme } from '@mui/material/styles';
 
 const borderRadius = 6;
 
@@ -11,22 +11,23 @@ export default {
     maxWidth: INITIAL_CONTENT_MAX_WIDTH,
   },
   submitIconButton: {
-    backgroundColor: theme.palette.primary.main,
-
+    backgroundColor: (theme) => theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
+      backgroundColor: (theme) => theme.palette.primary.dark,
     },
   },
-  submitIcon: { color: theme.palette.primary.contrastText },
-  promptImputsContainer: { color: theme.palette.primary.contrastText },
+  submitIcon: { color: (theme) => theme.palette.primary.contrastText },
+  promptImputsContainer: {
+    color: (theme) => theme.palette.primary.contrastText,
+  },
   sizeSelectorContainer: {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
   sizeSelector: {
     width: 'max-content',
-    backgroundColor: theme.palette.custom.filledBackground,
+    backgroundColor: (theme) => theme.palette.grey[100],
     borderRadius,
     alignItems: 'center',
     display: 'flex',
@@ -41,7 +42,6 @@ export default {
   },
   inputLabelStyle: { ml: 2 },
   textField: {
-    backgroundColor: 'white',
     fontSize: '0.5rem',
     '.MuiFilledInput-underline:before': {
       borderBottom: 'none',
@@ -62,4 +62,4 @@ export default {
       backgroundColor: 'transparent',
     },
   },
-} satisfies Record<string, SxProps>;
+} satisfies Record<string, SxProps<Theme>>;
diff --git a/src/app/[locale]/dashboard/[id]/@savedData/TabsSelector.tsx b/src/app/[locale]/dashboard/[id]/@savedData/TabsSelector.tsx
@@ -49,8 +49,8 @@ export default function TabsSelector({
         onChange={handleChange}
         aria-label="Data selector"
         variant="fullWidth"
-        indicatorColor="secondary"
-        textColor="secondary"
+        indicatorColor="primary"
+        textColor="primary"
         sx={styles.tabs}
       >
         <Tab label={translations('history')} />

diff --git a/src/app/[locale]/dashboard/[id]/layout.tsx b/src/app/[locale]/dashboard/[id]/layout.tsx
@@ -18,8 +18,6 @@ const paddings = { xs: 1, md: 2, lg: 3 };
 const borderRadius = 4;
 const sxStyles = {
   app: {
-    backgroundColor: (theme: Theme) => theme.palette.background.default,
-    color: (theme: Theme) => theme.palette.text.primary,
     height: '100%',
     display: 'flex',
     p: paddings,

diff --git a/src/app/[locale]/globals.css b/src/app/[locale]/globals.css
@@ -4,74 +4,6 @@
   --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-  --container-grey-rgb: rgb(244, 244, 244);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
 }
 
 * {

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -2,8 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from '@/theme';
+import ThemeProvider from '@/providers/ThemeProvider';
 import StoreProvider from '@/providers/StoreProvider';
 import { NextIntlClientProvider, useMessages } from 'next-intl';
 import pick from 'lodash.pick';
@@ -29,13 +28,11 @@ export default function RootLayout({
     <html lang={locale}>
       <body className={inter.className}>
         <AppRouterCacheProvider>
-          <ThemeProvider theme={theme}>
-            <StoreProvider>
-              <NextIntlClientProvider messages={pick(messages, 'Dashboard')}>
-                {children}
-              </NextIntlClientProvider>
-            </StoreProvider>
-          </ThemeProvider>
+          <StoreProvider>
+            <NextIntlClientProvider messages={pick(messages, 'Dashboard')}>
+              <ThemeProvider>{children}</ThemeProvider>
+            </NextIntlClientProvider>
+          </StoreProvider>
         </AppRouterCacheProvider>
       </body>
     </html>

diff --git a/src/components/PictogramEditor/styles.ts b/src/components/PictogramEditor/styles.ts
@@ -2,14 +2,13 @@ import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 
 export default {
   outlinedBox: {
-    backgroundColor: 'background.default',
+    backgroundColor: 'grey[100]',
     borderRadius: 2,
-    border: 1,
-    borderColor: 'primary.light',
+    border: 0.5,
     display: 'flex',
     flexDirection: 'column',
-    gap: 2,
     height: 'fit-content',
+    flexShrink: 0,
     minHeight: '26%',
     boxSizing: 'content-box',
     '&:hover': {
@@ -27,6 +26,7 @@ export default {
     flexDirection: 'column',
     height: '100%',
     justifyContent: { xs: 'space-evenly', sm: 'space-between' },
+    gap: 2,
   },
   morePictosButton: {
     display: 'flex',

diff --git a/src/components/Settings/AppSection.tsx b/src/components/Settings/AppSection.tsx
@@ -14,12 +14,20 @@ import { styles } from './styles';
 import { supportedLocales } from '@/intl/intl.constants';
 import { startTransition } from 'react';
 import { useRouter, usePathname } from '@/navigation';
+import { useBoundStore } from '@/providers/StoreProvider';
+import { useShallow } from 'zustand/react/shallow';
+
+type ColorTheme = 'auto' | 'dark' | 'light';
+const themeOptions = ['auto', 'dark', 'light'];
 
 export default function AppSection() {
   const router = useRouter();
   const pathname = usePathname();
   const messages = useTranslations('Settings');
   const locale = useLocale();
+  const [theme, setTheme] = useBoundStore(
+    useShallow((state) => [state.theme, state.setTheme]),
+  );
 
   const handleOnChange = (event: SelectChangeEvent<string>) => {
     const nextLocale = event.target.value;
@@ -63,6 +71,35 @@ export default function AppSection() {
           <ListItemText id={'labelId'} primary={messages('language')} />
         </ListItemButton>
       </ListItem>
+      <ListItem
+        disablePadding
+        secondaryAction={
+          <FormControl sx={styles.formControl} size="small">
+            <Select
+              labelId="theme-color-select"
+              id="theme-color-select"
+              value={theme}
+              onChange={(event) => {
+                const value = event.target.value;
+                setTheme(value as ColorTheme);
+              }}
+            >
+              {themeOptions.map((option) => (
+                <MenuItem key={option} value={option}>
+                  {option.toUpperCase()}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        }
+      >
+        <ListItemButton>
+          <ListItemIcon>
+            <LanguageIcon />
+          </ListItemIcon>
+          <ListItemText id={'theme-switch'} primary={messages('theme')} />
+        </ListItemButton>
+      </ListItem>
     </List>
   );
 }
diff --git a/src/components/Settings/styles.ts b/src/components/Settings/styles.ts
@@ -1,8 +1,7 @@
-import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
-import theme from '../../theme';
+import { SxProps, Theme } from '@mui/system';
 
 export const styles = {
   paper: { mx: { md: 5, xs: 1 }, mt: 1 },
-  avatar: { bgcolor: theme.palette.primary.light },
+  avatar: { bgcolor: (theme) => theme.palette.primary.light },
   formControl: { m: 1, minWidth: 120 },
-} satisfies Record<string, SxProps>;
+} satisfies Record<string, SxProps<Theme>>;
diff --git a/src/components/Symbol/GenerateIcon.tsx b/src/components/Symbol/GenerateIcon.tsx
@@ -4,7 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 export default function GenerateIcon() {
   return (
     <Tooltip title={'Create a Pictogram'}>
-      <AutoAwesomeIcon />
+      <AutoAwesomeIcon color="secondary" />
     </Tooltip>
   );
 }
diff --git a/src/components/Symbol/Symbol.tsx b/src/components/Symbol/Symbol.tsx
@@ -84,6 +84,7 @@ export default function Symbol({
       {isChangingPicto ? (
         <div className={style.SymbolLoadingContainer}>
           <CircularProgress
+            color="secondary"
             sx={{
               justifySelf: 'center',
               alignSelf: 'space-around',
@@ -140,7 +141,7 @@ const ImagePagination = ({
         <CircleIcon
           sx={{ fontSize: 10 }}
           fontSize="inherit"
-          color="primary"
+          color="secondary"
           key={i}
         />,
       );
@@ -149,7 +150,7 @@ const ImagePagination = ({
         <RadioButtonUncheckedIcon
           sx={{ fontSize: 10 }}
           // fontSize="inherit"
-          color="primary"
+          color="secondary"
           key={i}
         />,
       );

diff --git a/src/components/TileEditorModal/EmblaCarouselThumbsButton.tsx b/src/components/TileEditorModal/EmblaCarouselThumbsButton.tsx
@@ -9,10 +9,12 @@ type PropType = {
   onClick: () => void;
   isChangingPicto?: boolean;
   disabled?: boolean;
+  tileColor?: string;
 };
 
 export const Thumb: React.FC<PropType> = (props) => {
-  const { selected, onClick, src, isChangingPicto, disabled } = props;
+  const { selected, onClick, src, isChangingPicto, disabled, tileColor } =
+    props;
 
   return (
     <div
@@ -22,13 +24,19 @@ export const Thumb: React.FC<PropType> = (props) => {
     >
       <Button
         sx={{
-          border: 1,
-          borderColor: selected ? '#7b1fa2' : 'transparent',
+          border: selected ? 4 : 1,
+          borderColor: selected
+            ? (theme) => theme.palette.primary.main
+            : 'transparent',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           width: '100%',
           height: '100%',
+          backgroundColor: src && tileColor ? tileColor : 'transparent',
+          '&:focus': {
+            backgroundColor: src && tileColor ? tileColor : 'transparent',
+          },
         }}
         variant={'text'}
         focusRipple