lonr

Hello, world!

BlogNav navigation

avatar

Profile

One Dark to Theme Them All

UPDATE：昨天升级到了 Fedora 36，GNOME Shell 和 大部分内置应用（因为使用了 GTK 4）主题失效了，所以得更新一下

比较喜欢 VS Code 里的 One Dark Pro 主题，所以在维护一份 One Dark 配色的 Adwaita 主题（GNOME 默认主题）

GNOME 的主题是使用 SCSS 写的，而且本质上只需要修改其中几个颜色值。但我想做成一个提供 accent、bg 颜色和 terminal palette 后生成多种软件主题的 monorepo

Monorepo

UPDATE 2023-05-14: 现在使用了 pnpm 和自带的 workspace 和 TurboPack（貌似就多了一个缓存功能）；Node 版本也使用 pnpm env 管理（虽然全局包在删除 Node 版本后有 bug）

dnf -> zsh -> zinit -> zsh-nvm -> nvm -> node -> npm -> corepack -> pnpm -> rush 😅

nvm 会隔离全局的 npm 包，而 pnpm install -g 的话安装路径没有隔离，感觉全局包使用 npm 安装好一点？

参考 monorepo.tools

尝试使用了一下：

  • pnpm 真不错
  • heft 确实 opinionated
    • 想要添加一个编译 SCSS 的任务，好像得写 plugin
  • tsc 和 Webpack 比较慢

Material Palette 生成工具

Material 工具生成的原始主题有一些问题：

工具输入 Accent（Primary） color，生成其他所有颜色

  • 生成的 primary 颜色和 accent 颜色不一致（因为自动生成的颜色 tone 是固定的）
  • 自动生成的颜色没法满足暗色主题自定义背景颜色的需求

所以：

  1. 参考 Material 的命名规则：primary.dark.color、neutral.dark.background、error.dark.background
  2. 参考 Material 和 Adwaita 的

Primer Primitives

Primer Primitives 是 Primer design system 的原始值（比如 palette），可以被不同应用的主题使用（比如 primer/css、primer/react、github-vscode-theme）

另见：

Terminals

发现 terminal.sexy（通过它开源的 termcolors）可以生成各种终端的主题

One Dark 主题

Atom 的原版 One Dark 主题定义的颜色更少，因为 Atom 没有自带 terminal

VS Code 主题 OneDark-Pro 里可以找到 ANSI 16 色

关于颜色和设计规范

不同的设计规范定义了各自的颜色 palette，因为主要生成开发者工具的主题，所以我感觉我只需要 ANSI 颜色

ANSI：

  • ANSI 使用 black red green yellow blue magenta cyan white
  • Tilix 使用 black red green orange blue purple turquoise grey
  • Terminal Colors，16 色的颜色名倒是无所谓

libadwaita 使用 GNOME color palette，Yaru 也定义了这些颜色，所以我修改的 GNOME 主题应该也得定义这些颜色

GNOME 使用 blue green yellow orange red purple brown light dark。有几个颜色和 ANSI 对不上而且每种颜色都有 5 阶（我不懂颜色，名词可能用错，下同）

参考一些规范：

一些应用：

GTK 主题

GTK 3

adw-gtk3 这个移植 libadwaita 为 GTK 3 主题，直接基于这个项目修改

另见：

GTK 4 和 libadwaita

GTK 4（具体由 Libadwaita 提供）将支持 Recoloring for everything，我的理解是类似于 CSS variables（--bg-color）——修改能在运行时生效

还不是很明白，不过已知可以 link ~/.config/gtk-4.0/ 到 ~/.local/share/themes/Adwaita-One-Dark/gtk-4.0 或者 GTK_THEME=Adwaita-One-Dark 来应用 GTK 4 主题

参考：

GNOME Shell 和 GTK 主题

GTK 应用和 Shell 的主题文件由 SCSS 编译而成，组件使用的各种颜色是由几个基础颜色（$bg_color、$base_color、selected_bg_color）衍生（通过 darken 等）而来的，因此可以比较方便地修改

但目前（GTK 3）编译后 CSS 中的颜色是硬编码的，修改配色就需要重新编译 SCSS

我可能不需要制作 GTK 4 主题，只提供一份 palette 就好。整个项目的意义主要在于其他主题

编写模板的时候最讨厌的是 SVG 图片，不知道 GTK 4 怎么解决这个问题的

GTK 主题相关工具和文档

.gresource

已知选择对应主题的情况下 ~/share/themes/NAME/gtk-3.0/gtk.gresource 会被加载

而 GNOME Shell theme 是由 user theme 扩展更换的，似乎没有加载 gnome-shell-theme.gresource；系统 Adwaita 的资源有被加载

参考：

Qt 等其他主题

Gedit 和 Sushi

