nodered_cfg/node_modules/@flowfuse/node-red-dashboard/nodes/config/ui_theme.html

<script type="text/javascript">
    RED.nodes.registerType('ui-theme', {
        category: 'config',
        defaults: {
            name: {
                value: RED._('@flowfuse/node-red-dashboard/ui-theme:ui-theme.label.themeName'),
                required: true
            },
            // colors
            colors: {
                value: {
                    surface: '#ffffff',
                    primary: '#0094CE',
                    bgPage: '#eeeeee',
                    groupBg: '#ffffff',
                    groupOutline: '#cccccc'
                }
            },
            // sizes
            sizes: {
                value: {
                    density: 'default',
                    pagePadding: '12px',
                    groupGap: '12px',
                    groupBorderRadius: '4px',
                    widgetGap: '12px'
                }
            }
        },
        oneditprepare: function () {
            function hasProperty (obj, prop) {
                return !!Object.prototype.hasOwnProperty.call(obj, prop)
            }

            if (!this.colors) {
                this.colors = {}
                // set default values
                this.colors.surface = '#ffffff'
                this.colors.primary = '#0094CE'
                // pages
                this.colors.bgPage = '#eeeeee'
                // groups
                this.colors.groupBg = '#ffffff'
                this.colors.groupOutline = '#cccccc'
            }

            if (!this.sizes) {
                this.sizes = {}
            }
            // set default values
            if (!hasProperty(this.sizes, 'density')) {
                this.sizes.density = 'default'
            }
            if (!hasProperty(this.sizes, 'pagePadding')) {
                this.sizes.pagePadding = '12px'
            }
            if (!hasProperty(this.sizes, 'groupGap')) {
                this.sizes.groupGap = '12px'
            }
            if (!hasProperty(this.sizes, 'groupBorderRadius')) {
                this.sizes.groupBorderRadius = '4px'
            }
            if (!hasProperty(this.sizes, 'widgetGap')) {
                this.sizes.widgetGap = '12px'
            }

            // loop over keys in this.colors
            Object.keys(this.colors).forEach((color) => {
                // get the value of the key
                const value = this.colors[color]
                // set the value of the input
                $('#node-config-input-' + color).val(value)
            })

            // loop over keys in this.sizes
            Object.keys(this.sizes).forEach((size) => {
                // get the value of the key
                let value = this.sizes[size]
                // value is a number, add `px` to the end
                value += (parseFloat(value).toString() === value) ? 'px' : ''
                // set the value of the input
                $('#node-config-input-' + size).val(value)
            })

            // update label b/g to match the colour input values
            // this provides nicer styling than the default browser styling
            const colorWrappers = $('.color-picker-wrapper')
            colorWrappers.each(function (i) {
                const wrapper = $(this)
                const colorPicker = wrapper.children("input[type='color']").eq(0)
                colorPicker.on('change', () => {
                    wrapper.css('background-color', colorPicker.val())
                })
                wrapper.css('background-color', colorPicker.val())
            })
        },
        oneditsave: function () {
            // update our config values from the input values
            Object.keys(this.colors).forEach((color) => {
                // set the value of the input
                this.colors[color] = $('#node-config-input-' + color).val()
            })

            // update our config values from the input values
            Object.keys(this.sizes).forEach((size) => {
                // get the value of the key
                let value = $('#node-config-input-' + size).val()
                // value is a number, add `px` to the end
                value += (parseFloat(value).toString() === value) ? 'px' : ''

                // set the value of the input
                this.sizes[size] = value
            })
        },
        label: function () {
            return `${this.name}` || 'UI Theme'
        }
    })
</script>

<script type="text/html" data-template-name="ui-theme">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <h3 style="margin: 0; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.colors"></h3>
    <div class="form-row" style="margin-bottom: 3px;">
        <h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> <span data-i18n="ui-theme.label.dashboard"></h4>
    </div>
    <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
        <div>
            <label data-i18n="ui-theme.label.header"></label>
            <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                <input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;"/>
            </label>
        </div>
        <div>
            <label data-i18n="ui-theme.label.primary"></label>
            <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                <input type="color" id="node-config-input-primary" style="opacity: 0; width: 100%;"/>
            </label>
        </div>
    </div>
    <div class="form-row" style="margin-bottom: 3px;">
        <h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> <span data-i18n="ui-theme.label.pages"></h4>
    </div>
    <div class="form-row labels-right" style="margin-bottom: 3px;">
        <label data-i18n="ui-theme.label.background"></label>
        <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
            <input type="color" id="node-config-input-bgPage" style="opacity: 0; width: 100%;"/>
        </label>
    </div>
    <div class="form-row" style="margin-bottom: 3px;">
        <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-theme.label.groups"></h4>
    </div>
    <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
        <div>
            <label data-i18n="ui-theme.label.background"></label>
            <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                <input type="color" id="node-config-input-groupBg" style="opacity: 0; width: 100%;"/>
            </label>
        </div>
        <div>
            <label data-i18n="ui-theme.label.outline"></label>
            <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
                <input type="color" id="node-config-input-groupOutline" style="opacity: 0; width: 100%;"/>
            </label>
        </div>
    </div>
    <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.sizings"></h3>
    <div class="form-row">
        <label for="node-config-input-density" data-i18n="ui-theme.label.density"></label>
        <select type="text" id="node-config-input-density">
            <option value="default" data-i18n="ui-theme.label.default"></option>
            <option value="comfortable" data-i18n="ui-theme.label.comfortable"></option>
            <option value="compact" data-i18n="ui-theme.label.compact"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-config-input-pagePadding" data-i18n="ui-theme.label.pagePadding"></label>
        <input type="text" id="node-config-input-pagePadding">
    </div>
    <div class="form-row">
        <label for="node-config-input-groupGap" data-i18n="ui-theme.label.groupGap"></label>
        <input type="text" id="node-config-input-groupGap">
    </div>
    <div class="form-row">
        <label for="node-config-input-groupBorderRadius" data-i18n="ui-theme.label.groupBorderRadius"></label>
        <input type="text" id="node-config-input-groupBorderRadius">
    </div>
    <div class="form-row">
        <label for="node-config-input-widgetGap" data-i18n="ui-theme.label.widgetGap"></label>
        <input type="text" id="node-config-input-widgetGap">
    </div>
</script>

<style>
.labels-right label {
    text-align: right;
}
.labels-right label:first-child {
    padding-right: 3px;
}
.labels-right label:first-child:after {
    content: ':';
}
</style>