Themes
Take full control of all the colors
Light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #545454 |
| Border | #545454 |
| Secondary button | |
|---|---|
| Foreground | #1E1A33 |
| Background | #EB8CA1 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #1E1A33 |
| Background | hsl(346.74, 70%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light"></div>
|
Pink text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #EB8CA1 |
| Background | transparent |
| Accent | #EB8CA1 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #EB8CA1 |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(346.74, 70%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #EB8CA1 |
| Background | transparent |
| Border | #EB8CA1 |
| Secondary button hover | |
| Foreground | #EB8CA1 |
| Background | transparent |
| Border | #EB8CA1 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme pink-accent"></div>
|
Purple accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | #5354A4 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5354A4 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(239.26, 33%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #5354A4 |
| Background | transparent |
| Border | #5354A4 |
| Secondary button hover | |
| Foreground | #5354A4 |
| Background | transparent |
| Border | #5354A4 |
| Link button | |
|---|---|
| Link color | #5354A4 |
| Link button hover | |
| Link hover color | hsl(239.26, 33%, 40%) |
| Implementation |
<div class="theme accent-purple"></div>
|
Pink background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #EB8CA1 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Border | #000000 |
| Secondary button hover | |
| Foreground | #000000 |
| Background | transparent |
| Border | #000000 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #000000 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme pink-bg"></div>
|
Purple background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5354A4 |
| Accent | #343A40 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #343A40 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(210, 10%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #5354A4 |
| Background | #EDE6FF |
| Border | #EDE6FF |
| Secondary button hover | |
| Foreground | #5500FF |
| Background | #EDE6FF |
| Border | #5500FF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme accent-dark"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0D0E10 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #343A40 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #343A40 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme footerblack"></div>
|
Black
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0D0E10 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #0D0E10 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #0D0E10 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0D0E10 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(220, 10%, 40%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme black"></div>
|
Light transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparent"></div>
|
Dark transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-transparent"></div>
|
Light gray
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gray"></div>
|
Gray border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gray-border"></div>
|
Red text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #A81919 |
| Background | transparent |
| Accent | #A81919 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #A81919 |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 74%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #A81919 |
| Background | transparent |
| Border | #A81919 |
| Secondary button hover | |
| Foreground | #A81919 |
| Background | transparent |
| Border | #A81919 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme red-accent"></div>
|
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | #EB8CA1 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #EB8CA1 |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(346.74, 70%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #EB8CA1 |
| Background | transparent |
| Border | #EB8CA1 |
| Secondary button hover | |
| Foreground | #EB8CA1 |
| Background | transparent |
| Border | #EB8CA1 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme customizable-button"></div>
|
Standard-paragraph
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #03819A |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(189.93, 96%, 40%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-standard-paragraph"></div>
|
Sustainability - Green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #5DA946 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-sus-green-text"></div>
|
RED BTN - Black text - Face Mask
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #C41230 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #C41230 |
| Border | transparent |
| Primary button hover | |
| Foreground | #C41230 |
| Background | #FFFFFF |
| Border | #C41230 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme qmx-theme-red-btn-face-mask"></div>
|
CAREERS H2 PINK GREEN ACC
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #CA4562 |
| Background | #FFFFFF |
| Accent | #03819A |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme careers-h2-colors"></div>
|
PRINT METHODS HEADER GREEN
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #03819A |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-new"></div>
|
Cart - Free shipping confirmation
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #00A7C8 |
| Background | transparent |
| Accent | #333333 |
| Border | #EB8CA1 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme cart-freeshipping"></div>
|
CAREERS BTN - NO BG
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #333333 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme qmx-theme-careers-btn-no-bg"></div>
|
DNV - GOLD
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #C9A146 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #C9A146 |
| Border | #C9A146 |
| Primary button hover | |
| Foreground | #C9A146 |
| Background | #FFFFFF |
| Border | #C9A146 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-dnv-gold"></div>
|
Article Page
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | #03819A |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5354A4 |
| Border | transparent |
| Primary button hover | |
| Foreground | #5354A4 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #03819A |
| Border | transparent |
| Secondary button hover | |
| Foreground | #03819A |
| Background | #FFFFFF |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-article-page"></div>
|
CERTIFICATIONS - STYLE
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #03819A |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #666666 |
| Border | #666666 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-cert-style"></div>
|
Theme-QMX-Topic-Page
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme qmx-topic"></div>
|
Purple text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #5354A4 |
| Background | #FFFFFF |
| Accent | #5354A4 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5354A4 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(239.26, 33%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #5354A4 |
| Background | transparent |
| Border | #5354A4 |
| Secondary button hover | |
| Foreground | #5354A4 |
| Background | transparent |
| Border | #5354A4 |
| Link button | |
|---|---|
| Link color | #5354A4 |
| Link button hover | |
| Link hover color | hsl(239.26, 33%, 40%) |
| Implementation |
<div class="theme purple-text"></div>
|
QMX TWO PURPLE BTN
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5354A4 |
| Border | #5354A4 |
| Primary button hover | |
| Foreground | #000000 |
| Background | #337AB7 |
| Border | #337AB7 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #5354A4 |
| Border | #5354A4 |
| Secondary button hover | |
| Foreground | #000000 |
| Background | #337AB7 |
| Border | #337AB7 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme two-purp-btn"></div>
|
Pink buttons
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | #EB8CA1 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Border | #EB8CA1 |
| Primary button hover | |
| Foreground | #000000 |
| Background | transparent |
| Border | #EB8CA1 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #EB8CA1 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(346.74, 70%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme pink-btn-outline"></div>
|
Green background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #5DA946 |
| Accent | #5DA946 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #343A40 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(210, 10%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #5500FF |
| Background | #EDE6FF |
| Border | #5500FF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme accent-green"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-qmx-newsletter-subscribe-page"></div>
|
QMX - Dark Teal - BG
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #7BB2C0 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme qmx-darkteal-bg"></div>
|
light-pink-bg-theme
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #E8B7B3 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme light-pink-bg-theme"></div>
|