CSS

テーマカラーの変更

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)　としてあげると反対色のボタンを作ることができます。

-広告-

 

 






-CSS