Added Support for Dark Mode 🌙 (#1015)

Issue - #1006 - [x] Added CSS Variables for managing the colors - [x] Changes mode based on the user's color preference I have changed the color scheme according to my taste. Feel free to change it or let me know if any more changes are required. --------- Co-authored-by: Steven <[email protected]>
styfle · Nov 1, 2023 · 0169964 · 0169964 · vercel · Nov 1, 2023
1 parent 6fb3b98
commit 0169964
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 15 deletions.
diff --git a/public/globals.css b/public/globals.css
@@ -0,0 +1,21 @@
+:root {
+    --brand-color: #16864d;
+    --background: #fafafa;
+    --foreground: #18181b;
+    --muted: #e4e4e7;
+    --muted-foreground: #3f3f46;
+    --border: #d4d4d8;
+    --search-input: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --brand-color: #32de85;
+        --background: #09090b;
+        --foreground: #f4f4f5;
+        --muted: #27272a;
+        --muted-foreground: #d4d4d8;
+        --border: #3f3f46;
+        --search-input: #18181b;
+    }
+}
diff --git a/src/components/BarGraph.tsx b/src/components/BarGraph.tsx
@@ -35,7 +35,7 @@ const stylesheet = `
     background: #26A664;
 }
 .bar-graph__bar-group--disabled .bar-graph__bar{
-    background:#dfe1e4;
+    background: var(--muted);
 }
 .bar-graph__bar2{
     z-index:1;
@@ -55,7 +55,7 @@ const stylesheet = `
     width:100%;
     text-align:right;
     font-variant-numeric:tabular-nums;
-    color:#666E78;
+    color: var(--muted-foreground);
     transition:opacity 0.2s,color 0.2s;
     animation:fade-in 0.5s 0.1s forwards cubic-bezier(0.305,0.42,0.205,1.2);
     font-family:"Source Code Pro","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
@@ -73,10 +73,10 @@ const stylesheet = `
 }
 .bar-graph-container:hover .bar-graph__bar-version{
     opacity:1;
-    color:black;
+    color: var(--foreground);
 }
 .bar-graph__bar-group:hover .bar-graph__bar-version{
-    color:black;
+    color: var(--foreground);
 }
 .bar-graph__legend{
     font-size:0.8rem;

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -12,14 +12,15 @@ const height = '4rem';
 const radius = '3px';
 
 const input: React.CSSProperties = {
-    color: '#333',
+    color: 'var(--muted-foreground)',
+    background: 'var(--search-input)',
     fontSize: '2.4rem',
     textAlign: 'center',
     fontFamily:
         '"Source Code Pro","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace',
     fontWeight: 300,
     maxWidth: `calc(100% - ${height})`,
-    border: '1px solid #eee',
+    border: '1px solid var(--border)',
     borderRadius: `${radius} 0 0 ${radius}`,
     height: height,
 };
@@ -29,8 +30,9 @@ const button: React.CSSProperties = {
     width: height,
     height: height,
     padding: '0.7rem',
-    background: '#fcfcfc',
-    border: '1px solid #eee',
+    background: 'var(--search-input)',
+    border: '1px solid var(--border)',
+    fill: 'var(--muted-foreground)',
     borderLeft: 'none',
     borderRadius: `0 ${radius} ${radius} 0`,
     cursor: 'pointer',

diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
@@ -24,7 +24,14 @@ type StatProp = {
 };
 
 export function Stat(props: StatProp) {
-    const { size, unit, label, scale = 1, color = '#212121', textAlign = 'center' } = props;
+    const {
+        size,
+        unit,
+        label,
+        scale = 1,
+        color = 'var(--foreground)',
+        textAlign = 'center',
+    } = props;
 
     const styleValue: React.CSSProperties = {
         fontSize: `${3 * scale}rem`,

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -25,7 +25,8 @@ const css = `
 body {
     margin: 0;
     padding: 0;
-    background: #fafafa;
+    background: var(--background);
+    color: var(--foreground);
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;    
 }
 
@@ -38,7 +39,7 @@ body {
 #spinwrap {
     display: none;
     height: 100vh;
-    background: #fafafa;
+    background: var(--background);
 }
 
 #spinner {
@@ -87,7 +88,7 @@ body {
 
 #sponsors:before {
     content: 'Sponsors';
-    color: #777;
+    color: var(--muted-foreground);
     font-weight: 300;
     padding-left: 25%;
 }
@@ -138,6 +139,7 @@ export async function renderPage(
                 <meta name="viewport" content="width=device-width, initial-scale=1">
                 <title>${escapeHtml(title)}</title>
                 <meta name="description" content="${escapeHtml(description)}">
+                <link rel="stylesheet" href="/globals.css">
                 <style>${css}</style>
                 <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
                 <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">

diff --git a/src/pages/compare.tsx b/src/pages/compare.tsx
@@ -52,7 +52,7 @@ export default ({ inputStr, results }: CompareProps) => {
                                                     unit=""
                                                     label={result.version}
                                                     scale={0.75}
-                                                    color="#16864d"
+                                                    color="var(--brand-color)"
                                                     textAlign="right"
                                                 />
                                             </a>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -21,8 +21,8 @@ export default () => (
             <span dangerouslySetInnerHTML={{ __html: Logo('main') }} />
 
             <h1 style={h1}>
-                <span style={{ color: '#202420' }}>Package</span>
-                <span style={{ color: '#16864d' }}>Phobia</span>
+                <span style={{ color: 'var(--foreground)' }}>Package</span>
+                <span style={{ color: 'var(--brand-color)' }}>Phobia</span>
             </h1>
 
             <p style={{ textAlign: 'center' }}>