Attributes
use-bootstrap の コンポーネントにおける、カラーの属性について説明します。
Color
コンポーネントの背景色、テキストカラー、ボーダーカラーを一括して変更します。
一部のコンポーネントで設定可能です。
<template>
<Alert color="info">
A simple info
</Alert>
<Dropdown>
<DropdownToggle color="primary-subtle">
primary-subtle
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Badge
color="green-100"
padding="3"
margin="y-3"
>
green-100
</Badge>
</template>
See Also
Text and Background
コンポーネントの背景色とテキストカラーを一括して変更します。
<template>
<b-div
text-background="primary"
padding="3"
margin="b-3"
>
primary
</b-div>
<b-div
text-background="primary-subtle"
padding="3"
margin="b-3"
>
primary-subtle
</b-div>
<b-div
text-background="cyan-100"
padding="3"
margin="b-3"
>
cyan-100
</b-div>
</template>
See Also
Text Color
コンポーネント内の文字色のみを設定します。
<template>
<b-div
text-color="primary"
padding="3"
margin="b-3"
>
primary
</b-div>
<Spinner text-color="success" />
</template>
See Also
Background Color
コンポーネント内の背景色のみを設定します。
<template>
<b-div
background-color="primary"
text-color="light"
padding="3"
margin="b-3"
>
primary
</b-div>
</template>
See Also
Border Color
コンポーネントのボーダー色のみを設定します。
See Also
Colors
Bootstrap 5 Theme Colors
BootstrapのThemeカラーは Sass でカスタマイズ可能です。
Light Mode
Dark Mode
Subtle Theme Colors
Subtle テーマカラーはダークモードに対応しています。
Light Mode
Dark Mode
Body colors
Body テーマカラーはダークモードに対応しています。
Light Mode
Dark Mode
Text colors
テキストカラーは背景色に応じて使用するようにしてください。
Light Mode
Dark Mode
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
Extend Color
All
use-bootstrapはカラージェネレータを搭載しており、指定された色を動的にスタイルに設定します。
テキストカラーは高コントラスト色が自動的に選択されます。必要に応じて設定を上書きしてください。