The Roam CSS System is a modular, block-based approach for changing the look and feel of Roam Research. It has been thoughtfully designed to allow easy customization by the non-tech-affine end user. All the main components of the Roam Research interface were modularized and the main parameters (font and style, foreground color, background color, borders, …) were variabilized. Using an Excel sheet, these can all be easily managed and changed as well as completely new themes can be created, a macro then generates from it ready CSS files and appropriate documentation.

 

iA Quattro Theme Light and Dark

 iA Quattro Theme

The iA Quattro theme is clean, technical and geometric, inspired by the great markdown editor iA Writer. With an almost monospace font, it creates a tidy and focused note-taking environment. The majority of the theme is kept in subtle gray tones, with few colorful accents in red and blue.

 

 

LessWrong Theme Light and Dark

LessWrong Theme

The LessWrong theme is inspired by the website of the community of the same name, dedicated to improving the way we think and make decisions. It uses a newspaper-like serif font, Source Sans. Together with the reduced colors and the muted green accents, the theme invites you to develop deep thoughts.

 

 

Things Theme Light and Dark

Things Theme

The Things theme is inspired by the wonderful task management application of the same name by Cultured Code. It is a bit more colorful than the other themes and stands out with its special tag display. The font used is the respective system font, so it almost feels like a native application in fullscreen mode.

 

 

 

Apple Theme Light and Dark

Apple Theme

The Apple theme attempts to transform the tradition of Dieter Rams’ “Less, but better” principle, which saw its implementation in Apple products by Jonathan Ive, into Roam Research. It is hyper-minimal, uses clear geometric shapes and a very reduced color scheme. Just like the Things theme, it uses system fonts and UI elements such as menus are similar to those of the operating system.

 

 

Bear Theme Light and Dark

Bear Theme

The Bear theme picks up the very popular design of the same note app for macOS and iOS. It is characterized in particular by the use of the clear and straightforward font Avenir Next. On platforms where this is not available, Nunito Sans is used. The Bear theme is more playful than the others, looks warmer and creates a cozy home for notes.

 

Visit the Roam CSS System GitHub page here.