井戸端にダークテーマを導入したい

この変更によって何がどのように変わるか

デフォルトでライトテーマとダークテーマを両方自動で適用するか、ダークテーマを利用したい人が各自で適用するかの違い

非対称性がある

ライトテーマに関してはデフォルトで適用されているため追加対応する必要はない

ダークテーマは各自でUserCSSを用意しなければならない

テーマ変数を変えるだけではダークテーマ対応が不十分。井戸端のUserCSSの配色も各自で調整しなければならない

Cosense標準のダークテーマに自動で切り替わるUserCSSはなかったのでは

vanillaな Default Dark が/customize辺りに共有されていなかった

自分Nrem.iconは/customize/Auto Dark Themesを作成したが、自動でダークテーマがオンになるオプションはCosense側で実装しておいてほしかった気持ちがある

テーマを切り替えるボタンを追加するUserScriptなら前々からあった（新しいタブで開いたりページをリロードするとライトテーマに戻ってしまう）

そういえば/takkerはカラーテーマが自動で切り替わるようにしているが、井戸端には適用してなかったなtakker.icon

/takker/takkerのdark theme CSS おおNrem.icon

Default Dark をベースに、ドロップダウンメニューその他のダークテーマ対応とパーソナライズをされていたんですね

自分も自分用のダークテーマを実装している(途中)が、:hover周りの指定漏れを塞ぐのが面倒でほとんど放置中

通常時と:hoverしたときとで色を別々に設定しなければならないのがめんどくさいですよねtakker.icon

ただ、最近追加されたcolor-mix()を使えばだいぶ手間が省けるかもと思っています(まだ試していない)

:hoverした時の色を、通常時よりやや彩度を落とした色として計算式で表せば、通常時のリンクの色指定だけで済ませられそう

なるほど、その方法がベターかな…Nrem.icon

一つ思いつきがありましてNrem.icon

デフォルト状態のBGはメニュー項目の親属性に適用されている属性なので、:hoverの背景色としてはalpha値入りのcolorを指定するのも有効かなと

表示はcolor-mix(in hsl, ...)と同じような感じになる

自分も自動で切り替わるようなテーマをつくったが、労力に見合うメリットを感じなかった suto3.icon

配色など、メンテの手間が2倍以上増える

アイコン類をダークテーマとライトテーマの両方に対応するように作り直し

テーマ側でアイコンの表示をライトテーマから変えないようにするのがいいですかね…Nrem.icon

アイコン記法のみ背景色をライトテーマ準拠にすることで緩和できないものかと

ダーク／ライトを自由に切り替えることはできない

（Cosense以外も含めて）ダークモードを使っている人がどの程度いるのかを知らない

適用後の見た目vlzs.icon

ああ、実はまだ全部書き終えてなかったのですが…Nrem.icon

ではあとで撮り直しますvlzs.icon

ああ、大丈夫ですよ。言い出したNrem.iconが自分でスクショ撮るので…Nrem.icon

わかりましたvlzs.icon

でも、おかげでnomadoor.icon氏のfilter:をカードのアイコンに適用する前の比較用SSを撮影する手間が省けました。お借りします…Nrem.icon

https://gyazo.com/f199ca31a0f3cc6a4401bf8b82abcc2bhttps://gyazo.com/c33b38ea3427e0b66307991e542f1b2f

vlzs.iconは新しいものにはなんでも拒否反応をしてしまうので、vlzs.iconの考えは無視して、変えてみてほしい

とりあえずmy pageのほうに適用してみた

昨日来たメンバーのvlzs.iconが他の人より一番先に答えてしまった

ダークテーマで使えるようになったので、ベッドの中でスマホから読んでしまったときに、強い光で覚醒しなくて寝れなくなるが減り、寝れるようになり、そのぶん体調が良くなるはずvlzs.icon

偉業takker.iconvlzs.iconnomadoor.iconhoagecko.iconinajob.iconnishio.icon

#たいへんよくできました

to scrapbox-bundlerがバイナリファイルを結合する挙動について (2026-02)#69aacae80000000000a9d373

from 2026/02/14

yosider.icon

うお、暗い

井戸端にダークテーマを導入したいこれかぁ

でも悪くない感じだ

パフォーマンス的にも特に問題を感じない

リンクの色カスタムしてるから合わせないとな

navbarの井戸端の文字が黒い…なぜだろう

Nrem.iconさんのスクショだと白い

あー…UserCSSを切っていなかったせいかもしれないですNrem.icon

