Tweakpane themes

uiconfig-tweakpane has an optional stylesheet with five color modes. Import uiconfig-tweakpane/theme.css once, then pick a mode for each renderer with setTheme.

Tweakpane only

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'
import {Color, Vector2, Vector3, Vector4} from 'three'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.THREE = {Color, Vector2, Vector3, Vector4} // for the color and vector components

tweakpane-themes.js

// import 'uiconfig-tweakpane/theme.css' once (see the setup code)
const state = {mode: 'dark', speed: 0.5, color: '#f2c14e', grid: true}

ui.setTheme(state.mode)
ui.appendChild({
    type: 'folder',
    label: 'Theme',
    expanded: true,
    children: [
        {
            type: 'dropdown',
            label: 'Mode',
            property: [state, 'mode'],
            children: ['light', 'dark', 'blue', 'white', 'black', 'none'].map(
                (label) => ({label}),
            ),
            // null: the default Tweakpane look
            onChange: () => ui.setTheme(state.mode === 'none' ? null : state.mode),
        },
        {
            type: 'slider',
            label: 'Speed',
            bounds: [0, 1],
            stepSize: 0.01,
            property: [state, 'speed'],
        },
        {type: 'color', label: 'Color', property: [state, 'color']},
        {type: 'checkbox', label: 'Grid', property: [state, 'grid']},
    ],
})