Introduction

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