feat: tailwind dark theme

movibe · Oct 3, 2023 · 858b475 · 858b475
1 parent 798c5d5
commit 858b475
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -2,12 +2,17 @@ import '../styles/global.css'
 
 import { Slot } from 'expo-router'
 import Head from 'expo-router/head'
+import { useDeviceContext } from 'twrnc'
 
 import { ResponsiveNavigator } from '@/components/navigator'
 import { storybookEnabled } from '@/config'
+import { tw } from '@/lib/tailwind'
 
 export default function Layout() {
+  useDeviceContext(tw)
+
   if (storybookEnabled) return <Slot />
+
   return (
     <>
       <Head>

diff --git a/src/app/explore.tsx b/src/app/explore.tsx
@@ -1,8 +1,12 @@
 import { StyleSheet, Text, View } from 'react-native'
+import { useDeviceContext } from 'twrnc'
+
+import { tailwind, tw } from '@/lib/tailwind'
 
 export default function Page() {
+  useDeviceContext(tw)
   return (
-    <View style={styles.container}>
+    <View style={tailwind('flex-1 items-center justify-center bg-white dark:bg-slate-800')}>
       <View style={styles.main}>
         <Text style={styles.title}>Explore</Text>
         <Text style={styles.subtitle}>Modify app/explore.tsx</Text>

diff --git a/src/app/more.tsx b/src/app/more.tsx
@@ -1,10 +1,12 @@
 import { Text, View } from 'react-native'
+import { useDeviceContext } from 'twrnc'
 
-import { tailwind } from '@/lib/tailwind'
+import { tailwind, tw } from '@/lib/tailwind'
 
 export default function Page() {
+  useDeviceContext(tw)
   return (
-    <View style={tailwind('items-center flex-1 p-4 ')}>
+    <View style={tailwind('flex-1 items-center justify-center bg-white dark:bg-slate-800 p-4')}>
       <View
         style={tailwind(
           'flex-row  justify-center items-center flex w-full pt-[18px] pr-4 pb-[18px] pl-4 gap-x-2.5 rounded-tl-[100px] rounded-tr-[100px] rounded-bl-[100px] rounded-br-[100px] opacity-100 bg-[#1bac4b] relative'

diff --git a/src/components/navigator.tsx b/src/components/navigator.tsx
@@ -44,15 +44,15 @@ function HeaderLogo() {
               }
             ]}>
             <Icon
-              fill={Colors.dark}
+              fill={tailwind('text-gray-800 dark:text-gray-200').color}
               name="logo"
               style={Platform.select({
                 default: !isLargeHorizontal ? { display: 'none' } : {},
                 web: cns(cssStyles.wideVisible)
               })}
             />
             <Icon
-              fill={Colors.dark}
+              fill={tailwind('text-gray-800 dark:text-gray-200').color}
               name="logo-small"
               style={Platform.select({
                 default: isLargeHorizontal ? { display: 'none' } : {},
@@ -171,9 +171,16 @@ function TabBar({ visible }: { visible: boolean }) {
             display: visible ? 'flex' : 'none'
           },
           web: cns(cssStyles.smallVisible)
-        })
+        }),
+        tailwind('bg-white dark:bg-slate-900')
       ]}>
-      <View style={styles.nav}>
+      <View
+        style={[
+          { borderTopWidth: 1 },
+          tailwind(
+            'flex-row items-center justify-around pt-2 px-4 border-t-slate-200 dark:border-t-slate-700 h-[49px]'
+          )
+        ]}>
         {[
           { icon: 'home', id: 'index', name: 'index' },
           { icon: 'explore', id: 'explore', name: 'explore' },
@@ -182,7 +189,7 @@ function TabBar({ visible }: { visible: boolean }) {
           <TabBarItem key={tab.id} id={tab.id} name={tab.name}>
             {({ focused, hovered, pressed }) => (
               <TabBarIcon
-                color="black"
+                color={tailwind('text-gray-800 dark:text-gray-200').color}
                 focused={focused}
                 name={tab.icon}
                 style={[
@@ -370,7 +377,7 @@ function AppHeader({ visible }: { visible: boolean }) {
             web: cns(cssStyles.smallVisible)
           }),
           tailwind(
-            'bg-white dark:bg-slate-800 flex-row items-center justify-between top-0 left-0 right-0 z-10 px-4  border-b-gray-200'
+            'bg-white dark:bg-slate-900 flex-row items-center justify-between top-0 left-0 right-0 z-10 px-4  border-b-gray-200 dark:border-b-slate-700'
           ),
           {
             borderBottomWidth: 1,
@@ -381,7 +388,7 @@ function AppHeader({ visible }: { visible: boolean }) {
           }
           // styles.appHeader
         ]}>
-        <Icon fill={Colors.dark} name="logo" />
+        <Icon fill={tailwind('text-gray-800 dark:text-gray-200').color} name="logo" />
       </View>
     </>
   )
@@ -395,15 +402,6 @@ const Colors = {
 const NAV_MEDIUM_WIDTH = 244
 
 const styles = StyleSheet.create({
-  nav: {
-    alignItems: 'center',
-    borderTopColor: Colors.lightGray,
-    borderTopWidth: 1,
-    flexDirection: 'row',
-    height: 49,
-    justifyContent: 'space-around',
-    paddingHorizontal: 16
-  },
   sideBar: {
     minWidth: 72,
     width: 72