fix: color changes on text in dark mode

cardano-foundation · Aug 21, 2024 · 2a476fa · 2a476fa
1 parent 592b49e
commit 2a476fa
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -24,7 +24,7 @@ import betaExplorer from "/assets/beta-explorer.png";
 import poolTool from "/assets/pool-tool.png";
 import LinkIcon from "@mui/icons-material/Link";
 
-import { useTheme, ThemeProvider } from "@mui/material/styles";
+import { ThemeProvider } from "@mui/material";
 import { lightTheme, darkTheme } from "src/common/style/theme";
 
 const useQuery = () => {
@@ -207,7 +207,7 @@ const CardanoExplorer = () => {
               </Grid>
             )}
             <Grid item xs={12}>
-              <Typography variant="h6" gutterBottom>
+              <Typography variant="h6" color={theme.palette.text.primary} gutterBottom>
                 Select the Explorer of your choice
               </Typography>
             </Grid>

diff --git a/src/common/style/theme.js b/src/common/style/theme.js
@@ -25,7 +25,8 @@ const commonTypography = {
         lineHeight: '24px',
         letterSpacing: '-0.5px',
         textAlign: 'left',
-        margin: '6% 0'
+        margin: '6% 0',
+        color: 'inherit',
     }
 };
 
@@ -38,6 +39,7 @@ export const lightTheme = createTheme({
         },
         text: {
             primary: '#000000',
+            secondary: '#ffffff'
         },
     },
     typography: {
@@ -55,6 +57,7 @@ export const darkTheme = createTheme({
         },
         text: {
             primary: '#ffffff',
+            secondary: '#000000'
         },
     },
     typography: {

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -77,10 +77,10 @@ function Header({ toggleTheme, isDarkMode }) {
             color: "#fff",
           }}
         >
-          <Typography variant="h1" gutterBottom>
+          <Typography variant="h1" color={theme.palette.text.secondary} gutterBottom>
             Explorers
           </Typography>
-          <Typography variant="subtitle1" gutterBottom>
+          <Typography variant="subtitle1" color={theme.palette.text.secondary} gutterBottom>
             List of Cardano Explorers from our Community and Foundation.
           </Typography>
         </Box>