Material Theme BuilderでエクスポートしたCSS変数をささっと使う
ささっと使います。
下準備
以下のことを確認します。
Material Theme BuilderからエクスポートしたZIPファイルの中身
css\
css\dark.css
css\dark-mc.css
css\dark-hc.css
css\light.css
css\light-mc.css
css\light-hc.css
このような構成になっていない場合、現在（2024/07/24）よりも古いまたは新しいバージョンのMaterial Theme BuilderでエクスポートしたCSSである可能性があります。
実際の手順
1. ＜html＞にクラスを追加
html要素のクラスにlight darkを追加します。dark lightでもいいです。
コントラスト違いを選ぶ場合、*-medium-contrastまたは*-high-contrastにします。
<!DOCTYPE html>
<html class="light dark">
<head>2. 別のCSSファイルに@importする
コントラスト違いを選んだ場合はそれに合わせてパスを修正します。
@import url(./dark.css) (prefers-color-scheme: dark);
@import url(./light.css) (prefers-color-scheme: light);3. HAPPY😊
これでCSS変数が使えるようになります。
あとがき
ちょっと力業っぽい気もしますが、テーマの変更が楽なのでオッケーかなと思います。
この記事が気に入ったらサポートをしてみませんか？