CSSのcurrentColorを使ってもっと簡単に色を指定する

currentColor キーワードとは

currentColor キーワードは color プロパティの値を表すキーワードです。<color> 値を受け入れるプロパティで利用できます。

• https://www.w3.org/TR/css-color-3/#currentcolor
• https://developer.mozilla.org/ja/docs/Web/CSS/color_value#currentcolor_keyword

例えば、color: #ff000 なら、currentColor は #ff0000 になります。

<div>
  Lorem Ipsum
  <div class="child"></div>
</div>

div {
  color: #ff0000;
}
.child {
  background: currentColor;
  height: 10px;
}

ユースケース

線の色を文字の色に揃えたい

border-color プロパティの初期値は currentColor なので指定は不要です。この例だとborder-colorは #ff0000 、つまり赤色になります。

div {
  color: #ff0000;
  border: 1px solid;
}

書いても同じですね。

div {
  color: #ff0000;
  border: 1px solid currentColor;
}

SVGの色を文字の色に揃えたい

currentColorキーワードはSVGでも使えてけっこう嬉しいです。アイコンなど単純な形の場合、それを文字色に合わせたいことが多いですね。

下記の例ではまるっとSVGをHTMLに書いていますが、普通は別のファイルに切り出して、importなりincludeなりするものでしょう。そんなときに、毎回色に関するパラメータを渡すとか、都度CSSで指定するということをしなくても良くなります。

<div>
  Lorem Ipsum
  <br />
  <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg">
    <circle cx="15" cy="13.75" fill="currentColor" r="12"/>
    <path d="m4 27.75h22" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
  </svg>
</div>

div {
  color: #ff0000;
}

currentColorキーワードはSVG1.0よりこれらのプロパティで利用ができます。

• fill
• stroke
• stop-color
• flood-color
• lighting-color

テーマ機能がある場合に指定を容易にしたい

Webサイトによっては、ユーザーにカラーテーマ機能を提供することがあるでしょう。ふたつみっつのテーマしかなくて、指定する箇所も少ないのだったら、手で色を指定しても良いですが、それでもできるだけ指定する箇所は少なくしたいものです。

テーマの数が何十、何百となったり、指定すべき箇所が多くなったら、もう手に負えません。そんなときに currentColor が役に立つはずです。

実際に私が関わったプロダクトでは、ユーザーが背景色と文字色を自由に指定できる機能を作りました。黒色のSVG画像がページ内にある状態で背景色が黒色に指定されたらどうするのか？　それもSVGはひとつではなく何個もあるわけです。

すべてのSVGにユーザーが指定した文字色を指定するのも良いですが、そのためのコードを書き続けるのは骨の折れる仕事です。メンテナンス性も落ちるでしょう。そこで私はSVGにcurrentColorを指定する方法を選びました。

なんども同じ色を指定していることに気がついたら currentColor キーワードが使えないか、検討してみてください。