From a705b570da644fedcbe1b36e499d996622ea4d39 Mon Sep 17 00:00:00 2001
From: Gunnar Torfi <gunnartorfis@gmail.com>
Date: Thu, 5 Sep 2024 11:28:12 +0000
Subject: [PATCH 1/3] feat: dark mode support

---
 example/app.json  |  2 +-
 src/toast.tsx     | 26 ++++++++++++++++----------
 src/use-colors.ts | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 src/use-colors.ts

diff --git a/example/app.json b/example/app.json
index 0a5b073..bd5d01a 100644
--- a/example/app.json
+++ b/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",
diff --git a/src/toast.tsx b/src/toast.tsx
index 85460e1..261dcb5 100644
--- a/src/toast.tsx
+++ b/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,19 +221,22 @@ 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:
@@ -238,7 +244,7 @@ export const ToastIcon: React.FC<
       return (
         <Info
           size={20}
-          color={getIconColorForVariant?.(ToastVariant.INFO) ?? '#286efa'}
+          color={getIconColorForVariant?.(ToastVariant.INFO) ?? colors.info}
         />
       );
   }
diff --git a/src/use-colors.ts b/src/use-colors.ts
new file mode 100644
index 0000000..7078288
--- /dev/null
+++ b/src/use-colors.ts
@@ -0,0 +1,37 @@
+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();
+
+  console.log(scheme);
+
+  if (scheme === 'dark') {
+    return dark;
+  }
+
+  return light;
+};

From 57d2c048f3fa11de12a56a2ff26aae9daafb8733 Mon Sep 17 00:00:00 2001
From: Gunnar Torfi <gunnartorfis@gmail.com>
Date: Thu, 5 Sep 2024 11:29:26 +0000
Subject: [PATCH 2/3] chore: remove web build from pipes

---
 .github/workflows/ci.yml | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 135be09..2d6be73 100644
--- a/.github/workflows/ci.yml
+++ b/.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

From 074c14d46db36cdc6f5c3388e077791f2f2212c9 Mon Sep 17 00:00:00 2001
From: Gunnar Torfi <gunnartorfis@gmail.com>
Date: Thu, 5 Sep 2024 11:30:52 +0000
Subject: [PATCH 3/3] chore: cleanup logs

---
 src/use-colors.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/use-colors.ts b/src/use-colors.ts
index 7078288..ca14f08 100644
--- a/src/use-colors.ts
+++ b/src/use-colors.ts
@@ -27,8 +27,6 @@ const dark: typeof light = {
 export const useColors = () => {
   const scheme = useColorScheme();
 
-  console.log(scheme);
-
   if (scheme === 'dark') {
     return dark;
   }