Theming

theme theming pattern

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
main $blue-600 $blue-700 $blue-800
accent $turquoise-600 $turquoise-700 $turquoise-800
error $red-600 $red-700 $red-800
warning $yellow-600 $yellow-700 $yellow-800
recovered $green-600 $green-700 $green-800
cta $green-600 $green-700 $green-800

Dark background

variant default hover active
main $blue-500 $blue-400 $blue-300
accent $turquoise-500 $turquoise-400 $turquoise-300
error $red-500 $red-400 $red-300
warning $yellow-600 $yellow-500 $yellow-400
recovered $green-500 $green-400 $green-300
cta $green-500 $green-400 $green-300

Purple

The purple theme is used for real user monitoring views.

Light background

variant default hover active
main $purple-600 $purple-700 $purple-800
accent $turquoise-600 $turquoise-700 $turquoise-800
error $red-600 $red-700 $red-800
warning $yellow-600 $yellow-700 $yellow-800
recovered $green-600 $green-700 $green-800
cta $green-600 $green-700 $green-800

Dark background

variant default hover active
main $purple-500 $purple-400 $purple-300
accent $turquoise-500 $turquoise-400 $turquoise-300
error $red-500 $red-400 $red-300
warning $yellow-600 $yellow-500 $yellow-400
recovered $green-500 $green-400 $green-300
cta $green-500 $green-400 $green-300

Royalblue

The royalblue theme is used for service and transaction monitoring views.

Light background

variant default hover active
main $royalblue-600 $royalblue-700 $royalblue-800
accent $turquoise-600 $turquoise-700 $turquoise-800
error $red-600 $red-700 $red-800
warning $yellow-600 $yellow-700 $yellow-800
recovered $green-600 $green-700 $green-800
cta $green-600 $green-700 $green-800

Dark background

variant default hover active
main $royalblue-500 $royalblue-400 $royalblue-300
accent $turquoise-500 $turquoise-400 $turquoise-300
error $red-500 $red-400 $red-300
warning $yellow-600 $yellow-500 $yellow-400
recovered $green-500 $green-400 $green-300
cta $green-500 $green-400 $green-300

Turquoise

The turquoise theme is used for all neutral views (e.g. settings screens, deployment screens).

Light background

variant default hover active
main $turquoise-600 $turquoise-700 $turquoise-800
accent $turquoise-600 $turquoise-700 $turquoise-800
error $red-600 $red-700 $red-800
warning $yellow-600 $yellow-700 $yellow-800
recovered $green-600 $green-700 $green-800
cta $green-600 $green-700 $green-800

Dark background

variant default hover active
main $turquoise-500 $turquoise-400 $turquoise-300
accent $turquoise-500 $turquoise-400 $turquoise-300
error $red-500 $red-400 $red-300
warning $yellow-600 $yellow-500 $yellow-400
recovered $green-500 $green-400 $green-300
cta $green-500 $green-400 $green-300