feat: dark mode support

.github/workflows/ci.yml

@@ -49,16 +49,3 @@ jobs:
 
       - name: Build package
         run: yarn prepare
-
-  build-web:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export --platform web

example/app.json

@@ -5,7 +5,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

src/toast.tsx

@@ -1,3 +1,4 @@
+import { useColors } from './use-colors';
 import { ANIMATION_DURATION, useToastLayoutAnimations } from './animations';
 import { useToastContext } from './context';
 import { ToastSwipeHandler } from './gestures';
@@ -34,6 +35,8 @@ export const Toast: React.FC<ToastProps> = ({
   const { duration: durationContext, updateToast } = useToastContext();
   const duration = durationProps ?? durationContext;
 
+  const colors = useColors();
+
   const isDragging = React.useRef(false);
   const timer = React.useRef<NodeJS.Timeout>();
   const timerStart = React.useRef<number | undefined>();
@@ -109,7 +112,7 @@ export const Toast: React.FC<ToastProps> = ({
             borderRadius: 16,
             marginBottom: 16,
             marginHorizontal: 16,
-            backgroundColor: '#fff',
+            backgroundColor: colors['background-primary'],
             borderCurve: 'continuous',
           },
           style,
@@ -138,7 +141,7 @@ export const Toast: React.FC<ToastProps> = ({
                 {
                   fontWeight: '600',
                   lineHeight: 20,
-                  color: '#232020',
+                  color: colors['text-primary'],
                 },
                 titleStyle,
               ]}
@@ -153,7 +156,7 @@ export const Toast: React.FC<ToastProps> = ({
                     fontSize: 14,
                     lineHeight: 20,
                     marginTop: 2,
-                    color: '#4f4a4a',
+                    color: colors['text-tertiary'],
                   },
                   descriptionStyle,
                 ]}
@@ -178,11 +181,11 @@ export const Toast: React.FC<ToastProps> = ({
                     {
                       borderRadius: 999,
                       borderWidth: 1,
-                      borderColor: '#e6e3e3',
+                      borderColor: colors['border-secondary'],
                       paddingHorizontal: 8,
                       paddingVertical: 4,
                       borderCurve: 'continuous',
-                      backgroundColor: '#f7f7f7',
+                      backgroundColor: colors['background-secondary'],
                     },
                     actionStyle,
                   ]}
@@ -194,7 +197,7 @@ export const Toast: React.FC<ToastProps> = ({
                         fontSize: 14,
                         lineHeight: 20,
                         fontWeight: '600',
-                        color: '##232020',
+                        color: colors['text-primary'],
                       },
                       actionLabelStyle,
                     ]}
@@ -207,7 +210,7 @@ export const Toast: React.FC<ToastProps> = ({
             ) : null}
           </View>
           <Pressable onPress={onHide} hitSlop={10}>
-            <X size={20} color={closeIconColor ?? '#3f3b3b'} />
+            <X size={20} color={closeIconColor ?? colors['text-secondary']} />
           </Pressable>
         </View>
       </Animated.View>
@@ -218,27 +221,30 @@ export const Toast: React.FC<ToastProps> = ({
 export const ToastIcon: React.FC<
   Pick<ToastProps, 'variant' | 'getIconColorForVariant'>
 > = ({ variant, getIconColorForVariant: getIconColorForVariant }) => {
+  const colors = useColors();
   switch (variant) {
     case 'success':
       return (
         <CircleCheck
           size={20}
-          color={getIconColorForVariant?.(ToastVariant.SUCCESS) ?? '#3c8643'}
+          color={
+            getIconColorForVariant?.(ToastVariant.SUCCESS) ?? colors.success
+          }
         />
       );
     case 'error':
       return (
         <CircleX
           size={20}
-          color={getIconColorForVariant?.(ToastVariant.SUCCESS) ?? '#ff3a41'}
+          color={getIconColorForVariant?.(ToastVariant.SUCCESS) ?? colors.error}
         />
       );
     default:
     case 'info':
       return (
         <Info
           size={20}
-          color={getIconColorForVariant?.(ToastVariant.INFO) ?? '#286efa'}
+          color={getIconColorForVariant?.(ToastVariant.INFO) ?? colors.info}
         />
       );
   }

src/use-colors.ts

@@ -0,0 +1,35 @@
+import { useColorScheme } from 'react-native';
+
+const light = {
+  'background-primary': '#fff',
+  'background-secondary': '#f7f7f7',
+  'text-primary': '#232020',
+  'text-secondary': '#3f3b3b',
+  'text-tertiary': '#4f4a4a',
+  'border-secondary': '#e6e3e3',
+  'success': '#3c8643',
+  'error': '#ff3a41',
+  'info': '#286efa',
+};
+
+const dark: typeof light = {
+  'background-primary': '#181313',
+  'background-secondary': '#232020',
+  'text-primary': '#fff',
+  'text-secondary': '#E6E3E3',
+  'text-tertiary': '#C0BEBE',
+  'border-secondary': '#302B2B',
+  'success': '#9ED397',
+  'error': '#FF999D',
+  'info': '#B3CDFF',
+};
+
+export const useColors = () => {
+  const scheme = useColorScheme();
+
+  if (scheme === 'dark') {
+    return dark;
+  }
+
+  return light;
+};