003 从零开始的 mini-vlook: 主题开发基础知识 (3)

[!Example]+ 属性

• 版本 v0.0.1-alpha+20240828

如何修改软件界面上元素？

主题今日进度

不具体的思路

修改主题，除了修改编辑区的渲染效果外，最重要的一项是对软件的界面上各个元素的魔改。虽然默认主题也还算是挺不错的，但是搞 DIY，本来就是自己喜欢的才是最好的。

所以，我抄了 Savor 主题状态栏和 OneNote 主题的彩虹文档树。加上一点点自己的审美修改（会比原版的丑点，但是自己的喜好嘛，作为作者，我任性）。就变成上面的样子了。

怎么抄呢？

1. 在集市下载对应的主题， ALT+P 打开设置，选中 集市，跳转到主题，都比较靠前，找到后下载即可。

   

2. 应用选中主题，然后看那部分喜欢，就进入开发者模式点哪里（下面是 gif 图，我在演示我当时怎么看 Savor 主题的）

   

3. 然后打开主题文件夹，选择 "Savor" 文件，在 VSCode 中打开，或者其他可以搜文件夹下所有文件的的软件都行，检索 #status 然后，找到相关代码，看看都是干嘛的——这也是为啥我说至少学会看 CSS 选择器的原因，这样你能知道那些是和你想要的渲染是有关的，然后把这些部分的代码复制粘贴到你的主题中，把里面的变量，修改为自己的值。

   

4. 或者干脆注释一部分代码（/* 开头 和 */ 结尾的中间部分都是注释，不会在主题中起作用），看看注释前后主题有什么变化。然后你就明白这部分会影响啥。

5. 这部分感觉没有太多适合讲的，因为要往细了讲，就要开始给给位看官普及各种 CSS 基础语法，但整体思路就是这样。如果改起来很困难，就整个文件引用过来，然后把里面的变量单独定义在这个文件的上面，修改这些值为你想要的，这样好处是头疼医头，至少想要的实现了。坏处是，你不知道自己的主题有多少细节，然后你拼接的主题越多或者改的越多，互相“打架”就越厉害，所以，好好看看别人的代码：

   1. 尝试找到选择器对应的元素，看看渲染效果；
   2. 然后看看具体的样式规则，分析一下具体作用(遇到不懂的就搜 CSS XXX:YYYY 的作用)，接着想想自己需要不，不需要删除了或者注释了。

讲一个很无趣但复杂点逻辑常见的知识点：循环

CSS 可以实现循环，思路就是利用 :nth-of-type(8n+1) 这里只是变量表达式的选择，这个意思是选择 每八类型中的第一个 ,然后就是用 :nth-of-type(8n+2) 选择 每八类型中的第二个 ，你体会一下，搜一下 :nth-of-type 的用法。(同样的还有 :nth-of-child)

/* 针对不同的位置，设置不同的颜色 */
.b3-list:nth-of-type(8n+1)>[data-type="navigation-root"]::before {
    background-color: #e84c22 !important;
}

.b3-list:nth-of-type(8n+2)>[data-type="navigation-root"]::before {
    background-color: #ed7d31 !important;
}

.b3-list:nth-of-type(8n+3)>[data-type="navigation-root"]::before {
    background-color: #ffc000 !important;
}

.b3-list:nth-of-type(8n+4)>[data-type="navigation-root"]::before {
    background-color: #70ad47 !important;
}

.b3-list:nth-of-type(8n+5)>[data-type="navigation-root"]::before {
    background-color: #1ec3b4 !important;
}

.b3-list:nth-of-type(8n+6)>[data-type="navigation-root"]::before {
    background-color: #5b9bd5 !important;
}

.b3-list:nth-of-type(8n+7)>[data-type="navigation-root"]::before {
    background-color: #8064a2 !important;
}

.b3-list:nth-of-type(8n)>[data-type="navigation-root"]::before {
    background-color: #7a878b !important;
}

上面可以理解为类似下面的伪类：

开始 循环每个元素 {

   如果是第一个元素 {
       应用对应的样式；
   }

   如果是第二个元素 {
       应用对应的样式；
   }

  ... 

   如果是第八个元素 {
       应用对应的样式；
       如果是第八个，跳转到本循环开头继续处理
   }
}

这种循环在处理 列表（ul+li）这种结构的时候特别常见。