Theming

Introduction

Theming in Dynatrace specifies color schemes to subdivide the application into coherent areas.

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-500 $red-400 $red-300 $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-500 $red-400 $red-300 $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-500 $red-400 $red-300 $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-500 $red-400 $red-300 $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