ダークテーマ対応済みのアイコンの一覧(井戸端用)
対応方法について
1. 背景色を白〜灰白色に調整する
→現在のデフォルト
CSSのbackground-color:を変更します
2. 輪郭線をつける
→暗いアイコン
CSSのfilter:を適用します
3. 変更なし
→ホワイトリスト
Status
現在の状態:Settingsを更新すると壊れます旧版が反映されます
2026-07-08 18:15 ホワイトリストのCSSの更新作業中…(やらかした人:Nrem.icon)
bg.iconアイコン記法のデフォルトの背景色
アイコン記法の背景色を白くする
アルファチャンネルや透過背景のあるライトテーマ用アイコンの使い勝手が変わらないように
code:style.css
body {
/* --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輪郭線をつけるアイコンの一覧
(五十音順)
は行
数十人おるしもう後方一致でええんちゃうかな? 今後も増え続けるだろうし…Nrem.icon
黒系の髪色だから黒背景にすると却って見えづらくなってしまうのか…
code:更新用.css
/* ローカル */
:is(img.icon, img.inline-icon):is(
/* は行 */
),
/* 外部project */
a.icon:is(
/*
*/
) > :is(img.icon, img.inline-icon) {
filter: var(--inline-icon-filter, none);
}
bg.iconホワイトリスト
参考になるだろうページ:
(五十音順)
記号類・セパレータ
いやこれ背景透過色じゃないな…Nrem.icon
あ行
か行
さ行
た行
な行
は行
ま行
や行
ら行
わ行
ん
欧文由来
数字
[57577]57577.icon
/icons 系
/iconsドメインのものは一括で対象に含めてもいいかもしれませんNrem.icon なんでこんなに種類があるんねん!!takker.iconNrem.icon
code:更新用.css
/* 外部project */
a.icon:is(
) > :is(img.icon, img.inline-icon),
/* ローカル */
:is(img.icon, img.inline-icon):is(
/* か行 */
/* 未整理 */
/* 済 */
/* だん */
/* 検閲済 */
/* ほぼ57577 */
/* フロッピーディスク */
/* パワプロ */
) {
background-color: var(--page-bg, transparent);
filter: none;
}
bg.icon
2026-07-08
code:style.css
.line a.link.icon:is(
/* 透明正方形 */
/* 箒ライン */
/* たいへんよくできました */
/* 歓迎 */
/* 熱烈歓迎 */
/* 偉業 */
/* 済 */
/* だん */
/* 検閲済 */
/* ほぼ57577 */
/* フロッピーディスク */
/* パワプロ */
/* ふーこ */
/* フレフレふーこ */
/* 忍び寄るふーこ */
/* 水分補給をすすめてくるふーこ */
) > :is(img.icon, img.inline-icon) {
background-color: var(--page-bg, transparent) !important;
}