The Roam CSS System

What is it?

The Roam CSS System is a modular, block-based approach for changing the look and feel of Roam Research. It has been thoughtfully engineered to allow easy customization by the non-tech-affine end user and offers different minimal, beautiful designed elegant themes.

If you want to support my work

Thanks a lot for your support!

How does this work?

Create or modify your 'roam/css' page.
Add a new code block at the top and set the language to 'CSS'.
For the iA Quattro theme, add the following line to it:

@import url('https://rcvd.github.io/roam-css-system/themes/quattro.css');

If you want the lesswrong theme, add the following line to it:

@import url('https://rcvd.github.io/roam-css-system/themes/lesswrong.css');

Force light or dark mode

If you want to force the bright or dark mode independent of the system settings use:

@import url('https://rcvd.github.io/roam-css-system/themes/quattro_dark.css');

@import url('https://rcvd.github.io/roam-css-system/themes/lesswrong_dark.css');

or

@import url('https://rcvd.github.io/roam-css-system/themes/quattro_light.css');

@import url('https://rcvd.github.io/roam-css-system/themes/lesswrong_light.css');

Customize the themes

You can easily customize 400 UI elements with more than 1,700 attributes. Read the detailed instructions for customizing it here.

Themes

Craft

Bear

Apple

Things

iA Quattro

Lesswrong

Bugs and feedback

If you find a bug, file it under Issues with a short description and an screenshot
If you want to discuss an issue contact me on Twitter or drop me an email to roam (at) rcvd (dot) io