カラー
| Description | Swatch | Variables |
|---|---|---|
| Body — コンポーネントを含むデフォルトの前景（色）と背景。 |
|
--bs-body-color--bs-body-color-rgb
|
|
|
--bs-body-bg--bs-body-bg-rgb
|
|
Secondary — テキストを薄くするにはcolorオプションを使う。bgオプションは、仕切りや無効なコンポーネントの状態を示すのに使用する。
|
|
--bs-secondary-color--bs-secondary-color-rgb
|
|
|
--bs-secondary-bg--bs-secondary-bg-rgb
|
|
Tertiary — colorオプションでテキストをさらに明るく。ホバー状態、アクセント、ウェルの背景をスタイルするには、bgオプションを使用する。
|
|
--bs-tertiary-color--bs-tertiary-color-rgb
|
|
|
--bs-tertiary-bg--bs-tertiary-bg-rgb
|
|
| Emphasis — コントラストの高いテキスト用。背景には使用できない。 |
|
--bs-emphasis-color--bs-emphasis-color-rgb
|
Border — コンポーネントのボーダー、仕切り、罫線用。--bs-border-color-translucentを使用すると、rgba()値を持つ背景と調和する。
|
|
--bs-border-color--bs-border-color-rgb
|
| Primary — メインテーマの色で、ハイパーリンク、フォーカススタイル、コンポーネントやフォームのアクティブ状態に使用する。 |
|
--bs-primary--bs-primary-rgb
|
|
|
--bs-primary-bg-subtle
|
|
|
|
--bs-primary-border-subtle
|
|
|
Text
|
--bs-primary-text-emphasis
|
|
| Success — ポジティブな行動や成功した情報に使われるテーマカラー。 |
|
--bs-success--bs-success-rgb
|
|
|
--bs-success-bg-subtle
|
|
|
|
--bs-success-border-subtle
|
|
|
Text
|
--bs-success-text-emphasis
|
|
| Danger — エラーや危険な行為に使われるテーマカラー。 |
|
--bs-danger--bs-danger-rgb
|
|
|
--bs-danger-bg-subtle
|
|
|
|
--bs-danger-border-subtle
|
|
|
Text
|
--bs-danger-text-emphasis
|
|
| Warning — 非破壊警告メッセージに使用されるテーマカラー。 |
|
--bs-warning--bs-warning-rgb
|
|
|
--bs-warning-bg-subtle
|
|
|
|
--bs-warning-border-subtle
|
|
|
Text
|
--bs-warning-text-emphasis
|
|
| Info — 中立的で有益なコンテンツに使用されるテーマカラー。 |
|
--bs-info--bs-info-rgb
|
|
|
--bs-info-bg-subtle
|
|
|
|
--bs-info-border-subtle
|
|
|
Text
|
--bs-info-text-emphasis
|
|
| Light — コントラストを抑えた色のテーマオプションを追加。 |
|
--bs-light--bs-light-rgb
|
|
|
--bs-light-bg-subtle
|
|
|
|
--bs-light-border-subtle
|
|
|
Text
|
--bs-light-text-emphasis
|
|
| Dark — コントラストを強くするテーマオプションを追加。 |
|
--bs-dark--bs-dark-rgb
|
|
|
--bs-dark-bg-subtle
|
|
|
|
--bs-dark-border-subtle
|
|
|
Text
|
--bs-dark-text-emphasis
|