Fix #1 to improve color contrast in dark theme

xyfir · Apr 27, 2019 · 1f9da08 · 1f9da08
1 parent da4e47f
commit 1f9da08
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/web/components/info/Info.tsx b/web/components/info/Info.tsx
@@ -83,7 +83,8 @@ const styles = (theme: Theme) =>
     subtitle: {
       marginBottom: '2em',
       fontWeight: 'bold',
-      fontSize: '120%'
+      fontSize: '120%',
+      color: theme.palette.secondary.main
     },
     content: {
       maxWidth: '40em'
@@ -154,7 +155,8 @@ const styles = (theme: Theme) =>
     },
     ol: {
       fontFamily: '"Roboto"',
-      fontSize: '110%'
+      fontSize: '110%',
+      color: theme.palette.text.primary
     },
     p: {
       fontSize: '110%',

diff --git a/web/constants/theme.ts b/web/constants/theme.ts
@@ -1,9 +1,18 @@
 import { createMuiTheme } from '@material-ui/core/styles';
 
-export const theme = createMuiTheme({
-  palette: {
-    type: localStorage.theme,
-    primary: { main: '#6a1b9a' },
-    secondary: { main: '#3f51b5' }
-  }
-});
+export const theme =
+  localStorage.theme == 'dark'
+    ? createMuiTheme({
+        palette: {
+          type: 'dark',
+          primary: { main: '#af27ff' },
+          secondary: { main: '#5972ff' }
+        }
+      })
+    : createMuiTheme({
+        palette: {
+          type: 'light',
+          primary: { main: '#6a1b9a' },
+          secondary: { main: '#3f51b5' }
+        }
+      });