# Change color dynamically of dashboard menu and dashboard title

**URL:** <https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104>\
**Category:** Dashboard\
**Created:** [22 November 2018 06:25 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104 "2018-11-22T06:25:26Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![roberto.zeni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roberto.zeni/32/3226_2.png) [@roberto.zeni](https://discourse.nodered.org/u/roberto.zeni)\
**Post date:** [22 November 2018 06:25 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/1 "2018-11-22T06:25:26Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c1635a5b95d8cb28e85dd8bcef9d89a80befdb66.png)

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 November 2018 17:46 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/2 "2018-11-22T17:46:35Z")

</div>

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

```auto
[
    {
        "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"
    }
]
```

---

<div class="post-metadata">

**Author:** ![roberto.zeni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roberto.zeni/32/3226_2.png) [@roberto.zeni](https://discourse.nodered.org/u/roberto.zeni)\
**Post date:** [22 November 2018 18:50 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/3 "2018-11-22T18:50:54Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c1635a5b95d8cb28e85dd8bcef9d89a80befdb66.png)

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 November 2018 19:22 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/4 "2018-11-22T19:22:45Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![roberto.zeni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roberto.zeni/32/3226_2.png) [@roberto.zeni](https://discourse.nodered.org/u/roberto.zeni)\
**Post date:** [22 November 2018 20:23 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/5 "2018-11-22T20:23:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 November 2018 20:28 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/6 "2018-11-22T20:28:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 November 2018 21:12 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/7 "2018-11-22T21:12:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [22 November 2018 21:43 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/8 "2018-11-22T21:43:18Z")

</div>

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

```auto
<style>

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

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

</style>
```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [22 November 2018 22:01 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/9 "2018-11-22T22:01:33Z")

</div>

> [@hugobox](#):
>
> [aria-label~="Your tab Name"]

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 !

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [23 November 2018 14:51 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/10 "2018-11-23T14:51:39Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![bird](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bird/32/34966_2.png) [@bird](https://discourse.nodered.org/u/bird)\
**Post date:** [5 January 2021 06:50 UTC](https://discourse.nodered.org/t/change-color-dynamically-of-dashboard-menu-and-dashboard-title/5104/11 "2021-01-05T06:50:17Z")

</div>

Great!! it works well

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