feat: support dark theme preference (#396)

* feat: support dark theme preference * fix: remove white flash of death on dark theme close #296
shabados · Jun 14, 2022 · 86e4203 · 86e4203
1 parent 967f73c
commit 86e4203
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 17 deletions.
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
@@ -1,10 +1,12 @@
 import { ReactNode } from 'react'
 import { createUseStyles } from 'react-jss'
 
+import theme from '../helpers/theme'
+
 const useStyles = createUseStyles( {
   button: {
     textDecoration: 'none',
-    color: 'rgb(0% 49.83% 75.18%)', // lch(50% 66 255)
+    color: theme.Blue,
     boxSizing: 'border-box',
     minWidth: '3rem',
     minHeight: '3rem',
@@ -21,7 +23,7 @@ const useStyles = createUseStyles( {
     cursor: 'default',
     color: 'rgba(120, 120, 120, 0.4)',
     '&:hover': {
-      backgroundColor: 'rgba(120,120,120,0.05)',
+      backgroundColor: 'transparent',
     },
   },
   '@media (pointer: coarse)': {
@@ -34,6 +36,30 @@ const useStyles = createUseStyles( {
       },
     },
   },
+  '@media (prefers-color-scheme: dark)': {
+    button: {
+      color: theme.BlueDarkScheme,
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      },
+    },
+    disabled: {
+      color: 'rgba(120, 120, 120, 0.4)',
+      '&:hover': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  '@media (pointer: coarse) and (prefers-color-scheme: dark)': {
+    button: {
+      '&:hover': {
+        backgroundColor: 'transparent', // @bhajneet idk why it has to be repeated to work
+      },
+      '&:active': {
+        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      },
+    },
+  },
 } )
 
 type ButtonProps = {

diff --git a/frontend/src/components/Error.tsx b/frontend/src/components/Error.tsx
@@ -1,24 +1,35 @@
 import { AlertCircle } from 'lucide-react'
 import { createUseStyles } from 'react-jss'
 
+import theme from '../helpers/theme'
+
 const useStyles = createUseStyles( {
   error: {
     fontSize: '100px',
-    color: 'rgba(255, 0, 50, 0.8)',
+    color: theme.Red,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
   },
   errorText: {
     fontSize: '19px',
-    color: 'black',
+    color: theme.Fg,
     fontWeight: 'bold',
     textAlign: 'center',
   },
   errorDetails: {
     fontSize: '20px',
     cursor: 'pointer',
   },
+
+  '@media (prefers-color-scheme: dark)': {
+    error: {
+      color: theme.RedDarkScheme,
+    },
+    errorText: {
+      color: theme.FgDarkScheme,
+    },
+  },
 } )
 
 type ErrProps = {

diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
@@ -10,7 +10,7 @@ const useStyles = createUseStyles( {
   },
   text: {
     marginLeft: theme.BlankSpace,
-    fontWeight: 100,
+    fontWeight: 300,
   },
 } )
 

diff --git a/frontend/src/components/Nav.tsx b/frontend/src/components/Nav.tsx
@@ -1,4 +1,5 @@
 import { createUseStyles } from 'react-jss'
+import { Link } from 'react-router-dom'
 
 import theme from '../helpers/theme'
 import Content from './Content'
@@ -8,9 +9,9 @@ const useStyles = createUseStyles( {
   nav: {
     width: '100%',
     background: theme.NavBg,
+    borderBottom: '1px solid rgba(0% 0% 0% / 5%)',
     position: 'fixed',
     top: 0,
-    color: 'white',
   },
   flex: {
     display: 'flex',
@@ -19,6 +20,22 @@ const useStyles = createUseStyles( {
     height: '3rem',
     fontSize: '0.8rem',
   },
+  button: {
+    '&:hover': {
+      color: theme.Blue,
+    },
+  },
+  '@media (prefers-color-scheme: dark)': {
+    nav: {
+      background: theme.NavBgDarkScheme,
+      color: theme.FgDarkScheme,
+    },
+    button: {
+      '&:hover': {
+        color: theme.BlueDarkScheme,
+      },
+    },
+  },
 } )
 
 const Nav = () => {
@@ -28,11 +45,11 @@ const Nav = () => {
     <div className={classes.nav}>
       <Content>
         <div className={classes.flex}>
-          <a href="/">
+          <Link to="/" className={classes.button}>
             <Logo />
-          </a>
+          </Link>
           <div>
-            <a href="/about" className="button">About</a>
+            <Link to="/about" className={classes.button}>About</Link>
           </div>
         </div>
       </Content>

diff --git a/frontend/src/helpers/theme.ts b/frontend/src/helpers/theme.ts
@@ -19,13 +19,37 @@ const theme = {
   Normally: '0.15s ease',
   Slowly: '0.3s ease',
   Dramatically: '0.6s ease',
+
   Gutter: '3rem',
   Gap: '0.5rem',
   BlankSpace: '0.2rem',
-  NavBg: 'rgb(15.99% 8.5% 11.42%)', // lch(10% 11 355)
+
+  NavBg: 'rgb(88.77% 85.81% 86.79%)', // lch(88% 3 355)
+  NavBgDarkScheme: 'rgb(15.99% 8.5% 11.42%)', // lch(10% 11 355)
+
+  Fg: 'rgb(8.33% 7.46% 5.52%)', //
+  FgDarkScheme: 'rgb(79.55% 77.27% 77.12%)', // lch(80% 2.25 25)
+
+  Bg: 'rgb(94.2% 93.11% 90.97%)', // lch(94% 3 85)
+  BgDarkScheme: 'rgb(20.2% 18.51% 19.08%)', // lch(20% 2.25 355)
+
+  SelectionBg: '', //
+  SelectionBgDarkScheme: 'rgba(255, 222, 139, 0.4)', // lch(90% 132 85)
+
+  ModalBg: 'rgb(100%, 100%, 100%)', // lch(100% 0 0)
+  ModalBgDarkScheme: 'rgb(14.77% 14.77% 14.77%)', // lch(15% 0 0)
+
   Blue: 'rgb(0% 48.81% 81.83%)', // lch(50% 66 265)
+  BlueDarkScheme: 'rgb(43.72% 69.01% 100%)', // lch(70% 53 265)
   BlueBrightMuted: 'rgb(58.43% 73.73% 96.07%)', // lch(75% 33 265)
+
+  Teal: 'rgb(0% 52.14% 55.32%)', // lch(50% 66 205)
+  TealDarkScheme: 'rgb(0% 74.74% 79.18%)', // lch(70% 53 205)
+
   YellowBrightMuted: 'rgb(97.75% 93.92% 86.07%)', // lch(90% 33 85)
+
+  Red: 'rgb(83.05% 24% 29.82%)', // lch(50% 66 25)
+  RedDarkScheme: 'rgb(100% 52.49% 52.68%)', // lch(70% 53 25)
 }
 
 export default theme
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -6,7 +6,8 @@ body {
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  background-color: #f0ede9;
+  background-color: rgb(94.2% 93.11% 90.97%);
+  color: rgb(8.33% 7.46% 5.52%);
 }
 
 h1 {
@@ -48,6 +49,9 @@ code {
 }
 
 @media (pointer: coarse) {
+  body {
+    font-size: 20px;
+  }
   *,
   *:hover,
   *:active,
@@ -60,3 +64,13 @@ code {
     touch-action: manipulation;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: rgb(20.2% 18.51% 19.08%);
+    color: rgb(79.55% 77.27% 77.12%);
+  }
+  ::selection {
+    background: rgba(255, 222, 139, 0.4);
+  }
+}
diff --git a/frontend/src/screens/About.tsx b/frontend/src/screens/About.tsx
@@ -18,6 +18,14 @@ const useStyles = createUseStyles( {
     background: 'rgba(0, 0, 0, 0.05)',
     marginLeft: theme.Gap,
   },
+  '@media (prefers-color-scheme: dark)': {
+    link: {
+      color: theme.BlueDarkScheme,
+    },
+    hotkey: {
+      background: 'rgba(255, 255, 255, 0.05)',
+    },
+  },
 } )
 
 const About = () => {

diff --git a/frontend/src/screens/Home.tsx b/frontend/src/screens/Home.tsx
@@ -21,11 +21,18 @@ const useStyles = createUseStyles( {
   source: {
     padding: `${theme.Gap} calc(2 * ${theme.Gap})`,
     borderRadius: theme.Gap,
-    backgroundColor: 'rgba(255, 255, 255, 0.4)',
-    border: '1px solid rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
     transition: theme.Normally,
     '&:hover': {
-      background: 'rgba( 255, 255, 255, 0.9 )',
+      background: 'rgba(255, 255, 255, 1)',
+    },
+  },
+  '@media (prefers-color-scheme: dark)': {
+    source: {
+      backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      '&:hover': {
+        background: 'rgba(255, 255, 255, 0.1)',
+      },
     },
   },
 } )

diff --git a/frontend/src/screens/LineView.tsx b/frontend/src/screens/LineView.tsx
@@ -23,7 +23,6 @@ const useStyles = createUseStyles( {
   lineView: {
     height: '100%',
     minHeight: '100vh',
-    background: 'white',
   },
 
   header: {
@@ -99,6 +98,24 @@ const useStyles = createUseStyles( {
       order: 3,
     },
   },
+  '@media (prefers-color-scheme: dark)': {
+    header: {
+      background: theme.BgDarkScheme,
+    },
+    lineView: {
+      background: theme.ModalBgDarkScheme,
+    },
+    headerLink: {
+      '&:hover': {
+        color: theme.BlueDarkScheme,
+      },
+    },
+  },
+  '@media (prefers-color-scheme: light)': {
+    lineView: {
+      background: theme.ModalBg,
+    },
+  },
 
 } )
 

diff --git a/frontend/src/screens/SourceView.tsx b/frontend/src/screens/SourceView.tsx
@@ -45,7 +45,6 @@ const useStyles = createUseStyles( {
   line: {
     marginLeft: `calc(${theme.BlankSpace} * 2)`,
     transition: theme.Normally,
-    color: 'rgb(16.87% 14.48% 8.69%)',
     '&:first-child': {
       marginLeft: 0,
     },
@@ -55,7 +54,7 @@ const useStyles = createUseStyles( {
   },
 
   focused: {
-    color: 'rgb(0% 52.14% 55.32%)',
+    color: theme.Teal,
   },
 
   controlsContent: {
@@ -64,6 +63,17 @@ const useStyles = createUseStyles( {
     alignItems: 'center',
     gap: '1rem',
   },
+
+  '@media (prefers-color-scheme: dark)': {
+    line: {
+      '&:hover': {
+        color: theme.BlueDarkScheme,
+      },
+    },
+    focused: {
+      color: theme.TealDarkScheme,
+    },
+  },
 } )
 
 type SourceViewParams = 'page' | 'source' | 'line'
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ const useStyles = createUseStyles( { @@
       },
       text: {
         marginLeft: theme.BlankSpace,
-        fontWeight: 100,
+        fontWeight: 300,
       },
     } )
@@ Expand Down @@