TailwindCSS 多主题色配置

2023-12-14 09:30:45

TailwindCSS 多主题色配置

现在大多数网站都支持主题色变换,比如切换深色模式。那么我们该如何进行主题色配置呢?

tailwind dark

tailwind 包含一个 dark变体,当启用深色模式时,可以为网站设置不同样式

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>
启用深色模式

tailwind.config.js 文件darkMode选项默认是false,需要启用深色模式,则可以设置为 media 或者 class

启动了深色模式后, dark:{class}类将会优先于无前缀的类

默认情况下,dark 变体只对 backgroundColorborderColorgradientColorStops``placeholderColortextColor 启用。

  1. media(通过用户的操作系统进行控制)
    // tailwind.config.js
    module.exports = {
     darkMode: 'media',
     // ...
    }
    
  2. class (手动控制,HTML树中出现 dark类时起作用)
    // tailwind.config.js
    module.exports = {
     darkMode: 'class',
     // ...
    }
    

这种操作可以实现模式切换,但是也不难看出,class中使用dark:{class} 还是比较繁琐的,而且不易查找和修改,并且无法实现多种主题色配置

自定义配置主题色

想要配置不同的主题色,那么就希望配置的颜色可以在不同主题下进行变化。那么如何实现这样的能力呢?我们可以在最外层dom结构上配置不同的类,不同类下的颜色赋予不同值,那么就可以实现多种主题色的切换了,是不是感觉实现很简单,接下来介绍一下代码项目不同主题色的配置。

以小程序(taro + react + rtk)进行介绍,其他原理类似

  • 首先需要建立一个主题文件夹放置我们需要配置的不同主题的css
    theme

    .textLight1 {
      /* text */
      --t-1: #1c1d1f;
      --t-2: #58647a;
      --t-3: #8390a8;
    }
    
    .textDark1 {
      /* text */
      --t-1: #fafafa;
      --t-2: #d2d3d6;
      --t-3: #9fa4ad;
    }
    

    以此类推 相同的的变量key值对应不同的value值

  • 其次需要在入口处引入我们的主题文件 并在配置文件中加入我们定义的变量
    app.css

    @import './theme';
    

    tailwind.config.js

    // Example `tailwind.config.js` file
    const colors = require('tailwindcss/colors')
    
    module.exports = {
      theme: {
        colors: {
          /* text */
          't-1': 'var(--t-1)',
          't-2': 'var(--t-2)',
          't-3': 'var(--t-3)',
        },
      },
    }
    
  • 有了主题文件跟对应的主题类名 textLight1textDark1…,我们便可以进行切换了 在外层包裹组件中使用对应的类名 就可以达到切换主题的效果。

    注意在组件中需要使用对应的key值才会有该效果

     <Text className="text-t-1">Test</Text>
    

文章来源:https://blog.csdn.net/m0_37890289/article/details/134917158
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。