Themes

Take full control of all the colors
Light
Base
Foreground #262626
Background #FFFFFF
Border none
Primary button
Foreground #FFFFFF
Background #262626
Border #262626
Hover foreg. #FFFFFF
Hover backg. #545454
Hover border #545454
Secondary button
Foreground #1E1A33
Background #FFFFFF
Border #262626
Hover foreg. #1E1A33
Hover backg. hsl(0, 0%, 85%)
Hover border #262626
Implementation
<div class="theme light"></div>
Dark
Base
Foreground #FFFFFF
Background #262626
Border none
Primary button
Foreground #262626
Background #FFFFFF
Border #FFFFFF
Hover foreg. #FFFFFF
Hover backg. #262626
Hover border #262626
Secondary button
Foreground #FFFFFF
Background #262626
Border #FFFFFF
Hover foreg. #262626
Hover backg. #FFFFFF
Hover border #FFFFFF
Implementation
<div class="theme dark"></div>
Light transparent
Base
Foreground #262626
Background none
Border none
Primary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme light-transparent"></div>
Dark transparent
Base
Foreground #FFFFFF
Background none
Border none
Primary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme dark-transparent"></div>
Light gray
Base
Foreground #333333
Background #F7F7F7
Border none
Primary button
Foreground #FFFFFF
Background #333333
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme theme-gray"></div>
Gray border
Base
Foreground #333333
Background #FFFFFF
Border #EBEBEB
Primary button
Foreground #FFFFFF
Background #333333
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground #333333
Background #FFFFFF
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme theme-gray-border"></div>
Theme khaki
Base
Foreground #333333
Background #BEBF9F
Border none
Primary button
Foreground #FFFFFF
Background #333333
Border #333333
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Hover border #333333
Secondary button
Foreground #333333
Background #FFFFFF
Border #333333
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Hover border #333333
Focus outline #CCCCCC
Implementation
<div class="theme theme-khaki"></div>
Theme palegold
Base
Foreground #333333
Background #DEC492
Border none
Primary button
Foreground #FFFFFF
Background #333333
Border #333333
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Hover border #333333
Secondary button
Foreground #333333
Background #FFFFFF
Border #333333
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Hover border #333333
Focus outline #CCCCCC
Implementation
<div class="theme theme-palegold"></div>
Theme paletaupe
Base
Foreground #333333
Background #C79F81
Border none
Primary button
Foreground #FFFFFF
Background #333333
Border #333333
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Hover border #333333
Secondary button
Foreground #333333
Background #FFFFFF
Border #333333
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Hover border #333333
Focus outline #CCCCCC
Implementation
<div class="theme theme-paletaupe"></div>
Yellow-orange
Base
Foreground #262626
Background #FFCB1F
Border none
Primary button
Foreground #FFFFFF
Background #262626
Border #262626
Hover foreg. #FFFFFF
Hover backg. #262626
Hover border #262626
Secondary button
Foreground #262626
Background #FFFFFF
Border #FFFFFF
Hover foreg. #FFFFFF
Hover backg. #262626
Hover border #262626
Implementation
<div class="theme yellow-orange"></div>
Dark-red
Base
Foreground #FFFFFF
Background #AD0000
Border none
Primary button
Foreground #FFFFFF
Background #262626
Border #262626
Hover foreg. #FFFFFF
Hover backg. #262626
Hover border #262626
Secondary button
Foreground #262626
Background #FFFFFF
Border #FFFFFF
Hover foreg. #FFFFFF
Hover backg. #262626
Hover border #262626
Implementation
<div class="theme dark-red"></div>
Pink
Base
Foreground #262626
Background #FFFFFF
Border none
Primary button
Foreground #FFFFFF
Background #262626
Border #262626
Hover foreg. #FFFFFF
Hover backg. #545454
Hover border #545454
Secondary button
Foreground #1E1A33
Background #FFFFFF
Border #262626
Hover foreg. #1E1A33
Hover backg. hsl(0, 0%, 85%)
Hover border #262626
Implementation
<div class="theme pink"></div>