Applying a custom theme (style)

Guides
1

Hi SilverBullet community!

I just started using SilverBullet and fell in love with it. Nonetheless, one of the first things i wanted to do was applying a custom dark theme to match my other editors, and even though there are already some documentation on this (Space-style), i thought of making this straightforward guide on how to apply a theme to your editor.

Requirements:

How to

  1. Create a new page for your CSS, i created mine as “configs/css”;
  2. Create a new space-style block:
    ```space-style
    ```
  3. Paste your CSS inside the space-style block:
    ```space-style
    html {
    –crust: #dce0e8;
    –mantle: #e6e9ef;
    –base: #eff1f5;
    …
    ```
  4. Reload the system (Ctrl+Alt+r)
  5. Done! Now, all your pages should follow the new theme CSS.

That’s all! Hope it helps anyone in need. Feel free to update this thread with any changes on how SilverBullet manages themes or other easy techniques.

6 Likes
2

What would be a good way to switch between themes?
To disable style script I change space-style to css space-style.
If themes are built with css scoping (prefixing styles with top level class), then I think, in main SETTINGS, we could use page decorators.

  • to apply theme to all pages
pageDecoration:
  cssClasses:
  - custom-theme
  • to apply to some pages
objectDecorators:
- where: 'name =~ /^Inbox\//'
  attributes:
     pageDecoration.cssClasses: "custom-theme"
3

The way I do it is I have a Library directory with each theme in its own markdown file:

Library/Custom/Styles/MyStyle.md
Library/Custom/Styles/Obsidian.md
…

And then in SETTINGS, I just edit the value for customStyles to point to whichever theme I want to use:

customStyles: "[[Library/Custom/Styles/MyStyle]]"

This way when someone posts a new CSS theme here, I just put in a separate file and I can try it out. The Melon theme was different in that it was broken up into small files so just changing customStyles didn’t fully work as some of the other bits were still being used.

1 Like
4

Yeah, Melon is leaking all around.
But still if I use Melon I have to disable custom styles.
Do you use space-style or css code annotation on custom styles pages?
If I use space-style, it looks like style is loaded even if it is not set as customStyles. It could be cache, but when I disable all custom styles than I get Melon to look as it should.

5

Each of the style files are space-style. When I change from one to another I normally have to control-shift-reload and in some rare cases, I have to reindex.

6

As for Melon: I guess in the meantime (until it’s clearer how theme switching should work) I could set up some kind of merge-action on Github, so all the space-style blocks are concatenated into one file.

I’ll have to look into it because I have no idea how to do that yet (input very appreciated) :slight_smile: