Theme: Blue Topaz

Hey stll loving the Theme and what you do with it. I usualy use different custom fonts for Obsidian. I achieve that with the “Advanced Appearance”-Plugin, where i can set a Font i have installed on my system.
Howerever with the newest version of the Theme that does not work sadly. Is there any way i can set custom fonts or even use the mentioned plugin for that?

Any way, thank you for all the good and impresssively beautiful work you do.

@whyI
Thanks for the great theme.
I have a question and I’m sorry if it has been discussed before.
For me, when I hover on an internal link (in both edit and preview mode) the scroll does not work in page preview (in the pop up page).
I really appreciate the help.

I love this theme but I wish the menu and editor colors weren’t switched. I think the menu should be darker than the editor because high-contrast dark themes are not good for reading.

Hi Pummelfisch! Thank you for loving Blue Topaz.
You can use the following code to create a css snippet and customise them yourself. For the plugin you mentioned, I haven’t installed and used it, so I am not sure how to support it for now.

:root {
  --font-size-obsidian-titlebar:             0.75em;
  --font-size-vault-name:                    0.95em;
  --font-size-file-header-title:             0.9375em;
  --font-size-file-header-title-andy-plugin: 1em;/*for Andy mode plugin*/
  --font-size-embed-title-size:              1.125em;
  --font-size-embed-file:                    1.25em;
  --font-size-folder-and-file:               0.85em;
  --font-size-edit-normal:                   1em;
  --font-size-preview-normal:                1em;
  --font-size-h1:                            1.5625em;
  --font-size-h2:                            1.4375em;
  --font-size-h3:                            1.3125em;
  --font-size-h4:                            1.1875em;
  --font-size-h5:                            1.0625em;
  --font-size-h6:                            0.9375em;
  --font-size-tag:                           1em;
  --font-size-emoji-after-tag:               1.5625em;
  --font-size-list:                          1em;
  --font-size-preview-blockquote:            1em;
  --font-size-edit-blockquote:               1em;
  --font-size-code:                          0.9375em;
  --font-size-edit-code:                     1em;
  --font-size-latex:                         1.25em;
  --font-size-cloze:                         0.9375em;
  --font-size-better-footnote:                  1.3em;
  --font-size-checklist:                       0.85em;   /*checklist*/

  /*font family*/
  --font-family-list:                                                     ;
  --font-family-major:               Bookerly, Merriweather, "LXGW WenKai", var(--default-font); /*marjor*/
  --font-family-h1:                                    var(--default-font);
  --font-family-h2:                                    var(--default-font);
  --font-family-h3:                                    var(--default-font);
  --font-family-h4:                                    var(--default-font);
  --font-family-h5:                                                       ;
  --font-family-h6:                                                       ;
  --font-family-title:                                                     ;
  --font-family-folder-file-title: Arlrdbd, Source Han Sans, Noto Sans CJK, Source Sans Pro;      
  --font-family-preview-edit-code:     Consolas, Monaco, "Microsoft YaHei", "LXGW WenKai", "Source Code Pro", "Source Han Mono", "Microsoft Yahei Mono", monospace;
  --text-family-inline-code:           Consolas, Monaco, "Microsoft YaHei", "LXGW WenKai", "Source Code Pro", "Source Han Mono", "Microsoft Yahei Mono", monospace;
  --font-family-tag:                           Bookerly, "Microsoft YaHei", STzhongsong, STSong, Serif;
  --font-family-vault:                                "Lucida Handwriting"; 
  --font-family-special-tag:                          "Lucida Handwriting";
  --font-family-YAML:                                 "Lucida Handwriting";
  --font-monospace:                    Consolas, Monaco, "Microsoft YaHei", "LXGW WenKai", "Source Code Pro", "Source Han Mono", "Microsoft Yahei Mono", monospace;
  --mermaid-font-family:       Segoe UI, "Microsoft YaHei", "trebuchet ms", verdana, Arial, cursive;
  --font-family-better-footnote:                Arlrdbd, "Source Han Sans";
  --font-family-strong:    Bookerly, "LXGW WenKai UI", var(--default-font);
} 

