Skip to content

Theme 主题

主题色展示,主题色变量注入根组件,也可以注入某一组件从而实现局部换色

亮色主题

  • color-brand1

    #1D71F0

  • color-brand2

    #2F69BF

  • color-brand3

    #D6E7FF

  • color-brand4

    #DCE8FA

  • color-brand5

    #C4D5EF

  • color-brand6

    #EAF2FF

  • color-red1

    #CC0814

  • color-red2

    #BD000B

  • color-red3

    #E58187

  • color-red4

    #F5B0B5

  • color-red5

    #F09096

  • color-red6

    #FFE5E7

  • color-green1

    #178F3F

  • color-green2

    #007527

  • color-green3

    #76B88C

  • color-green4

    #B2D1BC

  • color-green5

    #9BC7AA

  • color-green6

    #E1FAE9

  • color-orange1

    #F08B26

  • color-orange2

    #DB6E00

  • color-orange3

    #EFB377

  • color-orange4

    #E5C6A5

  • color-orange5

    #E0BB94

  • color-orange6

    #FFF0E0

  • color-blue1

    #1D71F0

  • color-blue2

    #1160D6

  • color-blue3

    #8FB6EF

  • color-blue4

    #B4CCED

  • color-blue5

    #9DC1F5

  • color-blue6

    #DCE8FA

  • color-purple1

    #672DFE

  • color-purple2

    #4D12E5

  • color-purple3

    #B89DFE

  • color-purple4

    #E8E0FE

  • color-purple5

    #DDD2FA

  • color-purple6

    #F3EFFE

  • color-pinkpurple1

    #B71DE8

  • color-pinkpurple2

    #8A04B5

  • color-pinkpurple3

    #D485ED

  • color-pinkpurple4

    #F7E0FF

  • color-pinkpurple5

    #F1D3FB

  • color-pinkpurple6

    #FAEFFE

  • color-magenta1

    #F21DC4

  • color-magenta2

    #BF0497

  • color-magenta3

    #F291DD

  • color-magenta4

    #FFDBF7

  • color-magenta5

    #FAD2F1

  • color-magenta6

    #FFF0FC

  • color-orangered1

    #FF661A

  • color-orangered2

    #E54D00

  • color-orangered3

    #FFA77A

  • color-orangered4

    #FFE7DB

  • color-orangered5

    #FADFD2

  • color-orangered6

    #FFF5F0

  • color-cyan1

    #13C2C2

  • color-cyan2

    #00A8A8

  • color-cyan3

    #74D7D7

  • color-cyan4

    #D7F5F5

  • color-cyan5

    #C9F0F0

  • color-cyan6

    #E6F5F5

  • color-lime1

    #85C405

  • color-lime2

    #679900

  • color-lime3

    #B3E058

  • color-lime4

    #EBF5D7

  • color-lime5

    #E2F0C9

  • color-lime6

    #F0F5E6

  • color-yellow1

    #EBCA46

  • color-yellow2

    #D1B02A

  • color-yellow3

    #EBD88D

  • color-yellow4

    #FFF7D9

  • color-yellow5

    #F9ECBA

  • color-yellow6

    #FFFAE7

  • color-background1

    #42567A

  • color-background2

    #5B6F8F

  • color-background3

    #A2BCE0

  • color-background4

    #8CA3C2

  • color-background5

    #8EABD1

  • color-background6

    #D0DEF2

  • color-background7

    #E5EDF9

  • color-background8

    #F9FBFF

  • color-background9

    #F9FBFF

  • color-background10

    #EAF2FF

  • color-background11

    #D8E6F9

  • color-background12

    #C5D2E5

  • color-background13

    #FFFAE7

  • color-background14

    #587191

  • color-font1

    #071833

  • color-font2

    #2C3E59

  • color-font3

    #7C8BA3

  • color-font4

    #A3AFC2

  • color-font5

    #FFFFFF

  • color-font6

    #566D8F

  • color-font7

    #D3DBEA

  • color-font8

    #F6F6F6

  • color-font9

    #EB959D

  • color-font10

    #A8CDA1

  • spacing-xs

    4px

  • spacing-sm

    8px

  • spacing-md

    12px

  • spacing-lg

    16px

  • spacing-xl

    32px

  • fs12

    12px

  • fs14

    14px

  • fs16

    16px