今はこちらでも黒い。文字が殆ど見えない

なるほどですyosider.icon

修正しました。リロードをお願いしますNrem.icon

/customizeのほうでvlzs.iconさんが修正されていた「テーマ変数の抜け」に気づかずに、自分があちらを手元の版で丸ごと上書きしてしまったことが原因だったようです（）

直ったclap-nya.iconyosider.icon

ダークテーマは目に優しいのか

文章を長時間読むときは逆に白文字が明るく感じることがある

動かさないで読み続けていると行が目に焼き付いてしまい縞々の残像が見える

のでKindleではライトテーマにして背景を茶色っぽくしている

井戸端は長時間読み続ける感じではないので問題なさそう

長時間読むSummer498.icon

つまりダークテーマかつ文字を読まないのが最強mtane0412.icon

文字色も背景色もダークにしようtakker.icon

Summer498.icon

急に背景変わってるの何？

ああ、Nrem.iconがダークテーマ作ってくれたのか

慣れたら目に馴染むと思う

hr.icon

ページの構成がとっ散らかってしまった…Nrem.icon

長くなった枝をページ分割していきたい

streamのリンクの色が違うのが気になる

済.iconNrem.icon

StreamはなぜかDOMに差異があるのよね…Nrem.icon

わーい、対応感謝

hr.iconの主張が強すぎるかなwogikaze.icon

hr.icon

hr.iconをCSSで描画するUserCSS

済.iconNrem.icon

ルビきほう記法の文字が同化してしてしまっているwogikaze.icon

issueばっかり投げてコード書いてないのﾓｳｼﾜｹﾅｲ

ルビ記法

済.iconNrem.icon

bg.iconUserCSS

code:how-to-apply.css

@import url("../井戸端にダークテーマを導入したい/style.css") (prefers-color-scheme: dark);

url()のあとに()でprefers-color-schemeを指定する記法なんてあったんだtakker.icon

知見

これですねNrem.icon

https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Media_queries/Using#メディア特性を対象にする

メディアクエリーは以下の用途で使用されます。

CSS の @media、@custom-media、@import アットルールにより、条件付きでスタイルを適用する。

自分も知らなかったのですが、考えてみると技術的に何も難しいことはないはずなので、既に実装されているだろうと思って調べたら出てきました（よくある）

code:style.css

@import url("../../customize/Auto Dark Themes/var.css");

@import url('./import.css');

/customize/Auto Dark Themes

Cosenseに元からあるテーマ変数をダークテーマのものに一括で置き換えるUserCSS

あとは微修正するだけ

import.css

（@importのみ記述するコードブロックを用意する）

ダークテーマ対応済みのアイコンの一覧（井戸端用）

code:import.css

@import url("../ダークテーマ対応済みのアイコンの一覧（井戸端用）/style.css");

ページ本文

本文フォント

メインページ：井戸端のダークテーマのフォントについて

日本語フォント：「BIZ UDゴシック」を日本語フォントの先頭に追加する

BIZ UDゴシック

code:import.css

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');

code:style.css

:where(main) .editor#editor, .grid li.page-list-item, .app .stream {

font-family: var(--page-font-family, "Roboto", Helvetica, Arial, "BIZ UDゴシック", "BIZ UDGothic", "Hiragino Sans"), var(--icons, "AppIcons"), sans-serif;

font-size-adjust: 0.51;

}

変数--page-font-familyに関しては井戸端のダークテーマのフォントについて#69a4b12c0000000000ca4f60を参照

2026-02-20 font-family:のセレクターの詳細度を上げた

Font Awesomeを常時使えるようにするUserCSSと競合して適用されていなかったため

font-size-adjustってどういうpropなんだろtakker.icon

font-size-adjust: は、 x-height を基準に font-family: の各フォントの文字の高さを一致させるものですNrem.icon

文字の高さがフォントごとに違います

MDNなどの説明では「代替フォント」用と書かれていますが、これは欧文フォントと日本語フォントを両方指定する場合に適用されます

フォントに収録されていない文字が代替フォント＝次の指定フォントで表示されるため

ここでは、font-size:の値を変更せずに文字サイズを調整するために指定してますNrem.icon

BIZ UDGothic

このフォントのスケールは Noto Sans JP その他の日本語フォントより一回り大きめでして、行間が詰まって見えます。

視認性の高いUDゴシック体ですが、Nrem.iconとしては大きく表示するとポップでダサい（失礼！）印象を受けるので、そのままの大きさで表示するとイマイチかなと

リンク

code:style.css

