🌈

CSS(カスタムプロパティ)の色変数のバリエーションを自動的に増やす

2022/05/03に公開約2,200字

色の変数を定義するのめんどくさい

色変数の定義を #ffffff でしたものを 255,255,255 として利用したいことがあります。
以下のように、、、

:root {
  --primary: #0277bd; /* この色を */
}
.primary.disabled {
  /* NG: アルファチャンネル変更して利用したいができない! */
  background-color: rgba(var(--primary), .8); 
}

そのままでは上手く行きません。
変数を新たに追加して対応します。

:root {
  --primary: #0277bd;
  --primary-rgb: 2,119,189; /* --primary の色成分を10進数化 */
}
.primary.disabled {
  /* OK: できます! */
  background-color: rgba(var(--primary-rgb), .8);
}

ですが、この方法で対応は可能ですが、

  • RGBの変換めんどくさい
  • 他にもHSLも使いたい
  • 色変えた時やり直し?

めんどくさいことはコンピュータに任せよう

ということで--primary-rgbなどを自動的に生成するJavaScript書きました。MITライセンス。

https://github.com/Harurow/zenn-sample-web-component/blob/main/src/components/extendCustomProperties.js

使い方

このファイルをコピーして188-195行目に定義している target_property_names 変数を書き換えて利用してください。

デフォルトでは以下の6つの変数が定義されています。※ 変数の--が省略されて定義されています。

https://github.com/Harurow/zenn-sample-web-component/blob/main/src/components/extendCustomProperties.js#L188-L195

動作仕様

追加される変数

例えば、変数--primary

--primary: #0277bd;

のように定義されています。
これを対象とした場合以下の変数が追加されます。

--primary-rgb: 2,119,189;             /* rgb成分の10進数 */
--primary-contrast: #ffffff;          /* 明るさから文字用の色を定義 */
--primary-contrast-rgb: 255,255,255;  /* 文字用のrgb成分の10進数 */
--primary-h: 202;                     /* Hue: 色相(0-360)  */
--primary-s: 98%;                     /* Saturation: 彩度(0-100%) */
--primary-l: 37%;                     /* Lightness: 明るさ(0^100%) */

追加される場所

<style>タグを作成して追加した変数をこのタグに含めます。
作成された<style>タグは<head>タグの最後の要素に追加します。

... 略 ...
<head>
  ... 略 ...
  <link rel="stylesheet" href="css/style.css"> <!-- このスタイルシートでベースの色を定義 -->
  <script src="components/extendCustomProperties.js"></script> <!-- 今回のソース -->
  <style x-extend-custom-properties>...略...</style> <!-- この行が増えます -->
<head>
... 略 ...

参考

追加する変数は以下の記事を参考にさせていただきました。

https://zenn.dev/rdlabo/articles/1e80620bf432e4eb09f6

Discussion

ログインするとコメントできます