Theme: Blue Topaz v1.7 [Updated 20201209 for v0.9.22]

whyI · December 10, 2020, 12:33pm

Now the theme is available in Community Themes page of Obsidian!

Blue Topaz

This is a theme for my own use. So the light and dark modes don’t look the same. For the introduction, I just copy&paste the intro from Github. I hope you enjoy it.

A blue theme for Obsidian . Blue Topaz is not a precious gem, like obsidian😜. Generally, Blue Topaz is obtained by artificially treating colourless topaz. Likewise，I did not make this theme from scratch, but modified it after borrowing others’ themes. It is like Blue Topaz, which is a modified product. Thus, thanks for the all shared themes, which inspired me indeed! BTY, For the word “colourless topaz”, there is no offence and no comparison. And it is not a metaphor. I will be glad if you enjoy the theme, Blue Topaz .

Blue Topaz with Andy Matuschak mode

You can also try the theme with Andy mode.

Have a look

Now it looks like this:

outdated

You can download from https://github.com/whyt-byte/Blue-Topaz_Obsidian-css.

Update

You can find the changelog here.

20201002:
Unfold the code box.
Before:

Now:

20201004
Before:

Now:

Abdulla · October 1, 2020, 12:49pm

Thank you so much, I’m using it and it is really nice.

whyI · October 2, 2020, 12:03pm

Thank you for liking it!

oracoca · October 2, 2020, 2:07pm

Nice Theme !!

lsieverts · October 8, 2020, 6:02pm

This is my favorite theme, THANK YOU for creating and maintaining it.

whyI · October 9, 2020, 3:24am

I am glad to hear you like it!

I’ve fixed some bugs in the last couple of days, and I hope these bugs didn’t affect your use of this theme. The easiest way to update the theme is to click on the ‘Use’ button in Community Themes of Obsidian (Yes, now it is available in Community Themes in Obsidian!). The latest version of the ‘obsidian.css’ file will be downloaded from Github and replace the original file.

BTY, there is a “new” theme available called “Asymmetric Blue Topaz”. The only difference is the header title style in the light mode, as shown below. This change is mainly to avoid the cursor bug caused by hiding #s.

It can be found here (https://github.com/whyt-byte/Blue-Topaz_Obsidian-css/tree/master/Asymmetric%20Blue%20Topaz).

ringo · October 9, 2020, 3:29pm

你好，在 Ctrl+] 形成段落后，渲染前是没背景的红色粗体，渲染后就变成红色细字体了。能否让它在渲染后还是保持渲染前的样子？

Hello, after the paragraph is formed by ctrl+], it is red bold without background before rendering, and becomes red fine font after rendering. Can you keep it as it was before rendering after rendering?

whyI · October 10, 2020, 5:27am

已经修改，感谢反馈，请更新主题。

Thanks for the feedback. Done, please update.

ringo · October 12, 2020, 2:18am

感谢你创建了这个主题，之前在主题上花了不少时间，更换、修改什么的。用了你这个感觉非常满意，越用越爱用。
Thank you for creating this theme. You spent a lot of time changing and modifying it before. I’m very satisfied with this feeling. The more I use it, the more I love it.
感觉软件翻译这段有问题……

whyI · October 12, 2020, 3:03am

谢谢😸我的GitHub上还提供了思源的主题（另一款双链笔记https://github.com/siyuan-note），也可以试用看看。另，语言什么的无所谓，能看懂就行。

