做网站之前需要准备什么软件,东莞网站搭建哪里好,wordpress分菜单,如何注册自己的平台TailwindCSS 多主题色配置 现在大多数网站都支持主题色变换#xff0c;比如切换深色模式。那么我们该如何进行主题色配置呢#xff1f; tailwind dark tailwind 包含一个 dark变体#xff0c;当启用深色模式时#xff0c;可以为网站设置不同样式 div classbg-whi…TailwindCSS 多主题色配置 现在大多数网站都支持主题色变换比如切换深色模式。那么我们该如何进行主题色配置呢 tailwind dark tailwind 包含一个 dark变体当启用深色模式时可以为网站设置不同样式 div classbg-white dark:bg-gray-800h1 classtext-gray-900 dark:text-whiteDark mode is here!/h1p classtext-gray-600 dark:text-gray-300Lorem ipsum.../p
/div启用深色模式 tailwind.config.js 文件darkMode选项默认是false需要启用深色模式则可以设置为 media 或者 class 启动了深色模式后 dark:{class}类将会优先于无前缀的类 默认情况下dark 变体只对 backgroundColor、borderColor、gradientColorStopsplaceholderColor 和 textColor 启用。
media通过用户的操作系统进行控制// tailwind.config.js
module.exports {darkMode: media,// ...
}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 classNametext-t-1Test/Text
