Styled Roam (Research)

Roam Research ✍️ Writing with your lovely cards 🧩 and beautiful theme 🎨

My custom CSS and JavaScript extension for Roam Research

Quick Start

1. Add a {{[[roam/js]]}} tag
2. Add a child JavaScript code block to it with this code...

const CARD_MODE_VERSION = "cb1ded25";
window.URLScriptServer = `https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@${CARD_MODE_VERSION}/`;

var s = document.createElement("script");
s.type = "text/javascript";
s.src = window.URLScriptServer + "js/index.js";
s.async = true;
document.getElementsByTagName("head")[0].appendChild(s);

3. Press the BIG RED button (also works with roam42, so you can just put them together)
4. Change CARD_MODE_VERSION value cb1ded25 to the latest Git commit hash whenever you're ready to upgrade

Quick Review

@import url("https://cdn.jsdelivr.net/gh/JimmyLv/Roam-Research-Themes@patch-1/Candy.css");
@import url("https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@master/css/card.min.css");

@import url("https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@master/css/index.min.css");

@import url("https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@master/css/index.min.css");
@import url("https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@master/css/dark.min.css");

Dark 模式只需要多增加一条代码即可，Dark 模式生效的前提是 macOS 系统已经切换为夜间模式。

Basic Usage

可能屏幕适配会有个小问题：我是根据自己的屏幕尺寸设置的 content 宽度，如果大家发现左右宽度不合适，可以调整一下 article-width 这个参数。👇

@import url("https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@master/css/index.min.css");
@import url("https://cdn.jsdelivr.net/gh/JimmyLv/styled-roam@master/css/dark.min.css");

:root {
  --article-width: 716px;

  --header-font: "Source Sans Pro", "Inter", sans-serif;
  --body-font: "Source Sans Pro", "Inter", sans-serif;

  --bg-color: #eeeeee;
  --page-color: rgba(255, 255, 255, 0.95);

  --text-color: #000000;
  --icon-color: #5c7080; /* #5c7080 */
  --bullet-color: rgba(0, 0, 0, 0.2);

  --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);

  --color-primary: 73, 197, 91;
  --color-primary-contrast: #ffffff;
  --color-secondary: 147, 100, 235;
  /*--color-secondary: 255, 165, 0;*/
  --color-secondary-contrast: #ffffff;
}

References

• Roamcult Themes
• palashkaria/roam-modifiers: userscripts/custom CSS files for Roam Research