My Fantastical Light and Dark Theme for Roam

My Fantastical Light and Dark Theme for Roam

Lately I have spent far too much time doing CSS in Roam. The benefit of all that time is that I know CSS pretty darn well now. HTML as well.

When you spend that much time trying to target parts of the UI and change the properties, you are bound to cement your knowledge of CSS.

I initially started changing a few things in the UI that I wanted to change. I font, a header, a button, etc. But my code wasn't labelled properly and I couldn't remember if some of the code in my snippets was useful or just some random code I tried out, but didn't work.

So I started over completely by labeling all of my snippets and starting in some sort of logical order. It took about 25% of the time that it took me to make the initial theme. And I can copy and paste this code to just create a new theme if I want.

So here's what my light and dark Fantastical themes look like:

I used all their colors and kept the font the system level font that they use. I'm sure there are some random UI elements that I don't use at all that aren't colored properly, but I tried to think of as much as I could. Again, I'm a little new at this.

Below I'll put a link to the dropbox folder with some txt files with the code. I separate it into "Mobile Snippets", "Light" and "Data". The Mobile Snippets makes the mobile experience a little better at least in my opinion. Feel free to tweak it as you wish or just not add it at all.

This is a great theme that I love using along with my Red Graphite which I'm finishing up. Fantastical has great, bright colors that really pop when using Roam.

Click the Dropbox link below to download the files and hit me up on Twitter with any questions or errors in my code (I'm sure there will be some!)

Subscribe to Joseph Wood

Sign up now to get access to the library of members-only issues.
Jamie Larson