編集周りのUIの配色を統一する
from 入力中のテキストにフォーカスする
from Aureolo:editor
標準テーマの編集関連UIの配色は次のようになっています。これを単一の系統色に変更するUserCSSです
1. キャレットカーソル – 無彩色（テキストの色と同じ）
2. ユーザーフラッグ – 緑系統
3. テキスト選択範囲のハイライト – 緑系統
4. 編集直後の行のテロメア--telomere-updated:– 青系統
? 以前は緑系統だったようだ
? ※一部のClassicテーマには配色が異なるものがある（「Game Red」は編集行テロメアが緑色など）
テーマ変数未定義時 – 緑系統
次の配色についてはそのままです
5. 未読テロメア--telomere-unread: – 青系統
テーマ変数未定義時 – 緑系統
（「未読テロメアの配色をテーマカラーに合わせる」UserCSSの対象）
用意済みの色（コメントアウト）
緑系統（初期値）– ユーザーフラッグの配色に由来
青系統 – テロメアの配色に由来
赤系統 – このUserCSSの作成者Nrem.iconの好みに由来（警戒色、誤編集対策）
? 色覚多様性のある方には判別しづらい
/customize 版との違い
/customize/編集周りのUIの配色を統一する
変数の対応関係が異なる
--cursor-color:の値がこのUserCSSによって変更される各配色のベースカラーになります
2026-07-02 初期値を緑に変更
code:customize.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);
}
? なお、これらの配色は仮置きであり、未だ調整不足のものである
Cosense標準テーマの色彩に合わせなければならない（同一でない）
bg.icon
code:style.css
body {
--interactive-color: light-dark(#ff5555, lightcoral);
}
projectの名前（編集時）
誤爆対策と誤編集対策
:has()
code:style.css
body:where(:has(main.page #editor div.lines > div.line.cursor-line)) {
--navbar-title-color: hsl(from var(--interactive-color) h 80% 75%);
}
キャレットカーソル
テキストの色と被らないように
code:style.css
body {
--cursor-color: light-dark(var(--interactive-color, #fff), oklch(from var(--interactive-color, lightcoral) 100% 80% h));
caret-color: var(--cursor-color, #fff);
}
ユーザーフラッグの色
同じページを編集している共同編集者のキャレットカーソル
code:style.css
body {
--user-flag-name-color: white;
--user-flag-bg: hsl(from var(--interactive-color) h 100% 25%);
}
.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(--interactive-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(--interactive-color) h 79% 60% / 85%); */
--telomere-updated: hsl(from var(--cursor-color) h s l / 85%);
}
#UserCSS