Blue Topaz主题介绍 [Showcase]

Blue Topaz从发布到现在已经一年有余,感谢各位的喜欢。目前主题在GitHub( GitHub - PKM-er/Blue-Topaz_Obsidian-css: A blue theme for Obsidian. )里的版本号还是v3.5,发布时间是一个月前,实际上,到发帖时为止,已经修改了5000+行了(之前主题总共7000+行左右)。憋了很长时间,支持了Style Settings插件,并且提供了很多样式的DIY选项。下面给出一些介绍和截图。


  • 主题:Blue Topaz (需要使用最新版,GitHub里的v3.5是一个月前的老版本,不支持以下内容)
  • 插件:Style Settings

前期部署

  1. 启用Blue Topaz主题;
  2. 下载、安装、启用Style Settings插件,然后会在设置页面下找到“Style Settings”,选择后,右侧出现“Blue Topaz Theme“选项

内容介绍

到目前为止,提供以下内容:

  • Translucent Setting Panel:使设置页面半透明,便于观察diy设置,结束设置后记得关闭选项
  • Background Settings:用来设置背景图片
  • Color:更改部分内容的颜色
  • Font:更改部分内容的字体
  • Style:选择部分内容的样式

Background Settings

有两部分内容
image

  • Note Page:设置笔记页面内背景
  • Workplace:设置整个软件的背景

Note Page

  • Switch off background images:顾名思义,关闭笔记背景
  • Choose images:这里设置了一些预置背景系列,可供自己选择image
  • Random background images:设置随机背景,使用时需联网,图片全部来自 Unsplash
  • Random with topic:设置特定颜色的随机图片image

Workplace

  • Background image style:设置背景样式,暂时只装载了”Blur“一种,别的会陆续加上image
  • Theme light/dark:选择明亮/黑暗模式下的背景imageimage

Color and Font

image
不多做介绍,自己改就行

Style

image
提供列表、文件夹、引用框、黑暗模式导出pdf样式设置

List

image
提供六种样式,可以自己试试,这一不一一截图了

Folder

  • Unmute collapsed folder:默认未激活的文件夹是黯淡的,如果你不喜欢这种设置,可以开启选项
  • Remove file icon:选择是否移除md文件前面的图标
  • Folder-colorful:可以让文件夹变得五颜六色,注意!文件夹必须以0-9或英文大写字母A-Z开头才会生效 提供多种配色选择image

Blockquote

语法为>的引用框设置image

Exported PDF in dark mode

设置黑暗模式下导出的pdf样式,可以让导出的pdf为黑色背景(黑暗模式的配色)

展示

默认

设置:

  • 关闭笔记背景
  • 设置软件背景
  • 更改列表样式
  • 开启多彩文件夹
  • 统一文件夹透明度(Unmute collapsed folder)

  • 设置笔记背景
  • 设置软件背景
  • 开启多彩文件夹
  • 统一文件夹透明度(Unmute collapsed folder)

后续还会继续更新,提供更多设置。

展示窗

这个帖子也是一个展示窗,你可以展示你的配置,如果你愿意的话,你可以导出你的设置,发布在这里,让别人也能体会你使用时的快乐!

更多

可以加QQ群:908688452,提供更多内容

34 个赞

平平无奇的设置在这里,我只设置了去除原主题背景图和彩色文件夹。

为防有人问,文件夹icon是插件:obsidian-icon-folder。P.S. 为了让文件夹图标显示出来,style setting要设置remove-file-icons 为false。

blue主题支持的style settings设置很有可玩度!

这是我导出的设置,即使只设置了很少的项,就作为抛砖引玉吧。期待其他人的分享

