# Style template colours not working

**URL:** <https://discourse.nodered.org/t/style-template-colours-not-working/70444>\
**Category:** Dashboard\
**Created:** [11 November 2022 12:43 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444 "2022-11-11T12:43:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [11 November 2022 12:43 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/1 "2022-11-11T12:43:52Z")

</div>

I created a template to be able to use more than the standard colours. I have created this template:

 ![NR color 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f84f7c55dfc54606d84054d0265a79ee380cf9e.png)

But when I try to use the colours, they do not work. I try to use them in a change node as per screenshot. I have tried using --color-blue-2 as well as just blue-2, it does not work. If I use the standard colours (red, blue green etc) it does work, but its not using the rgb specified in my template, so just using the standard colours I think. If I use --color-blue-2 it seems to use a blue, but nor whats in the template. Changing the rgb values to a red (255,0,0) for example, its still showing as blue.

![NR color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e17808578b471f7c86f0ad61ea45e3667db84902.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 November 2022 13:41 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/2 "2022-11-11T13:41:39Z")

</div>

Have you tried with HEX values for colors?

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [11 November 2022 14:08 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/3 "2022-11-11T14:08:34Z")

</div>

I hadnt, but I just tried and its not working.

I put this in the styele template

--color-blue-2: #eeeeee; instead of --color-blue-2: (255, 0, 0);

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 November 2022 14:17 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/4 "2022-11-11T14:17:12Z")

</div>

Well it of course depends how you use those CSS variables. You haven't showed that part yet.

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [11 November 2022 14:22 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/5 "2022-11-11T14:22:28Z")

</div>

Is that what you mean by how you use the CSS variables ?

I use them in a dashboard text node like this:

 ![NR text node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c76ae0b727adfa5a780ec53b3a46f18108c2b005.png)

with the change node from my first post linked to it

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 November 2022 14:44 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/6 "2022-11-11T14:44:04Z")

</div>

Ok. This way you can't use the CSS variables.  
But I did some tests, and what is interesting, whatever the "msg.color" is, the browser tries to figure out some color from it. and if you use some known named color, it actually does the trick.  
Known that `<font >` tag is actually deprecated but of course the deprecation for browsers world does not mean that it is not working anymore and would fire some errors. It works but you can't tell how and why ...

So if you want to keep the thing working like it is, do use known named colors. Otherwise it will be quite of different approach.

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [11 November 2022 15:01 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/7 "2022-11-11T15:01:43Z")

</div>

> [@hotNipi](#):
>
> Otherwise it will be quite of different approach.

Ok that makes sense, at least I understand why its not working.  
But, as I really would like more colours (where do I find a list of 'known' colours ?) how could I achieve that ? I have a lot of text and other nodes where I'd like to be able to set different colours, and I dont think there are lets say 3 or 4 different blues, reds, greens etc in the known colours ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [11 November 2022 15:03 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/8 "2022-11-11T15:03:19Z")

</div>

> **[Color Names — HTML Color Codes](https://htmlcolorcodes.com/color-names/)**
>
> HTML color names rule. Modern browsers support 140 HTML color names which we've listed here along with their Hex color codes and RGB values.

It says modern browsers support 140. It does not say that the deprecated `<font>` tag is capable. But you can try. 🙂

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [11 November 2022 15:15 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/9 "2022-11-11T15:15:28Z")

</div>

> [@hotNipi](#):
>
> Ok. This way you can't use the CSS variables.  
> But I did some tests, and what is interesting, whatever the "msg.color" is, the browser tries to figure out some color from it. and if you use some known named color, it actually does the trick.  
> Known that `<font >` tag is actually deprecated but of course the deprecation for browsers world does not mean that it is not working anymore and would fire some errors. It works but you can't tell how and why ...

Nice one. I think 140 colours is plenty. And I just tried a few random ones. They work !!! Now All I have to do is assign them and change some programming to make my dashboard better.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 November 2022 15:16 UTC](https://discourse.nodered.org/t/style-template-colours-not-working/70444/10 "2022-11-25T15:16:13Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.