Nativewind toggling Dark mode with custom color schemes

Question

I have a React Native project leveraging Nativewind.

I have dark mode toggle working and and am trying to use the same methodology as the default Tailwind scheme

i.e.

          <View className="mx-5 flex w-1/5 items-center justify-center">
            <View className="bg-brandPrimary dark:bg-brandPrimary mx-2 my-2 flex h-10 w-full rounded-full"></View>
            <Text className="text-slate-900 dark:text-white">Brand</Text>
          </View>

See Text component with text-slate-900 and dark:text-white. When I toggle the theme using toggleColorScheme(), Nativewind / TW knows to switch to the dark:text-white color.

I want to do the same WITHOUT using embedded JS to switch the className applied. See View.

However, when I use the following tailwind.config.js file, I run into issues where it does not apply the dark theme color.

/** @type {import("tailwindcss").Config} */
module.exports = {
  presets: [require('@acme/tailwind-config')],
  content: ['./app/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Works as expected
        // e.g. bg-brandPrimary vs. dark:bg-brandPrimaryDark
        // brandPrimary: '#000000',
        // brandPrimaryDark: '#ffffff',
        brandPrimary: {
          DEFAULT: '#000000',
          dark: '#ffffff'
        }
      }
    }
  }
};

I know I can make this work by following the pattern above in the tailwind.config.js comments just above. But I would rather see if it is possible to have something like:

brandPrimary: {
  DEFAULT: '#000000',
  dark: '#ffffff'
}

as it is more intuitive (IMO) of the relation and goal of the custom color.

Nativewind toggling Dark mode with custom color schemes

0 Answers0