Theme: Blue Topaz

Ow, that is also an awesome idea!

Again thanks for the suggestion and helpen me edit your awesome theme! :smiley:

I am not that great at CSS (or any programming language for that matter).

Maybe, but I am not sure if it is possible, the random color could apply to different tags but the same tag keeps the same color?

For me it just gets confusing to have the same tag with random/different colors in the same document hehe.

Good idea! But it may not be possible, at least for my limited skills.:joy:

Additionally, the theme is now updated to v1.4 (20201126). Please have a try.

Updates

  1. Support for Day Planner Plugin
  2. Reduce scrollbar size
  3. Images now are centred, and images can be enlarged by hovering (100%) or by clicking (150%)
  4. Change hover colour (to green) in table threads
  5. Add four special tags (#dailynote, #weeklynote, #ideas, #questions)
  6. Adjust background colour both in light and dark mode
  7. Adjust for Andy Mode Plugin
  8. Other adjustments

You can update it in Community Themes by clicking “use” button again, or you can download the file here:

Blue Topaz v1.6 updated 20201206 for v0.9.20

Updates

  1. Add colourful notes, important notes and recall notes (cloze notes) (modified from the theme Notion by death_au. Thanks to death_au. https://github.com/deathau/Notation-for-Obsidian )
    a. colourful notes: ```note-color-bg or note-color-background
```note-orange-bg
```note-yellow-bg
```note-green-bg
```note-blue-bg
```note-purple-bg
```note-pink-bg
```note-red-bg
```note-gray-bg
```note-brown-bg

b. important notes:

```note-imp

or

```note-important

c. recall notes:

```note-cloze

cloze

3 Likes

Used to love this, and used it as my main theme. But recent changes are over the top. Can’t live with the boxes around list items, and I haven’t managed to turn them off. Overall it now has too many difficult bells and whistles, a lot of which could have been offered as snippet options instead. Comment and explanations could have been much clearer too. Sorry to have to switch away from it.

I’m sorry you don’t like the new style of lists. I have to admit, it’s hard to get everyone to like the same thing. And I don’t like too fancy styles either, but I like to see some funny things like hovering. So, I am not going to make changes to the list or other parts now,

but there are some solutions for you and others who dislike the list style.


1. If you just don’t want the box

You should copy the following code to a new .txt file with any name you like, then rename the .txt to .css and put the .css file to “vault/.obsidian/snippets” folder, and activate the css snippet in Obsidian Setting–> Appearance --> CSS snippets.

ul > li:not(.task-list-item), 
ol > li {
  box-shadow: none !important;
} 

2. If you can live with the box appearing when the mouse hovers

You should copy this:

ul > li:not(.task-list-item):not(:hover), 
ol > li:not(:hover) {
  box-shadow: none;
} 

3. If you just want the previous style (without automatic counting like “1.1.2”)

You should copy the following:

ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
  content:'';
  border-left: 2px solid var(--background-modifier-border);
  position: absolute;
}

ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
  left: -13px;
  top: 28px;
  bottom: 0;
} 

li > p:not(.task-list-item) {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
}
  
ul,
ul ul, 
ol ul, 
ul ul ul,
ul ol ul,
ol ul ul, 
ol ol ul {
  list-style: disc;
}
  
ul > li:not(.task-list-item) {
  padding-left: 0px;
  list-style-position: outside;
  margin-bottom: 8px;
  padding-right: 0px;
  margin-block-start: 0.5em;
}
  
  
ul > li:not(.task-list-item) {
  border-left: none !important;
  box-shadow: none !important;
}
  
ul > li:not(.task-list-item)::before {
  display: none !important;
}
  
ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  padding-inline-start: 2.5em;
  margin-left: 0px;
}
  
ol > li {
  padding-left: 0px;
  list-style-position: outside;
  margin-bottom: 8px;
  padding-right: 0px;
} 
  
ol > li {
  border-left: none !important;
  box-shadow: none !important;
} 

ol > li::before {
  display: none;
}

The last one, if you want the previous style with the automatic counting

Use this:

ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
  content:'';
  border-left: 2px solid var(--background-modifier-border);
  position: absolute;
}

ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
  left: -13px;
  top: 28px;
  bottom: 0;
} 

li > p:not(.task-list-item) {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
}
  
ul,
ul ul, 
ol ul, 
ul ul ul,
ul ol ul,
ol ul ul, 
ol ol ul {
  list-style: disc;
}
  
ul > li:not(.task-list-item) {
  padding-left: 0px;
  list-style-position: outside;
  margin-bottom: 8px;
  padding-right: 0px;
  margin-block-start: 0.3em;
}
  
  
ul > li:not(.task-list-item) {
  border-left: none !important;
  box-shadow: none !important;
}
  
ul > li:not(.task-list-item)::before {
  display: none !important;
}
  
ol {
  display: block;
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  padding-inline-start: 2.5em;
  margin-left: 0px;
}
  
ol > li {
  padding-left: 0px;
  list-style-position: inside;
  margin-bottom: 8px;
  padding-right: 0px;
} 
  
ol > li {
  border-left: none !important;
  box-shadow: none !important;
} 

ol > li::before {
  margin-left: -17px;
}

That’s all. I believe that you can now find the “bell” you like. And if you want to remove the rest of ‘whistles’, I can also help. Or if you think it’s too much trouble to change the css file yourself, it’s also a good idea to change the theme. Anyway, enjoy!

2 Likes

Thanks for the fix. Pretty simple as it turns out, though for some reason the snippets solution didn’t work on my system and I had to edit the main css file. Happy to have the cleaner look back in any case. Cheers. .

1 Like

Thanks for sharing the fixes.

I agree that there’s no way to please everybody and ultimately it is your theme.

That said, I had written some css to remove the boxes and shadows. When taking notes I need to control what gets additional color, flourish and focus so that I know it’s my emphasis. Also much of my notes are UL meaning most of my notes were in boxes with shadows. Just too much for me.

Maybe you can have a config option that lets people set which style they would want? You’ve already written the code a couple messages up lol

1 Like

Thank you for understanding.

I do consider making a plugin or switch to control or select some styles of the theme, but I don’t have time or energy to do that at the moment, so may need to wait a while…

Love the theme - thank you for creating and updating it. I love the colourful headings in dark mode and would like to have them when in light mode as well. Is there an easy way to do this? Possibly with a snippet?

Thank you for liking it! :smile_cat:

You can directly use the below code as a css snippet, the colour order is the same as that in dark mode, or you can change some of them to what you like. Enjoy!

.theme-light{
  /* Headings */
  --h1ys: #3a76c5;
  --h2ys: #0ea72d;
  --h3ys: #d1c115;
  --h4ys: #e79653;
  --h5ys: #ee4c4c;
  --h6ys: #976bd8;
}
1 Like

is it possible only use colorful note background in other theme ?

I did my self.

Colorful Notes + Selected Background.css (8.6 KB)

1 Like

Yes, And you have done that. Enjoy :smiley_cat:

1 Like

REALLY appreciate you showing what the various snippets (code sections) do and how they can be changed—greatly appreciate the tutorial!

1 Like

Thanks​:blush::blush::blush:

Thank you!

Absolutely love this theme! One issue though, in preview mode the arrows for folding and unfolding are always pointing down regardless of whether the item is folded or not. This can get confusing when reading a long page.

Thank you for liking Blue Topaz. I am sorry that I did not find the bug you mentioned indeed. Now I have fixed it. Please update the theme and enjoy!

You’re amazing, thanks!!

I don’t know if it’s because of the theme, but when I exported a note to PDF, all bold text was missing. I can’t troubleshoot it at the moment by switching themes, so I’m just posting this here as the equivalent of “a possible bug report.”

Apart from that, awesome work. Congrats!