CSS変数の値を変更するだけで自由にテーマカラーを変えていく方法について見ていきます。
- CSS変数の導入
- テーマカラーの変更
- ボタンの配色
CSS変数の導入
・前回の続きをやっていきます。:root に対して、 --my-hue を宣言してあげます。前回同様に緑の指定をしたい場合は—my-hue: 100;と色相をしていきます。
https://teatree-blog.com/955/css/
・あとは var() 関数で色相を置き換えていきます。色相が100になっているところをvar(--my-hue)に置き換えて行くことによって変数として書くことができます。
テーマカラーの変更
・テーマカラーは色相を変えれば全体のテーマカラーも変わるので—my-hue:の値を好きな色相に変えるだけでOKです。
・例えば色相を200に変更した場合青っぽい色合いになります。
ボタンの配色
・ボタンなどのユーザーアクションが起こるところでは、アクセントカラーを使えば良いので、たとえば、真反対の補色にしたいなら、色相を色相環の反対側にすれば良いので 180 度足すとまた印象が変わります。
・calc(var(--my-hue) + 180) としてあげると反対色のボタンを作ることができます。
-広告-
|
|