Change color dynamically of dashboard menu and dashboard title

Dashboard
1

Hi Guys,

Is it possible to dynamically and individually change the color (background and text) of

  • Left menu (each row)
  • Title of single dashboard

?

Is it also possible dynamically change the icon of left menu (each single row)?

Thanks and Best Regards

image
image.png1431Ă—1048 138 KB

2

Here's a way to do that (the dynamic color change, not the icon change):

[
    {
        "id": "eb204ee6.62865",
        "type": "ui_template",
        "z": "65935088.e7e47",
        "group": "5625d033.1d56f",
        "name": "Change theme color",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\nmd-toolbar#toolbar{\n    background-color: var(--main-color);\n}\n\nbody.nr-dashboard-theme md-content {\n    color: var(--main-color);\n}\nbody.nr-dashboard-theme md-sidenav {\n    color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n    background-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-template .md-button{\n    background-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-template .md-button:disabled {\n    color: grey;\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n    background-color: var(--main-color);\n    border-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track-fill {\n    background-color: var(--main-color);\n}\n.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar {\n    background-color: #666666;\n}\n.nr-dashboard-theme .nr-dashboard-template ::-webkit-scrollbar-thumb {\n    background-color: var(--main-color);\n}\n</style>\n\n<script>\n(function($scope) {\n    \n$scope.$watch('msg.payload', function() {\n    console.log($scope.msg.payload);\n    var html = document.getElementsByTagName('html')[0];\n    html.style.setProperty(\"--main-color\", $scope.msg.payload);\n});\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 520,
        "y": 760,
        "wires": [
            []
        ]
    },
    {
        "id": "4ac7255.934ecdc",
        "type": "inject",
        "z": "65935088.e7e47",
        "name": "",
        "topic": "",
        "payload": "red",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 290,
        "y": 720,
        "wires": [
            [
                "eb204ee6.62865"
            ]
        ]
    },
    {
        "id": "76a5b5ff.26754c",
        "type": "inject",
        "z": "65935088.e7e47",
        "name": "",
        "topic": "",
        "payload": "blue",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 290,
        "y": 760,
        "wires": [
            [
                "eb204ee6.62865"
            ]
        ]
    },
    {
        "id": "5625d033.1d56f",
        "type": "ui_group",
        "z": "",
        "name": "test",
        "tab": "9a95bc09.40d37",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "9a95bc09.40d37",
        "type": "ui_tab",
        "z": "",
        "name": "test",
        "icon": "dashboard"
    }
]
1 Like
3

Many thanks!

Is it possible to change the color individually of the text (or better background) in the left menu?

For example:
Test SQLite --> RED
Controllo Server --> GREEN
and so on.

My goal is changing color (RED) only for the menu parts related to dashboard that have inside an active alarm.
In this way operator, simply activating the left menu, can know the status of all parts of the plants.

image
image.png1431Ă—1048 138 KB

4

With a bit a jquery you could change the color of your left menu items separately:

<script>
(function($scope) {
    
$scope.$watch('msg', function() {
    $("md-list-item:contains('yourtabname')").css("color", $scope.msg.payload);
});
})(scope);
</script>
5

Ok it works well but to update color I must enter in dashboard that contains template Node. Is it possible to change color without activate dashboard?

6

Afaik, with my solution above, you'll have to duplicate this template for each of your tab if you want the color change to be seen from every tab.

7

I tested to set the template type to "Added to site " but it throws an error that scope is not defined.
We would need to add a feature to Dashboard to have a "global" group that will instantiate the template over every dashboard tab.

8

Another way to do it without jquery and only using CSS (you'd still need to use 1 template for every tab):

<style>

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

[aria-label~="Your tab Name"] {
    background-color: var(--main-color,green);
}

</style>
3 Likes
9

I was scratching my head to find out how to use the CSS selector to the label. You just shown us. Thank you very much indeed !

1 Like
10

And here's a way to add content (either text or images) to specific tab names:

[aria-label~="Your tab Name"] + div > p::after {
    content: '{{msg.payload}}' ;
1 Like
11

Great!! it works well

When I tested it, Only the title bar is changed.
Can the entire background color be changed?
thanks