Dynamic style change between Light and Dark

Dashboard
9

Nice, good use of CSS variables.

Eventually the UI template could be simplified as below ( no need of using the $scope). Also it would be advisable to add a default value in the var() method.

<style>

:root {
    --main-color: {{msg.payload}};
}


md-toolbar#toolbar{
    background-color: var(--main-color,green);
}

body.nr-dashboard-theme md-content {
    color: var(--main-color,green);
}
body.nr-dashboard-theme md-sidenav {
    color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-template .md-button{
    background-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-template .md-button:disabled {
    color: grey;
}
.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
    background-color: var(--main-color,green);
    border-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-slider .md-track-fill {
    background-color: var(--main-color,green);
}
.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar {
    background-color: #666666;
}
.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar-thumb {
    background-color: var(--main-color,green);
}
</style>
1 Like