add custom tailwind colors

billyjacoby · Sep 11, 2023 · 972b1e7 · 972b1e7
1 parent 3145753
commit 972b1e7
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 30 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,20 @@
 import React from 'react';
 import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
 
+import clsx from 'clsx';
 import {QueryClient, QueryClientProvider} from 'react-query';
-import colors from 'tailwindcss/colors';
 
 import {NavigationWrapper} from '@navigation';
 
 function App(): JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? colors.black : colors.white,
-  };
-
   const [queryClient] = React.useState(new QueryClient());
 
   return (
-    <SafeAreaView style={backgroundStyle} className="flex-1">
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
+    <SafeAreaView
+      className={clsx('flex-1', 'bg-background', 'dark:bg-background-dark')}>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <QueryClientProvider client={queryClient}>
         <NavigationWrapper />
       </QueryClientProvider>

diff --git a/src/components/baseText.tsx b/src/components/baseText.tsx
@@ -1,10 +1,8 @@
-import {Text, TextProps, useColorScheme} from 'react-native';
+import {Text, TextProps} from 'react-native';
 
 export const BaseText = ({children, ...props}: TextProps) => {
-  const isDarkMode = useColorScheme() === 'dark';
-
   return (
-    <Text className={isDarkMode ? 'text-white' : 'text-black'} {...props}>
+    <Text className="text-foreground dark:text-foreground-dark" {...props}>
       {children}
     </Text>
   );

diff --git a/src/components/baseView.tsx b/src/components/baseView.tsx
@@ -1,10 +1,4 @@
-import {
-  ScrollView,
-  ScrollViewProps,
-  useColorScheme,
-  View,
-  ViewProps,
-} from 'react-native';
+import {ScrollView, ScrollViewProps, View, ViewProps} from 'react-native';
 
 import clsx from 'clsx';
 
@@ -13,18 +7,20 @@ type BaseViewProps =
   | ({isScrollview: true} & ScrollViewProps);
 
 export const BaseView = (props: BaseViewProps) => {
-  const isDarkMode = useColorScheme() === 'dark';
   if (props.isScrollview) {
     return (
       <ScrollView
         contentContainerStyle={{minHeight: '95%'}}
-        className={clsx(isDarkMode ? 'bg-black' : 'bg-white', 'flex-1')}
+        className={clsx('bg-background', 'dark:bg-background-dark', 'flex-1')}
         {...props}
       />
     );
   } else {
     return (
-      <View className={clsx(isDarkMode ? 'bg-black' : 'bg-white')} {...props} />
+      <View
+        className={clsx('bg-background', 'dark:bg-background-dark')}
+        {...props}
+      />
     );
   }
 };
diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx
@@ -6,10 +6,14 @@ import {
   NavigatorScreenParams,
 } from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import colors from 'tailwindcss/colors';
 
 import {CamerasScreen, HomeScreen, OnBoardingScreen} from '@screens';
 
+//? Can't figure out how to properly type this
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import {colors, hslFunction} from '../../themeColors.js';
+
 export type MainStackParamList = {
   Tabs: NavigatorScreenParams<TabsStackParamList>;
   Onboarding: undefined;
@@ -31,7 +35,9 @@ const TabNavigator = () => {
     <TabStack.Navigator
       screenOptions={{
         tabBarStyle: {
-          backgroundColor: isDarkMode ? colors.black : colors.white,
+          backgroundColor: isDarkMode
+            ? hslFunction(colors.dark.background)
+            : hslFunction(colors.light.background),
         },
         header: () => null,
       }}>

diff --git a/src/screens/homeScreen.tsx b/src/screens/homeScreen.tsx
@@ -32,8 +32,8 @@ export const HomeScreen = () => {
   };
 
   return (
-    <BaseView isScrollview className="pb-4">
-      <BaseText className="text-3xl mb-4 self-center">
+    <BaseView isScrollview>
+      <BaseText className="text-3xl mb-4 self-center text-foreground dark:text-foreground-dark">
         WebRTC Test Screen
       </BaseText>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,68 @@
 /** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const theme = require('./themeColors');
+
+const {hslFunction, colors} = theme;
+
 module.exports = {
   content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        foreground: {
+          DEFAULT: hslFunction(colors.light.foreground),
+          dark: hslFunction(colors.dark.foreground),
+        },
+        background: {
+          DEFAULT: hslFunction(colors.light.background),
+          dark: hslFunction(colors.dark.background),
+        },
+        primary: {
+          DEFAULT: hslFunction(colors.light.primary),
+          dark: hslFunction(colors.dark.primary),
+        },
+        primaryForeground: {
+          DEFAULT: hslFunction(colors.light.primaryForeground),
+          dark: hslFunction(colors.dark.primaryForeground),
+        },
+        secondary: {
+          DEFAULT: hslFunction(colors.light.secondary),
+          dark: hslFunction(colors.dark.secondary),
+        },
+        secondaryForeground: {
+          DEFAULT: hslFunction(colors.light.secondaryForeground),
+          dark: hslFunction(colors.dark.secondaryForeground),
+        },
+        muted: {
+          DEFAULT: hslFunction(colors.light.muted),
+          dark: hslFunction(colors.dark.muted),
+        },
+        mutedForeground: {
+          DEFAULT: hslFunction(colors.light.mutedForeground),
+          dark: hslFunction(colors.dark.mutedForeground),
+        },
+        accent: {
+          DEFAULT: hslFunction(colors.light.accent),
+          dark: hslFunction(colors.dark.accent),
+        },
+        accentForeground: {
+          DEFAULT: hslFunction(colors.light.accentForeground),
+          dark: hslFunction(colors.dark.accentForeground),
+        },
+        destructive: {
+          DEFAULT: hslFunction(colors.light.destructive),
+          dark: hslFunction(colors.dark.destructive),
+        },
+        destructiveForeground: {
+          DEFAULT: hslFunction(colors.light.destructiveForeground),
+          dark: hslFunction(colors.dark.destructiveForeground),
+        },
+        borderColor: {
+          DEFAULT: hslFunction(colors.light.borderColor),
+          dark: hslFunction(colors.dark.borderColor),
+        },
+      },
+    },
   },
   plugins: [],
 };
diff --git a/themeColors.js b/themeColors.js
@@ -0,0 +1,40 @@
+module.exports = {
+  hslFunction: hslString => {
+    return 'hsl(' + hslString + ')';
+  },
+  colors: {
+    light: {
+      background: '0 0% 100%',
+      foreground: '240 10% 3.9%',
+      primary: '240 5.9% 10%',
+      primaryForeground: '0 0% 98%',
+      secondary: '240 4.8% 95.9%',
+      secondaryForeground: '240 5.9% 10%',
+      muted: '240 4.8% 95.9%',
+      mutedForeground: '240 3.8% 46.1%',
+      accent: '240 4.8% 95.9%',
+      accentForeground: '240 5.9% 10%',
+      destructive: '0 84.2% 60.2%',
+      destructiveForeground: '0 0% 98%',
+      borderColor: '240 5.9% 90%',
+      // input: '240 5.9% 90%',
+      radius: '4',
+    },
+    dark: {
+      background: '240 10% 3.9%',
+      foreground: '0 0% 98%',
+      primary: '0 0% 98%',
+      primaryForeground: '240 5.9% 10%',
+      secondary: '240 3.7% 15.9%',
+      secondaryForeground: '0 0% 98%',
+      muted: '240 3.7% 15.9%',
+      mutedForeground: '240 5% 64.9%',
+      accent: '240 3.7% 15.9%',
+      accentForeground: '0 0% 98%',
+      destructive: '0 62.8% 30.6%',
+      destructiveForeground: '0 0% 98%',
+      // borderColor: '240 3.7% 15.9%',
+      input: '240 3.7% 15.9%',
+    },
+  },
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,5 +16,5 @@
     "noUncheckedIndexedAccess": true,
     "esModuleInterop": true
   },
-  "include": ["src", "./types", "./types/index.d.ts"]
+  "include": ["src", "./types", "./types/index.d.ts", "./themeColors.js"]
 }