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
- カード > Background And Color
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
Theme
ダークモード・ライトモード、または独自ののテーマカラーを部分的に使用します。
Light Mode
Dark Mode
<template>
<Row text-alignment="center">
<Col><h5>Light Mode</h5></Col>
<Col><h5>Dark Mode</h5></Col>
</Row>
<Row>
<Col
theme="light"
text-alignment="center"
>
<Dropdown>
<DropdownToggle color="secondary">
Dropdown button
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/">
Action
</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<Col
theme="dark"
text-alignment="center"
>
<Dropdown>
<DropdownToggle color="secondary">
Dropdown button
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/">
Action
</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
</Row>
</template>
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
primary
primary-emphasis
secondary
secondary-emphasis
success
success-emphasis
danger
danger-emphasis
warning
warning-emphasis
info
info-emphasis
light
light-emphasis
dark
dark-emphasis
body
body-emphasis
body-secondary
body-tertiary
black
white
black-50
white-50
primary
primary-emphasis
secondary
secondary-emphasis
success
success-emphasis
danger
danger-emphasis
warning
warning-emphasis
info
info-emphasis
light
light-emphasis
dark
dark-emphasis
body
body-emphasis
body-secondary
body-tertiary
black
white
black-50
white-50
Extend Color
All
use-bootstrapはカラージェネレータを搭載しており、指定された色を動的にスタイルに設定します。
テキストカラーは高コントラスト色が自動的に選択されます。必要に応じて設定を上書きしてください。