編集周りのUIの配色を統一する
author: Nrem.icon
UserCSS.icon
標準テーマの編集関連UIの配色は次のようになっています。これを単一の系統色に変更するUserCSSです
1. キャレットカーソル – 無彩色（テキストの色と同じ）
2. ユーザーフラッグ – 緑系統
3. テキスト選択範囲のハイライト – 緑系統
4. 編集直後の行のテロメア--telomere-updated:– 青系統
? 以前は緑系統だった
? ※一部のClassicテーマは配色が異なる（「Game Red」は編集行テロメアが緑色など）
テーマ変数未定義時 – 緑系統
次の配色についてはそのままです
5. 未読テロメア--telomere-unread: – 青系統
テーマ変数未定義時 – 緑系統
用意済みの色（コメントアウト）
緑系統（初期値）– ユーザーフラッグの配色に由来
青系統 – テロメアの配色に由来
赤系統 – このUserCSSの作成者の好みに由来（警戒色、誤編集対策）
? 赤色は色覚多様性のある方には判別しづらい
テキストの色と被らないように
--cursor-color:の値がこのUserCSSによって変更される各配色のベースカラーになります
2026-07-02 初期値を緑に変更
code:style.css
body {
/* --cursor-color: light-dark(crimson, lightcoral); */ /* 赤系統 */
/* --cursor-color: oklch(from #6b8cff calc(l * 0.7) c h); */ /* 青系統 */ --cursor-color: forestgreen; /* 緑系統 */
/* --cursor-color: #219E34; */ /* 緑系統、ダークテーマ用 */ caret-color: var(--cursor-color, #fff); }
同じページを編集している共同編集者のキャレットカーソル
code:style.css
body {
--user-flag-name-color: white;
--user-flag-bg: var(--cursor-color);
}
.shared-cursors .cursor {
background-color: var(--user-flag-bg, green);
}
.shared-cursors .cursor .user-flag {
color: var(--user-flag-name-color, #fff); background-color: var(--user-flag-bg, green);
}
code:style.css
body {
--text-selection-bg: hsl(from var(--cursor-color) h 79% 60%);
--text-selection-bg-opacity: .4;
}
.selections .selection {
opacity: var(--text-selection-bg-opacity, .4);
background-color: var(--text-selection-bg, green);
}
code:style.css
body {
--telomere-updated: hsl(from var(--cursor-color) h s l / 85%);
}
2025-11-11 変数名の記述ミスを修正
code:style.css
body:has(.cursor-line) {
--navbar-title-color: hsl(from var(--cursor-color) h 80% 75%);
}