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.
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"
.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:
[{"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}]
1 Like
It Works but to be honest.... it's very complicated for my understanding! Many thanks, I'll study this solution!
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: 
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 
CSS is my headache!
Understood what happens with base value.
At least I need to change widget colour
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