Hi sleepwalker! I apologize for the inconvenience caused by Blue Topaz. I cannot reproduce the bug you mentioned. Maybe you could update the theme (Click “use” as shown below) and try again.

image

Long time no see! The latest version of Blue Topaz is now v3.4 (uid 20210927). Numerous bug fixes and other changes are included in this update. So I suggest updating the theme.

By the way, I have made some snippets to meet different needs for appearance, but they are now experimental. So I just do a showcase and do not release these snippets now. Hope you will like some of them!

Default


Background snippets






Kanban

Default


Snippets (static)







Snippets (dynamic)

Kanban-1
Kanban-2


Kanban-3
Kanban-4


Kanban-5
Kanban-6


Kanban-7
Kanban-8


Kanban-9
Kanban-10

6 Likes

WOW!!
Great Job!

Thank you so much for the update. It’s amazing.
That’s my problem in the picture. If it’s easy to be fixed please comment on that, I don’t want to waste your time

Thank you for providing the screenshot. I am sorry that I didn’t notice the problem. And I have fixed it. Please update the theme. Enjoy!

Hey thank your very much, that helped a lot, also with keeping personal consistancy over updates of the Theme.
For the mentioned Plugin to work i just left the entrys i want to change empty.

Oh and the Background-Snippets look realy beautiful. Cant wait to try them myself as soon they’re ready.

Any plans to make Blue Topaz compatible with the Style Settings plugin for easy user customization?

1 Like

Hi allanelder,

Previously, I said using &nbsp to get the blank lines, but this will introduce some spaces between paragraphs. In this case, it may cause you some troubles when copying & pasting, so I think it’s better to use <br /> instead to generate the blank lines. I apologise for any inconvenience this may have caused.

Thank you @whyI
I am using a snippet that uses padding. I have a few px above and below.

Thank you for the theme.

I am using the Obsidian Tracker plugin. When I used the calendar view in light mode, the days numbers were hard to read. I was able to fix it by adding div:not (text.tracker-month-label) in front of this line:

#arrowhead,  #sequencenumber,  .cluster text,  .label text,  text,  text.actor {
  fill:var(--text-muted) !important;
}

Thank you so much.
I have one more question, Is there any way I can send the heading border-bottom under the image:
image

Great theme thank you!
I see the CSS for disabling the background image, but when I use it, the background is still too light (in dark mode)

I tried other CSS snippets and could change the BG of the note, but not the padding around it. Any help would be appreciated

Figured it out!

.theme-dark {
  --background-primary-bg-4-bt: #111111; 
  --background-primary-alt-bg-4-bt: #111111;
  --background-secondary-bg-4-bt: #111111;
  --background-secondary-alt-bg-4-bt: #000000; 
}

Sorry for the late reply. And I am happy to see that you have addressed it. These weird settings are for the background snippets (as shown below) which haven’t been released😂


1 Like

Sorry for the late response. Now you can use |inline or |inl to get a better performance in your case. By the way, the position of images with |inlineR or |inlineL cannot be optimised unless browsers support certain values of CSS declaration.

I appreciate your report and solution. I will add this to the theme. Thank you again! :grin:

I try to modify CSS to change H1 title to be aligned with gradient lines on left and right.

h1 {
  display: flex;
  width: 100%;
  align-items: center;
  background: #303f5b;
}
h1:before{
  content: '';
  height: .1em;
  margin: .5em;
  flex: 1;
  background: linear-gradient(to left, var(--h1-color), #303f5b);

}
h1:after{
  content: '';
  height: .1em;
  margin: .5em;
  flex: 1;
  background: linear-gradient(to right, var(--h1-color), #303f5b);
}

But if I try to hover over the H1 title, the text will be aligned to the left, if the mouse move out , it aligned to center again. How can I fix it out?