Add dark theme

vibecamp · Jun 19, 2024 · 623f7a1 · 623f7a1
1 parent ef12c65
commit 623f7a1
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 57 deletions.
diff --git a/front-end/src/components/Tickets.tsx b/front-end/src/components/Tickets.tsx
@@ -50,7 +50,7 @@ export default React.memo(() => {
                                 const cabinName = store.accountInfo.state.result?.cabins.filter(c => c.festival_id === festival.festival_id)?.[0]?.cabin_name
 
                                 return (
-                                    <div key={festival.festival_id} style={festival.end_date.isBefore(dayjs.utc()) ? { opacity: 0.5 } : undefined}>
+                                    <div key={festival.festival_id} style={festival.end_date.isBefore(dayjs.utc()) ? { filter: 'contrast(0.5)' } : undefined}>
                                         <h2>
                                             {festival.festival_name}
                                         </h2>
@@ -83,7 +83,7 @@ export default React.memo(() => {
 
                                                 <Spacer size={4} />
 
-                                                <div style={{ border: 'var(--controls-border)', borderRadius: 4, background: 'white' }}>
+                                                <div style={{ border: 'var(--controls-border)', borderRadius: 4, background: 'var(--color-background-1)' }}>
                                                     {otherPurchases.map((p, i) =>
                                                         <div style={{ padding: '4px 8px', borderTop: i > 0 ? 'var(--controls-border)' : undefined }} key={p.purchase_id}>
                                                             1x {store.purchaseTypes.state.result?.find(t => t.purchase_type_id === p.purchase_type_id)?.description}

diff --git a/front-end/src/components/core/Button.scss b/front-end/src/components/core/Button.scss
@@ -5,7 +5,7 @@
     background: none;
 
     border: var(--controls-border);
-    background: white;
+    background: var(--color-background-1);
     border-radius: 8px;
     padding: 10px 20px;
     min-height: 42px;
@@ -14,7 +14,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--color-primary);
 
     width: 100%;
     max-width: 400px;
@@ -28,12 +28,12 @@
     }
 
     &.danger {
-        border: 1px solid red;
-        color: red;
+        border: 1px solid var(--color-danger);
+        color: var(--color-danger);
 
         &.primary {
             color: rgba(255, 255, 255, 0.9);
-            background: red;
+            background: var(--color-danger);
         }
     }
 
@@ -44,6 +44,6 @@
 
     &:disabled {
         cursor: default;
-        opacity: 0.7;
+        filter: contrast(0.5);
     }
 }
diff --git a/front-end/src/components/core/Checkbox.scss b/front-end/src/components/core/Checkbox.scss
@@ -4,8 +4,8 @@
     cursor: pointer;
 
     &.disabled {
-        opacity: 0.6;
         cursor: default;
+        filter: contrast(0.5);
     }
 
     >input[type="checkbox"] {

diff --git a/front-end/src/components/core/DateField.scss b/front-end/src/components/core/DateField.scss
@@ -2,37 +2,28 @@
     display: flex;
     flex-direction: column;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--color-tertiary);
 
     transition: color 0.1s ease-out, opacity 0.1s ease-out;
 
     --focus-color: rgb(0, 166, 255);
-    // &:nth-of-type(3n + 1) {
-    //     --focus-color: rgb(255, 158, 0);
-    // }
-    // &:nth-of-type(3n + 2) {
-    //     --focus-color: rgb(255, 0, 174);
-    // }
-    // &:nth-of-type(3n + 3) {
-    //     --focus-color: rgb(0, 166, 255);
-    // }
 
     &:focus-within>.label {
         color: var(--focus-color);
     }
 
     >input::placeholder {
-        color: rgba(0, 0, 0, 0.2);
+        color: var(--color-secondary);
     }
 
     >input {
         appearance: none;
         border: none;
         background: none;
 
-        color: rgba(0, 0, 0, 0.8);
+        color: var(--color-primary);
         border: var(--controls-border);
-        background: white;
+        background: var(--color-background-1);
         font-size: 16px;
         font-weight: 300;
         font-family: inherit;
@@ -47,11 +38,15 @@
             border-color: var(--focus-color);
             box-shadow: 0px 0px 3px var(--focus-color);
         }
+
+        @media (prefers-color-scheme: dark) {
+            color-scheme: dark;
+        }
     }
 
     &.disabled {
         > input {
-            opacity: 0.6;
+            filter: contrast(0.5);
         }
     }
 

diff --git a/front-end/src/components/core/ErrorMessage.scss b/front-end/src/components/core/ErrorMessage.scss
@@ -1,6 +1,6 @@
 
 .error-message {
-    color: red;
+    color: var(--color-danger);
     overflow: hidden;
     height: 1.2em;
     font-size: 14px;

diff --git a/front-end/src/components/core/InfoBlurb.scss b/front-end/src/components/core/InfoBlurb.scss
@@ -1,7 +1,7 @@
 
 .info-blurb {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
-    border-left: 1px solid rgba(0, 0, 0, 0.2);
+    color: var(--color-tertiary);
+    border-left: 1px solid var(--color-secondary);
     padding-left: 8px;
 }
diff --git a/front-end/src/components/core/Input.scss b/front-end/src/components/core/Input.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--color-tertiary);
 
     transition: color 0.1s ease-out, opacity 0.1s ease-out;
 
@@ -22,7 +22,7 @@
     }
 
     >input::placeholder {
-        color: rgba(0, 0, 0, 0.2);
+        color: var(--color-secondary);
     }
     >textarea::placeholder {
         color: rgba(0, 0, 0, 0.3);
@@ -34,9 +34,9 @@
         border: none;
         background: none;
 
-        color: rgba(0, 0, 0, 0.8);
+        color: var(--color-primary);
         border: var(--controls-border);
-        background: white;
+        background: var(--color-background-1);
         font-size: 16px;
         font-weight: 300;
         border-radius: 8px;
@@ -60,7 +60,7 @@
     &.disabled {
         > input,
         > textarea {
-            opacity: 0.6;
+            filter: contrast(0.5);
         }
     }
 

diff --git a/front-end/src/components/core/Modal.scss b/front-end/src/components/core/Modal.scss
@@ -33,7 +33,7 @@
         border: none;
         position: static;
 
-        background: white;
+        background: var(--color-background-1);
         box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
         transition: transform 0.2s ease-out;
         width: 100%;

diff --git a/front-end/src/components/core/NumberInput.scss b/front-end/src/components/core/NumberInput.scss
@@ -2,29 +2,20 @@
     display: flex;
     flex-direction: column;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--color-tertiary);
 
     &:disabled {
-        opacity: 0.6;
+        filter: contrast(0.5);
     }
 
     --focus-color: rgb(0, 166, 255);
-    // &:nth-of-type(3n + 1) {
-    //     --focus-color: rgb(255, 158, 0);
-    // }
-    // &:nth-of-type(3n + 2) {
-    //     --focus-color: rgb(255, 0, 174);
-    // }
-    // &:nth-of-type(3n + 3) {
-    //     --focus-color: rgb(0, 166, 255);
-    // }
 
     &:focus-within>.label {
         color: var(--focus-color);
     }
 
     >input::placeholder {
-        color: rgba(0, 0, 0, 0.2);
+        color: var(--color-secondary);
     }
     >textarea::placeholder {
         color: rgba(0, 0, 0, 0.3);
@@ -35,9 +26,9 @@
         border: none;
         background: none;
 
-        color: rgba(0, 0, 0, 0.8);
+        color: var(--color-primary);
         border: var(--controls-border);
-        background: white;
+        background: var(--color-background-1);
         font-size: 16px;
         font-weight: 300;
         border-radius: 8px;

diff --git a/front-end/src/components/core/RadioGroup.scss b/front-end/src/components/core/RadioGroup.scss
@@ -7,7 +7,7 @@
   gap: 8px;
 
   &:disabled {
-    opacity: 0.6;
+    filter: contrast(0.5);
 
     >label {
       cursor: default;
@@ -24,7 +24,7 @@
 
   >legend {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--color-tertiary);
     margin-bottom:5px;
   }
 

diff --git a/front-end/src/components/core/RowSelect.scss b/front-end/src/components/core/RowSelect.scss
@@ -57,3 +57,7 @@
         }
     }
 }
+
+dialog {
+    color: inherit;
+}
diff --git a/front-end/src/components/core/StripePaymentForm.tsx b/front-end/src/components/core/StripePaymentForm.tsx
@@ -1,9 +1,10 @@
 import { Elements,PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
 import { loadStripe,StripeElementsOptions } from '@stripe/stripe-js'
-import React, { FC, useCallback, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 
 import { Purchases } from '../../../../back-end/types/route-types'
 import env from '../../env'
+import usePrefersDarkTheme from '../../hooks/usePrefersDarkTheme'
 import { usePromise } from '../../hooks/usePromise'
 import { preventingDefault } from '../../utils'
 import PriceBreakdown from '../tickets/PriceBreakdown'
@@ -23,12 +24,19 @@ type Props = {
 }
 
 export default React.memo(({ stripeOptions, ...otherProps }: Props) => {
+    const prefersDarkTheme = usePrefersDarkTheme()
+
+    const options = useMemo(() => ({
+        ...stripeOptions,
+        appearance: { theme: prefersDarkTheme ? 'night' : undefined }
+    } as const), [prefersDarkTheme, stripeOptions])
+
     if (stripeOptions == null) {
         return null
     }
 
     return (
-        <Elements options={stripeOptions} stripe={stripePromise}>
+        <Elements options={options} stripe={stripePromise}>
             <PaymentFormInner {...otherProps} />
         </Elements>
     )

diff --git a/front-end/src/hooks/usePrefersDarkTheme.ts b/front-end/src/hooks/usePrefersDarkTheme.ts
@@ -0,0 +1,14 @@
+import { useEffect, useMemo, useState } from 'react'
+
+export default function usePrefersDarkTheme() {
+    const darkModePreference = useMemo(() => window.matchMedia('(prefers-color-scheme: dark)'), [])
+    const [prefers, setPrefers] = useState(darkModePreference.matches)
+
+    useEffect(() => {
+        const handle = (e: MediaQueryListEvent) => setPrefers(e.matches)
+        darkModePreference.addEventListener('change', handle)
+        return () => darkModePreference.removeEventListener('change', handle)
+    }, [darkModePreference])
+
+    return prefers
+}