tnarla / roam-css-system

Roam CSS System 2.0

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

• 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 more than 350 UI elements with more than 1.500 attributes. Read the detailed instructions for customizing it here.

Themes

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