tailwindcss darkmode 为 React Native 定义

Question

我想为 twrnc 和 tailwindcss 设置浅色和深色模式颜色配置，以便我可以像这样定义颜色：

const colors = {
  light: {
    red: {
      100: "#880808",
      ...
    }
  },
  dark: {
    red: {
      100: "red",
      ...
    }
 },

}

我想这样定义，然后使用

<View style={tw`bg-red`}>...</View>

如何配置？

环境

"twrnc": "^4.3.0",
 "tailwindcss": "^3.4.4",

Answer 1

第 1 步：在 TailwindCSS 配置中定义自定义颜色 首先，您需要在 tailwind.config.js 文件中定义自定义颜色。您将设置浅色和深色模式配色方案。

// tailwind.config.js
module.exports = {
  darkMode: 'class', // Enable dark mode by adding 'class'
  theme: {
    extend: {
      colors: {
        light: {
          red: {
            100: '#880808',
            // Add more color shades as needed
          },
        },
        dark: {
          red: {
            100: 'red',
            // Add more color shades as needed
          },
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

第 2 步： 为 Tailwind React Native 配置 twrnc

npm install twrnc

使用自定义配置在项目根目录中创建 tailwind.config.js 文件（如果尚未创建）。

// twrnc.config.js
module.exports = {
  config: require('./tailwind.config.js'),
};

第3步：在React Native中实现浅色和深色模式

import React, { useState } from 'react';
import { View, Text, Switch } from 'react-native';
import tw from 'twrnc';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleSwitch = () => setIsDarkMode(previousState => !previousState);

  return (
    <View style={tw`${isDarkMode ? 'dark' : 'light'}`}>
      <Switch
        onValueChange={toggleSwitch}
        value={isDarkMode}
      />
      <View style={tw`bg-red-100 p-4`}>
        <Text style={tw`text-white`}>Hello, World!</Text>
      </View>
    </View>
  );
};

export default App;