背景
在2B的项目中，常常有客户（甲方爸爸）需求，定制与他们企业相同的主题的网站；随着苹果暗黑模式的推出，换肤的需求在网站开发中越来越多，也越来越重要，最近在网上看到 Tailwind Labs的实现的换肤视频，决定实践一把。
实现博客列表
我们先使用Tailwind css 实现一个博客列表
<div class="min-h-screen bg-white">
<ul class="p-10 space-y-10">
<li>
<a class="text-gray-600">
<article class="relative flex items-center transition-transform transform group hover:-translate-x-2">
<div class="flex flex-col flex-grow py-8 space-y-4 text-base rounded px-8 shadow-md bg-gray-50">
<div class="flex flex-row justify-between">
<h3 class="text-xl text-gray-900 font-bold">useEffect 完整指南</h3>
<span>2020-06-08</span>
</div>
<p className="leading-8">你用Hooks写了一些组件，甚或写了一个小型应用。你可能很满意，使用它的API很舒服并且在这个过程中获得了一些小技巧。</p>
</div>
</article>
</a>
</li>
<li>
<a class="text-gray-600">
<article class="relative flex items-center transition-transform transform group hover:-translate-x-2">
<div class="flex flex-col flex-grow py-8 space-y-4 text-base rounded px-8 shadow-md bg-gray-50">
<div class="flex flex-row justify-between">
<h3 class="text-xl text-gray-900 font-bold">使用 CSS variables 和Tailwind csss实现主题换肤</h3>
<span>2020-06-08</span>
</div>
<p className="leading-8">根据Tailwind Labs的[换肤视频]，手动实践。</p>
</div>
</article>
</a>
</li>
</ul>
</div>
CSS variables
使用CSS variables 是实现换肤最方便的方案，按传统的方案就得加入一些css class 就可以实现，如：
:root {
--page-bg:#fff;
--card-bg:#F9FAFB; /* gray-50 */
--title-color:#111827;/* gray-900 */
--desc-color:#4B5563; /* gray-600 */
}
.theme-dark {
--page-bg:#111827; /* gray-900 */
--card-bg:#1F2937; /* gray-800 */
--title-color:#F3F4F6;/* gray-100 */
--desc-color:#E5E7EB; /* gray-200 */
}
.page__bg{
background-color: var(--page-bg);
}
.post__card{
background-color: var(--card-bg);
}
.post__title{
color: var(--title-color);
}
.post__desc{
color: var(--desc-color) ;
}
这样就可以实现深色皮肤了，如果想增加一套皮肤，只需增加一套颜色变量就可以了。
兼容性
CSS variables 只支持现代浏览器，但是许多客户还在使用IE11，为了兼容IE11 可以使用 postcss 插件postcss-custom-properties
例如下面css：
:root {
--color: red;
}
h1 {
color: var(--color);
}经过postcss 的处理，得到下面的css，不支持的css属性， 浏览器会自动忽略。
h1 {
color: red;
color: var(--color);
}但是这个插件只对第一次编译的时候有用，动态换肤的时候就失效了，
我们可以使用js polyfill 来修复这个问题,在HTML中引入下面代码就可以解决。
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>😅但是这样写完全体现不出Tailwind css 的优势，Tailwind 的思想是Utility-First，写页面的时候不需要取繁琐的class名称了。
Tailwind 配置
tailwind css 可以让用户在tailwind.config.js中配置一些自定义颜色，这样css 中就增加了与之对应颜色的class。
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
theme: {
extend: {
colors: {
amber: colors.amber,
lime: colors.lime,
rose: colors.rose,
orange: colors.orange,
},
},
backgroundColor: {
//utilities like `bg-base` and `bg-primary`
base: 'var(--color-base)',
'off-base': 'var(--color-off-base)',
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
muted: 'var(--color-text-muted)',
},
textColor: {
//like `text-base` and `text-primary`
base: 'var(--color-text-base)',
muted: 'var(--color-text-muted)',
'muted-hover': 'var(--color-text-muted-hover)',
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
},
},
variants: {},
plugins: [],
}在这里为了方便使用和记忆，我用来几个简单的变量名称来定义，背景和字体颜色，当然还有扩展其他样式如borderColor
然后在css 中定义变量 theme 方法可以获取tailwind 内置的颜色，想要使用颜色比配置在colors 中。跟多颜色可以访问customizing-colors,当然
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
.theme-light {
--color-base: theme('colors.white');
--color-text-base: theme('colors.black');
--color-off-base: theme('colors.gray.50');
--color-text-muted: theme('colors.gray.600');
--color-text-muted-hover: theme('colors.gray.500');
--color-primary: theme('colors.blue.600');
--color-secondary:theme('colors.blue.300');
}
.theme-dark {
--color-base: theme('colors.gray.900');
--color-text-base: theme('colors.gray.100');
--color-off-base: theme('colors.gray.800');
--color-text-muted:theme('colors.gray.300');
--color-text-muted-hover: theme('colors.gray.200');
--color-primary: theme('colors.blue.500');
--color-secondary: theme('colors.blue.200');
}
}
tailwind 中有个样式是text-opacity-10 设置了字体颜色，还可以设置透明度，查看源码发现样式是通过rgba 实现的.
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(17,24,39,var(--tw-text-opacity));
}如想要支持这个透明度的样式，我们还需要将颜色转成Rgb,tailwind.config.js 配置
function withOpacity(variableName) {
return ({ opacityValue }) => {
if (opacityValue) {
return `rgba(var(${variableName}), ${opacityValue})`;
}
return `rgb(var(${variableName}))`;
};
}
module.exports = {
...,
theme: {
// we want to extend the current colors instead of replacing them
extend: {
//like `bg-base` and `bg-primary`
backgroundColor: {
primary: withOpacity('--color-primary'),
secondary: withOpacity('--color-secondary'),
muted: withOpacity('--color-text-muted'),
},
//like `text-base` and `text-primary`
textColor: {
primary: withOpacity('--color-primary'),
secondary: withOpacity('--color-secondary'),
},
}
}css 中颜色定义
.theme-dark {
--color-base: 17, 24, 39; /* gray-900 */
--color-text-base: 243, 244, 246; /* gray-100 */
--color-off-base: 31, 41, 55; /* gray-800 */
--color-text-muted: 229, 231, 235; /* gray-200 */
--color-muted-offset: 209, 213, 219; /* gray-300 */
--color-primary: 147, 197, 253; /* blue-300 */
--color-secondary: 96, 165, 250; /* blue-400 */最终效果
顺便提一下play.tailwindcss.com/ 必须点击share 才会保存。😂 我在练习的时候也没保存，吃过一堑。
参考
- www.youtube.com/watch?v=MAt…
- css-tricks.com/color-themi…
- dev.to/austincrim/…
