この記事の概要
CSS の currentColor は、その要素の color を引き継いで色を指定することができます。
文字とまったく同じ色のボーダーを引きたいとか、アイコンの色指定をしたい、というときはかなり重宝するのですが「少しだけ薄くしたい」みたいな場面もあると思います。
上手いことできないかな？と思っていたら、それなりに上手いことできたので記事にしました。
完成形
上から順に黒、赤、青のテキストが並んでいて、それぞれの文字色より少し薄い色でボーダーを引いてあります。
ボーダー指定をしているのは p のみで、それぞれのクラスでは何も触っていません。
See the Pen Untitled by Keisuke Watanuki (@xrxoxcxox) on CodePen.
仕組み
color-mix() を使用します。
書式の見本
background-color: color-mix(in srgb, #f00 30%, #000); /* in 色空間, 1つ目の色 濃さ（省略可能）, 2つ目の色 濃さ（省略可能） */
この色指定に currentColor も使えるため、#fff や #000 あるいは transparent などと組み合わせることで、今の color を基準に調整した色を背景色やボーダー色にも使えるようになります。
色が違うだけのユーティリティクラスを作らずに済みそうで、多少効率化が図れるような気がしています。
最後に
こういう色を作るときは視覚調整が必要がちで、既存のカラーパレットから少しだけ違う色を生み出さないといけない……ってパターンも見かけます。
ただ、 currentColor がベースであれば堅牢性や保守性の意味で多少マシな気がするので、どこかで使えるかもしれません。
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！
Devトークでお話してくださる方も募集中です！