(2017-08-18, 08:27 AM)joabakk Wrote: Nice!
I just installed node-red and one of my first google hunt was for ways to change theme from a switch, ie from day to night mode. is that possible?
Afaik there isn't a simple way to do this but certainly there is a solution using the template-node.
I've re-used my last example and added some javascript in the template-node and created an extra button.
If you hit the button the headline "Default" in the dashboard should turn to green and if you hit it again it turns back to the color of the certain theme.
It is done by adding custom css by javascript to the DOM and disabling or enabling it. You can build a whole custom style and write it to the css variable in my code and build therefore your own dark or light theme.
Code:
[{"id":"cb5ac30.9af85c","type":"inject","z":"bd3199c3.5714e8","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"1","crontab":"","once":true,"x":89,"y":163,"wires":[["40aba4b2.11e704"]]},{"id":"40aba4b2.11e704","type":"function","z":"bd3199c3.5714e8","name":"random","func":"msg.rand = Math.floor(Math.random() * 9);\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":161,"wires":[["9bdb1d37.39052"]]},{"id":"9bdb1d37.39052","type":"ui_template","z":"bd3199c3.5714e8","group":"f599153a.42a9f8","name":"","order":0,"width":0,"height":0,"format":"<div id=\"testId\">\n</div>\n<script>\n var css = 'body.nr-dashboard-theme md-content {color: #00ff00;}';\n var head = document.head;\n var style = document.createElement('style');\n style.type = 'text/css';\n style.id = 'my-custom-style';\n if(style.styleSheet){\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n head.appendChild(style);\n style.disabled = true;\n (function(scope) {\n scope.$watch('msg.rand', function(data) {\n var element = document.getElementById(\"testId\");\n element.textContent = data;\n if(data > 3 && data < 7){\n document.getElementById('testId').style.color = \"yellow\";\n }\n if(data < 4){\n document.getElementById('testId').style.color = \"green\";\n }\n if(data > 6){\n document.getElementById('testId').style.color = \"red\";\n }\n });\n scope.$watch('msg.payload', function(data) {\n if(data == 'switchStyle'){\n document.getElementById('my-custom-style').disabled = !document.getElementById('my-custom-style').disabled;\n }\n });\n })(scope);\n \n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":491,"y":165,"wires":[[]]},{"id":"89f882bc.8a327","type":"ui_button","z":"bd3199c3.5714e8","name":"","group":"f599153a.42a9f8","order":0,"width":0,"height":0,"passthru":false,"label":"button","color":"","bgcolor":"","icon":"","payload":"switchStyle","payloadType":"str","topic":"","x":324,"y":262,"wires":[["9bdb1d37.39052"]]},{"id":"f599153a.42a9f8","type":"ui_group","z":"","name":"Default","tab":"2a75465.6ca1e3a","disp":true,"width":"6"},{"id":"2a75465.6ca1e3a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]