Theming in Dynatrace specifies color schemes to subdivide the application into coherent areas.
The following components are themable:
Blue
The blue theme is used for infrastructure and cloud monitoring views.
Light background
variant |
default |
hover |
active |
background |
main |
$blue-600 |
$blue-700 |
$blue-800 |
$blue-100 |
accent |
$turquoise-600 |
$turquoise-700 |
$turquoise-800 |
$turquoise-100 |
error |
$red-600 |
$red-700 |
$red-800 |
$red-100 |
warning |
$yellow-600 |
$yellow-700 |
$yellow-800 |
$yellow-100 |
recovered |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
cta |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
Dark background
variant |
default |
hover |
active |
background |
main |
$blue-500 |
$blue-400 |
$blue-300 |
$blue-100 |
accent |
$turquoise-500 |
$turquoise-400 |
$turquoise-300 |
$turquoise-100 |
error |
$red-400 |
$red-300 |
$red-200 |
$red-100 |
warning |
$yellow-600 |
$yellow-500 |
$yellow-400 |
$yellow-100 |
recovered |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
cta |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
Purple
The purple theme is used for real user monitoring views.
Light background
variant |
default |
hover |
active |
background |
main |
$purple-600 |
$purple-700 |
$purple-800 |
$purple-100 |
accent |
$turquoise-600 |
$turquoise-700 |
$turquoise-800 |
$turquoise-100 |
error |
$red-600 |
$red-700 |
$red-800 |
$red-100 |
warning |
$yellow-600 |
$yellow-700 |
$yellow-800 |
$yellow-100 |
recovered |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
cta |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
Dark background
variant |
default |
hover |
active |
background |
main |
$purple-500 |
$purple-400 |
$purple-300 |
$purple-100 |
accent |
$turquoise-500 |
$turquoise-400 |
$turquoise-300 |
$turquoise-100 |
error |
$red-400 |
$red-300 |
$red-200 |
$red-100 |
warning |
$yellow-600 |
$yellow-500 |
$yellow-400 |
$yellow-100 |
recovered |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
cta |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
Royalblue
The royalblue theme is used for service and transaction monitoring views.
Light background
variant |
default |
hover |
active |
background |
main |
$royalblue-600 |
$royalblue-700 |
$royalblue-800 |
$royalblue-100 |
accent |
$turquoise-600 |
$turquoise-700 |
$turquoise-800 |
$turquoise-100 |
error |
$red-600 |
$red-700 |
$red-800 |
$red-100 |
warning |
$yellow-600 |
$yellow-700 |
$yellow-800 |
$yellow-100 |
recovered |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
cta |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
Dark background
variant |
default |
hover |
active |
background |
main |
$royalblue-500 |
$royalblue-400 |
$royalblue-300 |
$royalblue-100 |
accent |
$turquoise-500 |
$turquoise-400 |
$turquoise-300 |
$turquoise-100 |
error |
$red-400 |
$red-300 |
$red-200 |
$red-100 |
warning |
$yellow-600 |
$yellow-500 |
$yellow-400 |
$yellow-100 |
recovered |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
cta |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
Turquoise
The turquoise theme is used for all neutral views (e.g. settings screens, deployment screens).
Light background
variant |
default |
hover |
active |
background |
main |
$turquoise-600 |
$turquoise-700 |
$turquoise-800 |
$turquoise-100 |
accent |
$turquoise-600 |
$turquoise-700 |
$turquoise-800 |
$turquoise-100 |
error |
$red-600 |
$red-700 |
$red-800 |
$red-100 |
warning |
$yellow-600 |
$yellow-700 |
$yellow-800 |
$yellow-100 |
recovered |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
cta |
$green-600 |
$green-700 |
$green-800 |
$green-100 |
Dark background
variant |
default |
hover |
active |
background |
main |
$turquoise-500 |
$turquoise-400 |
$turquoise-300 |
$turquoise-100 |
accent |
$turquoise-500 |
$turquoise-400 |
$turquoise-300 |
$turquoise-100 |
error |
$red-400 |
$red-300 |
$red-200 |
$red-100 |
warning |
$yellow-600 |
$yellow-500 |
$yellow-400 |
$yellow-100 |
recovered |
$green-500 |
$green-400 |
$green-300 |
$green-100 |
cta |
$green-500 |
$green-400 |
$green-300 |
$green-100 |