# Change theme options from code

**URL:** <https://discourse.nodered.org/t/change-theme-options-from-code/40506>\
**Category:** Dashboard\
**Created:** [6 February 2021 17:34 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506 "2021-02-06T17:34:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simone](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Simone](https://discourse.nodered.org/u/Simone)\
**Post date:** [6 February 2021 17:34 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/1 "2021-02-06T17:34:14Z")

</div>

Hi,  
I would like to customize the theme colors of dashboard from code.  
I.e. I need to change background color of buttons.  
I'm able to do this button by button but my target is to do it from theme because it will be a parameter of the application that will be read from a json config file.

---

<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:** [6 February 2021 17:41 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/2 "2021-02-06T17:41:12Z")

</div>

Then you need to override the dashboard CSS.  
If you don't know how to do it, do search here in forum with keywords "dashboard css"

```auto
.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: #123456;
}

```

Edit: I just realized the you want to add your style dynamically after you have loaded the configuration.  
That is still possible, but takes a bit more..  
Basically you'll need to define every property, what will be branded and make your css string template where you can replace template values. And then add that style as element to the site head tag.

Basics here:

```auto
[{"id":"64a32b89.4f8ca4","type":"function","z":"45183143.93ebe","name":"make dynamic style","func":"let stylestring;\nlet defaultBranding;\nlet key;\n\n\n// default values\ndefaultBranding = {\n buttonColor: '#EAEAEA',\n buttonColorHover: '#FFFFFF',\n buttonColorDisabled: '#B0B0B0',\n buttonTextColor: '#000000',\n buttonTextColorDisabled: '#AAAAAA',\n};\n\n//override default branding with incoming brand values \nfor (key in defaultBranding) {\n if (key in msg.payload) {\n defaultBranding[key] = msg.payload[key];\n }\n}\n\n// style string template\nstylestring = `\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: [buttonColor];\n}\n`;\n\n// replace template values with actual values\n\nfor (key in defaultBranding) {\n while (stylestring.indexOf('['+key+']') != -1) {\n stylestring = stylestring.replace('['+key+']', defaultBranding[key]);\n }\n}\n\nmsg.payload = stylestring;\nreturn msg\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":530,"y":960,"wires":[["5d0742e4.47d91c"]]},{"id":"3faeb5dc.4b5f5a","type":"function","z":"45183143.93ebe","name":"brand","func":"msg.payload = {\n buttonColor: '#CCCCCC',\n buttonColorHover: '#FFFFFF',\n buttonColorDisabled: '#999999',\n buttonTextColor: '#FF0000',\n buttonTextColorDisabled: '#CCCCCC',\n};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":350,"y":960,"wires":[["64a32b89.4f8ca4"]]},{"id":"21e460f.e104ea","type":"inject","z":"45183143.93ebe","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":960,"wires":[["3faeb5dc.4b5f5a"]]},{"id":"5d0742e4.47d91c","type":"ui_template","z":"45183143.93ebe","group":"2a7130fc.d53a2","name":"apply styles","order":1,"width":0,"height":0,"format":"\n<div></div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n var stylesheet = document.createElement('style');\n stylesheet.id = 'overrided-styles';\n stylesheet.innerHTML = msg.payload;\n document.head.appendChild(stylesheet);\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":960,"wires":[[]]},{"id":"2a7130fc.d53a2","type":"ui_group","name":"Full_Remote2","tab":"c8123658.c35e48","order":3,"disp":false,"width":"3","collapse":false},{"id":"c8123658.c35e48","type":"ui_tab","name":"HDMI_TV_control","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Simone](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Simone](https://discourse.nodered.org/u/Simone)\
**Post date:** [6 February 2021 21:34 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/3 "2021-02-06T21:34:31Z")

</div>

> [@hotNipi](#):
>
> ```auto
> .nr-dashboard-theme .nr-dashboard-button .md-button {
> background-color: #123456;
> }
> 
> ```

It Works but to be honest.... it's very complicated for my understanding! Many thanks, I'll study this solution!

---

<div class="post-metadata">

**Author:** ![Simone](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Simone](https://discourse.nodered.org/u/Simone)\
**Post date:** [11 February 2021 07:31 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/4 "2021-02-11T07:31:46Z")

</div>

Sorry, I thought it worked but it doesn't work! Not sure if it worked for a while, but it seems like it never was.  
I would like to change only this color: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f315b220c8e018134ea2746d695de8f4ab369f59.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 February 2021 08:31 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/5 "2021-02-11T08:31:21Z")

</div>

It does not work that way. This color is not used as color value directly. It is base value. Actual colors for classes and element id-s are created according to this base value way before the page is created. it will be too late to change the base value if all calculations are already done.

Look at the example here and try to play with it. Change values and see how it will affect the elements on page. There is no other way to learn it but doing it 🙂

> [@paintbrush Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139):
>
> Couple of things first.. Many things can happen if you start to play with CSS. You may break whole thing, but you can make your page really good looking. But be aware that it can be addictive. The result of your adjustments is art. So if you are changing CSS for your dashboard, you are an artist. (and a little bit a programmer of course) I'm not an expert of art nor the CSS. The tools Browser developer tools. [https://developers.google.com/web/tools/chrome-devtools/css](https://developers.google.com/web/tools/chrome-devtools/css) The main too…

---

<div class="post-metadata">

**Author:** ![Simone](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Simone](https://discourse.nodered.org/u/Simone)\
**Post date:** [11 February 2021 10:02 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/6 "2021-02-11T10:02:25Z")

</div>

> [@hotNipi](#):
>
> Change values and see how it will affect the elements on page. There is no other way to learn it but doing it

🤕 CSS is my headache!  
Understood what happens with base value.  
At least I need to change widget colour

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2ff6914a7d344f50ecf5e6926e5ec5632e784b84.png)

---

<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 February 2021 10:02 UTC](https://discourse.nodered.org/t/change-theme-options-from-code/40506/7 "2021-02-25T10:02:45Z")

</div>

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