Thank you. And I would be glad if you also try my themes for Siyuan (another markdown-based note-taking software with bi-directional linkings and graph view https://github.com/siyuan-note) themes here.

whyI · November 14, 2020, 1:31pm

I have renumbered the version, and now it’s v1.1. You can update it in Community Themes by clicking “use” button again, or you can download the file named obsidian.css here and move the file into your vault directory.

更新内容：

增加一个更改字体的区域，可自行更改字体；增加部分中文注释；
优化隐藏右侧边栏动作，在窗口模式时也可激活隐藏按钮;
预览模式代码框显示代码语言名称；
优化表格样式；提升日历插件显示；
支持Andy mode plugin 3.11和Calendar plugin 1.2.5；
其他更新

What’s new in this version:

add an area for changing font-family;
improve the performance of hiding the right sidebar. Moreover, now can activate the hide button in the non-maximised window;
show code language type in code blocks under preview mode.
improve the appearance of tables, additionally, enhance the appearance of the Calendar plugin;
support Andy mode plugin 3.1.1 and Calendar plugin 1.2.5;
other minor updates.

ringo · November 19, 2020, 11:06am

更新之后大纲的下拉条没了，9.11。

whyI · November 19, 2020, 12:30pm

不好意思，没懂是什么意思，麻烦截个图

ringo · November 19, 2020, 1:12pm

没有滚动条

whyI · November 19, 2020, 1:13pm

已修复，请更新（主题商店中或手动下载）

ringo · November 19, 2020, 1:20pm

Tryingdutchman · November 24, 2020, 8:09am

I really like this theme, but one thing I hate, that stops me from using it, is the random tag colors… The same tag gets different colors which is really annoying and confusing to be honest.

Can you tell my how to disable random tag colors and just have one (1) color for all tags? That would make this the perfect theme for me! Rest is just pure awesome

whyI · November 25, 2020, 4:17am

That’s a shame. These colorful tags, to be honest, are one of my favourite parts.

If you hate it, then delete it!

Please try to search for “colorful tags” in the .css file, then you will find the following.

/*colorful tags*/
.tag:not(.token).tag:nth-child(9n+1){background-color: var(--bqys1);} /*1*/
.tag:not(.token).tag:nth-child(9n+2){background-color: var(--bqys6);} /*6*/
.tag:not(.token).tag:nth-child(9n+3){background-color: var(--bqys2);} /*2*/
.tag:not(.token).tag:nth-child(9n+4){background-color: var(--bqys7);} /*7*/
.tag:not(.token).tag:nth-child(9n+5){background-color: var(--bqys3);} /*3*/
.tag:not(.token).tag:nth-child(9n+6){background-color: var(--bqys8);} /*8*/
.tag:not(.token).tag:nth-child(9n+7){background-color: var(--bqys4);} /*4*/
.tag:not(.token).tag:nth-child(9n+8){background-color: var(--bqys9);} /*9*/
.tag:not(.token).tag:nth-child(9n){background-color: var(--bqys5);}   /*5*/

Just delete them.
Now, you need to change the tag style to what you like. You will find the following just below the deleted part.

/* ====== Tag Pills ======== */
.tag:not(.token) {
	border: none;
	color: white;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 15px;
}

If you want to set a tag background color, please add the following to the above part. It is noted that “#000000” is Hex Color Code, you should adjust it to the color you want. BTY, “#000000” refers to black.

background-color: #000000;

Then you will get:

/* ====== Tag Pills ======== */
.tag:not(.token) {
	border: none;
	color: white;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 15px;
    background-color: #000000;
}

Or, if you want a tag with a border and no background color, you need to make the following adjustments.
You can change

border: none;

to

border: 2px solid #000000;

That is the border style of tags.

And also change

color: white;

to

color: #000000;

That is the font color in the tags.

Now you get

/* ====== Tag Pills ======== */
.tag:not(.token) {
	border: 2px solid #000000;
	color: #000000;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 15px;
}

I think that’s all. Enjoy!

Tryingdutchman · November 25, 2020, 2:19pm

Thank you so much! I have very limited experience with coding and I couldn’t figure it out myself.

The reason why I really dont like it (less strong language then hate), is that the same tag gets different colors.

I make task lists where for example I tag tasks with a projectname. But this same projectname gets random colors everytime. So I find it very confusing when the same tags get different colors.

Again thank you so much!

whyI · November 25, 2020, 3:37pm

Happy to help. Thank you for liking the theme.

Bty, There is another solution called “special tags”. For this, you can search for “special tags” in the .css file, then you will find something like this:

.tag[href^="#important"] {
  background-color: var(--tag1) !important;
  font-weight: 600;
  font-family: Lucida Handwriting;
}

Now you can Copy & Paste the above code anywhere and replace “important” with your personalized word. Also, you can change the font family and background color to what you like.

For instance, if you want create a tag called “OMG” with a special style:

.tag[href^="#OMG"] {
  background-color: #000000 !important;
  font-weight: 600;
  font-family: Arial;
}

Enjoy!