Doom-One Theme implementation

Tricks & Techniques
1

Hi all

Here’s my implementation of the Doom One color scheme.
Initially, I didn’t use CSS variables, so you may need to make some manual adjustments if your instance relies on variables I haven’t defined.
This setup is primarily intended for dark mode.

https://github.com/MatthiasBenaets/silverbullet-library/tree/master/Styles

Feel free to use it.
Hope you enjoy!

theme
theme1424×2181 222 KB

15 Likes
2

Thanks for sharing. I love the darks themes with pastels colors.

3

This one is great! I loved the looks of doom emacs :smiley:

@MatthiasBenaets I can see that you also use the mermaid.js plug.
Do you know how to switch its theme to dark one in v2?
It looks terrible with the dark SB and light boxes…

4 
---
config:
  theme: dark
---
flowchart TD
  A[Darkmode Problem] --> B[Frontmatter Config]
  B[Frontmatter Config] --> C[Solved]

Not sure if it can be set application wide, but you can always just write a template.

Edit: Even better, customize it using the doom theme:

---
tags: meta/template/slash
description: Doom diagram
---
```mermaid
---
config:
  theme: base
  themevariables:
    primarycolor: '#a9a1e150'
    primarytextcolor: '#bbc2cf'
    primarybordercolor: '#c678dd'
    linecolor: '#c678dd'
---
|^|
```
2 Likes
5

Thanks! This will help a lot!

6

@ChenZhu-Xie Need your Vertical Connecting Line -_-|| ← this one, exactly （XD）

you mean something like this?

image
image932×1268 79.7 KB

try to add this in one of your space-style`s:

.tree__subnodes {
  margin-left: 15px;
  padding-left: 10px;  
  border-left: 1px solid #555;
}

.tree__subnodes:empty {
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}

.tree__collapse {
    margin-left: 7px;
}

if you don’t have the folder icons in your setup, you can play arond with the margin and padding distances until it lines up with where you want the lines.

1 Like