色彩

颜色-Bootstrap 5和Material Design 2.0

MDB得到了以我们的样式和样式为主题的广泛的Material Design颜色系统的支持。 组件。这样可以对任何项目进行更全面的自定义和扩展。


主题

我们使用所有颜色的子集来创建较小的调色板以生成配色方案, 也可以作为Bootstrap的Sass变量和Sass映射 scss / free / _variables.scss 文件。

Primary (#1266F1)
Secondary (#B23CFD)
Success (#00B74A)
Danger (#F93154)
Warning (#FFA900)
Info (#39C0ED)
Light (#FBFBFB)
Dark (#262626)

所有这些颜色都可以作为Sass地图使用,$theme-colorsscss/free/_variables.scss 文件。

 
          $theme-colors: (
            "primary":    $primary,
            "secondary":  $secondary,
            "success":    $success,
            "info":       $info,
            "warning":    $warning,
            "danger":     $danger,
            "light":      $light,
            "dark":       $dark
          );
        

注意:主题颜色也可用作CSS类。你可以用 直接在您的项目中,而无需编译scss代码。看下面的例子。

背景

使用 .bg-* 颜色类别轻松设置背景

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark


            <div class="bg-primary"></div>
            <div class="bg-secondary"></div>
            <div class="bg-success"></div>
            <div class="bg-danger"></div>
            <div class="bg-warning"></div>
            <div class="bg-info"></div>
            <div class="bg-light"></div>
            <div class="bg-dark"></div>

            

文本

使用颜色实用程序为文本着色。

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50


      
            <p class="text-primary">.text-primary</p>
            <p class="text-secondary">.text-secondary</p>
            <p class="text-success">.text-success</p>
            <p class="text-danger">.text-danger</p>
            <p class="text-warning bg-dark">.text-warning</p>
            <p class="text-info bg-dark">.text-info</p>
            <p class="text-light bg-dark">.text-light</p>
            <p class="text-dark">.text-dark</p>
            <p class="text-body">.text-body</p>
            <p class="text-muted">.text-muted</p>
            <p class="text-white bg-dark">.text-white</p>
            <p class="text-black-50">.text-black-50</p>
            <p class="text-white-50 bg-dark">.text-white-50</p>
      
            

组件

我们还将主题颜色用作某些组件(例如按钮)的预定义颜色。


      
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
      
            

全调色板

所有MDB颜色都可以作为Sass变量和Sass映射在 scss / free / _variables.scss 文件。为避免文件大小增加,我们不会创建 每个变量的文本或背景颜色类。相反,我们选择 这些颜色用于主题调色板

自定义颜色时,请确保监视对比度。如下所示,我们添加了三个 每种主要颜色的对比度-一种用于色板当前的颜色,一种用于 反对白色,反对黑色。

Red 50 #FFEBEE

100 #FFCDD2

200 #EF9A9A

300 #E57373

400 #EF5350

500 #F44336

600 #E53935

700 #D32F2F

800 #C62828

900 #B71C1C

A100 #FF8A80

A200 #FF5252

A400 #FF1744

A700 #D50000

Pink 50 #FCE4EC

100 #F8BBD0

200 #F48FB1

300 #F06292

400 #EC407A

500 #E91E63

600 #D81B60

700 #C2185B

800 #AD1457

900 #880E4F

A100 #FF80AB

A200 #FF4081

A400 #F50057

A700 #C51162

Purple 50 #F3E5F5

100 #E1BEE7

200 #CE93D8

300 #BA68C8

400 #AB47BC

500 #9C27B0

600 #8E24AA

700 #7B1FA2

800 #6A1B9A

900 #4A148C

A100 #EA80FC

A200 #E040FB

A400 #D500F9

A700 #AA00FF

Deep Purple 50 #EDE7F6

100 #D1C4E9

200 #B39DDB

300 #9575CD

400 #7E57C2

500 #673AB7

600 #5E35B1

700 #512DA8

800 #4527A0

900 #311B92

A100 #B388FF

A200 #7C4DFF

A400 #651FFF

A700 #6200EA

Indigo 50 #E8EAF6

100 #C5CAE9

200 #9FA8DA

300 #7986CB

400 #5C6BC0

500 #3F51B5

600 #3949AB

700 #303F9F

800 #283593

900 #1A237E

A100 #8C9EFF

A200 #536DFE

A400 #3D5AFE

A700 #304FFE

Blue 50 #E3F2FD

100 #BBDEFB

200 #90CAF9

300 #64B5F6

400 #42A5F5

500 #2196F3

600 #1E88E5

700 #1976D2

800 #1565C0

900 #0D47A1

A100 #82B1FF

A200 #448AFF

A400 #2979FF

A700 #2962FF

Light Blue 50 #E1F5FE

100 #B3E5FC

200 #81D4FA

300 #4FC3F7

400 #29B6F6

500 #03A9F4

600 #039BE5

700 #0288D1

800 #0277BD

900 #01579B

A100 #80D8FF

A200 #40C4FF

A400 #00B0FF

A700 #0091EA

Cyan 50 #E0F7FA

100 #B2EBF2

200 #80DEEA

300 #4DD0E1

400 #26C6DA

500 #00BCD4

600 #00ACC1

700 #0097A7

800 #00838F

900 #006064

A100 #84FFFF

A200 #18FFFF

A400 #00E5FF

A700 #00B8D4

Teal 50 #E0F2F1

100 #B2DFDB

200 #80CBC4

300 #4DB6AC

400 #26A69A

500 #26A69A

600 #00897B

700 #00796B

800 #00695C

900 #004D40

A100 #A7FFEB

A200 #64FFDA

A400 #1DE9B6

A700 #00BFA5

Green 50 #E8F5E9

100 #C8E6C9

200 #A5D6A7

300 #81C784

400 #66BB6A

500 #4CAF50

600 #43A047

700 #388E3C

800 #2E7D32

900 #1B5E20

A100 #B9F6CA

A200 #69F0AE

A400 #00E676

A700 #00C853

Light Green 50 #F1F8E9

100 #DCEDC8

200 #C5E1A5

300 #AED581

400 #9CCC65

500 #8BC34A

600 #7CB342

700 #689F38

800 #558B2F

900 #33691E

A100 #CCFF90

A200 #B2FF59

A400 #76FF03

A700 #64DD17

Lime 50 #F9FBE7

100 #F0F4C3

200 #E6EE9C

300 #DCE775

400 #D4E157

500 #CDDC39

600 #C0CA33

700 #AFB42B

800 #9E9D24

900 #827717

A100 #F4FF81

A200 #EEFF41

A400 #C6FF00

A700 #AEEA00

Yellow 50 #FFFDE7

100 #FFF9C4

200 #FFF59D

300 #FFF176

400 #FFEE58

500 #FFEB3B

600 #FDD835

700 #FBC02D

800 #F9A825

900 #F57F17

A100 #FFFF8D

A200 #FFFF00

A400 #FFEA00

A700 #FFD600

Amber 50 #FFF8E1

100 #FFECB3

200 #FFE082

300 #FFD54F

400 #FFCA28

500 #FFC107

600 #FFB300

700 #FFA000

800 #FF8F00

900 #FF6F00

A100 #FFE57F

A200 #FFD740

A400 #FFC400

A700 #FFAB00

Orange 50 #FFF3E0

100 #FFE0B2

200 #FFCC80

300 #FFB74D

400 #FFA726

500 #FF9800

600 #FB8C00

700 #F57C00

800 #EF6C00

900 #E65100

A100 #FFD180

A200 #FFAB40

A400 #FF9100

A700 #FF6D00

Deep Orange 50 #FBE9E7

100 #FFCCBC

200 #FFAB91

300 #FF8A65

400 #FF7043

500 #FF5722

600 #F4511E

700 #E64A19

800 #D84315

900 #BF360C

A100 #FF9E80

A200 #FF6E40

A400 #FF3D00

A700 #DD2C00

Brown 50 #EFEBE9

100 #D7CCC8

200 #BCAAA4

300 #A1887F

400 #8D6E63

500 #795548

600 #6D4C41

700 #5D4037

800 #4E342E

900 #3E2723

Gray 50 #FAFAFA

100 #F5F5F5

200 #EEEEEE

300 #E0E0E0

400 #BDBDBD

500 #9E9E9E

600 #757575

700 #616161

800 #424242

900 #212121

Blue Gray 50 #ECEFF1

100 #CFD8DC

200 #B0BEC5

300 #90A4AE

400 #78909C

500 #607D8B

600 #546E7A

700 #455A64

800 #37474F

900 #263238

Black #000000

White #FFFFFF