Test page for building themes?

Does anyone have a test markdown file for testing themes? Something along the same lines as THIS.

I am using theme.scss to model light and dark themes. The descriptive names are awesome but I don’t now how to trigger many of them much less what they mean. My failure not silverbullets. :slight_smile:

I have a Markdown Cheatsheet I can offer you, but it doesn’t have all the elements like your example, but it can be a start:

Markdown Cheatsheet

If you want to dive into themeing SB this also might be helpful:

CSS Structure Map for SilverBullet

2 Likes

Both are very helpful. Thank you, Mr.Red.

These two videos could be also helpful for your color options.

I recommend using OKLCH() for your colors/themes instead of rgb/rgba/hex/hsl.

Still watching the second video but very interesting. Thank you.

My initial pass on a light theme:

I prefer a bit more contrast but trying to stick to folke’s palette until I have it dialed in.

What you can do is copy/paste your current css into ChatGPT, and ask it to convert the Hex to OKLCH, then you can tweak the lightness, chroma and hue values manually to your liking, much easier than with hex trying to match colors and especially for contrast and perceived lightness OKLCH is the best.

[EDIT] Just looking at your theme, in my opinion there is too much blue.
if you watched the videos i sent you, you’ve also seen that a UI should be as clear as possible and there should be ui accents to differentiate certain objects. But your Paragraph text is blue/light blue. As your main text color you shouldn’t use a light accent color.
Maybe try to tone it down a little by 70% darker, and alternatively you can make the headings with the accent colors.
For text and background try to stay at the opposite ends of you color palette, and not pick colors from within.

I agree. I am trying to faithfully create TokyoNight Day theme. My primary reference is folke’s neovim theme.

Honestly, I prefer dark themes but your observation would probably be true for tokyonight-night as well.

I agree, the first video does a good job explaining how to create palettes. I am not ignoring his guidance so much as nailing down tokyonight then I will tweak the colors. I do appreciate you calling it out. I was thinking there was too much blue, too, but hearing it from you is validation. I appreciate the input and please continue sharing. I have no art or very little UI design experience.

1 Like