The Roam CSS System

The Roam CSS System is deprecated and replaced by Roam Studio. You can find it under Settings -> Community extensions within Roam Depot in the Roam Research Application.

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

• Buy Me a Coffee
• Become a supporter on gödel.io
• Flattr
• Paypal

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