暗色主题

  • color-brand1

    #1975FF

  • color-brand2

    #4B91FA

  • color-brand3

    #172A47

  • color-brand4

    #21324C

  • color-brand5

    #19427F

  • color-brand6

    #202833

  • color-red1

    #CC3030

  • color-red2

    #F05656

  • color-red3

    #7F2B2B

  • color-red4

    #4C2121

  • color-red5

    #8A3B3B

  • color-red6

    #332020

  • color-green1

    #0C993F

  • color-green2

    #1DB856

  • color-green3

    #197F3E

  • color-green4

    #214C31

  • color-green5

    #357A4F

  • color-green6

    #1A281F

  • color-orange1

    #CC6D00

  • color-orange2

    #E5871C

  • color-orange3

    #7F4F19

  • color-orange4

    #4C3821

  • color-orange5

    #875F31

  • color-orange6

    #33291E

  • color-blue1

    #1E68D6

  • color-blue2

    #4791FF

  • color-blue3

    #19427F

  • color-blue4

    #1B3D70

  • color-blue5

    #3C5B8A

  • color-blue6

    #232E3D

  • color-purple1

    #6432E5

  • color-purple2

    #8152FF

  • color-purple3

    #5325CC

  • color-purple4

    #23066E

  • color-purple5

    #452E82

  • color-purple6

    #0B0221

  • color-pinkpurple1

    #A729CF

  • color-pinkpurple2

    #C146E8

  • color-pinkpurple3

    #901DB5

  • color-pinkpurple4

    #570370

  • color-pinkpurple5

    #702C85

  • color-pinkpurple6

    #1C0124

  • color-magenta1

    #D92BB4

  • color-magenta2

    #F249CE

  • color-magenta3

    #BF1F9D

  • color-magenta4

    #77085F

  • color-magenta5

    #8C3479

  • color-magenta6

    #2B0323

  • color-orangered1

    #E56B2E

  • color-orangered2

    #FF884D

  • color-orangered3

    #CC5A21

  • color-orangered4

    #772B05

  • color-orangered5

    #8C4F30

  • color-orangered6

    #2B1002

  • color-cyan1

    #22A8A8

  • color-cyan2

    #3AC2C2

  • color-cyan3

    #178F8F

  • color-cyan4

    #066C6C

  • color-cyan5

    #2E8080

  • color-cyan6

    #021F1F

  • color-lime1

    #6B911D

  • color-lime2

    #84AB33

  • color-lime3

    #577813

  • color-lime4

    #4D7006

  • color-lime5

    #68852E

  • color-lime6

    #182402

  • color-yellow1

    #A88D22

  • color-yellow2

    #CCAF3D

  • color-yellow3

    #9B821C

  • color-yellow4

    #7A6305

  • color-yellow5

    #8F7C31

  • color-yellow6

    #2E2502

  • color-background1

    #333538

  • color-background2

    #1D1D1F

  • color-background3

    #494A4D

  • color-background4

    #63656C

  • color-background5

    #404042

  • color-background6

    #2E2F33

  • color-background7

    #212225

  • color-background8

    #121214

  • color-background9

    #121214

  • color-background10

    #182333

  • color-background11

    #232529

  • color-background12

    #484C52

  • color-background13

    #2E2502

  • color-background14

    #494A4D

  • color-font1

    #F6F6F6

  • color-font2

    #CFD0D1

  • color-font3

    #63656C

  • color-font4

    #54555C

  • color-font5

    #FFFFFF

  • color-font6

    #B7B7B8

  • color-font7

    #B7B7B8

  • color-font8

    #8F8F8F

  • color-font9

    #D19191

  • color-font10

    #82BC98

更新时间::