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

[!Example]+ 属性

  • 版本 v0.0.1-alpha+20240828

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

主题今日进度

image-20240829203129-oyf6eyh

不具体的思路

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

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

怎么抄呢?

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

    image-20240829204253-9xoxl43

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

    recording-20240829204456-isrella

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

    image-20240829205207-kgdslt0

  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)

image-20240829210106-i9i8fi4


/* 针对不同的位置,设置不同的颜色 */
.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)这种结构的时候特别常见。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22025 引用 • 87847 回帖 • 3 关注
  • 主题
    24 引用 • 166 回帖 • 5 关注
1 操作
bug320 在 2024-08-29 21:57:47 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • bug320

    短期内我主页的帖子基本会是围绕主题和插件开发进行,等我这个系列写完再一起补上目录吧。

  • 其他回帖
  • littlecoby

    能附上前几期的链接吗 😄

    1 回复