.stream .page a:is(.link,.page-link) {

color: var(--page-link-color);

&:hover {

color: var(--page-link-hover-color);

}

&.empty-page-link:hover {

color: var(--empty-page-link-hover-color);

}

2026-02-26 11:44:47 :is()を使ってrefactoring & 空リンクのhover対応

箇条書きのバレットをFontAwesomeにするUserCSS#66330fa85b98c2000085c136

「カラーセット 1」と「カラーセット 3」はcode:stylexxとなっていたのでひとまず置いておく

https://gyazo.com/2a5132b70222d34be01b76405058ce35

色彩感覚には自信がない

カラーセット2

code:style.css

body {

/* --li-color-0: #E0E0E0; */

--li-color-0: hsl(0, 0%, 95%);

/* --li-color-1: #EDAD0B; */

--li-color-1: hsl(43, 91%, 50%);

/* --li-color-2: #C7243A; */

--li-color-2: hsl(352, 95%, 70%);

/* --li-color-3: #932674; */

--li-color-3: hsl(317, 95%, 70%);

/* --li-color-4: #3261AB; */

--li-color-4: hsl(217, 100%, 80%);

/* --li-color-5: #009F8C; */

--li-color-5: hsl(173, 90%, 60%);

}

2026-03-09 セレクターを:rootからbodyに上げた

settingsの@import順の関係で反映されていなかったため

赤系の色、色盲の人にもはっきりと見えているのだろうか？　調整が難しい…Nrem.icon

まあ各自の端末でカラーフィルターをかける手もあるが…

画像の明暗問題

ページ内の画像

ダークテーマに表示される画像の輝度を落とす

暗くする

cf. 井戸端にダークテーマを導入したい#698fe41b00000000006e9187

code:style.css

:where(main) .line :is(.image, .mordal-image) {

filter: brightness(0.9);

}

from 2026/02/14

suto3.icon

さて、私はだれでしょう？

ダークテーマになったので、アイコンが非常に見にくくなった

背景色が黒いと、背景に溶けてしまうんですねvlzs.icon

ダークテーマに合わせてどうやって色変更をするんだろうと思い、試しに画像編集ソフトでアイコンの色を変えてみたんですが、このアイコンってPNGでなくてSVGで作られていたんですねvlzs.icon

ふっふっふ、対策済みですよNrem.icon

カード表示のページアイコン

暗くする

cf. 井戸端にダークテーマを導入したい#698fe41b00000000006e9187

code:style.css

.grid li.page-list-item.image > a {

& > .content > .icon {

filter: brightness(.9);

}

data-hover-visible &:hover > .content > .icon {

filter: brightness(.9);

}

ナビゲーションほか

ドロップダウンメニューの配色対応

標準テーマの変数にはない

まだ不完全な対応

code:style.css

body {

--dropdown-menu-bg: hsl(223 10% 20%);

--dropdown-menu-item-color: var(--page-text-color);

--dropdown-menu-item-hover-bg: hsl(from var(--dropdown-menu-bg) h s calc(l * 0.8));

--dropdown-menu-item-hover-color: var(--dropdown-menu-item-color);

--dropdown-menu-divider: hsl(223 25% 30%);

}

.dropdown-menu {

background-color: var(--dropdown-menu-bg, #fff);

}

.page-menu ul > li > div,

.dropdown-menu > li > a {

color: var(--dropdown-menu-item-color, #333);

}

.dropdown-menu>li>a:active,

data-hover-visible .dropdown-menu>li>a:hover,

data-focus-visible .dropdown-menu>li>a:focus {

color: var(--dropdown-menu-item-hover-color, hsl(0 0% 15%)) !important;

background-color: var(--dropdown-menu-item-hover-bg, #333);

}

.dropdown-menu .divider {

background-color: var(--dropdown-menu-divider, #f5f5f5);

}

hr.icon

Global menu

code:style.css

.project-list-tab > a {

color: var(--project-list-tab-text-color, #333);

}

.project-list-tab > a:hover {

background: var(--project-list-tab-hover-bg, #f5f5f5);

color: var(--project-list-tab-text-hover-color, #333);

}

.project-list-tab>a.active {

background: var(--project-list-tab-active-bg, hsl(0,0%,91.0784313725%));

}

hr.icon

mobile版におけるグローバルメニュー・ドロワー

スマホにおいて Global menu がドロワーになる。面積が広い

code:style.css

hr.icon

Navbar

🔍️検索フォーム

未フォーカス時の検索フォームのテキストのコントラストが低いため見えづらいNrem.icon

継承元の標準テーマ (Default Dark) の配色に由来

新規ページの作成時に、ページ名を入力すると自動的に検索フォームにも同じ文字列が入力されるあれが考慮された配色になっていない

変更（暫定）

➕️新規ページボタン

code:style.css

body {

--search-form-text-color: hsl(257 5% 55%);

/* --new-button-bg: hsl(227 51% 56% / 1); */

--new-button-bg: hsl(227 51% 56% / .75);

}

Brand icon

https://scrapbox.io/api/pages/villagepump/brand-icon/icon#.png

ScrapboxのBrand iconを井戸端にするUserCSS

code:style.css

body {

--logo-bg-color: hsl(from var(--navbar-bg) h s l / .075);

}

Stream固有の要素

Streamの更新日時バーの配色を変更する

from /customize/Streamの更新日時バーに背景色をつける, /nrem-configs/Streamの更新日時バーに背景色をつける

code:style.css

.stream h1 {

background-color: hsl(from var(--navbar-bg) h s 35%);

color: white;

}

Streamの省略線 hr を目立たなくする

code:style.css

.stream .page hr { opacity: .35 !important; }

hr.icon

ページメニューボタンの配色

背景の模様と混ざってしまうため

code:style.css

code:disabled

body {

--tool-color: var(223 10% 75%);

}

検索結果

https://gyazo.com/bb8963c3effae2ec2f03426b0627f4f3

変数

code:style.css

body {

--search-result-list-item-text-color: var(--page-text-color);

--search-result-list-item-text-hover-color: var(--page-text-color);

--search-result-list-bg: var(--page-bg); /* Por la rezulto de serĉo */

--search-result-list-item-odd-bg: hsl(0 0 0 / .018);

--search-result-list-item-even-bg: hsl(0 0 100% / .018);

--search-result-list-item-hover-bg: hsl(from var(--search-result-list-bg) h s calc(l * 1.2));

--search-result-list-item-border-color: var(--telomere-border);

--search-result-list-item-description-color: var(--page-text-color);

--page-list-item-search-matched-text-bg: hsl(from yellow h s l / .8);

--page-list-item-search-matched-text-color: midnightblue;

}

code:style.css

.search-result-list ul.list {

background-color: var(--search-result-list-bg, #fafafa);

}

.list li.page-list-item {

border-bottom: 1px solid var(--search-result-list-item-border-color, #dcdcdc);

background-color: var(--search-result-list-bg, #fafafa);

color: var(--search-result-list-item-text-color, var(--page-text-color));

&:nth-child(even) {

background-color: var(--search-result-list-item-even-bg, #fafafa);

}

&:nth-child(odd) {

background-color: var(--search-result-list-item-odd-bg, #fafafa);

}

& a {

color: var(--search-result-item-text-color, #fafafa);

&:active, data-hover-visible &:hover {

background-color: var(--search-result-item-hover-bg, transparent);

color: var(--search-result-list-item-text-hover-color, #333);

}

& .description {

color: var(--search-result-list-item-description-color, #666);

}

& .search-matched {

color: var(--page-list-item-search-matched-text-color, #333);

background-color: var(--page-list-item-search-matched-text-bg, #ff0);

}

表とコードブロックのラベル

code:disabled

code:style.css

body {

--block-start-bg: hsl(from #ffcfc6 h s l / .85);

--block-start-text-color: midnightblue;

}

.table-block .table-block-start,

.line span.code-block .code-block-start {

background: var(--block-start-bg, #ffcfc6);

& a {

color: var(--block-start-text-color, #342d9c);

}

Mermaid.js

mermaid.jsのダークテーマ対応

mermaid.js.iconMermaid記法

BG以外はjs側で動的生成されるため指定不可

!importantなら強制上書き可能だが推奨されない

うーん、このダークテーマには組み込まずに独立したUserCSSとして公開したほうが良いかもしれんNrem.icon

code:style.css

.line .mermaid-preview svg {

/* background-color: #fff; */

background-color: hsl(0 0% 96%);

}

bg.icon追加の文字装飾記法

文字装飾記法のダークテーマ対応

マーカー記法（ブラケティング式の太字記法を変更したもの）

変数導入による対応

Test:

マーカー記法

くぁｗせｄｒｆ

code:style.css

body {

--strong-bg-marker-color: hsl(89 100% 65% / .4);

}

ふきだし記法

code:style.css

body {

--fukidashi-bg: hsl(210 5% 10%);

}