Hey guys,
played around with a little CSS and produced this theme. Its inspired by Tokyo Night. I guess its not perfect but for my usage its fine. Maybe somebody else wants to use it so I thought I would share:
Preview:
EDIT: Did not know that SilverBullet can be toggled between dark and light mode so I implemented this one while beeing in the light mode.. Maybe will work on it in the future to support both modes…
Very nice! Tokyonight is one of my favorites. I still can’t comprehend how folke was able to make such a prolific theme in addition to all the other neovim plugins he makes.
Maybe this is a noob question, but how would you recommend we include this? I pasted it into a space-style block in my CONFIG.md, but that didn’t seem to do anything. I’m guessing there’s another way to do it?
I have it deployed as you. Did you refresh your browser with: STRG + F5? Sometimes your browser will give you a cached version of the page and then the new Style is not displayed
Your timing is impeccable. I spent some time investigating theming a few weeks ago but had to shift my focus elsewhere. On coming back to it, I found your awesome post. It has been very helpful in understanding how I would create a tokyonight-night theme.
Well done and thank you for the time you spent on creating this theme!
Feed back.
Using vim mode, results with nearly unreadable black text in command mode. This is probably a result of not having used the theme in dark mode and it defaults to the default theme’s to foreground text. A guess, only.
Specify which tokyonight theme you have posted. I believe you are using tokyonight-storm or some variation but I could be mistaken.
https://vimcolorschemes.com/folke/tokyonight.nvim
The above linked themes were posted by folke (versus some other helpful person).
Yeah, that’s what I did. Firefox. I also did ctrl+f5 and the system reload + ui reload + plug reload commands for good measure.
Here’s what my CONFIG.md looks like:
(the text is selected so you can see the ```space-style part)
Off screen, above this, there’s a space-lua block with some function definitions, but this space-style block is right after it, and these are the only two blocks in this file.
Is this what yours looks like?
You can view my working CONFIG[.]md at https://gitlab.com/-/snippets/4902706. Select the Code button to see the complete markdown.
Huh, this is really strange. I tried swapping out my entire CONFIG.md for yours but it still didn’t work 
@zef Do you have any idea what might be happening here?
What version are you running?
$ silverbullet version
2.1.9-unknown
I’m on 2.2.1:
$ silverbullet version
2.2.1-0-gf44f00f4
It looks like there weren’t any changes to space-style in that range (grepping the diff for “space-style” only shows an unrelated change).
I tested embeding a youtube video and using space-style to set the background this pink-ish color and it did this for a split second before the embed loaded:
Since this was working, I tried pasting in the whole Tokyo Night theme but still no luck 
You must be frustrated. Well, I would be. 
Someone may chime in stating the theme works or does not work for 2.2.1. However, I want to upgrade anyway, so I will update my install to 2.2.1 and report back.
Our systems probably differ and unlikely to matter, but..
System:
Host: silverbullet Kernel: 6.8.12-15-pve arch: x86_64 bits: 64 compiler: gcc
v: 12.2.0
Console: pty pts/4 Distro: Alpine Linux edge
Info:
Memory: total: 32 GiB available: 512 MiB used: 40.9 MiB (8.0%)
Processes: 13 Power: uptime: 39d 22h 50m wakeups: 0 Init: BusyBox
v: 1.37.0 rc: OpenRC v: [LXC] runlevel: default
Packages: pm: apk pkgs: 118 Compilers: gcc: 15.2.0 Shell: ash (busybox)
running-in: pty pts/4 inxi: 3.3.39
I updated my installation to v2.2.1 and the theme works using my CONFIG.md linked above.
./silverbullet version
2.2.1-unknown
If you are open to recommendations, I would start with launching sivlerbullet to a new directory without anything, files or plugins, then test the theme. You may have already tried this approach. Using your browser’s private or incognito mode is great to avoid confusing browser caching issues. If it still doesn’t work, a more extreme approach is to move testing to a virtual machine, container (LXC or docker), or another computer and a clean install. I assume you are not using an apache, nginx, or caddy reverse proxy, but if you are, don’t, while testing. Fewer components to troubleshoot.
I have not explored silverbullet’s debug capabilities, but hopefully a clean environment will work so you can pinpoint the problem.
My hypothesis is correct. Once I figured out how to associate the theme to dark mode, it uses the fg color from the default dark when entering commands vim mode.
To associate a theme to dark mode, do the following:
Replace
html {
with
html[data-theme="dark"] {
color-scheme: dark;
I am in the process of authoring both tokyonight-day and tokyonight-night themes for light and dark modes, respectively. If there is interest and time permits, I may create tokyonight-moon and tokyonight-storm as well. We will see.
Thank you, LegendaryB, for this post. It provided an excellent example and inspired me to build my own.
Aha! I changed the first lines of the html { block to this and it works! Toggling to light theme without this made it work too.
Thanks for your help @rharmonson!
Awesome! Glad you got it working and I was of help.
XD, I see someone in this thread facing my problem previously as well.
So in short, the tokyo night theme is implemented for light mode, you should switch to the light mode in order to enjoy this.
BTW this is a great theme and I love it. Great work!
