Add colorMode to TweakpaneUiPlugin and add folder in the UI. Update TweakpaneEditorPlugin styles to support different color modes.

examples/tweakpane-editor/script.ts

@@ -101,7 +101,7 @@ async function init() {
     rt.addTarget(viewer.getPlugin(NormalBufferPlugin)?.target, 'normal', false, true, false)
 
     editor.loadPlugins({
-        ['Viewer']: [ViewerUiConfigPlugin, SceneUiConfigPlugin, DropzonePlugin, FullScreenPlugin],
+        ['Viewer']: [ViewerUiConfigPlugin, SceneUiConfigPlugin, DropzonePlugin, FullScreenPlugin, TweakpaneUiPlugin],
         ['Interaction']: [HierarchyUiPlugin, TransformControlsPlugin, PickingPlugin, Object3DGeneratorPlugin, GeometryGeneratorPlugin, EditorViewWidgetPlugin, Object3DWidgetsPlugin],
         ['GBuffer']: [DepthBufferPlugin, NormalBufferPlugin],
         ['Post-processing']: [TonemapPlugin, ProgressivePlugin, FrameFadePlugin, VignettePlugin, ChromaticAberrationPlugin, FilmicGrainPlugin],

examples/tweakpane-ui-plugin/script.ts

@@ -11,6 +11,7 @@ async function init() {
     const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
     ui.appendChild(viewer.uiConfig)
     ui.setupPluginUi(TonemapPlugin)
+    ui.setupPluginUi(TweakpaneUiPlugin) // to change the color scheme
 
     await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
     const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {

plugins/tweakpane-editor/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@threepipe/plugin-tweakpane-editor",
-    "version": "0.1.6",
+    "version": "0.2.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@threepipe/plugin-tweakpane-editor",
-            "version": "0.1.6",
+            "version": "0.2.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "@threepipe/plugin-tweakpane": "file:./../tweakpane/src/",

plugins/tweakpane-editor/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@threepipe/plugin-tweakpane-editor",
     "description": "Tweakpane Editor Plugin for ThreePipe",
-    "version": "0.1.6",
+    "version": "0.2.0",
     "devDependencies": {
         "tippy.js": "^6.3.7",
         "treejs": "git://github.com/repalash/treejs.git#d303016bb74e75725d13e97291ac1d4727985918"
@@ -21,7 +21,7 @@
         "replace": {
             "dependencies": {
                 "threepipe": "^0.0.18",
-                "@threepipe/plugin-tweakpane": "^0.1.5"
+                "@threepipe/plugin-tweakpane": "^0.2.0"
             }
         }
     },

plugins/tweakpane-editor/src/HierarchyUiPlugin.ts

@@ -25,11 +25,14 @@ export class HierarchyUiPlugin extends AViewerPluginSync<''> {
         this.uiConfig.domChildren = [this.hierarchyDiv]
         createStyles(css`
 #tpHierarchyContainer{
-  width: 100%;
-  height: auto;
-  background-color: transparent;
-  color: #e9e9ed;
-  margin-top: 0;
+    width: 100%;
+    height: auto;
+    background-color: transparent;
+    color: var(--tp-container-foreground-color, hsl(230, 7%, 75%));
+    margin-top: 0;
+}
+.treejs .treejs-switcher:before {
+    border-top: 6px solid var(--tp-container-foreground-color, hsl(230, 7%, 75%)) !important;
 }
 `)
 

plugins/tweakpane-editor/src/TweakpaneEditorPlugin.css

@@ -2,7 +2,7 @@
     background: var(--tp-base-background-color);
     /*background: #2c2c2e99;*/
     /*backdrop-filter: blur(8px);*/
-    border: 1px solid #8F949C;
+    /*border: 1px solid var(--tp-button-background-color-active, #8F949C);*/
     width: fit-content;
     width: -moz-fit-content;
     height: auto;
@@ -30,28 +30,29 @@
     /*border-radius: 0.25rem;*/
     width: auto;
     height: auto;
-    font-weight: 400;
+    font-weight: 500;
     /*overflow: hidden;*/
     padding: 0.35rem 0.5rem;
     position: relative;
     user-select: none;
-    color: #cccccc;
+    color: var(--tp-input-foreground-color, #cccccc);
     transition: color 0.25s;
 }
 
 .button-bar-button:hover {
     /*background-color: var(--tp-container-background-color-hover);*/
-    color: #eeeeee;
+    color: var(--tp-label-foreground-color, #eeeeee);
 }
 
 .button-bar-selected {
-    color: white;
+    color: var(--tp-label-foreground-color, #eeeeee);
     /*background-color: #2c2c2eaa;*/
     /*outline: 1px solid #ccccccaa;*/
 }
 
 .button-bar-selected-box {
-    color: white;
+    color: var(--tp-label-foreground-color, #eeeeee);
+    /*color: white;*/
 }
 
 /*Divider*/
@@ -64,7 +65,7 @@
     height: 60%;
     border-radius: 1px;
     /*background-color: #555555;*/
-    background-color: #413762;
+    background-color: var(--tp-container-background-color-active, #413762);
 }
 
 .button-bar-selected {
@@ -84,7 +85,7 @@
     bottom: 0;
     height: 2px;
     border-radius: 1px;
-    background-color: #cccccc;
+    background-color: var(--tp-container-foreground-color, #cccccc);
     transition: width 0.25s, left 0.25s;
     /*background-color: #2c2c2eaa;*/
     /*outline: 1px solid #ccccccaa;*/
@@ -138,7 +139,7 @@
 }
 
 .mode-button {
-    font-weight: 400;
+    font-weight: 500;
 }
 .mode-button:hover {
     /*background-color: var(--tp-container-background-color-hover);*/
@@ -152,7 +153,7 @@
     bottom: 1.25rem;
     left: 1rem;
     z-index: 100;
-    width: 8rem;
+    width: 7.5rem;
     height: 2.5rem;
     position: absolute;
     cursor: pointer;
@@ -167,6 +168,7 @@
     position: absolute;
     right: 1.25rem;
     top: 1.25rem;
+    color: var(--tp-container-foreground-color, #dddddd);
 }
 /*#modesToggle{*/
 /*    top: 0;*/
@@ -228,8 +230,8 @@
 .tippy-box[data-theme~='editor']{
     margin: 0.25rem !important;
     background-color: var(--tp-base-background-color) !important;
-    font-size: 0.8rem !important;
-    color: #dddddd !important;
+    font-size: 0.9rem !important;
+    color: var(--tp-container-foreground-color, #dddddd) !important;
 }
 
 
@@ -284,9 +286,21 @@
         margin-top: 2.5rem !important;
     }
 }
+
 body {
+    transition: background-color 0.5s ease;
     background-color: #D1D4E7;
 }
+body .tpTheme-blue{
+    background-color: #D1D4E7;
+}
+body.tpTheme-white{
+    background-color: #Dcdcdc;
+}
+body.tpTheme-black{
+    background-color: #48495d;
+}
+
 
 html, body {
     overflow: hidden;

plugins/tweakpane/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@threepipe/plugin-tweakpane",
-    "version": "0.1.6",
+    "version": "0.2.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@threepipe/plugin-tweakpane",
-            "version": "0.1.6",
+            "version": "0.2.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "threepipe": "file:./../../src/"

plugins/tweakpane/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@threepipe/plugin-tweakpane",
     "description": "Tweakpane UI Plugin for ThreePipe",
-    "version": "0.1.6",
+    "version": "0.2.0",
     "devDependencies": {
         "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz",
         "uiconfig-tweakpane": "^0.0.8"

plugins/tweakpane/src/TweakpaneUiPlugin.ts

@@ -11,28 +11,37 @@ import {
     IEvent,
     IViewerPlugin,
     IViewerPluginSync,
+    onChange,
     ThreeViewer,
+    uiDropdown,
+    uiFolderContainer,
+    UiObjectConfig,
     uploadFile,
     Vector2,
     Vector3,
     Vector4,
 } from 'threepipe'
 import styles from './tpTheme.css'
-import {UiObjectConfig} from 'uiconfig.js'
 import {tpImageInputGenerator} from './tpImageInputGenerator'
 
+@uiFolderContainer('Tweakpane UI')
 export class TweakpaneUiPlugin extends UiConfigRendererTweakpane implements IViewerPluginSync {
     declare ['constructor']: typeof TweakpaneUiPlugin
     static readonly PluginType = 'TweakpaneUi'
     enabled = true
 
-    constructor(expanded = false, bigTheme = true, container: HTMLElement = document.body) {
+    @onChange(TweakpaneUiPlugin.prototype._colorModeChanged)
+    @uiDropdown('Color Mode', ['black', 'white', 'blue'].map(label=>({label})))
+        colorMode: 'black'|'white'|'blue'
+
+    constructor(expanded = false, bigTheme = true, container: HTMLElement = document.body, colorMode?: 'black'|'white'|'blue') {
         super(container, {
             expanded, autoPostFrame: false,
         })
         this.THREE = {Color, Vector4, Vector3, Vector2} as any
         this._root!.registerPlugin(TweakpaneImagePlugin)
         if (bigTheme) createStyles(styles, container)
+        this.colorMode = colorMode ?? (localStorage ? localStorage.getItem('tpTheme') as any : 'blue') ?? 'blue'
     }
 
     protected _viewer?: ThreeViewer
@@ -146,4 +155,11 @@ export class TweakpaneUiPlugin extends UiConfigRendererTweakpane implements IVie
     confirm = async(message?: string): Promise<boolean> =>this._viewer ? this._viewer.dialog.confirm(message) : window?.confirm(message)
     prompt = async(message?: string, _default?: string, cancel = true): Promise<string | null> =>this._viewer ? this._viewer.dialog.prompt(message, _default, cancel) : window?.prompt(message, _default)
 
+    protected _colorModeChanged() {
+        document.body.classList.remove('tpTheme-black', 'tpTheme-white', 'tpTheme-blue')
+        document.body.classList.add('tpTheme-' + this.colorMode)
+        if (!localStorage) return
+        localStorage.setItem('tpTheme', this.colorMode)
+    }
+
 }

plugins/tweakpane/src/tpTheme.css

@@ -8,36 +8,49 @@
     pointer-events: auto;
 }
 
+
 :root {
-    --tp-blade-unit-size: 24px;
-
-    /*
-    --tp-base-shadow-color: #00000000;
-    --tp-base-background-color: #00000000;
-    --tp-container-background-color: rgba(32, 32, 32, 0.8);
-    --tp-container-background-color-hover: rgba(32, 32, 32, 0.9);
-    --tp-container-background-color-active: rgba(32, 32, 32, 1.0);
-    --tp-container-background-color-focus: rgba(32, 32, 32, 1.0);
-    --tp-base-border-radius: 0.4rem;
-
-    --tp-button-background-color: hsla(0, 0%, 70%, 1.00);
-    --tp-button-background-color-active: hsla(0, 0%, 85%, 1.00);
-    --tp-button-background-color-focus: hsla(0, 0%, 80%, 1.00);
-    --tp-button-background-color-hover: hsla(0, 0%, 75%, 1.00);
-    --tp-button-foreground-color: hsla(0, 0%, 5%, 1.00);
-    --tp-container-foreground-color: hsla(0, 0%, 95%, 1.00);
-    --tp-groove-foreground-color: hsla(0, 0%, 10%, 1.00);
-    --tp-input-background-color: hsla(0, 0%, 10%, 1.00);
-    --tp-input-background-color-active: hsla(0, 0%, 25%, 1.00);
-    --tp-input-background-color-focus: hsla(0, 0%, 20%, 1.00);
-    --tp-input-background-color-hover: hsla(0, 0%, 15%, 1.00);
-    --tp-input-foreground-color: hsla(0, 0%, 90%, 1.00);
-    --tp-label-foreground-color: hsla(0, 0%, 85%, 1.00);
-    --tp-monitor-background-color: hsla(0, 0%, 8%, 1.00);
-    --tp-monitor-foreground-color: hsla(0, 0%, 48%, 1.00);
-    */
+
+    --tp-blade-unit-size: 26px;
+    --tp-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    /*--tp-font-family: 'Inter';*/
     --tp-element-border-radius: 0.25rem;
 
+}
+
+:root {
+
+    --tp-base-background-color: #0e0e0e;
+    /*--tp-base-shadow-color: #00000000;*/
+    /*--tp-base-background-color: #00000000;*/
+    --tp-container-background-color: rgba(32, 32, 32, 0.2);
+    --tp-container-background-color-hover: rgba(32, 32, 32, 0.3);
+    --tp-container-background-color-active: rgba(50, 50, 50, 0.8);
+    --tp-container-background-color-focus: rgba(50, 50, 50, 1.0);
+    /*--tp-base-border-radius: 0.4rem;*/
+
+    /*--tp-button-background-color: hsla(0, 0%, 70%, 1.00);*/
+    /*--tp-button-background-color-active: hsla(0, 0%, 85%, 1.00);*/
+    /*--tp-button-background-color-focus: hsla(0, 0%, 80%, 1.00);*/
+    /*--tp-button-background-color-hover: hsla(0, 0%, 75%, 1.00);*/
+    /*--tp-button-foreground-color: hsla(0, 0%, 5%, 1.00);*/
+    --tp-container-foreground-color: hsla(0, 0%, 90%, 0.90);
+    /*--tp-groove-foreground-color: hsla(0, 0%, 10%, 1.00);*/
+    /*--tp-input-background-color: hsla(0, 0%, 10%, 1.00);*/
+    /*--tp-input-background-color-active: hsla(0, 0%, 25%, 1.00);*/
+    /*--tp-input-background-color-focus: hsla(0, 0%, 20%, 1.00);*/
+    /*--tp-input-background-color-hover: hsla(0, 0%, 15%, 1.00);*/
+    /*--tp-input-foreground-color: hsla(0, 0%, 90%, 1.00);*/
+    --tp-label-foreground-color: hsla(0, 0%, 85%, 0.90);
+    /*--tp-monitor-background-color: hsla(0, 0%, 8%, 1.00);*/
+    /*--tp-monitor-foreground-color: hsla(0, 0%, 48%, 1.00);*/
+}
+
+:root .tpTheme-black {
+    /*same as default*/
+}
+
+:root .tpTheme-blue {
     --tp-base-background-color: #28223C;
 
     /*--tp-base-background-color: hsla(235, 21%, 31%, 0.5);*/
@@ -64,8 +77,32 @@
 
     --tp-label-foreground-color: #E4E2ED;
 
-    /*--tp-font-family: 'Inter';*/
-    --tp-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+}
+
+:root .tpTheme-white {
+
+    --tp-base-background-color: hsla(230, 5%, 90%, 1.00);
+    --tp-base-shadow-color: hsla(0, 0%, 0%, 0.10);
+    --tp-button-background-color: hsla(230, 7%, 85%, 1.00);
+    --tp-button-background-color-active: hsla(230, 7%, 70%, 1.00);
+    --tp-button-background-color-focus: hsla(230, 7%, 75%, 1.00);
+    --tp-button-background-color-hover: hsla(230, 7%, 80%, 1.00);
+    --tp-button-foreground-color: hsla(230, 10%, 30%, 1.00);
+    --tp-container-background-color: hsla(230, 15%, 80%, 0.10);
+    --tp-container-background-color-active: hsla(230, 15%, 70%, 0.32);
+    --tp-container-background-color-focus: hsla(230, 15%, 70%, 0.28);
+    --tp-container-background-color-hover: hsla(230, 15%, 70%, 0.24);
+    --tp-container-foreground-color: hsla(230, 10%, 30%, 1.00);
+    --tp-groove-foreground-color: hsla(230, 15%, 20%, 0.10);
+    --tp-input-background-color: hsla(230, 15%, 30%, 0.10);
+    --tp-input-background-color-active: hsla(230, 15%, 50%, 0.22);
+    --tp-input-background-color-focus: hsla(230, 15%, 50%, 0.18);
+    --tp-input-background-color-hover: hsla(230, 15%, 50%, 0.14);
+    --tp-input-foreground-color: hsla(230, 10%, 20%, 1.00);
+    --tp-label-foreground-color: hsla(230, 10%, 10%, 1.00);
+    --tp-monitor-background-color: hsla(230, 15%, 30%, 0.10);
+    --tp-monitor-foreground-color: hsla(230, 10%, 30%, 0.50);
+
 }
 
 .tp-fldv {
@@ -81,33 +118,34 @@
 }
 
 .tp-fldv .tp-brkv {
-    background-color: rgba(32, 32, 50, 0.85);
+    /*background-color: #ddddddcc;*/
 }
 
 .tp-fldv .tp-fldv .tp-brkv {
-    background-color: rgba(32, 32, 50, 0.25) !important;
+    /*background-color: #dddddd99;*/
 }
 
 .tp-fldv-expanded > .tp-fldv_b {
-    background-color: rgba(32, 32, 50, 0.80) !important;
+    /*background-color: #ddddddaa;*/
 }
 
 .tp-fldv_b {
     height: calc(var(--bld-us) * 1.5 + 4px) !important;
-    font-size: 0.85rem !important;
+    font-size: 0.9rem !important;
+    transition: background-color 0.5s ease;
 }
 
 .tp-fldv_b + .tp-brkv .tp-fldv_b {
     height: calc(var(--bld-us) * 1.1 + 4px) !important;
-    font-size: 0.65rem !important;
+    font-size: 0.7rem !important;
 }
 
 .tp-fldv_b + .tp-brkv .tp-fldv-expanded > .tp-fldv_b {
 }
 
 .tp-lblv_l {
-    font-size: 0.7rem !important;
-    font-weight: 400 !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
     flex-grow: 1 !important;
     flex-basis: 20% !important;
 }
@@ -118,12 +156,12 @@
 }
 
 .tp-txtv_i {
-    font-size: 0.7rem !important;
-    font-weight: 400 !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
 }
 
 .tp-fldv_t {
-    font-weight: 400 !important;
+    font-weight: 500 !important;
     padding-left: 1.5rem !important;
 }
 
@@ -141,6 +179,23 @@
     padding-right: 0.5rem;
     height: min-content;
     background: transparent;
-    color: #eeeeee;
+    color: var(--tp-container-foreground-color, #eeeeee);
+    font-size: 0.9rem;
     border: none;
 }
+
+.tp-sldv_k::after{
+    background-color: var(--tp-input-foreground-color, hsl(230, 7%, 75%))
+}
+
+.tp-btnv_b{
+    height: calc(var(--tp-blade-unit-size) * 1.15);
+}
+
+
+.tp-p2dv_b, .tp-btnv_b, .tp-lstv_s{
+    font-weight: 500 !important;
+}
+.tp-rotv{
+    font-size: 13px !important;
+}