🌈

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

2022/05/03に公開

CSS

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

色変数の定義を #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ライセンス。

使い方

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

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

動作仕様

追加される変数

例えば、変数--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>
... 略 ...

参考

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