カスタマイズの選び方

Lism CSS は、色や余白の値、使えるクラス、ブレイクポイント（レイアウトを切り替える画面の幅）などを、自分のサイトに合わせて変えられます。このページでは、どの方法を選べばよいかを説明します。

どんなときに使う？#

• サイトの色（ブランドの色）を、決まった色に変えたいとき
• 自分で使う値（たとえば -p:box）を、クラスとして足したいとき
• xs・xl のブレイクポイントを使えるようにしたいとき
• 本番の CSS ファイルを小さくしたいとき

方法は4つ#

lism.config.js と SCSS 変数は、どちらか片方を選びます。どちらを使うかは、サイトをどうやってビルド（組み立て）しているかで決まります。CSS Purge は、そのどちらとも一緒に使えます。

lism.config.js を選ぶ#

lism.config.js は、設定を書いておく JavaScript のファイルです。使うには @lism-css/plugin というパッケージが必要です。

• Vite・Astro・Next.js なら、ビルドのときに設定が自動で CSS に入ります
• それ以外の構成では、付いてくる CLI（コマンドで動かす道具）で CSS を作り直します
• 足した値は、React・Astro のコンポーネントからもそのまま使えます

SCSS 変数を選ぶ#

lism.config.js を使わず、lism-css/scss を自分の SCSS から直接読み込む構成で使います。SCSS で足した値はコンポーネントには伝わらないので、コンポーネントからは : を付けた書き方（p=":box"）で使います。

CSS Purge を足す#

CSS Purge は、ビルドしたあとのファイルを調べて、実際に使っている Lism のクラスだけを残すしくみです。上の2つのどちらとも一緒に使えます。

CSS 変数を上書きして色を変える#

いちばん手軽な方法です。Lism の色は CSS 変数（--brand のような、あとから中身を差し替えられる値）で決まっています。自分の CSS で :root（ページ全体のいちばん外側）の変数を書き直すと、その色を使うクラスがまとめて変わります。

サイトの色を変える#

ブランドの色・アクセントの色・リンクの色などは、名前の付いた色（セマンティックカラー）です。サイトの色に合わせて上書きできます。

:root {
  --brand: #1e5f8c;
  --accent: #d94a6a;
  --link: oklch(50% 0.3 240);
}

表示例では、箱に style="--brand: …" を付けて、その中だけ --brand を変えています。同じ -bgc:brand でも、色が変わるのが分かります。

<div class="l--stack -g:10">
  <div class="-p:20 -bgc:brand -c:base -fz:l -fw:700">ふつうの brand</div>
  <div style="--brand: #1e5f8c">
    <div class="-p:20 -bgc:brand -c:base -fz:l -fw:700">上書きした brand</div>
  </div>
</div>

色のトークンの一覧は 色のトークン にあります。

ダークモードで全体の色味を変える#

赤・青・緑などのパレットの色は、OKLCH という色の表し方で作られています。--L（明るさ）と --C（あざやかさ）の2つの変数をもとに計算されています。だから、この2つを変えるだけで、パレットの色味がまとめて変わります。ただし --black と --white は決まった値なので、変わりません。

:root[data-theme='dark'] {
  --L: 72%;
  --C: 0.22;
}

この例では、html に data-theme="dark" が付いたときだけ、明るく、少しあざやかにしています。

関連するページ#

• lism.config.js で設定する
• SCSS で設定する
• 使わない CSS を消す（CSS Purge）
• 色のトークン
• CSS ファイルの種類