Dark Theme

These guidelines showcase what can be done with Nuxeo Web UI and Nuxeo Element, but don’t reflect their current state out of the box.

Section	Role	Value
ui-background	Main page background	Gray 90 `#262626`
ui-background	Container background	Gray 100 `#161616`
ui-background	Background overlay	Gray 100@ 70% `#161616`
ui-background	Sidebar background	Black `#000000`
ui-background	Drawer background	Gray 100 `#161616`
ui-border	Light contrast border	Gray 80 `#393939`
ui-border	Medium contrast border	Gray 60 `#6f6f6f`
ui-border	High contrast border	Gray 10 `#f4f4f4`
button	Primary button background	Blue 60 `#0066ff`
button	Text buttons; Links; Active elements	Blue 40 `#66a3ff`
button	Secondary button border	Blue 60 `#0066ff`
text	Primary text; Body copy; Headers	Gray 10 `#f4f4f4`
text	Secondary text; Input labels	Gray 30 `#c6c6c6`
text	Placeholder text	Gray 60 `#6f6f6f`
text	Text on interactive colors	Black `#000000`
text	Helper text	Gray 50 `#8d8d8d`
text	Disabled text; Disabled label; Disabled icons	Gray 70 `#525252`
text	Error messages	Red 50 `#fa4d56`
icon	Primary icons	Gray 10 `#f4f4f4`
icon	Secondary icons	Gray 30 `#c6c6c6`
icon	Icons on interactive colors	White `#ffffff`
status	Error	Red 50 `#fa4d56`
status	Success	Green 40 `#42be65`
status	Warning	Yellow `#f1c21b`
status	Information	Blue 40 `#66a3ff`

State

Section	Role	Value
focus	Focus border; Focus underline	White `#ffffff`
hover	Primary and secondary buttons background hover	Blue 70 `#0052cc`
hover	Interactive hover	Blue 30 `#99c2ff`
ui-hover	Hover on Gray 100 background; Transparent background hover	Gray 80 `#393939`
active	Primary and secondary buttons background active	Blue 80 `#003d99`
active	Interactive active	Blue 20 `#cce0ff`
disabled	Disabled backgrounds; Disabled border	Gray 80 `#393939`
visited link	Visited links	Purple 40 `#be95ff`