ダークモードのcssを入れても無反応
色々試したが不明
d-markingのやつはできたけど
それと同じcssを入れてもうまくかなかった？
なぜか通常まで白くなった
新しくsvgを書き出して、他のサイトからコピったスタイルを入れても今度は変化なし ダークモードでならない
データのせいか svgがちがうのかもしれない。
また、スマホ等のマークは
別のアイコンが出ているみたい
https://rakko.tools/tools/69/
上記でsvgを書き出すと、今度は縦長に、
悩んだ結果、元のsvgを正方形のボックスに入れて書き出すとできた
つまり、自動で正方形に変形させるしくみなようで、
今まで辺でなかった理由は、書き出した画像がほぼ正方形だったということもある。
違う形式でイラレで書き出しても同じ
多分、分岐のカラーモード自体がブラックモードと認識されてる
システムのダークモード カラーモードの分岐なようだ
つまりクロームのモードではない
シークレットで白くなったのはバグ？
.cls-1{fill:none;}
@media(prefers-color-scheme: dark) {.cls-2{fill:#fff;}}
@media (prefers-color-scheme: light){.cls-2{fill:#1a1a1a;}}
全部
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 412">
<defs><style>
.cls-1{fill:none;}
@media(prefers-color-scheme: dark) {.cls-2{fill:#fff;}}
@media (prefers-color-scheme: light){.cls-2{fill:#1a1a1a;}}
</style>
</defs>
<g><g><path class="cls-2" d="m117.67,337.01c-20.85-36.35-41.74-72.69-62.57-109.05-8.32-14.52-8.42-29.09-.04-43.66,16.89-29.38,33.77-58.78,50.64-88.18,5.07-8.84,10.11-17.69,15.17-26.56-6.58-10.98-12.95-21.59-19.63-32.74C68.68,93.56,36.47,149.68,4.08,206.12c32.5,56.63,64.93,113.13,97.82,170.44,6.51-12.03,12.54-23.19,18.58-34.37-1.04-1.92-1.89-3.57-2.81-5.18Zm169.31-198.13h29.53c.65-15.81-4.5-28.78-16.82-38.33-12.41-9.62-26.44-11.04-40.56-4.78-20.16,8.94-28.56,25.97-29.3,47.13-.64,18.41-.59,36.83-.87,55.25-.03,1.82-.2,3.63-.34,5.98-8.53-.66-16.58-1.29-24.89-1.94v22.23c8.37-.61,16.41-1.2,25.06-1.83-.7,33.32.72,66-5.33,98.46h33.31c-2.04-32.93-4.05-65.5-6.11-98.74,9.56.93,17.61,1.71,25.69,2.5v-23.46c-8.69,1.03-17.05,2.02-26.93,3.19,0-20.4-.07-39.63.07-58.86.02-3.19.59-6.53,1.64-9.55,4.5-12.94,12.68-22.59,26.19-26.5,8.72-2.53,14.72,2.09,14.53,11.1-.09,4.31-1.66,8.61-2.73,12.86-.43,1.7-1.32,3.28-2.16,5.29ZM140.41,62.07c41.62-.03,83.24-.13,124.86-.07,16.52.02,29.16,7.15,37.48,21.54,17.66,30.54,35.27,61.11,52.91,91.66,4.5,7.79,9.06,15.55,13.31,22.84h38.54c-33.06-57.26-65.55-113.53-97.7-169.2H113.45c7.12,11.64,13.74,22.46,20.33,33.24,2.56,0,4.59,0,6.63,0Zm32.55,171.57c-5.7-4.81-10.92-10.51-17.32-14.11-28.9-16.26-60.07.41-63.3,33.43-1.01,10.38.55,20.37,4.35,30.07,9.68,24.7,29.96,38.62,56.31,38.57,12.96-.02,25.92,0,38.89,0,4.4,0,8.8,0,14.15,0-9.24-76.59-7.42-152.46-2.04-228.51h-32.71c1.89,24.25,4.48,48.12,5.42,72.06.93,23.9.2,47.87.2,72.89-1.78-2-2.73-3.36-3.95-4.39Zm2.53,71.06c-9.01,4.98-17.48,3.65-25.91-.05-19.49-8.57-33.86-32.86-30.8-52,2.36-14.79,13.78-22.83,28.46-19.7,11.89,2.53,20.84,9.67,28.12,19.09.68.89,1.27,2.16,1.24,3.24-.31,16.49-.72,32.97-1.12,49.42Zm193.96-90.96c-1.17,1.91-2.08,3.33-2.92,4.79-21.12,36.59-42.2,73.2-63.37,109.76-8.4,14.5-21.11,21.79-37.87,21.79-40.4,0-80.81-.09-121.21-.15-3.54,0-7.08,0-10.66,0-5.77,10.44-11.29,20.42-16.78,30.4-.39.7-.63,1.48-1.21,2.85h194.74c32.61-56.53,65.15-112.95,97.74-169.44h-38.46Z"/><rect class="cls-1" width="412" height="412"/></g></g></svg>
つまり何がベスト？
パソコンのダークモードに対して、アイコンを用意しても、
ブラウザのデザインを変更していたら無効だと伝える。
その上で、svgをダークモードにも対応させる。
サファリはsvgでは駄目なので、
https://rakko.tools/tools/69/
で正方形のsvgをpngにかえ、設置する。
ここの色は3個選択肢がある。
背景白のロゴにするか
背景なしのロゴにするか
また、ロゴがクロの場合、白という選択もある。
アップルタッチアイコンを優先するなら背景白
ロゴがクロの場合は、背景白をつけたほうがいいか
カラーロゴは背景ない方がブックマークなどはかっこいいと思うが、背景白がいいのかな？トータル