Roam ResearchでCSSをカスタマイズする
大まかな流れ
roam/cssというページを作り
そこにCSSを書く
既存のスタイルをインポートすることもできる
「roam/css」というタイトルのページを作る
https://gyazo.com/3529bde2da3358d90e8d4d24543ae1aa
次に、（なんでもいいので）スタイルの名前の項目を作る。
samplestyleとした。
https://gyazo.com/b789cac8ccd29589b05e7646aee2261f
作成した項目の下位項目（インデントしたやつ）にcode blockを追加する
https://gyazo.com/7a2a179512a89a107bc25250457865c8
そこにCSSを直接書いていくが、まずはインポートからやってみる。
@import url('https://shodty.github.io/Dark_Age.css'); を貼り付ける
https://gyazo.com/26002a23a6f95ef3191e36ade34b9adf
右の方に「clojure」とある部分をクリックして「CSS」に変える。
https://gyazo.com/5c391d45223d6772012edba9d887f1ff
インポートしたCSSが適用された。
さらに、CSSを直書きしていく。
https://gyazo.com/f791b10e0236b422e36ac297c767b608
以下を記述した。
code:style.css
:root{
--page-links:#FF0000;
}
https://gyazo.com/7f2433c350bcc6af88bf08a85f3a6a34
Styleが当たっている。
その他、いろいろな要素に当てられる。
code:style.css
:root {
--page-links: #d4d4d4; /* Page Link */
--attributes-color: #b49d7d; /* Attribute:: */
--external-links: #66B5F4; /* https://www.google.com */
--links-hover: #ff6f00; /* hover color of all links */
--hashtags: #77c691; /* #hashtag #hash tags */
--body-text: #FFFFFFB2; /* general body text */
--italics-color: #b49d7d; /* __italicized text__ */
--bold-color: #b49d7d; /* **bolded text** */
--highlight-text-color: #d8dadb ; /* highlighted text color */
--highlighter: #3b5e39; /* highlighter color */
--background: #26272a; /* main page background */
--sidebar-background: #1e1e1e; /* sidebar background */
--sidebar-text: #c3bca8; /* sidebar text */
--page-heading: #F4B288; /* Page Title (i.e. roam/css) */
--daily-heading: #F4B288; /* Daily Notes date heading */
--headings: #da844f; /* h1, h2, h3 */
--bullets: #394b59; /* bullet color */
--closed-bullets: #b49d7d; /* closed bullet color */
--references: #b49d7d; /* reference underline color */
--block-reference-text: #b49d7d; /* block reference color */
--namespaces: #65bf38; /* Namespace/color (win: ctrl+c ctrl+L) or (mac: cmd+c cmd+L) */
--all-pages-mentions: #F79A18; /* mentions pill on ALl Pages */
--cursor: #FFFFFF; /* cursor color */
/* ICON COLORS */
--icons: #75c6a3; /* icons color */
--icons-hover: #00f800; /* icons hover color */
--filter-icon: #FF0000; /* filter icon color */
/* FONT SIZES */
--page-head-font-size: 36px; /* page heading */
--h1-font-size: 1.8em; /* h1 size */
--h2-font-size: 1.4em; /* h2 size */
--h3-font-size: 1.2em; /* h3 size */
/* DROPDOWN MENU */
--dropdown-menu-text: #da844f; /* Text color in dropdown menus */
}
インポートできるテーマ
Roamcult Themes
@import url('https://azlen.github.io/roam-themes/zenith.css');
ref.
Roam themes: how to style Roam Research with custom CSS - Ness Labs
Roam Research