简介

前言

CSS 已经不再是当年的模样。如今，你很难找到一种强大、简洁且富有表现力的 UI 语言，能超越现代 CSS。

随着技术世界越来越倾向于基于 Web 的 UI 框架（如现代精致桌面应用所采用的 Electron），我们愈发重视应用的个性化视觉效果。人人都在争相打造那个 暗色主题，对吧？

本课程的目标有两个：

• 探讨主题设计中的实用方法与模式，梳理常见问题及其解决方案。
• 学习如何使用 css-theming。我们不希望每次开发新应用时都重复搭建主题相关的底层逻辑，因此 css-theming 是一个公开发布的包，实现了上述所有讨论过的模式。

在第一部分探讨问题与解决方案的过程中，我们将构建一个 理论系统，这个系统正是 css-theming 的实现基础。

因此，本课程并非 CSS 特性的文档！它更像是一份多年经验的总结——我多年来使用 CSS 开发高度定制化复杂 UI 的实践成果。我会表达一些个人见解，但你可以根据所学知识，自由地构建任何你想要的变体。

我们的部分讨论将围绕颜色展开，因为颜色是主题中最重要的组成部分。这里我想特别强调的是：建立一个既能保持一致性，又能适应不同 明暗程度 的系统非常困难，需要精心规划。例如，Slack 从一开始就支持主题，但直到最近才真正推出原生的 暗色主题。正如我们即将看到的，设计一个周全的暗色主题本身就存在固有的复杂性。

来自 niai.mrahhal.net

然而，暗色主题如今正风靡一时，并且随着时间推移被越来越多地采纳，因此我们的系统必须支持这一趋势。此外，所构建的系统还应让人能够轻松判断在何时何地该使用何种颜色、色调或色板。

最后，我们将基于 CSS 使用 SCSS 来简化开发流程。SCSS 是 CSS 的超集，提供了比原生 CSS 更强的控制能力。虽然它在这里并非必不可少，你也可以选择 LESS 或其他框架，但 css-theming 本身是用 SCSS 实现的。

GitHub

本课程配套有 css-theming GitHub 仓库。你将在项目中通过 css-theming 包来使用其中的 SCSS 和 JS/TS 工具。

我们将如何进行

我喜欢在动手实现之前先夯实理论基础。第一部分将学习多种不同的设计模式，并解决主题设计中的各类问题。第二部分是使用 css-theming，这将作为完整指南，帮助你根据每个应用的具体需求，灵活使用和自定义 css-theming。

---

现在你已经了解了本课程将要涵盖的内容，接下来我们将深入探讨掌握 CSS 主题设计的核心概念。