Merge pull request #30 from simonyiszk/27-dark-mode

feat: added dark mode
simonyiszk · Feb 10, 2024 · e094bfc · e094bfc
2 parents ed8b2f7 + 2ea4ed3
commit e094bfc
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 9 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -11,7 +11,7 @@ export default function MainLayout() {
     <QueryClientProvider client={queryClient}>
       <Splash>
         <FavoritePresentationsProvider>
-          <View className='bg-slate-100 min-h-screen'>
+          <View className='bg-slate-100 dark:bg-slate-900 min-h-screen'>
             <Slot />
           </View>
         </FavoritePresentationsProvider>

diff --git a/components/base/item-card.tsx b/components/base/item-card.tsx
@@ -6,7 +6,7 @@ export function ItemCard({ className, ...props }: PressableProps) {
   return (
     <Pressable
       className={cn(
-        'mb-5 rounded-xl bg-white active:bg-slate-50 p-3 shadow-md shadow-slate-500/10 relative overflow-hidden',
+        'mb-5 rounded-xl bg-white dark:bg-slate-800 active:bg-slate-50 active:dark:bg-slate-700 p-3 shadow-md shadow-slate-500/10 relative overflow-hidden',
         className
       )}
       {...props}

diff --git a/components/base/screen.tsx b/components/base/screen.tsx
@@ -3,5 +3,5 @@ import { View, ViewProps } from 'react-native';
 import { cn } from '../../utils/common.utils';
 
 export function Screen({ className, ...props }: ViewProps) {
-  return <View className={cn('bg-slate-100 h-full', className)} {...props} />;
+  return <View className={cn('bg-slate-100 dark:bg-slate-900 h-full', className)} {...props} />;
 }
diff --git a/components/base/text.tsx b/components/base/text.tsx
@@ -9,7 +9,7 @@ export function StyledText({ className, ...props }: TextProps) {
         fontFamily: 'Raleway',
         fontWeight: 'normal',
       }}
-      className={cn('font-raleway', className)}
+      className={cn('font-raleway text-slate-800 dark:text-slate-100', className)}
       {...props}
     />
   );

diff --git a/components/common/separator.tsx b/components/common/separator.tsx
@@ -4,5 +4,5 @@ import { View, ViewProps } from 'react-native';
 import { cn } from '../../utils/common.utils';
 
 export function Separator({ className, ...props }: ViewProps) {
-  return <View className={cn('w-20 h-1 rounded-full bg-slate-300 my-5', className)} {...props} />;
+  return <View className={cn('w-20 h-1 rounded-full bg-slate-300 dark:bg-slate-700 my-5', className)} {...props} />;
 }
diff --git a/components/common/skeleton.tsx b/components/common/skeleton.tsx
@@ -5,5 +5,11 @@ import { cn } from '../../utils/common.utils';
 
 export function SkeletonRectangle({ className, style, ...props }: ViewProps) {
   const { opacity } = usePulseAnimation();
-  return <Animated.View className={cn('bg-slate-200 rounded-xl', className)} style={[{ opacity }, style]} {...props} />;
+  return (
+    <Animated.View
+      className={cn('bg-slate-200 dark:bg-slate-800 rounded-xl', className)}
+      style={[{ opacity }, style]}
+      {...props}
+    />
+  );
 }
diff --git a/components/common/styled-button.tsx b/components/common/styled-button.tsx
@@ -10,7 +10,7 @@ type ButtonVariant = 'primary' | 'outline';
 
 const buttonStyles: Record<ButtonVariant, string> = {
   primary: 'bg-primary-500 active:bg-primary-600',
-  outline: 'bg-transparent border-2 border-primary-500 active:bg-primary-100',
+  outline: 'bg-transparent border-2 border-primary-500 active:bg-primary-500/30',
 };
 
 const textStyles: Record<ButtonVariant, string> = {

diff --git a/components/map/map.tsx b/components/map/map.tsx
@@ -13,7 +13,6 @@ export function Map() {
       />
       <Path
         d='M77.3202 487.088L1.95703 448.264L26.4256 399.653L22.1844 397.043L105.704 233.919L111.25 236.856L117.122 225.111L129.194 199.663L166.712 123.322L172.258 124.953L180.088 95.9167L173.563 92.0017L221.522 -0.000131668L246.317 14.681L240.118 25.7734L244.359 28.3834L276.658 50.5683L351.042 50.5683L351.042 567.018L270.459 567.018L270.459 481.868L283.183 481.868L283.183 476.322L235.224 465.229L227.394 516.776L152.031 495.57L148.442 513.514L82.214 478.605L77.3202 487.088Z'
-        fill='white'
         stroke='#64748B'
         strokeWidth='3.26248'
         strokeLinejoin='round'

diff --git a/components/tabbar/tabbar-background.tsx b/components/tabbar/tabbar-background.tsx
@@ -1,5 +1,7 @@
 import { View } from 'react-native';
 
 export function TabbarBackground() {
-  return <View className='shadow-md shadow-slate-500/30 w-full h-full bg-white rounded-xl' />;
+  return (
+    <View className='shadow-md shadow-slate-500/30 dark:shadow-black/30 w-full h-full bg-white dark:bg-slate-800 rounded-xl' />
+  );
 }