国产云的价格越来越离谱了，准备提桶跑路。

很久没写博客了，这一年发生了很多事。主要是换了城市，还成立了家庭，然后工作上躺平了半年之后终于又开始工作了。

工作内容果不其然全面地转向了 AI 创作，现今与 AI 无关的程序员岗位几乎已经绝迹了，大概程序员这个职业也快终结了哈哈哈。

这周末去听了 GOSIM 的大会，开车过去半个小时（是的，我买车了），跟两年前一样见到了不少老外程序员，还是永恒不变的几个 Rust 国内布道者。一切似乎都变了，但一切似乎又都没变。主题无外乎 AI，机器人和 Rust，有种诗与远方的平和，大概互联网公司也开始迈向国企化了。

讲座非常密集，两天时间估计有接近百场，听了估计不到十场，听得印象深刻的有：

1. Servo 嵌入式开发
2. Ant Design 开源十周年
3. 语音 Agent
4. MarkdownFlow 面向 Agent 的 HTML
5. Prune4Web
6. Crate 供应链安全
7. Makepad 工作坊
8. ArceOS 组件化内核

老外讲师都比较自由奔放，几乎每个都是络腮胡或是长发飘飘，要么西装革履，要么几乎穿个大裤衩。然后 PPT 清一色全是英文长句子，有的篇幅辽阔，有的言简意赅。不管讲的是浅显还是夸张，都透露出一种听我的就对了的口气。国内的讲师基本都是 T 恤衬衫，呆着眼镜，然后拿着反复斟酌排版仍然透露出寒酸气息的 PPT，时刻关注观众反应地小心谨慎地陈述。

总得来说，无外乎以下几种方向：

1. 如何让 AI 更好地理解人类世界（主要是人自身的输入）
2. 如何让 AI 更好地表达自己
3. Rust 如何赋能安全性/自身如何安全
4. 人类手搓代码不容易，大家行行好给点 financial support
   

总的看来真是机械降神，科技平权啊。人类前 30 年辛辛苦苦建立的互联网世界，一夜间被 AI 几乎全部给颠覆了。不懂编程的人都能喊出要让所有的程序让 AI 重新写一遍的口号了，程序员的生存空间已然变得极其狭窄。这次几乎没听到讲得通俗易懂的机器人开发，总觉得机器人领域现在也缺少一个降维的过程，翻来覆去还是传感器和控制算法这一套，如何面向更实际用户的需求来进化，可能也会促使这个行业诞生 ChatGPT 这样的巨无霸应用。

结合到现在工作的开发内容，AI 已经在如何和计算机好好相处方面全面超越了人类，目前已有的纯软件方面的问题只剩下如何让 AI 可以互相沟通了。当然还有与人交互，但这就不是 AI 自身需要完善的能力范围了。

下一届大会，是不是就应该出现 AI 讲师了呢？完全由 AI 撰写并完成演讲的讲座，让我们拭目以待吧！

随着 CSS Variables 的普及，切换网站主题变成了一件轻松又愉快的工作，只需简单在 @media (prefers-color-scheme: dark) 下指定新的 --* 变量即可。但如果有多个主题，或者是主题嵌套该怎么办呢？
本文将告诉你如何解决这一切。

主题复用

假设我们有三个主题，

• 纯色默认主题 A （即 :root）
• 暗色主题 B 继承自 A
• 带图主题 C 继承自 A

很明显，我们可以写成下面这样的样式表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

:root,
[data-theme='B'],
[data-theme='C'] {
    --red: #f00;
    --bg: #fff;
}

[data-theme='B'] {
    --bg: #000;
}

[data-theme='C'] {
    --background: url(c.png)
}

:root {
    --bg: #fff;
}

但我们很快发现一个问题，主题间可能存在覆盖问题，A 与 B 的 CSS 优先级是一样的，如果有一个在下方就会被覆盖，那如何能加深这个深色模式呢？答案是加一层选择器。

我们发现 data-theme 已经不适合表达包含明暗和其他配色的多个主题了，于是用 data-mode 来表示明暗。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

:root,
[data-theme='A'],
[data-theme='A'][data-mode='light'],
[data-theme='B'][data-mode='dark'],
[data-mode='dark'],
[data-theme='C'],
[data-theme='C'][data-mode='light'] {
    --red: #f00;
    --bg: #fff;
}

[data-mode='dark'],
[data-theme='B'][data-mode='dark'], {
    --bg: #000;
}

[data-theme='C'],
[data-theme='C'][data-mode='light'] {
    --background: url(c.png)
}

// 其他地方引入的样式

:root {
    --bg: #fff;
}

看起来多了很多无用的代码，但我们列个表格来分析下各种组合。

可以看到最后一个 :root 由于优先级不如前方主题将不会覆盖前面的样式。

主题嵌套

前面我们解决了平级主题的复用，但如果是父子元素的嵌套呢？这时就变成了一个 CSS Variables 的嵌套。