fix(client): update theme

brunocroh · Feb 4, 2025 · 2e98907 · 2e98907
1 parent d2c9008
commit 2e98907
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 56 deletions.
diff --git a/apps/client/app/(intro)/index.tsx b/apps/client/app/(intro)/index.tsx
@@ -4,7 +4,7 @@ import { Link } from 'expo-router'
 export default function Page() {
   return (
     <View className="p-safe bg-background">
-      <Text className="text-destructive"> text </Text>
+      <Text className="text-foreground"> text </Text>
       <View>
         <Link href="/auth/sign-in">
           <Text>Sign in</Text>

diff --git a/apps/client/app/_layout.tsx b/apps/client/app/_layout.tsx
@@ -4,7 +4,6 @@ import { useFonts } from 'expo-font'
 import { Stack } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
-import { useColorScheme } from 'nativewind'
 import { tokenCache } from '@/cache'
 import { ThemeProvider } from '@/components/providers/theme-provider'
 import { ClerkLoaded, ClerkProvider } from '@clerk/clerk-expo'
@@ -27,10 +26,6 @@ export default function RootLayout() {
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   })
 
-  const { setColorScheme, colorScheme } = useColorScheme()
-
-  setColorScheme(colorScheme || 'light')
-
   useEffect(() => {
     if (loaded) {
       SplashScreen.hideAsync()
@@ -42,18 +37,18 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider>
-      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
-        <ClerkLoaded>
+    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+      <ClerkLoaded>
+        <ThemeProvider>
           <Stack screenOptions={{ headerShown: false }}>
             <Stack.Screen name="(intro)" />
             <Stack.Screen name="home" />
             <Stack.Screen name="auth" />
             <Stack.Screen name="+not-found" />
           </Stack>
           <StatusBar style="auto" />
-        </ClerkLoaded>
-      </ClerkProvider>
-    </ThemeProvider>
+        </ThemeProvider>
+      </ClerkLoaded>
+    </ClerkProvider>
   )
 }
diff --git a/apps/client/app/home/index.tsx b/apps/client/app/home/index.tsx
@@ -16,10 +16,10 @@ export default function Page() {
         </TouchableOpacity>
       </SignedIn>
       <SignedOut>
-        <Link href="/(auth)/sign-in">
+        <Link href="/auth/sign-in">
           <Text>Sign in</Text>
         </Link>
-        <Link href="/(auth)/sign-up">
+        <Link href="/auth/sign-up">
           <Text>Sign up</Text>
         </Link>
       </SignedOut>

diff --git a/apps/client/components/providers/theme-provider.tsx b/apps/client/components/providers/theme-provider.tsx
@@ -16,10 +16,8 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const { colorScheme } = useColorScheme()
 
   return (
-    <ThemeContext.Provider value={{ theme: colorScheme || 'light' }}>
-      <View style={{ ...themes[colorScheme || 'light'], flex: 1 }}>
-        {children}
-      </View>
+    <ThemeContext.Provider value={{ theme: 'dark' || 'light' }}>
+      <View style={{ ...themes['dark'], flex: 1 }}>{children}</View>
     </ThemeContext.Provider>
   )
 }
diff --git a/apps/client/tailwind.config.js b/apps/client/tailwind.config.js
@@ -7,38 +7,38 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        border: 'var(--border)',
-        input: 'var(--input)',
-        ring: 'var(--ring)',
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
+        border: '#232A34',
+        input: '#232A34',
+        ring: '#CBD5E1',
+        background: '#020303',
+        foreground: '#F3F8FD',
         primary: {
-          DEFAULT: 'var(--primary)',
-          foreground: 'var(--primary-foreground)',
+          DEFAULT: '#F3F8FD',
+          foreground: '#191D24',
         },
         secondary: {
-          DEFAULT: 'var(--secondary)',
-          foreground: 'var(--secondary-foreground)',
+          DEFAULT: '#232A34',
+          foreground: '#F3F8FD',
         },
         destructive: {
-          DEFAULT: 'var(--destructive)',
-          foreground: 'var(--destructive-foreground)',
+          DEFAULT: '#7D1A1A',
+          foreground: '#F3F8FD',
         },
         muted: {
-          DEFAULT: 'var(--muted)',
-          foreground: 'var(--muted-foreground)',
+          DEFAULT: '#232A34',
+          foreground: '#94A3B8',
         },
         accent: {
-          DEFAULT: 'var(--accent)',
-          foreground: 'var(--accent-foreground)',
+          DEFAULT: '#232A34',
+          foreground: '#F3F8FD',
         },
         popover: {
-          DEFAULT: 'var(--popover)',
-          foreground: 'var(--popover-foreground)',
+          DEFAULT: '#090B11',
+          foreground: '#F3F8FD',
         },
         card: {
-          DEFAULT: 'var(--card)',
-          foreground: 'var(--card-foreground)',
+          DEFAULT: '#090B11',
+          foreground: '#F3F8FD',
         },
       },
       borderRadius: {
@@ -52,25 +52,7 @@ module.exports = {
     ({ addBase }) =>
       addBase({
         ':root': {
-          '--background': '#FFFFFF',
-          '--foreground': '#020817',
-          '--card': '#FFFFFF',
-          '--card-foreground': '#020817',
-          '--popover': '#FFFFFF',
-          '--popover-foreground': '#020817',
-          '--primary': '#1A1D2B',
-          '--primary-foreground': '#F2F6FB',
-          '--secondary': '#F3F5F7',
-          '--secondary-foreground': '#1A1D2B',
-          '--muted': '#F3F5F7',
-          '--muted-foreground': '#6B7280',
-          '--accent': '#F3F5F7',
-          '--accent-foreground': '#1A1D2B',
-          '--destructive': '#EF4444',
-          '--destructive-foreground': '#F2F6FB',
-          '--border': '#E5E7EB',
-          '--input': '#E5E7EB',
-          '--ring': '#020817',
+          '--radius': '0.5',
         },
       }),
   ],

diff --git a/apps/client/theme/index.tsx b/apps/client/theme/index.tsx
@@ -9,6 +9,7 @@ export const themes = {
     '--popover': '#FFFFFF',
     '--popover-foreground': '#020817',
     '--primary': '#1A1D2B',
+    '--color-primary': '#1A1D2B',
     '--primary-foreground': '#F2F6FB',
     '--secondary': '#F3F5F7',
     '--secondary-foreground': '#1A1D2B',