ダークモードにも柔軟に対応できるCSS&Sass変数のカラー設定方法
CSS変数とSass(Scss)変数を利用してダークモードになった時の配色などを自動で変更することができます。 例えばテーマボタンをクリックしたら<html>にJavaScriptでdata-theme="dark"という属性を追加し、そのdata属性を判定してダークモードの切り替えを実装する場合のCSS&Sassの設定を紹介します。 基本的なダークモードの設定方法 まずはライトモード（通常表示）用の$theme-colorsとダークモード用の$dark-theme-colorsというSass変数に配列で各カラーコードを定義していきます。 そしてSass機能の@each文で$theme-colorsを:root {}内にループ処理で出力していきます。 出力結果は--color-primary、--color-secondaryのようにCSS変数で出力され、ダークモードの時は&[data-t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
えっ！？まだ色の指定でrgba()関数を使っているの！？ – TAKLOG
https://www.web-development-kb-ja.site/ja/css/css%E3%82%AB%E3%83%A9%E3%83%BC%E5%A4%89%E6%95%B0%E3%81%AB%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E3%82%92%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/827803529/
