ScrapboxのCSSテーマ変数
ScrapboxのデフォルトCSSのテーマカラーは、すべて変数の中に格納されている。
Default Light テーマは除く。
UserCSS内でテーマカラーの色をそのまま使いたい場合、var(変数名)と記述すればよい。
呼び出し例
code:using-color.css
p { color: var(--page-text-color); }
テーマ変数を書き換えたい場合
code:custom-theme.css
body {
/* bodyに対して新しい設定を追加すれば適用される。 */
--body-bg: #f00; /* 新しい値 */
}
デフォルトの変数名と値
以下はProject SettingsのThemeでDefault Darkを選択した場合のCSSにコメントを追加したもの。
2021/09/24現在のCSSを参照したもの
最終確認：2022/08/01
Classic themeはこれと異なる定義がされている。
code:default-dark.css
htmldata-project-theme=default-dark {
/* 全体 */
/* 背景色 */ --body-bg: #202228;
/* ナビゲーションバー（一番上の検索ボックスとかあるとこ） */
/* 背景色 */ --navbar-bg: rgba(55, 59, 68, 0.3);
/* ロゴボタン隣の矢印 */ --navbar-icon-color: #fff;
/* クリックされた時の矢印 */ --navbar-icon-active-color: #338c46;
/* カーソルを合わせた矢印 */ --navbar-icon-hovered-color: #338c46;
/* 検索ボックス背景 */ --search-form-bg: rgba(255, 255, 255, 0.13);
/* 検索の虫眼鏡アイコン */ --search-form-icon-color: #fff;
/* 検索入力中の虫眼鏡 */ --search-form-icon-focus-color: #4a4a4a;
/* ページカード */
/* タイトル */ --card-title-color: #f0f0f0;
/* 上部の色（ピン以外） */ --card-title-bg: #2b2e38;
/* 背景色 */ --card-bg: #373b44;
/* カーソルを合わせた時 */ --card-hover-bg: rgba(0, 0, 0, 0.1);
/* クリックした時 */ --card-active-bg: rgba(229, 229, 229, 0.1);
/* ピン留めの折り目の裏地 */ --card-backside: #545860;
/* 詳細文字 */ --card-description-color: #c4c4c4;
/* 詳細文字（リンク） */ --card-description-link-color: #80c9fe;
/* 詳細文字（コード） */ --card-description-code-color: #ccc;
/* 下部の影の色 */ --card-box-shadow-color: #000;
/* 下部の影の形 */ --card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
/* カーソルを合わせた時 */ --card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
/* 上部の色（ピン留め） */ --card-title-bg-pinned: #2b2e38;
/* 関連リンク */
/* 関連リンクの背景色 */ --relation-label-bg: #2b2e38;
/* 関連リンクの文字色 */ --relation-label-text: #dddede;
/* Linksの背景色 */ --relation-label-links-bg: #80c9fe;
/* Linksの文字色 */ --relation-label-links-text: #202228;
/* New Linksの背景色 */ --relation-label-empty-bg: #fb7476;
/* New Linksの文字色 */ --relation-label-empty-text: #fff;
/* ツールバー等（カードサイズを変更するバーにも使われている） */
/* アイコン色 */ --tool-color: #535863;
/* バーの背景 */ --tool-light-color: #353b48;
/* Plan名が書かれているボタン*/ --tool-badge-bg: #2b2e38;
/* マウスホバー時の背景 */ --tool-bg: #2b2e38;
/* プロジェクトタイトル等の文字色 */ --tool-text-color: #dddede;
/* 新規作成ボタン */
/* 十字の縦線の色 */ --new-button-vertical-color: #fff;
/* 十字の横線の色 */ --new-button-horizontal-color: #fff;
/* 背景色 */ --new-button-bg: #46af5d;
/* マウスホバー時の背景 */ --new-button-hover-bg: #338c46;
/* クリックした時の背景 */ --new-button-active-bg: #346447;
/* テロメア */
/* 通常時 */ --telomere-border: #545863;
/* 未読時 */ --telomere-unread: #56a066;
/* ページを開いた後の更新時 */ --telomere-updated: #55b56a;
/* ページ内 */
/* 文字色 */ --page-text-color: rgba(255, 255, 255, 0.87);
/* リンク色 */ --page-link-color: #80c9fe;
/* ホバー時リンク色 */ --page-link-hover-color: #6a9ec6;
/* リンクにカーソルを置いた時 */ --page-link-color-cursor-line: #a985e4;
/* ページ内背景色 */ --page-bg: #373b44;
/* 存在しないページへのリンク色 */ --empty-page-link-color: #fb7476;
/* ↑のマウスホバー時 */ --empty-page-link-hover-color: #b47576;
/* ページタイトル色 */ --line-title-color: rgba(255, 255, 255, 0.87);
/* 行を選択したときの色 */ --line-permalink-color: rgba(234, 218, 74, 0.35);
/* 不明 */ --code-color: #ccc;
/* コードの背景色 */ --code-bg: rgba(0, 0, 0, 0.18);
/* 引用文の背景色 */ --quote-bg-color: rgba(0, 0, 0, 0.2);
/* 文字カーソルの色 */ --cursor-color: #fff;
}
#UserCSS(Scrapbox)