fix: colorscheme

apps/website/docs/core-concepts/dark-mode.mdx

@@ -5,48 +5,37 @@ NativeWind includes a `dark` variant that lets you style your site differently w
 By default this uses `Appearance.getColorScheme()` on native and `prefers-color-scheme` on web.
 
 :::caution
+
 Expo apps do not follow the system appearance unless `userInterfaceStyle` is set to automatic. [Please see the Expo docs for more information.](https://docs.expo.dev/guides/color-schemes/)
+
 :::
 
 ## Toggling dark mode manually
 
-The `dark:` variant is controlled by the [`useColorScheme()`](../../api/use-color-scheme) hook.
-
-```SnackPlayer name=Dark Mode
-import { Pressable, Text } from "react-native"
-import { styled, useColorScheme } from "nativewind";
-
-const StyledPressable = styled(Pressable)
-const StyledText = styled(Text)
-
-function App() {
-  const { colorScheme, toggleColorScheme } = useColorScheme();
-
-  return (
-    <StyledPressable
-      onPress={toggleColorScheme}
-      className="flex-1 items-center justify-center dark:bg-slate-800"
-    >
-      <StyledText
-        selectable={false}
-        className="dark:text-white"
-      >
-        {`Try clicking me! ${colorScheme === "dark" ? "🌙" : "🌞"}`}
-      </StyledText>
-    </StyledPressable>
-  );
-}
+To manualy toggle dark mode on web, you will need to enable the [`class` strategy](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually).
+
+```tsx title="tailwind.config.js"
+module.exports = {
+  darkMode: "class",
+  // ...
+};
 ```
 
-### CSS
+React Native Web does not support `Appearance.setColorScheme`, so we recommend you either use:
 
-To manualy toggle dark mode on web, you will need to enable the [`class` strategy](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually). This is all you need to do, we implement the logic to support both system preference and manual selection
+```tsx title="App.tsx"
+import { colorScheme, useColorScheme } from "nativewind";
 
-```
-// tailwind.config.js
+// Use imperatively
+colorScheme.set("dark" | "light" | "system");
 
-module.exports = {
-  darkMode: 'class',
-  // ...
+export default function App() {
+  // Or as a hook
+  const { setColorScheme } = useColorScheme();
+  setColorScheme("dark" | "light" | "system");
 }
 ```
+
+## Supporting system preference and manual selection
+
+You can follows the [Supporting system preference and manual selection](https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection) instructions to support both system preference and manual selection. Instead of `localstorage`, we recommend using universal storage solution such as [React Native Async Storage](https://react-native-async-storage.github.io/async-storage/)

apps/website/docs/guides/custom-components.mdx

@@ -2,7 +2,7 @@
 
 ## Passing styles to components
 
-Just pass the className prop down to your custom component
+Pass the `className` prop down to your custom component
 
 ```tsx
 function MyComponent({ className }) {
@@ -35,7 +35,13 @@ function MyComponent({ variant }) {
 }
 ```
 
-We recommend using a class name management library such as [cva](https://cva.style/docs) create custom variants
+Creating your own variants and quickly become complex. We recommend using a class name management library to simplify the process
+
+- [tailwind-variants](https://www.tailwind-variants.org/)
+- [cva](https://cva.style/docs)
+- [tw-classed](https://tw-classed.vercel.app)
+- [clsx](https://www.npmjs.com/package/clsx)
+- [classnames](https://www.npmjs.com/package/classnames)
 
 ## Merging with inline styles
 
@@ -203,6 +209,6 @@ declare module "react-native" {
 
 :::caution
 
-Please do not create issues asking for help with global style declarations. Either use the return value of `remapClassNameProps`/`enableCSSInterop`, or ask for help on sites such as [stackoverflow.com](http://stackoverflow.com)
+Please do not create issues asking for help with global style declarations. Either use the return value of `remapProps`/`cssInterop`, or ask for help on sites such as [stackoverflow.com](http://stackoverflow.com)
 
 :::

apps/website/docs/guides/theming.md

@@ -1,10 +1,10 @@
 # Themes
 
-NativeWind uses Tailwind CSS's theme configuration. By default, this is a static them with preset colors for light/dark mode.
+NativeWind leverages Tailwind CSS's theme settings. Out of the box, it provides a static theme equipped with predefined colors for both light and dark modes.
 
 ## Dynamic themes
 
-It is common for native apps to be more personalized and allow for users to pick a theme. So, we need to change our static them to be dynamic by using [CSS Variables as colors](https://tailwindcss.com/docs/customizing-colors#using-css-variables).
+Modern native applications often prioritize personalization, allowing users to select their preferred themes. To transition from a static theme to a dynamic one in NativeWind, utilize [CSS Variables as colors](https://tailwindcss.com/docs/customizing-colors#using-css-variables). This approach ensures flexibility and adaptability in theme application, catering to user preferences.
 
 ```js title=tailwind.config.js
 module.exports = {
@@ -24,8 +24,17 @@ module.exports = {
 ```tsx title=App.tsx
 import { vars } from 'nativewind'
 
+const userTheme = vars({
+  '--color-primary': 'black'
+  '--color-secondary': 'white'
+});
+
 export default App() {
-  return <View className="bg-primary" />
+  return (
+    <View style={userTheme}>
+      <View className="bg-primary" />
+    </View>
+  )
 }
 ```
 
@@ -64,9 +73,9 @@ export default App() {
 
 ## Creating custom themes with logic
 
-NativeWind is un-opinionated on the logic behind your app's theme. It simply provides the building blocks for you to use.
+NativeWind remains agnostic about the thematic logic underpinning your application, instead offering you foundational tools to craft and shape according to your needs.
 
-This is one possible way that you could implement a theme system that uses 'named' themes with light & dark modes.
+To guide you on your journey, here's a suggested method to implement a thematic system that employs 'named' themes complemented by light and dark modes:
 
 ```tsx title=Theme.tsx
 import { vars, useColorScheme } from 'nativewind'

apps/website/docs/guides/troubleshooting.md

@@ -1,8 +1,19 @@
 # Troubleshooting
 
-NativeWind is built on top of the Tailwind CSS CLI. Before troubleshooting NativeWind, it's crucial to ensure that Tailwind CSS itself is functioning correctly. You can inspect the Tailwind CSS output at the following location: `node_modules/.cache/nativewind/<input-css-filename>.<platform>.css`.
+:::tip
+
+While troubleshooting, always start your application without the cache!
+
+**This is the most common cause of issues**
+
+- Expo `npx expo start --clear`
+- React Native CLI `npx react-native start --reset-cache`
 
-For instance, if you've observed that a custom class, `text-brand`, isn't behaving as expected. You can proceed as follows:
+:::
+
+Before troubleshooting NativeWind, it's crucial to ensure that Tailwind CSS itself is functioning correctly. NativeWind uses the Tailwind CSS CLI to compile your styles, so any issues with Tailwind CLI should be resolved first. You can inspect the Tailwind CSS output at the following location: `node_modules/.cache/nativewind/<input-css-filename>.<platform>.css`, or by simply running `npx tailwindcss --input <input.css>`.
+
+For instance, if you've observed that a custom class `text-brand` isn't behaving as expected. You can proceed as follows:
 
 1. First, ensure that your `tailwind.config.js` has the necessary configurations for the color.
 2. Navigate to `node_modules/.cache/nativewind/<input-css-filename>.<platform>.css` and search for the CSS class `.text-brand {}`
@@ -19,20 +30,11 @@ To troubleshoot Tailwind CSS, refer to their [Troubleshooting Guide](https://tai
 
 **Only once you see the expected CSS being generated should you start this troubleshooting guide.**
 
-:::tip
-
-While troubleshooting, always start your application without the cache!
-
-- Expo `npx expo start --clear`
-- RN CLI `npx react-native start --reset-cache`
-
-:::
-
 ## Verifying NativeWind Installation
 
 NativeWind provides a utility function, `verifyInstallation()`, designed to help confirm that the package has been correctly installed.
 
-Import the `verifyInstallation` function from the NativeWind package and run within the scope of a React component. It's crucial to ensure that you do not invoke this function on the global scope.
+Import the `verifyInstallation` function from the NativeWind package and run within the scope of a React component. **It's crucial to ensure that you do not invoke this function on the global scope.**
 
 :::tip
 
@@ -56,15 +58,28 @@ function App() {
 export default App;
 ```
 
-:::caution
+## Common Issues
 
-`verifyInstallation()` will not work within a server context. If using React Server components or Server Side Rendering make sure `verifyInstallation` is called on the client.
+### Your cache is loading old data
 
-:::
+Always reset your cache before troubleshooting an issue.
+
+### Colors are not working
+
+React Native styling is much more restrictive than the web. This code will work on the web, but not on React Native:
+
+```jsx title=App.tsx
+export function App() {
+  return (
+    <View className="text-red-500">
+      <Text>Hello, World!</Text>
+    </View>
+  );
+}
+```
+
+The reason is that `<View />` does not accept a `color` style and will not cascade the style! Instead, you must move the color classes to the `<Text />` element
 
-## A specific class name does not work
+### Modifiers are not working
 
-1. Reset your cache
-1. Does the class name work on the [Tailwind CSS Playground](https://play.tailwindcss.com/)?
-1. Ensure NativeWind supports the style
-1. Ensure the component you are applying the style to supports the style or the required props (e.g `hover:text-white` - does the component support an `onHover` prop?)
+Ensure the component you are applying the style to supports both the style and the required props (e.g `hover:text-white` - does the component support `color` styles and have an `onHover` prop?)

apps/website/docs/tailwind/filters/backdrop-blur.mdx

@@ -0,0 +1,23 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop Blur
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+  none={[
+    "backdrop-blur-none",
+    "backdrop-blur-sm",
+    "backdrop-blur",
+    "backdrop-blur-md",
+    "backdrop-blur-lg",
+    "backdrop-blur-xl",
+    "backdrop-blur-2xl",
+    "backdrop-blur-3xl",
+  ]}
+/>

apps/website/docs/tailwind/filters/backdrop-brightness.mdx

@@ -0,0 +1,26 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop Brightness
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+  none={[
+    "backdrop-brightness-0",
+    "backdrop-brightness-50",
+    "backdrop-brightness-75",
+    "backdrop-brightness-90",
+    "backdrop-brightness-95",
+    "backdrop-brightness-100",
+    "backdrop-brightness-105",
+    "backdrop-brightness-110",
+    "backdrop-brightness-125",
+    "backdrop-brightness-150",
+    "backdrop-brightness-200",
+  ]}
+/>

apps/website/docs/tailwind/filters/backdrop-contrast.mdx

@@ -0,0 +1,22 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop Contrast
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+  none={[
+    "backdrop-contrast-0",
+    "backdrop-contrast-50",
+    "backdrop-contrast-75",
+    "backdrop-contrast-100",
+    "backdrop-contrast-125",
+    "backdrop-contrast-150",
+    "backdrop-contrast-200",
+  ]}
+/>

apps/website/docs/tailwind/filters/backdrop-grayscale.mdx

@@ -0,0 +1,12 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop GrayScale
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility none={["backdrop-grayscale-0", "backdrop-grayscale"]} />

apps/website/docs/tailwind/filters/backdrop-hue-rotate.mdx

@@ -0,0 +1,21 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop Hue Rotate
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+  none={[
+    "backdrop-hue-rotate-0",
+    "backdrop-hue-rotate-15",
+    "backdrop-hue-rotate-30",
+    "backdrop-hue-rotate-60",
+    "backdrop-hue-rotate-90",
+    "backdrop-hue-rotate-180",
+  ]}
+/>

apps/website/docs/tailwind/filters/backdrop-invert.mdx

@@ -0,0 +1,12 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop Invert
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility none={["backdrop-invert-0", "backdrop-invert"]} />

apps/website/docs/tailwind/filters/backdrop-opacity.mdx

@@ -0,0 +1,30 @@
+import Compatibility from "../_compatibility.mdx";
+import Usage from "../_usage.mdx";
+
+# Backdrop Opacity
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+  none={[
+    "backdrop-opacity-0",
+    "backdrop-opacity-5",
+    "backdrop-opacity-10",
+    "backdrop-opacity-20",
+    "backdrop-opacity-25",
+    "backdrop-opacity-30",
+    "backdrop-opacity-40",
+    "backdrop-opacity-50",
+    "backdrop-opacity-60",
+    "backdrop-opacity-70",
+    "backdrop-opacity-75",
+    "backdrop-opacity-80",
+    "backdrop-opacity-90",
+    "backdrop-opacity-95",
+    "backdrop-opacity-100",
+  ]}
+/>