Dashboard Theme : Modern Dark
Modern Dark Theme for node-red-dashboard
Inspired by Victor Lucachi with his Node Red Dashboard Concept on Dribbble. Thank you for your work.
Buttons
Use 2x2 size for buttons with icon and text on the screenshot
Customize
- Go on dashboard customisation tab (At the right of Debug Console).
- Select the style
Dark. - Pick the color you want. Example
#66B5F8
[{"id":"85965edc.72971","type":"ui_template","z":"e05f44e3.142218","group":"2a745e6b.07df92","name":"Dashboard Theme : Modern Dark","order":2,"width":0,"height":0,"format":"<div>\n <link href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n --background: #212529;\n --on-background: white;\n --surface: #2d3136;\n --on-surface: white;\n --primary: var(--nr-dashboard-widgetColor);\n --on-primary: white;\n --secondary: var(--nr-dashboard-groupTextColor);\n --accent: red;\n --radius-s: 8px;\n --font-weight-m: 300;\n --font-weight-m: 500;\n --font-weight-l: 700;\n --space-s: 8px;\n --space-m: 16px;\n --space-l: 32px;\n }\n\n body.nr-dashboard-theme {\n background-color: var(--background);\n font-family: 'Montserrat', sans-serif;\n }\n .nr-dashboard-theme ui-card-panel {\n background-color: var(--background);\n border: 0;\n }\n .nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: var(--primary);\n border-radius: var(--radius-s);\n padding: 8px !important;\n line-height: inherit;\n font-weight: var(--font-weight-l);\n color: var(--on-primary);\n }\n .nr-dashboard-theme [ui-card-size=\"2x2\"].nr-dashboard-button .md-button {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n white-space: pre-line;\n }\n \n .nr-dashboard-theme .nr-dashboard-button .md-button ui-icon {\n margin-bottom: 8px;\n }\n .nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: var(--secondary);\n }\n body.nr-dashboard-theme md-content md-card {\n background-color: var(--surface);\n }\n md-card.md-default-theme, md-card {\n border-radius: var(--radius-s);\n }\n .nr-dashboard-theme .nr-dashboard-gauge-titlel {\n font-weight: var(--font-weight-l) !important; \n }\n .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n font-weight: var(--font-weight-l); \n text-transform: capitalize;\n color: var(--on-background);\n }\n .nr-dashboard-cardpanel > p {\n margin-left: 0;\n padding-left: 16px;\n }\n body.nr-dashboard-theme md-toolbar {\n background-color: var(--surface);\n }\n .md-default-theme .md-datepicker-calendar, .md-datepicker-calendar,\n .md-default-theme .md-calendar, .md-calendar{\n background-color: var(--surface);\n color: var(--on-surface);\n }\n .md-default-theme .md-datepicker-calendar-pane, .md-datepicker-calendar-pane{\n border: 0;\n }\n .md-default-theme .md-calendar-month-label md-icon, .md-calendar-month-label md-icon, .md-default-theme .md-datepicker-input, .md-datepicker-input {\n color: var(--on-surface);\n }\n body.nr-dashboard-theme md-content md-card {\n color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-numeric .value {\n background-color: var(--surface);\n color: var(--on-surface);\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 color: var(--on-surface);\n border-color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-dropdown .md-select-icon {\n color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-date-picker md-input-container .md-input {\n color: var(--on-surface);\n border-color: var(--on-surface);\n }\n .nr-dashboard-theme .nr-dashboard-date-picker .md-datepicker-triangle-button .md-datepicker-expand-triangle {\n border-top-color: var(--on-surface);\n }\n body.nr-dashboard-theme md-sidenav {\n background-color: var(--surface);\n }\n md-list-item._md-button-wrap > div.md-button:first-child, md-list-item .md-list-item-inner {\n background-color: var(--surface);\n }\n </style>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":520,"y":160,"wires":[[]],"icon":"node-red-dashboard/ui_colour_picker.png","info":"# Modern Dark Theme for node-red-dashboard\n\nInspired by Victor Lucachi with his [Node Red Dashboard Concept](https://dribbble.com/shots/10356530-Node-Red-Dashboard-Concept) on Dribbble. Thank you for your work.\n\n## Customize\n\n1. Go on dashboard customisation tab (At the right of Debug Console).\n2. Select the style `Dark`.\n3. Pick the color you want. Example `#66B5F8`\n\n## Buttons\n\nUse `2x2` size for buttons with icon and text on the screenshot"},{"id":"2a745e6b.07df92","type":"ui_group","z":"","name":"Default","tab":"e63bce2d.68925","order":5,"disp":true,"width":"6","collapse":true},{"id":"e63bce2d.68925","type":"ui_tab","z":"","name":"Denon","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
