使用 CSS variables 和Tailwind css实现主题换肤

背景

在 2B 的项目中，常常有客户（甲方爸爸）需求，定制与他们企业相同的主题的网站；随着苹果暗黑模式的推出，换肤的需求在网站开发中越来越多，也越来越重要，最近在网上看到 Tailwind Labs 的实现的换肤视频，决定实践一把。

实现博客列表

我们先使用 Tailwind css 实现一个博客列表

• 效果

• html 代码

代码语言：javascript复制

<div class="min-h-screen bg-white">
  <ul class="space-y-10 p-10">
    <li>
      <a class="text-gray-600">
        <article
          class="group relative flex transform items-center transition-transform hover:-translate-x-2"
        >
          <div
            class="flex flex-grow flex-col space-y-4 rounded bg-gray-50 py-8 px-8 text-base shadow-md"
          >
            <div class="flex flex-row justify-between">
              <h3 class="text-xl font-bold text-gray-900">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="group relative flex transform items-center transition-transform hover:-translate-x-2"
        >
          <div
            class="flex flex-grow flex-col space-y-4 rounded bg-gray-50 py-8 px-8 text-base shadow-md"
          >
            <div class="flex flex-row justify-between">
              <h3 class="text-xl font-bold text-gray-900">
                使用 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 就可以实现，如：

代码语言：javascript复制

: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：

代码语言：javascript复制

:root {
  --color: red;
}
h1 {
  color: var(--color);
}

经过 postcss 的处理，得到下面的 css，不支持的 css 属性， 浏览器会自动忽略。

代码语言：javascript复制

h1 {
  color: red;
  color: var(--color);
}

但是这个插件只对第一次编译的时候有用，动态换肤的时候就失效了， 我们可以使用 js polyfill 来修复这个问题,在 HTML 中引入下面代码就可以解决。

代码语言：javascript复制

<script>
  window.MSInputMethodContext &&
    document.documentMode &&
    document.write(
      '<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"></script>'
    )
</script>