A Craft-like Theme for Roam Research

A fresh theme for Roam Research based on the design of Craft. Handcrafted to the last detail.

This article is here for historical purposes. The theme is now part of Roam Studio, one of the most popular plugins for Roam Research.

---

Hej,

Here is my latest Craft-inspired theme for Roam Research. It continues the tradition of my reduced and clean user interfaces (“Less, but better”).

Clean and friendly design

New Search Menu

I’ve repositioned the search dialog to the center of the screen. This provides a much better user experience. You can always quickly open it by pressing CMD+U.

New Search Dialog

Beautiful Typography

I put a lot of effort into fine-tuning the typography. The spacing around headlines and blocks is carefully selected to enhance the reading experience.

Light- and Dark-Mode

The Theme is available in a beautiful Light- and gorgeous Dark-Mode.

A beautiful dark mode

Syntax highlighting

Custom Syntax Highlighting

Small enhancements

I’ve added a few minor improvements to indicate external links and abbreviated namespaces clearly.

Small enhancements simplify the use of aliases and namespaces

How to use it

The Roam CSS System is a modular, block-based approach to 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, beautifully designed, elegant themes.

• Create or modify your 'roam/css' page.

• Add a new code block at the top and set the language to 'CSS'.

• Add the following line to it:

@import url('https://rcvd.github.io/roam-css-system/themes/craft.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/craft_dark.css');

or

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

---