色管理userCSS

カラーコード参照

https://scrapbox.io/files/65a3ee56c58da800246deab5.png

基本４色にしたい

https://scrapbox.io/files/65a4e137c5fc790025cfc8fb.png

https://scrapbox.io/files/65a3ee885c6a270025ffa452.png

こんな感じになる

ベースカラーが薄すぎる気もするので気になってきたら変更する

https://scrapbox.io/files/65a41660e57f530025d98cf9.png

以下のように緑系統と青系統で分けてみてはどうだろう

https://scrapbox.io/files/65a4198b13ff8c0026b44210.png

未到達のリンクが見にくい可能性...

少し濃くしてみる

https://scrapbox.io/files/65a419c911c94f002556482f.png

code:style.css

:root{

/* 基本次の４色 */

/* 以下詳細 */

--body-bg: var(--main-color); /* 全体背景 */

--navbar-bg: var(--main-color); /* ヘッダー背景 */

--tool-text-color: var(--main-color); /* プロジェクト名 */

--new-button-bg: transparent; /* 新規作成ボタン ↓ */

--new-button-hover-bg: transparent;

--new-button-active-bg: transparent;

--new-button-horizontal-color: var(--exist-color);

--new-button-vertical-color: var(--non-exist-color); /* ↑ */

--search-form-bg: var(--main-color); /* 検索画面 */

--search-form-icon-color: var(--accent-color); /* 🔍 */

--search-form-text-color: var(--accent-color); /* 検索の文字 */

--navbar-icon-color: var(--accent-color); /* ^ */

--navbar-icon-hovered-color: var(--exist-color); /* ^:hover */

--navbar-icon-active-color: var(--accent-color);

/* --- 関連ページ ラベルデザイン --- */

/* --relation-label-bg: var(--main-color); */

/* --relation-label-empty-bg: var(--main-color); */

/* --relation-label-links-bg: var(--main-color); */

/* --relation-label-text:#304ea2; */

/* --- リンクの色 ---*/

}