[WIP] Velvet Theme

[idelem]

I'm working on a custom theme that looks roughly like this (I'm still using 0.43, will test compatibility on 0.45 later):

This theme is largely inspired by kepano/obsidian-minimal: Minimal theme for Obsidian

Update: The current version of this theme is here: idelem/trilium-theme-velvet. But note that this is still unripe, so please use at your own discretion (although I doubt it will break anything).

Todo

• tables
• modals, buttons, UI details
• typography
• link maps

Notes on custom themes

There is little documentation on how to style general layouts, and I spent some time figuring some of those out.

headings:

body.theme-my-theme h1 {
  ...
}

scrollbars :

.theme-my-theme ::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* horizontal */
}

.theme-my-theme ::-webkit-scrollbar-thumb {
    border-radius: 2em;
    background-color: rgba(0,0,0,0.075);
}

to remove redundant margins in todo lists:

.theme-my-theme .todo-list__label {
  margin-bottom: 0;
}

[wwwald]

Agree on the documentation part - it takes a bit of searching to find exactly how to customize.

Is there a place where we could collect notes on this? Ideally, this would end up in the documentation/wiki but we could make a head start.

[idelem]

That's a good idea, I think I can move the note section into a new thread. Or if you already have some notes to share, perhaps you could start a thread in this category?

[wwwald]

No notes available at this point, but I did some searching for HTML id's and CSS classes for my custom theme I'm currently using. Fragmentary information, but I guess it can help improve any docs.

[hokutonanto]

It's looking nice!