Themes
No Theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
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 notheme"></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 | #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-gray"></div>
|
December Theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | #CCCCCC |
Accent | #A81437 |
Border | transparent |
Primary button | |
---|---|
Foreground | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #FFEA5E |
Background | transparent |
Border | transparent |
Secondary button hover | |
Foreground | #FFEA5E |
Background | transparent |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme decembertheme"></div>
|
December test
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #000000 |
Accent | #A81437 |
Border | transparent |
Primary button | |
---|---|
Foreground | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
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 decembertest"></div>
|
Lightest Gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #F2F2F2 |
Accent | #A80018 |
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-lightestgray"></div>
|
Base | |
---|---|
Foreground | #333333 |
Background | #F2F2F2 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #333333 |
Background | #C7C7C7 |
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-lightestgrayyellowbutton"></div>
|
Product Details
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 | #050408 |
Background | #FFDD00 |
Border | #262626 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #545454 |
Border | #545454 |
Secondary button | |
---|---|
Foreground | #050408 |
Background | #E6E6E6 |
Border | #262626 |
Secondary button hover | |
Foreground | #050408 |
Background | hsl(0, 0%, 85%) |
Border | #262626 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme productdetails-theme"></div>
|
Gray Border
This is the body text of the theme.
This is the accent color of the theme.
Primary button | |
---|---|
Foreground | #050408 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #050408 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #000000 |
Background | #DEDEDE |
Border | transparent |
Secondary button hover | |
Foreground | #000000 |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Focus outline | #999999 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Focus outline | #999999 |
Implementation |
<div class="theme themegrayborder"></div>
|
About Us Subheads
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #D9C76F |
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 aboutussubheads"></div>
|
AboutUs-LeftColumn
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | #FFFFFF |
Accent | #A80018 |
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 aboutusleft-theme-eg"></div>
|
IVY_PTA_CategoryBox
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #FBF2C7 |
Accent | #737373 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #737373 |
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-ivy_pta_categorybox_column"></div>
|
PTA-GoldBackground
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #EDDF9D |
Accent | #737373 |
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-pta-goldbackground-row"></div>
|
Light
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #050408 |
Background | #FFCB1F |
Border | #262626 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #545454 |
Border | #545454 |
Secondary button | |
---|---|
Foreground | #050408 |
Background | #FFCB1F |
Border | #262626 |
Secondary button hover | |
Foreground | #050408 |
Background | hsl(46.07, 100%, 85%) |
Border | #262626 |
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"></div>
|
Dark
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme dark"></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>
|
Theme palegold
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #DEC492 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #333333 |
Border | #333333 |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(0, 0%, 40%) |
Border | #333333 |
Secondary button | |
---|---|
Foreground | #333333 |
Background | #FFFFFF |
Border | #333333 |
Secondary button hover | |
Foreground | #333333 |
Background | hsl(0, 0%, 85%) |
Border | #333333 |
Focus outline | #CCCCCC |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #CCCCCC |
Implementation |
<div class="theme theme-palegold"></div>
|
Yellow-orange
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #FFCB1F |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme yellow-orange"></div>
|
Dark-red
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #A6063A |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #F2F2F2 |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme dark-red"></div>
|
Transparent
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #FFFF70 |
Accent | currentColor |
Border | #991814 |
Primary button | |
---|---|
Foreground | #333333 |
Background | transparent |
Border | #70120F |
Primary button hover | |
Foreground | #333333 |
Background | transparent |
Border | #B81E19 |
Secondary button | |
---|---|
Foreground | #333333 |
Background | transparent |
Border | #365EFF |
Secondary button hover | |
Foreground | #333333 |
Background | transparent |
Border | #365EFF |
Focus outline | #CCCCCC |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Focus outline | #CCCCCC |
Implementation |
<div class="theme theme-transparent"></div>
|
Gold Border
This is the body text of the theme.
This is the accent color of the theme.
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-goldborder"></div>
|
Product Details No Borders
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #050408 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | #545454 |
Border | #545454 |
Secondary button | |
---|---|
Foreground | #050408 |
Background | #E6E6E6 |
Border | transparent |
Secondary button hover | |
Foreground | #050408 |
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 productdetailsnoborders-theme"></div>
|
HandToolTest
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 | #333333 |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(0, 0%, 40%) |
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 theme-new"></div>
|
Light gray to White
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #D9D9D9 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(46.07, 100%, 85%) |
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-graytowhite"></div>
|
PTA-GoldBkgrd-Darker
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #EDDF9D |
Background | #D9CB90 |
Accent | #000000 |
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-pta-goldbkgrd-darker-row"></div>
|
Light gray to Black
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | #D9D9D9 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | hsl(46.07, 100%, 85%) |
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-graytoblack"></div>
|
Darker Gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | #BABABA |
Accent | #A81437 |
Border | transparent |
Primary button | |
---|---|
Foreground | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #FFEA5E |
Background | #CCCCCC |
Border | transparent |
Secondary button hover | |
Foreground | #FFEA5E |
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 darkergraytheme"></div>
|
Product List border
This is the body text of the theme.
This is the accent color of the theme.
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 productlistborder"></div>
|
Base | |
---|---|
Foreground | #000000 |
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 | #030000 |
Border | transparent |
Secondary button hover | |
Foreground | #FFFFFF |
Background | hsl(0, 100%, 40%) |
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 ptabanner"></div>
|
Base | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Accent | currentColor |
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 | #FFCB1F |
Border | transparent |
Secondary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme banners"></div>
|
Transparent-Home
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #000000 |
Background | transparent |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #000000 |
Background | #B5B5B5 |
Border | transparent |
Secondary button hover | |
Foreground | #000000 |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme transparent_home"></div>
|
Transparent Home - Dark
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 | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
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-home"></div>
|
Darkest Gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #616161 |
Accent | #A81437 |
Border | transparent |
Primary button | |
---|---|
Foreground | #000000 |
Background | #FFCB1F |
Border | transparent |
Primary button hover | |
Foreground | #000000 |
Background | hsl(46.07, 100%, 85%) |
Border | transparent |
Secondary button | |
---|---|
Foreground | #FFEA5E |
Background | #CCCCCC |
Border | transparent |
Secondary button hover | |
Foreground | #FFEA5E |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Focus outline | #E0E0E0 |
Link button | |
---|---|
Link color | #D1D1D1 |
Link button hover | |
Link hover color | hsl(0, 0%, 85%) |
Focus outline | #E0E0E0 |
Implementation |
<div class="theme darkestgraytheme"></div>
|
Dark-red with Border
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #A6063A |
Accent | currentColor |
Border | #000000 |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #F2F2F2 |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme dark-red-wborder"></div>
|
Yellow-orange with border
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #FFCB1F |
Accent | currentColor |
Border | #000000 |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme yellow-orange-wborder"></div>
|
Light gray With Maroon
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #F7F7F7 |
Accent | #A6063A |
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-gray-maroon"></div>
|