ダークテーマ対応済みのアイコンの一覧(井戸端用)
from 井戸端にダークテーマを導入したい
対応方法について
1. 背景色を白〜灰白色に調整する
→現在のデフォルト
CSSのbackground-color:を変更します
2. 輪郭線をつける
→暗いアイコン
ふーこ.iconふーこアイコンなど
CSSのfilter:を適用します
3. 変更なし
→ホワイトリスト
Status
現在の状態:Settingsを更新すると壊れます旧版が反映されます
2026-07-08 18:15 ホワイトリストのCSSの更新作業中…(やらかした人:Nrem.icon)
bg.iconアイコン記法のデフォルトの背景色
アイコン記法の背景色を白くする
アルファチャンネルや透過背景のあるライトテーマ用アイコンの使い勝手が変わらないように
code:style.css
body {
/* --icon-bg: #fafafa; */
/* --icon-bg: hsl(from var(--page-bg) h s 100% / 75%); */
--icon-bg: color-mix(in hsl, white 85%, var(--page-bg, #fafafa));
--inline-icon-filter: ;
}
code:style.css
:is(img.icon, img.inline-icon) {
background-color: var(--icon-bg, transparent);
}
bg.icon輪郭線をつけるアイコンの一覧
(五十音順)
は行
ふーこ.iconふーこ
数十人おるしもう後方一致でええんちゃうかな? 今後も増え続けるだろうし…Nrem.icon
フレフレふーこ.iconフレフレふーこ
忍び寄るふーこ.icon忍び寄るふーこ
水分補給をすすめてくるふーこ.icon水分補給をすすめてくるふーこ
WHO48 (アイドルユニット)
黒系の髪色だから黒背景にすると却って見えづらくなってしまうのか…
code:更新用.css
/* ローカル */
:is(img.icon, img.inline-icon):is(
/* は行 */
title$="ふーこ"
),
/* 外部project */
a.icon:is(
href^="/icons/",
href^="/icons2/"
/*
href="/icons/-",
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) {
filter: var(--inline-icon-filter, none);
}
bg.iconホワイトリスト
参考になるだろうページ:
リアクションアイコン
ダークモード対応絵文字を作る
(五十音順)
記号類・セパレータ
/icons/- /icons/-.icon
箒ライン箒ライン.icon
いやこれ背景透過色じゃないな…Nrem.icon
あ行
:igyo:.icon:igyo:
:igyo:.icon偉業
大偉業.icon大偉業
偉業を連発.icon偉業を連発
イドバタニシの茶
イドバタニシの茶2
か行
検閲済.icon検閲済
たいへんよくできました.iconたいへんよくできました
歓迎.icon歓迎
熱烈歓迎.icon熱烈歓迎
月餅.icon月餅
さ行
済.icon済
た行
tada.icontada
だん.iconだん
透明正方形.icon透明正方形
な行
は行
ほぼ57577.iconほぼ57577
パワプロ絶好調.iconパワプロ絶好調
パワプロ好調.iconパワプロ好調
パワプロ普通.iconパワプロ普通
パワプロ不調.iconパワプロ普通
パワプロ絶不調.iconパワプロ絶不調
パワプロお休み.iconパワプロお休み
フロッピーディスク.iconフロッピーディスク
ま行
や行
ら行
わ行
ん
欧文由来
Cosense.iconCosense
who1.iconwho1
who2.iconwho2
Meld.iconMeld
Scrapbox Beaver.iconScrapbox Beaver
数字
[57577]57577.icon
/icons 系
/iconsドメインのものは一括で対象に含めてもいいかもしれませんNrem.icon
/icons/parrot.icon/icons/parrot
/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.iconNrem.icon
code:更新用.css
/* 外部project */
a.icon:is(
href="/icons/-",
href^="/icons/"
) > :is(img.icon, img.inline-icon),
/* ローカル */
:is(img.icon, img.inline-icon):is(
/* か行 */
title="月餅",
/* 未整理 */
title="透明正方形",
title="箒ライン",
title="たいへんよくできました",
title="歓迎",
title="熱烈歓迎",
title=":igyo:",
title="偉業",
title="大偉業",
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"
) {
background-color: var(--page-bg, transparent);
filter: none;
}
bg.icon
2026-07-08
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/",
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;
}