エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント1件
- 注目コメント
- 新着コメント
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSS variables によるダークモード対応
CSS variables によるダークモード対応タイトルの通り、このサイトをダークモード対応した。 このブログ... CSS variables によるダークモード対応タイトルの通り、このサイトをダークモード対応した。 このブログは React と CSS-in-JS ライブラリである Linaria で実装されているが、 結果として JS 側で特別なことをせず、ほとんど CSS だけでダークモード対応を実現している。 実装 実装は大きく3ステップ。 システム設定に合わせた Light / Dark 出し分け ユーザによる Light / Dark 切り替えサポート ユーザによる Light / Dark 切り替えの永続化 最初のステップだけだと prefers-color-scheme を見て色を出し分けるだけでいいので単純だが、それ以降はそんなに自明ではない。 やりたいのは「Light 用と Dark 用の2つの色定義セットを用意して、それを何らかの手段で切り替える」ということ。 この切り替え動作をど
2022/03/14 リンク