メインコンテンツまでスキップ

テーマ

Abukuma CSS ではテーマの切り替えが可能です。デフォルトは marine-light であり、data-theme=<theme名> の property を付与することで、その配下の DOM に該当のテーマが当たります。property はネストすることも可能です。

<body>
  <div>
    <button class="ab-Button">marine-light Button</button>
    <div data-theme="marine-dark">
      <button class="ab-Button">marine-dark Button</button>
      <div data-theme="skeleton-light">
        <button class="ab-Button">skeleton-light Button</button>
        <div data-theme="coral-light">
          <button class="ab-Button">coral-light Button</button>
        </div>
      </div>
    </div>
  </div>
</body>

テーマごとの background-color​

Abukuma CSS は特定の background-color をベースにデザインされています。そのため、body タグに近い場所に background-color を設定してください。

<body class="ab-bg-base">
  HTML の中身がきます
</body>

Skeleton テーマのブランドカラー変更​

Skeleton テーマは顧客企業のブランドカラー利用を想定しています。ブランドカラーの変更方法は、該当の CSS 変数を上書きすることで達成できます。

body {
  --ab-semantic-color-brand-dark: darkblue;
  --ab-semantic-color-brand-default: blue;
  --ab-semantic-color-brand-light: skyblue;
  --ab-semantic-color-brand-lighter: lightskyblue;
  --ab-semantic-color-brand-lightest: aliceblue;
}