{
  "blue-topaz-theme@@background-settings-body-style": "background-settings-body-style-none",
  "blue-topaz-theme@@background-settings-body-theme-light": "background-settings-body-theme-light-none",
  "blue-topaz-theme@@background-settings-body-theme-dark-none": "background-settings-body-theme-dark-blue-wave",
  "blue-topaz-theme@@remove-file-icons": false,
  "blue-topaz-theme@@folder-style-change-options-coloful": true,
  "blue-topaz-theme@@folder-style-change-options-coloful-subfolder": "folder-colorful-one",
  "blue-topaz-theme@@unmuted-collapsed-folder": true,
  "blue-topaz-theme@@blockquote-style-change-options": "blockquote-style-quotation-mark",
  "blue-topaz-theme@@background-image-settings-switch": true
}
10 个赞

借用各路神仙的 css,日常使用 workspace,以及在 Blue Topaz 上锦上添花。哦~这个button的颜色好丑,改天有空一定还要再调整一下。

{
  "blue-topaz-theme@@background-settings-body-style": "background-settings-body-style-none",
  "blue-topaz-theme@@background-settings-body-theme-light": "background-settings-body-theme-light-none",
  "blue-topaz-theme@@list-style-change-options": "list-bracket-left",
  "blue-topaz-theme@@folder-style-change-options-coloful": true,
  "blue-topaz-theme@@folder-style-change-options-coloful-subfolder": "folder-colorful-one",
  "blue-topaz-theme@@blockquote-style-change-options": "blockquote-style-border-left"
}
4 个赞

好 顶 赞!
虽然个人很喜欢Blue Topaz的默认样式,但能够适配自定义插件降低个性化门槛还是很棒的。
其实,正是因为当初选择了这个主题,才让我能够天天打开 obsidian,天天用。

2 个赞

更新

“Color”选项下增加配置好的颜色可供选择

目前制作了两种配色,更多配色会后续补充


(Lavi的定制牛油果)

“Style” → “Folder” 下增加浅色当前文件夹选项

image
image
image

大佬,为什么我更新了插件 没有这两项新内容呢?

也要更新主题至最新版

已调整~谢谢谢谢~~!

更新

  • 软件背景设置可以添加自定义图片,网络图片或者本地图片都可以。
    感谢 @Cuman 的方案与支持。

  • 添加还原软件默认字体按钮(无衬线字体)

  • 添加粉色配色(黑暗模式还在制作中)

1 个赞

看起来很好,下载了试试

新主题配色看起来很棒,这是我用blue topaz 做的效果

伪看板效果

在yaml 区域,也就是文章开头声明

---
cssclass: kanban
--

就可以得到类似伪看板的效果,也就是无序列表分栏

主题支持全中文设置