GNOME 自带的编辑器 Gedit 和空格键预览 Sushi 共用一样的语法高亮配置文件
最好修改高亮规则和 VS Code 统一

  • Gedit
    1. 下载一个 One Dark 的 Gtk Source Style，添加并选择
    2. 通过 Gedit 的设置添加，会保存在 ~/.local/share/gedit/styles
    3. 或者手动添加到 /home/lonr/.local/share/gtksourceview-4/styles 里
    4. 或者手动添加到 /usr/share/gtksourceview-4/styles 里
  • Sushi 使用同样格式的配置文件，不过优先搜索 /usr/share/sushi/gtksourceview-4/styles/ 目录下 style-scheme 标签 id 属性为 builder-dark 的主题。默认会命中自带的主题文件
    • 复制一份上面下载的文件修改 id="builder-dark" 替换掉 /usr/share/sushi/gtksourceview-4/styles/ 里的那个
    • 如果主题文件放在了共享配置文件里（3. 和 4.），也可以修改 id="builder-dark" 后删除掉 /usr/share/sushi/gtksourceview-4/styles/ 里的那个
    • 每次更新 Sushi 后都要设置一次
    • Sushi 相关代码、相关函数文档、配置文件优先级
  • Sushi 没有使用系统主题的配色
  • 语法高亮
  • GtkSourceView style schemes
  • Schemes, a GtkSourceView style schemes creator

Tilix 和 fish 和 Zsh

Gist 配置文件

分别：

  1. onedark.json 是 Tilix Theme，放到 ~/.config/tilix/schemes/
  2. prompt.fish 基于 Screen Savvy prompt 样式修改了配色，放在 ~/.config/fish/conf.d/ 里，fish 自动加载
  3. sethighlight.fish 设置 Fish One Dark 配色，运行一次 ./sethighlight.fish

之前写了个 Zsh 主题 ghoti，里面的颜色值使用的是预设 16 色（没有写死）。修改 Tilix 颜色后发现和 VS Code 终端配色不同，感觉是 One Dark Pro 或 VS Code 的问题（其实早就发现 VS Code 终端高亮和代码高亮颜色不同：更亮）。相关 issues：

Visual Studio Theme

有一个官方的工具 Bring VS Code themes to Visual Studio 2022!

Misc

Monochromatic

使用 Material 的工具修改 tone 就可以了

Monochromatic colors 指同样 hue 的一组颜色，可以通过对单一颜色 Tint, shade and tone 获得。一番搜索后发现：

  • Tint & Shade Generator 这个工具使用的公式：
    • Tints: New value = current value + ((255 - current value) x tint factor)
    • Shades: New value = current value x shade factor
  • Ant Design 色板生成算法演进之路：
    • v1 参考另一种 Tint and Shade Functions，tints 算法和上面的不一致（目测 tints 时会改变 hue）
    • v2 最复杂
    • v3 直接调整 HSV 中的 V 值。TinyColor 的 monochromatic 也是直接调整 V 的
  • StackOverflow 这篇回答提到还可以直接调整 HSL 的 Lightness。SCSS 的 lighten 和 darken 也是这样的
  • 发现 Chroma.js 作者有一个 vis4.net/palettes 工具
    • Chroma 的 darken 用的是 lab 空间

VS Code(Electron) 和 Chrome 的颜色显示问题

取色器取 VS Code 的颜色时发现和主题里写的不一致，和之前遇到的 Chrome 颜色问题一样，需要强制使用 sRGB：

# 对 Chrome，打开 chrome://flags/；搜索 force color profile 选择 sRGB

code --force-color-profile=srgb
# ⬇️ 正常的警告
# Warning: 'force-color-profile' is not in the list of known options, but still passed to Electron/Chromium.

另见：

希望有朝一日我能搞明白 GTK 主题设置

影响因素太多了

一些信息：

  • GTK 2 主题在 ~/.themes 下有效，但在 ~/.local/share/themes 下无效，见
  • GNOME 自带 GTK 4 应用使用 libadwaita，所以 themes/gtk-4.0 的主题无效，见
    • 使用 GTK 4 但未使用 libadwaita 的应用应该可以利用 themes/gtk-4.0 的主题
    • 设置环境变量 GTK_THEME=Adwaita-One-Dark:dark gnome-calculator 有效，见，见
    • ~/.config/gtk-4.0/gtk.css 会被加载，所以可以 link 到 ~/.local/share/themes/Adwaita-One-Dark/gtk-4.0/gtk.css，见
    • gsettings set org.gnome.desktop.wm.preferences theme 这个是废弃且无效的，见
  • 暗色主题设置，见：
    • ~/.config/gtk-4.0/settings.ini（还有 3.0）中的 gtk-application-prefer-dark-theme = 1 有用？
    • gsettings set org.gnome.desktop.interface color-scheme prefer-dark 等价于设置里选择 Dark
      • 对有些（官方）GTK 3 应用有效，对如 Tilix 无效
    • 最简单的做法是复制 gtk-dark.css 为 gtk.css，缺点是无法切换
  • index.theme 很可能没用，见
  • 如何打包 gresource

[Gimp-user] How to design new GIMP themes from scratch

Widget Factory for gtk2 on Arch/Manjaro?

Telegram