I was kindly asked for help on dashboard styling but that help turned out for me to customize almost all default components. As it was "You'll help me - I'll help you" job, we agreed that it will be shared also to community.
Base theme:
Node-RED theme-everywhere
style: dark
sizes: 48, 6, 8, 8 (all square)
base color: rgb(5 62 168)
[{"id":"78abef.11f5941","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"771f257f.55355c","type":"ui_form","z":"78abef.11f5941","name":"","label":"form","group":"dc53cc09.4e298","order":4,"width":0,"height":0,"options":[{"label":"","value":"huuhu","type":"text","required":false,"rows":null},{"label":"","value":"nuunuu","type":"text","required":false,"rows":null},{"label":"","value":"jijijimkm","type":"text","required":false,"rows":null},{"label":"","value":"dudryu","type":"text","required":false,"rows":null}],"formValue":{"huuhu":"","nuunuu":"","jijijimkm":"","dudryu":""},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":true,"x":250,"y":60,"wires":[[]]},{"id":"a70a6fa5.94058","type":"ui_template","z":"78abef.11f5941","group":"dc53cc09.4e298","name":"dashboard CSS","order":1,"width":0,"height":0,"format":"<style id=\"blue-dashboard\">\n\nbody.nr-dashboard-theme {\n background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);\n}\nbody.nr-dashboard-theme md-toolbar {\n background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);\n color: #fff;\n}\nbody.nr-dashboard-theme md-sidenav {\n color: rgb(215 223 245);\n background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);\n}\nbody.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n color: rgb(215 223 245);\n background-color: transparent;\n}\n.nr-dashboard-theme ui-card-panel {\n background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);\n border: none;\n border-radius: 1em;\n box-shadow: 0 0 1em 0em rgb(0 0 100 / 50%)\n}\nbody.nr-dashboard-theme md-content md-card {\n background:transparent;\n color: rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background:transparent;\n}\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: #6a99f1;\n text-shadow: 1px 1px 0px rgb(0 0 0 / 50%);\n}\n.md-button{\n border-radius:0.6em;\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #053ea8;\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #0646bd;\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:focus {\n background-color: #0646bd;\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background:unset;\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-form {\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-color: #053ea8;\n color:rgb(215 223 245);\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button:hover {\n background-color: #0646bd !important;\n}\n.nr-dashboard-theme .nr-dashboard-form-button:focus {\n background-color: #0646bd !important;\n}\n.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {\n color:rgb(215 223 245);\n border-color: #074fd4 !important;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-color: rgb(25 31 153);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {\n background-color: rgb(94 94 177);\n box-shadow: inset 0 0 1px #0000005e;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {\n background-color: rgb(94 94 177);\n box-shadow: 0 0 10px 0px #101086;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {\n background-color: rgb(61 107 232);\n box-shadow: 0 0 10px 0px #101086;\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track {\n background-color: rgb(125 172 249 / 35%);\n}\nmd-slider .md-thumb {\n box-shadow: 0 0 10px 0px #101086;\n}\n\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-color: #3d6be8;\n border-color: #3d6be8;\n}\n\n.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(0 0 0 / 12%);\n color:rgb(215 223 245);\n border-radius:0.8em;\n}\n\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n margin-top: -3px;\n border-color: #eeeeee7a;\n \n}\n.nr-dashboard-theme .md-select-menu-container {\n max-height: 85%;\n overflow-y: auto;\n border: none;\n border-radius: 0.8em;\n}\n.nr-dashboard-theme .nr-dashboard-dropdown .md-select-icon {\n\n}\n.nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(40 53 147);\n \n height: 29px;\n border-radius: 0.6em;\n margin-left: 10px;\n margin-right: 10px;\n margin-top: 2px;\n box-shadow: 0 0 6px 6px #24202133;\n transition: 0.3s;\n}\n.nr-dashboard-theme md-select-menu md-option[selected] {\n color: rgb(130 177 255) !important;\n background-color: rgb(27 90 197) !important;\n}\n.nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n background-color: rgb(31 31 152);\n}\n.nr-dashboard-theme md-select-menu md-option:last-child {\n margin-bottom: 8px;\n}\n.nr-dashboard-theme md-select-menu md-option:hover {\n background-color: rgb(20 91 211) !important;\n padding-left: 26px;\n}\n.nr-dashboard-theme md-select-menu md-option > .md-ripple-container{\n border-radius: 14px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":300,"wires":[[]]},{"id":"6a25fec6.a6a6e","type":"ui_switch","z":"78abef.11f5941","name":"","label":"switch","tooltip":"","group":"dc53cc09.4e298","order":2,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":250,"y":100,"wires":[[]]},{"id":"be9a82b1.95f3e","type":"ui_switch","z":"78abef.11f5941","name":"","label":"switch","tooltip":"","group":"dc53cc09.4e298","order":3,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":250,"y":140,"wires":[[]]},{"id":"85bdafb4.6dfa","type":"ui_button","z":"78abef.11f5941","name":"","group":"a0e1236e.42475","order":1,"width":3,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":60,"wires":[[]]},{"id":"cb021e4c.a6ae1","type":"ui_button","z":"78abef.11f5941","name":"","group":"a0e1236e.42475","order":2,"width":3,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":100,"wires":[[]]},{"id":"5abcd8ef.f764c8","type":"ui_button","z":"78abef.11f5941","name":"","group":"a0e1236e.42475","order":3,"width":6,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":140,"wires":[[]]},{"id":"659af281.4d2f5c","type":"ui_text","z":"78abef.11f5941","group":"577352d1.7a125c","order":3,"width":3,"height":1,"name":"","label":"TEXT","format":"{{msg.payload}}","layout":"row-center","x":670,"y":60,"wires":[]},{"id":"bd963417.81c4e8","type":"ui_slider","z":"78abef.11f5941","name":"","label":"slider","tooltip":"","group":"577352d1.7a125c","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"x":490,"y":140,"wires":[["659af281.4d2f5c","1bdfbc4e.95eca4","f52d139e.db58a"]]},{"id":"ebbb10ec.75627","type":"ui_dropdown","z":"78abef.11f5941","name":"","label":"dropdown","tooltip":"","place":"Select option","group":"a0e1236e.42475","order":4,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"one ","type":"str"},{"label":"","value":"two","type":"str"},{"label":"","value":"three","type":"str"},{"label":"","value":"four","type":"str"},{"label":"","value":"five","type":"str"},{"label":"","value":"six","type":"str"},{"label":"","value":"seven","type":"str"},{"label":"","value":"eight","type":"str"},{"label":"","value":"nine","type":"str"},{"label":"","value":"ten","type":"str"}],"payload":"","topic":"topic","topicType":"msg","x":500,"y":60,"wires":[[]]},{"id":"1bdfbc4e.95eca4","type":"ui_gauge","z":"78abef.11f5941","name":"","group":"ace3971e.5dae38","order":1,"width":3,"height":3,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#026292","#0a74d1","#3aaecb"],"seg1":"","seg2":"","x":670,"y":140,"wires":[]},{"id":"8b3a0d12.75e59","type":"change","z":"78abef.11f5941","name":"gauge background","rules":[{"t":"set","p":"ui_control.options.gaugeColor","pt":"msg","to":"#1a187a","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":180,"wires":[["1bdfbc4e.95eca4"]]},{"id":"407f943f.81543c","type":"inject","z":"78abef.11f5941","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":270,"y":180,"wires":[["8b3a0d12.75e59"]]},{"id":"88e133a1.9f8f5","type":"ui_numeric","z":"78abef.11f5941","name":"","label":"numeric","tooltip":"","group":"577352d1.7a125c","order":2,"width":3,"height":1,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"x":500,"y":100,"wires":[[]]},{"id":"17a71a1e.a5fa16","type":"ui_chart","z":"78abef.11f5941","name":"","group":"ace3971e.5dae38","order":3,"width":6,"height":3,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":670,"y":220,"wires":[[]]},{"id":"707249d0.b22478","type":"inject","z":"78abef.11f5941","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"8","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":270,"y":220,"wires":[["7c7d3c37.d43ad4"]]},{"id":"7c7d3c37.d43ad4","type":"random","z":"78abef.11f5941","name":"","low":1,"high":10,"inte":"true","property":"payload","x":430,"y":220,"wires":[["17a71a1e.a5fa16"]]},{"id":"f52d139e.db58a","type":"ui_artlessgauge","z":"78abef.11f5941","group":"ace3971e.5dae38","order":2,"width":3,"height":3,"name":"","icon":"fa-home","label":"Gauge","unit":"blue","layout":"radial","decimals":"1","differential":false,"minmax":true,"colorTrack":"#07356e","style":"","colorFromTheme":true,"property":"payload","secondary":"secondary","inline":false,"animate":true,"sectors":[{"val":0,"col":"#33a0ff","t":"min","dot":0},{"val":10,"col":"#33a0ff","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":false,"diffCenter":"","x":700,"y":100,"wires":[]},{"id":"dc53cc09.4e298","type":"ui_group","name":"Form & Switch","tab":"1854ea3c.181436","order":1,"disp":true,"width":"6","collapse":false},{"id":"a0e1236e.42475","type":"ui_group","name":"Buttons","tab":"1854ea3c.181436","order":2,"disp":true,"width":"6","collapse":false},{"id":"577352d1.7a125c","type":"ui_group","name":"Text Numeric & Slider","tab":"1854ea3c.181436","order":4,"disp":true,"width":"6","collapse":false},{"id":"ace3971e.5dae38","type":"ui_group","name":"Gauge","tab":"1854ea3c.181436","order":3,"disp":true,"width":"6","collapse":false},{"id":"1854ea3c.181436","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
This is not fine-tuned absolutely ready custom theme and the job is done with quick changes and best practices are not always followed.
But it is blue.
