Merge pull request #221 from linea-it/220-organize-the-theme

Closes #220 - organization of the themes.
linea-it · Jan 25, 2024 · fefd89a · fefd89a
2 parents ed6fb58 + 2170598
commit fefd89a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 40 deletions.
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
@@ -1,12 +1,14 @@
 import CssBaseline from '@mui/material/CssBaseline'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { ThemeProvider } from '@mui/material/styles'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import { useEffect, useState } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import Footer from '../components/Footer'
 import { AuthProvider } from '../contexts/AuthContext'
+import lightTheme from '../themes/light'
+import darkTheme from '../themes/dark'
 import '../styles/global.css'
 import Header from '../components/Header'
 
@@ -29,21 +31,6 @@ export default function MyApp(props) {
     }
   }, [])
 
-  const light = createTheme({
-    palette: {
-      mode: 'light',
-      background: {
-        default: '#f1f1f1'
-      }
-    }
-  })
-
-  const dark = createTheme({
-    palette: {
-      mode: 'dark'
-    }
-  })
-
   return (
     <>
       <Head>
@@ -54,7 +41,7 @@ export default function MyApp(props) {
         />
       </Head>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={darkMode ? dark : light}>
+        <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
           <CssBaseline />
           <div
             style={{

diff --git a/frontend/themes/dark.js b/frontend/themes/dark.js
@@ -0,0 +1,9 @@
+import { createTheme } from '@mui/material/styles'
+
+const darkTheme = createTheme({
+    palette: {
+        mode: 'dark',
+    },
+})
+
+export default darkTheme
diff --git a/frontend/themes/light.js b/frontend/themes/light.js
@@ -1,30 +1,12 @@
 import { createTheme } from '@mui/material/styles'
 
-const light = createTheme({
+const lightTheme = createTheme({
   palette: {
-    primary: {
-      light: '#4f5964',
-      main: '#283663',
-      dark: '#24292e'
-    },
-    secondary: {
-      main: '#ffdd00'
-    },
-    success: {
-      main: '#4caf50'
-    },
-    error: {
-      main: '#ca2c0c'
-    },
+    mode: 'light',
     background: {
-      default: '#f5f5f5'
+      default: '#f1f1f1',
     },
-    text: {
-      primary: 'rgba(18,48,78,0.87)',
-      secondary: 'rgba(18,48,78,0.6)',
-      disabled: 'rgba(18,48,78,0.38)'
-    }
-  }
+  },
 })
 
-export default light
+export default lightTheme