Themes

Take full control of all the colors

DS

This is the body text of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#F00000
Border	#F00000
Primary button hover
Foreground	#FFFFFF
Background	#333333
Border	#333333

Secondary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Secondary button hover
Foreground	#333333
Background	#FFFFFF
Border	#333333
Focus outline	#CCCCCC

Link button
Link color	#F00000
Link button hover
Link hover color	#333333
Focus outline	#CCCCCC

Implementation


									<div class="theme ds"></div>

Dark

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#343A40
Accent	currentColor
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

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor

Implementation


									<div class="theme dark"></div>

Black

This is the body text 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.

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.

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.

Base
Foreground	#000000
Background	#F8F8F8
Accent	#333333
Border	#DEDEDE

Primary button
Foreground	#FFFFFF
Background	#000000
Border	#DEDEDE
Primary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#DEDEDE

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent
Focus outline	#F70707

Link button
Link color	#F70707
Link button hover
Link hover color	hsl(0, 94%, 40%)
Focus outline	#F70707

Implementation


									<div class="theme theme-gray"></div>

Gray border

This is the body text 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

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#F00000
Accent	#333333
Border	transparent

Primary button
Foreground	#F00000
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	#F00000
Border	#FFFFFF

Secondary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Secondary button hover
Foreground	#333333
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#CCCCCC

Link button
Link color	#F00000
Link button hover
Link hover color	hsl(0, 100%, 40%)
Focus outline	#CCCCCC

Implementation


									<div class="theme ds-red"></div>

Background

This is the body text of the theme.

Base
Foreground	#333333
Background	#EBEBEB
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 ds_background"></div>

Red theme

This is the body text of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#333333
Border	transparent

Primary button
Foreground	#FF0000
Background	#FFFFFF
Border	#FF0000
Primary button hover
Foreground	#FFFFFF
Background	#FF0000
Border	#FF0000

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 red_theme"></div>

DignetDays2023

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#04273E
Accent	#04DB30
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#04DB30
Border	#04DB30
Primary button hover
Foreground	#04DB30
Background	#FFFFFF
Border	#04DB30

Secondary button
Foreground	#04DB30
Background	#FFFFFF
Border	#FFFFFF
Secondary button hover
Foreground	#04DB30
Background	#FFFFFF
Border	#04DB30
Focus outline	#CCCCCC

Link button
Link color	#04DB30
Link button hover
Link hover color	#FFFFFF
Focus outline	#CCCCCC

Implementation


									<div class="theme dignetdays2023"></div>

DignetDays2024

This is the body text of the theme.

Base
Foreground	#285073
Background	#FFFFFF
Accent	#2D9596
Border	transparent

Primary button
Foreground	#285073
Background	#9AD0C2
Border	#9AD0C2
Primary button hover
Foreground	#285073
Background	#FFFFFF
Border	#285073

Secondary button
Foreground	#9AD0C2
Background	#285073
Border	#285073
Secondary button hover
Foreground	#9AD0C2
Background	#FFFFFF
Border	#9AD0C2
Focus outline	#CCCCCC

Link button
Link color	#9AD0C2
Link button hover
Link hover color	#FFFFFF
Focus outline	#CCCCCC

Implementation


									<div class="theme dignetdays2024"></div>