最近在给自己写主页（同时也是博客），我做了一个切换主题色的功能。每次进入页面时，会随机选择一套配色，让页面显得灵动一些，就像下面这样： 这是如何实现的呢？不妨先从自定义颜色入手 WindiCSS 自定义颜色 定义一个固定的颜色 // windi.config.js…

在 windicss 中，提供了媒体查询和 class 两种方式实现暗黑模式适配。而且比较省心的是——其提供的 dark 变体会自动根据选择的适配模式，生成对应的代码，可以有效避免写出一堆没用的css，看起来也比较清晰。 为了方便控制，我们选择使用 class 的方式来切换暗黑模式…

这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。 样式 首先，我们先通过两个 div 来模拟这两个header <template> <div class="main-header-wrapper"> <div class="main-header"></div> …