Shimmering Focus配色方案教程如何切换5套社区配色以及不写CSS代码也能自制专属主题色【免费下载链接】shimmering-focusA minimalistic and opinionated Obsidian theme for the keyboard-centric user.项目地址: https://gitcode.com/gh_mirrors/sh/shimmering-focusShimmering Focus 是一款极简、为键盘党深度优化的 Obsidian 主题曾获得 2022 年 Obsidian October 主题评选冠军是商店里下载量排名前十一的主题。它自带 5 套社区贡献的配色方案通过 Style Settings 插件即可一键切换就算你完全不懂 CSS复制一份主题提供的模板、改几个色相数字也能做出专属主题色。本教程带你从零完成全部操作。5 套配色方案一览找到最适合你的 Obsidian 主题色这套主题默认使用Gamma配色灰蓝底 青绿色强调色另外 4 套全部来自社区投稿风格差异明显。切换入口在设置页的「Alternative color schemes」下拉框对应定义见source/style-settings.yaml配色方案风格速写源码文件Gamma默认冷静灰蓝背景 青绿强调色最原汁原味source/1-colorschemes/00_Default.cssmacOS native饱和度归零跟随系统的素净灰白source/1-colorschemes/macOS-native.cssCoffee暖棕咖啡色调灵感来自 Primary 主题source/1-colorschemes/Coffee.cssEverforest森林绿护眼色系低对比度柔和观感source/1-colorschemes/Everforest.cssGruvbox复古暖色终端风亮色版与暗色版俱全source/1-colorschemes/Gruvbox.css 每套配色都为亮色模式和暗色模式分别定义了一组颜色变量因此切换后无论深浅模式观感都保持一致。一键切换配色Style Settings 最快配置方法切换 5 套内置配色只需 3 步全程点选、零代码在 Obsidian 中安装并启用官方社区的Style Settings插件设置 → 第三方插件中搜索安装打开设置 → 外观 → Style Settings → Color shapes颜色与形状板块在Alternative color schemes替代配色方案下拉框中选择 Gamma / macOS native / Coffee / Everforest / Gruvbox页面即时生效。这套下拉菜单在源码中的设置项 id 为alt-colorschemesclass-select类型位于source/style-settings.yaml五个选项分别对应colorscheme-*的 class 名与source/1-colorschemes/目录下的 CSS 文件一一对应。微调 Gamma 默认方案只动一个背景色相滑块如果你保留默认的 Gamma 配色还可以不碰任何代码直接拖滑块调整背景冷暖在同一个 Style Settings 页面往下滑找到Background color tone (light mode)和(dark mode)两个滑块取值范围 0–360对应色环上的色相角度230 是默认的灰蓝拖向 0 偏粉、拖向 120 偏绿拖动时界面实时变化满意即止自动保存。对应源码中就是--bg-hue-light/--bg-hue-dark两个 CSS 变量见source/1-colorschemes/00_Default.css。注意切换到其他 4 套配色时这两个滑块会自动隐藏因为那些方案已有固定的背景色调。自制专属主题色复制一份 CSS 模板即可想做一个只属于自己的颜色主题的官方文档README.md明确支持这种玩法而且不需要任何 CSS 基础——原理是主题把整套界面颜色都收敛成了一组变量你只需要覆盖这组变量操作步骤在你的仓库vault中找到.obsidian/snippets/文件夹没有就新建在里面新建一个文件例如my-color.css把下面这段模板粘贴进去只修改几个hsl(...)里的色相数字0–360 的色环角度回到 Obsidian 设置 → 外观 → CSS 代码片启用my-color完成 .theme-dark.theme-dark { --bg-hue: 230; --bg-sat: 15%; --color-accent: hsl(184 79% 45%); --color-accent-hsl: 184, 79%, 45%; --interactive-accent: hsl(184 79% 30%); --alt-heading-color: hsl(232 50% 70%); --secondary-accent: hsl(28 63% 61%); --hover-accent: hsl(328 100% 64%); --link-unresolved-color: hsl(101 42% 51%); }几个新手必看的小细节想同时定制亮色模式就再加一段.theme-light.theme-light { ... }块改法完全相同--color-accent-hsl的三个数字必须和--color-accent保持一致一个带逗号、一个不带否则链接高亮等依赖色会出现色差你改的不是某个按钮的颜色而是整套界面的配色 DNA按钮、链接、标签、选中高亮等上百处颜色都由这些变量派生派生逻辑在source/2-variables/variables.css所以改 8 个值等于换了一套主题做得满意的话主题作者欢迎你在社区提交配色供更多人使用。配色源码在哪相关文件路径速查对细节感兴趣的读者可按路径直接查阅源码5 套配色的颜色变量定义source/1-colorschemes/每套配色一个 CSS 文件所有外观自定义选项100 项的声明source/style-settings.yaml由配色变量派生出全部界面颜色的核心逻辑source/2-variables/variables.css主题特性、命令与配色投稿说明README.md版本更新记录Changelog.md常见问题Q切换配色后颜色没有变化A确认 Style Settings 插件已启用且下拉框选中的不是Gamma默认项个别情况可重启 Obsidian 让 class 名重新挂载。Q自定义 CSS 和内置 5 套配色冲突吗A不冲突。CSS 代码片加载顺序在主题之后你的变量覆盖会优先生效想还原时把 snippet 停用即可。Q为什么选了非 Gamma 配色后背景色相滑块消失了A这是主题有意为之——source/1-colorschemes/00_Default.css中隐藏了该滑块因为那 4 套社区配色有自己的固定背景色调拖滑块反而会造成视觉冲突。【免费下载链接】shimmering-focusA minimalistic and opinionated Obsidian theme for the keyboard-centric user.项目地址: https://gitcode.com/gh_mirrors/sh/shimmering-focus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考