主题设置(全中文的 :smiling_face_with_three_hearts:

需要安装 Style Settings 插件


pink topaz,blue topaz,avocado topaz 一键切换 再也不用为配色烦恼了!

代码块 高亮建议使用codemirror option 插件接管,并在style settings 中自定义高亮主题

主题可以自定义背景图

代码块高亮效果展示

(编辑状态和预览状态代码块高亮效果一致)
add (1)

主题自带悬浮便签效果

图谱样式

最后惯例首页镇楼 :smiley_cat:

附上style setting 设置:

{
  "CodeMirror Options@@cm-active-line-background-color@@light": "#434758",
  "CodeMirror Options@@cm-background-color@@light": "#FDF6E3",
  "CodeMirror Options@@cm-foreground-color@@light": "#282727",
  "CodeMirror Options@@cm-variable-2@@light": "#4D5858",
  "CodeMirror Options@@cm-matching-bracket@@light": "#1D1C1C",
  "CodeMirror Options@@cm-type@@light": "#6D5F1B",
  "CodeMirror Options@@cm-qualifier@@light": "#9B8828",
  "CodeMirror Options@@cm-operator@@light": "#3491B7",
  "CodeMirror Options@@cm-hr@@light": "#588A1F",
  "CodeMirror Options@@cm-builtin@@light": "#BB8E3C",
  "CodeMirror Options@@cm-meta@@light": "#AF863B",
  "CodeMirror Options@@cm-string@@light": "#6E8C41",
  "CodeMirror Options@@cm-attribute@@light": "#8658A5",
  "CodeMirror Options@@cm-attribute-in-comment@@light": "#7E5499",
  "CodeMirror Options@@cm-callee@@light": "#458BA7",
  "CodeMirror Options@@cm-variable@@light": "#C74E55",
  "CodeMirror Options@@cm-property@@light": "#9266AF",
  "CodeMirror Options@@cm-definition@@light": "#506DAB",
  "CodeMirror Options@@cm-def@@light": "#5577BF",
  "CodeMirror Options@@cm-number@@light": "#C33A51",
  "CodeMirror Options@@cm-atom@@light": "#B3573C",
  "CodeMirror Options@@cm-font-monospace": "Jetbrains Mono, SFMono-Regular, Consolas, \"Roboto Mono\", monospace",
  "blue-topaz-theme@@background-image-settings-markdown-page-options": "background-image-settings-markdown-page-default",
  "ITS@@imgctr": false,
  "ITS@@t-c": false,
  "sanctum@@no-blur": true,
  "sanctum@@no-animation": false,
  "sanctum@@no-sanctum-icons": true,
  "sanctum@@topside-status-bar": false,
  "sanctum@@hr-options": "default",
  "sanctum@@kanban-wrap": true,
  "sanctum@@line-width": 50,
  "sanctum@@cb-dark-bg": true,
  "sanctum@@accent-active-line": true,
  "blue-topaz-theme@@background-image-settings-switch": true,
  "blue-topaz-theme@@translucent-setting-panel": false,
  "blue-topaz-theme@@background-image-settings-markdown-page-random-options": "background-image-settings-markdown-page-random-default",
  "blue-topaz-theme@@background-image-settings-markdown-page-random": false,
  "blue-topaz-theme@@list-style-change-options": "list-vertical-line-two",
  "blue-topaz-theme@@unmuted-collapsed-folder": true,
  "blue-topaz-theme@@remove-file-icons": true,
  "blue-topaz-theme@@folder-style-change-options-coloful": true,
  "blue-topaz-theme@@folder-style-change-options-coloful-subfolder": "folder-colorful-one",
  "blue-topaz-theme@@blockquote-style-change-options": "blockquote-style-default",
  "blue-topaz-theme@@export-pdf-style-options": "export-pdf-style-default-dark-codebox",
  "CodeMirror Options@@cm-font-size": "15px",
  "CodeMirror Options@@cm-background-color@@dark": "#16171A",
  "blue-topaz-theme@@color-scheme-options": "color-scheme-options-avocado-topaz",
  "blue-topaz-theme@@font-family-major": "'Segoe UI Emoji',Bookerly, Merriweather, 'LXGW WenKai', var(--default-font)",
  "blue-topaz-theme@@light-background-color-files": true,
  "blue-topaz-theme@@background-settings-workplace-theme-dark-custom": "url(\"app://local/D:/Documents/Pictures/Unsplash/202110250858606.png\")",
  "blue-topaz-theme@@background-settings-workplace-style": "background-settings-workplace-style-blur",
  "blue-topaz-theme@@background-settings-workplace-theme-light": "background-settings-workplace-theme-light-blue-mountain",
  "blue-topaz-theme@@blur-depth": 0,
  "blue-topaz-theme@@font-family-change-to-default": false
}
6 个赞

能详细讲解一下伪看板演示是怎么实现的吗,没有看明白

1 个赞

add (1)

4 个赞

不知道哪不对,我这按你的操作,没有这个效果,需要特殊的插件吗

检查blue topaz是否是最新版

1 个赞

可以了,是我把yaml声明 的 — 写成了代码块的 ``` ,多谢你的耐心指导

展示好详细!为伪看板的美貌而倾倒!





12 个赞

为主题增加两个配色:蜂蜜牛奶榛子巧克力

蜂蜜牛奶 Honey milk

黑暗:

明亮:

巧克力

黑暗:

明亮:

用法

用法同样是在style settings 里的整体配色选择。

4 个赞

请问怎么修改文件夹前的箭头号呢,想去掉