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. #262626
Hover backg. #FFFFFF
Hover border #FFFFFF
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 #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme theme-gray-border"></div>
Scanoffice - White primary
Base
Foreground #1C3371
Background #FFFFFF
Border none
Primary button
Foreground #FFFFFF
Background #1C3371
Hover foreg. #FFFFFF
Hover backg. #22418E
Secondary button
Foreground #FFFFFF
Background #D45B00
Hover foreg. #FFFFFF
Hover backg. hsl(25,75, 100%, 40%)
Implementation
<div class="theme scanoffice-white-primary"></div>
Scanoffice - Grey
Base
Foreground #2C2C2C
Background #F6F6F6
Border none
Primary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Focus outline #2C2C2C
Implementation
<div class="theme scanoffice-grey"></div>
Scanoffice - White text
Base
Foreground #2C2C2C
Background #FFFFFF
Border none
Primary button
Foreground #FFFFFF
Background #1C3371
Border #1C3371
Hover foreg. #FFFFFF
Hover backg. #22418E
Hover border #22418E
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme scanoffice-white-text"></div>
Scanoffice - Blue primary
Base
Foreground #FFFFFF
Background #22418E
Border none
Primary button
Foreground #FFFFFF
Background #22418E
Border #FFFFFF
Hover foreg. #FFFFFF
Hover backg. #3C58A6
Hover border #FFFFFF
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme scanoffice-blue-primary"></div>
Scanoffice - Test
Base
Foreground #FFFFFF
Background #22418E
Border none
Primary button
Foreground #FFFFFF
Background #22418E
Hover foreg. #FFFFFF
Hover backg. #3C58A6
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme scanoffice-test-primary"></div>