「おい、ダークモードには対応していないのか?」と、誰かから言われたり言われなかったり。
で、調べてみたらCSSとJSで良さげなのが見つかったので備忘録代わりに
CSS
@media(prefers-color-scheme:light){/* ライトモード用CSS */}@media(prefers-color-scheme:dark){/* ダークモード用CSS */}
CSSの場合、まだ草案段階なので、ダークモードだけ@media
を使っていくのが良さげ
対応率も良さげ(低いが、ダークモード対応端末だけで見るとよい割合な気がする。)
JavaScript
if(window.matchMedia('(prefers-color-scheme: dark)').matches){document.write('ダークモードだよ');}elseif(window.matchMedia('(prefers-color-scheme: light)').matches){document.write('違うな');}else{document.write('何者だ?');}
まとめ
なんか、業界見直したっす