Melon Theme

I have been working on a theme for SilverBullet the last couple of weeks and want to share it with all of you [1]. First some impressions:

some notable …notables!?

  • responsive top bar for small screens
  • responsive side panel (tree view is shown on top instead of left on small viewports[2])
  • the css/space-style is separated into multiple files so it should be relatively easy to navigate and customize and/or disable parts you don’t like

Looking forward to feedback! If you spot anything that could have been done in a more SilverBullet-ey way please let me know.

[1] GitHub - raphwriter/silverbullet-theme-melon: A theme for SilverBullet
[2] be sure to set

treeview:  
  position: lhs

in SETTINGS

13 Likes

This looks pretty great and smart to split the CSS into separate pages!
Do you have any advice on how to get started with theming? Did you just look at what variables are available and where they are used or is there some documentation available to make this easier to do?

(Off-topic: you have many icons in the top bar, I recognize Git, but what do the others link to?)

Being able to split the CSS into separate files, as well as being able to even further break them down into blocks of space-style with markdown between (Jupyter Notebook style) is a hidden super power of SilverBullet, I’d say.

I pretty much went element by element by inspecting it with the browser dev tools and tweaking the values. I don’t think there is dedicated documentation to themeing – or I haven’t found it at least :wink:

Top Bar Icons are: (some with custom icons)

  • Home
  • Search
  • Open Daily Note
  • Open Page (Ctrl+K)
  • Run Command (Ctrl+Shift+/)
  • Toggle Tree View
  • Create Subpage (source)
  • Delete Page
  • Settings
3 Likes

Splitting in files is nice, but it is hard to disable theme, or I’m doing something wrong.

Maybe if custom theme is scoped then user can decide which theme to apply on which pages with pageDecorators?

wrote this few mins ago