p { color: var(--page-text-color); }

body { /* bodyに対して新しい設定を追加すれば適用される。 */ --body-bg: #f00; /* 新しい値 */ }

html[data-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; }