続：oklch() の写経 | 株式会社トラスト

前回に続いて 37Signals の開発ブログで紹介されていた色の扱いの箇所を写経してみました。

app/assets/stylesheets/colors.css に :root が書かれています。
以下、コメントを抜き出したものです。

:root {
  /* Named color values */
  /* Abstractions */
  /* Redefine named color values for dark mode */
}

Named color values はライトモードの色を定義しています。
Abstractions はテキストやボーダー色を定義しています。
Redefine named color values for dark mode はダークモード用に色を再定義しています。

ライトモードの色を Playground | MDN で確認します。

HTML

<div style="background-color: oklch(var(--lch-black))"></div>
<div style="background-color: oklch(var(--lch-white))"></div>
<br />
<div style="background-color: oklch(var(--lch-gray))"></div>
<div style="background-color: oklch(var(--lch-gray-dark))"></div>
<div style="background-color: oklch(var(--lch-gray-darker))"></div>
<br />
<div style="background-color: oklch(var(--lch-blue))"></div>
<div style="background-color: oklch(var(--lch-blue-light))"></div>
<div style="background-color: oklch(var(--lch-blue-dark))"></div>
<br />
<div style="background-color: oklch(var(--lch-orange))"></div>
<div style="background-color: oklch(var(--lch-red)"></div>
<div style="background-color: oklch(var(--lch-green))"></div>
<div style="background-color: oklch(var(--lch-always-black)"></div>

CSS

:root {
  /* Named color values */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 75% 0.005 96;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-orange: 70% 0.2 44;
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;
  --lch-always-black: 0% 0 0;
}
div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

–lch-always-black は -lch-black と同じですので、どのように使っているのか後日調べてみようと思います。

ダークモードでは上記の –lch-always-black と -lch-orange が未定義でした。

以上です。

▼この記事がいいね！と思ったらブックマークお願いします