井戸端にダークテーマを導入したい
井戸端のダークテーマを無効化する方法
#ダークテーマ #ダークモード
要約テンプレート
この変更によって何がどのように変わるか
デフォルトでライトテーマとダークテーマを両方自動で適用するか、ダークテーマを利用したい人が各自で適用するかの違い
非対称性がある
ライトテーマに関してはデフォルトで適用されているため追加対応する必要はない
ダークテーマは各自でUserCSSを用意しなければならない
テーマ変数を変えるだけではダークテーマ対応が不十分。井戸端のUserCSSの配色も各自で調整しなければならない
Cosense標準のダークテーマに自動で切り替わるUserCSSはなかったのでは
vanillaな Default Dark が/customize辺りに共有されていなかった
ntjEchpk.iconは/customize/Auto Dark Themesを作成したが、自動でダークテーマがオンになるオプションはCosense側で実装しておいてほしかった気持ちがある
テーマを切り替えるボタンを追加するUserScriptなら前々からあった（新しいタブで開いたりページをリロードするとライトテーマに戻ってしまう）
そういえば/takkerはカラーテーマが自動で切り替わるようにしているが、井戸端には適用してなかったなtakker.icon
/takker/takkerのdark theme CSS おおntjEchpk.icon
Default Dark をベースに、ドロップダウンメニューその他のダークテーマ対応とパーソナライズをされていたんですね
自分も自分用のダークテーマを実装している(途中)が、:hover周りの指定漏れを塞ぐのが面倒でほとんど放置中
通常時と:hoverしたときとで色を別々に設定しなければならないのがめんどくさいですよねtakker.icon
ただ、最近追加されたcolor-mix()を使えばだいぶ手間が省けるかもと思っています(まだ試していない)
:hoverした時の色を、通常時よりやや彩度を落とした色として計算式で表せば、通常時のリンクの色指定だけで済ませられそう
なるほど、その方法がベターかな…ntjEchpk.icon
一つ、思いつきがあってntjEchpk.icon
デフォルト状態のBGはメニュー項目の親属性に適用されている属性なので、:hoverの背景色としてはalpha値入りのcolorを指定するのも有効かなと
表示はcolor-mix(in hsl, ...)と同じような感じになる
自分も自動で切り替わるようなテーマをつくったが、労力に見合うメリットを感じなかった suto3.icon
配色など、メンテの手間が2倍以上増える
アイコン類をダークテーマとライトテーマの両方に対応するように作り直し
テーマ側でアイコンの表示をライトテーマから変えないようにするのがいいですかね…ntjEchpk.icon
アイコン記法のみ背景色をライトテーマ準拠にすることで緩和できないものかと
ダーク／ライトを自由に切り替えることはできない
（Cosense以外も含めて）ダークモードを使っている人がどの程度いるのかを知らない
適用後の見た目vlzs.icon
ああ、実はまだ全部書き終えてなかったのですが…ntjEchpk.icon
ではあとで撮り直しますvlzs.icon
ああ、大丈夫ですよ。言い出したntjEchpk.iconが自分でスクショ撮るので…ntjEchpk.icon
わかりましたvlzs.icon
でも、おかげでnomadoor.icon氏のfilter:をカードのアイコンに適用する前の比較用SSを撮影する手間が省けました。お借りします…ntjEchpk.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の井戸端の文字が黒い…なぜだろう
ntjEchpk.iconさんのスクショだと白い
あー…UserCSSを切っていなかったせいかもしれないですntjEchpk.icon
今はこちらでも黒い。文字が殆ど見えない
なるほどですyosider.icon
修正しました。リロードをお願いしますntjEchpk.icon
/customizeのほうでvlzs.iconさんが修正されていた「テーマ変数の抜け」に気づかずに、自分があちらを手元の版で丸ごと上書きしてしまったことが原因だったようです（）
直ったclap-nya.iconyosider.icon
ダークテーマは目に優しいのか
文章を長時間読むときは逆に白文字が明るく感じることがある
動かさないで読み続けていると行が目に焼き付いてしまい縞々の残像が見える
のでKindleではライトテーマにして背景を茶色っぽくしている
井戸端は長時間読み続ける感じではないので問題なさそう
長時間読むSummer498.icon
つまりダークテーマかつ文字を読まないのが最強mtane0412.icon
文字色も背景色もダークにしようtakker.icon
Summer498.icon
急に背景変わってるの何？
ああ、ntjEchpk.iconがダークテーマ作ってくれたのか
慣れたら目に馴染むと思う
hr.icon
ページの構成がとっ散らかってしまった…ntjEchpk.icon
長くなった枝をページ分割していきたい
streamのリンクの色が違うのが気になる
済.iconntjEchpk.icon
StreamはなぜかDOMに差異があるのよね…ntjEchpk.icon
わーい、対応感謝
hr.iconの主張が強すぎるかなwogikaze.icon
hr.icon
hr.iconをCSSで描画するUserCSS
済.iconntjEchpk.icon
ルビきほう記法の文字が同化してしてしまっているwogikaze.icon
issueばっかり投げてコード書いてないのﾓｳｼﾜｹﾅｲ
ルビ記法
済.iconntjEchpk.icon
bg.icon
UserCSS
code:how-to-apply.css
@import url("../井戸端にダークテーマを導入したい/style.css") (prefers-color-scheme: dark);
url()のあとに()でprefers-color-schemeを指定する記法なんてあったんだtakker.icon
知見
code:style.css
@import url("../../customize/Auto Dark Themes/var.css");
@import url('./import.css');
/customize/Auto Dark Themes
Cosenseに元からあるテーマ変数をダークテーマのものに一括で置き換えるUserCSS
import.css
@importのみ記述するコードブロックを用意する
あとは微修正するだけ
hr.icon
本文フォント
井戸端のダークテーマのフォントについて
日本語フォント：「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: の各フォントの文字の高さを一致させるものですntjEchpk.icon
文字の高さがフォントごとに違います
MDNなどの説明では「代替フォント」用と書かれていますが、これは欧文フォントと日本語フォントを両方指定する場合に適用されます
フォントに収録されていない文字が代替フォント＝次の指定フォントで表示されるため
ここでは、font-size:の値を変更せずに文字サイズを調整するために指定してますntjEchpk.icon
BIZ UDGothic
このフォントのスケールは Noto Sans JP その他の日本語フォントより一回り大きめでして、行間が詰まって見えます。
視認性の高いUDゴシック体ですが、ntjEchpk.iconとしては大きく表示するとポップでダサい（失礼！）印象を受けるので、そのままの大きさで表示するとイマイチかなと
hr.icon
リンク
code:style.css
a,
.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対応
hr.icon
箇条書きのバレットを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順の関係で反映されていなかったため
赤系の色、色盲の人にもはっきりと見えているのだろうか？　調整が難しい…ntjEchpk.icon
まあ各自の端末でカラーフィルターをかける手もあるが…
hr.icon
マーカー記法
←Before After→
Test:
マーカー記法
マーカー記法
くぁｗせｄｒｆ
code:style.css
body {
--strong-bg-marker-color: hsl(89 100% 65% / .4);
}
hr.icon
ふきだし記法
code:style.css
body {
--fukidashi-bg: hsl(210 5% 10%);
}
hr.icon
ページ内の画像
暗くする
cf. 井戸端にダークテーマを導入したい#698fe41b00000000006e9187
code:style.css
:where(main) .line :is(.image, .mordal-image) {
filter: brightness(0.9);
}
hr.icon
アイコン記法の背景色
ひとまずアルファチャンネルのあるアイコンの使い勝手が変わらないように、アイコン記法の背景色を白くする
code:style.css
body {
/* --icon-bg: #fafafa; */
--icon-bg: hsl(from var(--page-bg) h s 100% / 75%);
}
code:style.css
:where(main) .line :is(img.icon, img.inline-icon),
:where(.dropdown-menu) a.link.icon {
background-color: var(--icon-bg, transparent);
}
背景色白化の対象から除外する
井戸端にダークテーマを導入したい#699772ec0000000000e67f9e
from 2026/02/14
suto3.icon
さて、私はだれでしょう？
ダークテーマになったので、アイコンが非常に見にくくなった
背景色が黒いと、背景に溶けてしまうんですねvlzs.icon
ダークテーマに合わせてどうやって色変更をするんだろうと思い、試しに画像編集ソフトでアイコンの色を変えてみたんですが、このアイコンってPNGでなくてSVGで作られていたんですねvlzs.icon
ふっふっふ、対策済みですよntjEchpk.icon
hr.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);
}
}
hr.icon
ドロップダウンメニューの配色対応
標準テーマの変数にはない
まだ不完全な対応
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
検索フォーム
未フォーカス時の検索フォームのテキストのコントラストが低いため見えづらいntjEchpk.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);
}
hr.icon
Streamの更新日時バーの配色を変更する
from /customize/Streamの更新日時バーに背景色をつける, /nrem-configs/Streamの更新日時バーに背景色をつける
code:style.css
.stream h1 {
background-color: hsl(from var(--navbar-bg) h s 35%);
color: white;
}
hr.icon
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%);
}
hr.icon
検索結果
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);
}
}
}
hr.icon
表とコードブロックのラベル
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);
}
}
hr.icon
mermaid.js.iconMermaid記法, mermaid.jsのダークテーマ対応
BG以外はjs側で動的生成されるため指定不可
!importantなら強制上書き可能だが推奨されない
うーん、このダークテーマには組み込まずに独立したUserCSSとして公開したほうが良いかもしれんntjEchpk.icon
code:style.css
.line .mermaid-preview svg {
/* background-color: #fff; */
background-color: hsl(0 0% 96%);
}
hr.icon
背景漂白の対象から除外するアイコン
参考になるページ：リアクションアイコン
/icons/- /icons/-.icon
透明正方形透明正方形.icon
箒ライン箒ライン.icon
たいへんよくできましたたいへんよくできました.icon
歓迎歓迎.icon
熱烈歓迎.icon熱烈歓迎
:igyo::igyo:.icon
偉業:igyo:.icon
大偉業大偉業.icon
偉業を連発偉業を連発.icon
済済.icon
だんだん.icon
検閲済検閲済.icon
[57577]57577.icon
ほぼ57577ほぼ57577.icon
フロッピーディスクフロッピーディスク.icon
tadatada.icon
CosenseCosense.icon
MeldMeld.icon
Scrapbox BeaverScrapbox Beaver.icon
パワプロ絶好調パワプロ絶好調.icon
パワプロ好調パワプロ好調.icon
パワプロ普通パワプロ普通.icon
パワプロ普通パワプロ不調.icon
パワプロ絶不調パワプロ絶不調.icon
パワプロお休みパワプロお休み.icon
ふーこ.iconふーこ
フレフレふーこ.iconフレフレふーこ
忍び寄るふーこ.icon忍び寄るふーこ
水分補給をすすめてくるふーこ.icon水分補給をすすめてくるふーこ
数十人おるしもう前方一致でええかな？　今後も増え続けていくだろうし…ntjEchpk.icon
WHO48 (アイドルユニット)
黒系の髪色なので黒背景にすると却って見えづらくなってしまうのか…
/icons/parrot/icons/parrot.icon
/icons/60fpsparrot/icons/60fpsparrot.icon
/icons/slowparrot/icons/slowparrot.icon
/icons/middleparrot/icons/middleparrot.icon
/icons/fastparrot/icons/fastparrot.icon
/icons/ultrafastparrot/icons/ultrafastparrot.icon
/icons/exceptionallyfastparrot/icons/exceptionallyfastparrot.icon
/icons/darkmodeparrot/icons/darkmodeparrot.icon
/icons/inverseparrot/icons/inverseparrot.icon
/icons/reverseparrot/icons/reverseparrot.icon
なんでこんなに種類があるんねん！！takker.icon
code:style.css
.line a.link.icon:is(
href="/icons/-",
/* 透明正方形 */
href="/icons/%E9%80%8F%E6%98%8E%E6%AD%A3%E6%96%B9%E5%BD%A2",
/* 箒ライン */
href="/villagepump/%E7%AE%92%E3%83%A9%E3%82%A4%E3%83%B3",
/* たいへんよくできました */
href="/villagepump/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F",
/* 歓迎 */
href="/villagepump/%E6%AD%93%E8%BF%8E",
/* 熱烈歓迎 */
href="/villagepump/%E7%86%B1%E7%83%88%E6%AD%93%E8%BF%8E",
/* 偉業 */
href="/villagepump/:igyo%3A",
href="/villagepump/%E5%81%89%E6%A5%AD",
href="/villagepump/%E5%A4%A7%E5%81%89%E6%A5%AD",
href="/villagepump/%E5%81%89%E6%A5%AD%E3%82%92%E9%80%A3%E7%99%BA",
/* 済 */
href="/villagepump/%E6%B8%88",
/* だん */
href="/villagepump/%E3%81%A0%E3%82%93",
/* 検閲済 */
href="/villagepump/%E6%A4%9C%E9%96%B2%E6%B8%88",
/* ほぼ57577 */
href="/villagepump/%E3%81%BB%E3%81%BC57577",
href="/villagepump/57577",
/* フロッピーディスク */
href="/villagepump/%E3%83%95%E3%83%AD%E3%83%83%E3%83%94%E3%83%BC%E3%83%87%E3%82%A3%E3%82%B9%E3%82%AF",
href="/villagepump/tada",
href="/villagepump/Cosense",
href="/villagepump/Meld",
href="/villagepump/Scrapbox_Beaver",
/* パワプロ */
href="/villagepump/%E3%83%91%E3%83%AF%E3%83%97%E3%83%AD%E7%B5%B6%E5%A5%BD%E8%AA%BF",
href="/villagepump/%E3%83%91%E3%83%AF%E3%83%97%E3%83%AD%E5%A5%BD%E8%AA%BF",
href="/villagepump/%E3%83%91%E3%83%AF%E3%83%97%E3%83%AD%E6%99%AE%E9%80%9A",
href="/villagepump/%E3%83%91%E3%83%AF%E3%83%97%E3%83%AD%E4%B8%8D%E8%AA%BF",
href="/villagepump/%E3%83%91%E3%83%AF%E3%83%97%E3%83%AD%E7%B5%B6%E4%B8%8D%E8%AA%BF",
href="/villagepump/%E3%83%91%E3%83%AF%E3%83%97%E3%83%AD%E3%81%8A%E4%BC%91%E3%81%BF",
/* ふーこ */
href^="/villagepump/%E3%81%B5%E3%83%BC%E3%81%93",
/* フレフレふーこ */
href="/villagepump/%E3%83%95%E3%83%AC%E3%83%95%E3%83%AC%E3%81%B5%E3%83%BC%E3%81%93",
/* 忍び寄るふーこ */
href="/villagepump/%E5%BF%8D%E3%81%B3%E5%AF%84%E3%82%8B%E3%81%B5%E3%83%BC%E3%81%93",
/* 水分補給をすすめてくるふーこ */
href="/villagepump/%E6%B0%B4%E5%88%86%E8%A3%9C%E7%B5%A6%E3%82%92%E3%81%99%E3%81%99%E3%82%81%E3%81%A6%E3%81%8F%E3%82%8B%E3%81%B5%E3%83%BC%E3%81%93",
href="/icons/parrot",
href="/icons/60fpsparrot",
href="/icons/slowparrot",
href="/icons/middleparrot",
href="/icons/fastparrot",
href="/icons/ultrafastparrot",
href="/icons/exceptionallyfastparrot",
href="/icons/darkmodeparrot",
href="/icons/inverseparrot",
href="/icons/reverseparrot"
) > :is(img.icon, img.inline-icon) {
background-color: var(--page-bg, transparent) !important;
}
Settings