Custom theme added to the inspector !

dist/preview release/inspector/babylon.inspector.d.ts

@@ -24,7 +24,15 @@ declare module INSPECTOR {
          * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
          * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement);
+        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement, newColors?: {
+            backgroundColor?: string;
+            backgroundColorLighter?: string;
+            backgroundColorLighter2?: string;
+            backgroundColorLighter3?: string;
+            color?: string;
+            colorTop?: string;
+            colorBot?: string;
+        });
         /**
          * If the given element has a position 'asbolute' or 'relative',
          * returns the first parent of the given element that has a position 'relative' or 'absolute'.

dist/preview release/inspector/babylon.inspector.js

@@ -5,7 +5,7 @@ var INSPECTOR;
          * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
          * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        function Inspector(scene, popup, initialTab, parentElement) {
+        function Inspector(scene, popup, initialTab, parentElement, newColors) {
             var _this = this;
             /** True if the inspector is built as a popup tab */
             this._popupMode = false;
@@ -135,6 +135,30 @@ var INSPECTOR;
             if (!INSPECTOR.Helpers.IsBrowserEdge()) {
                 this.refresh();
             }
+            // Check custom css colors
+            if (newColors) {
+                var bColor = newColors.backgroundColor || '#242424';
+                var bColorl1 = newColors.backgroundColorLighter || '#2c2c2c';
+                var bColorl2 = newColors.backgroundColorLighter2 || '#383838';
+                var bColorl3 = newColors.backgroundColorLighter3 || '#454545';
+                var color = newColors.color || '#ccc';
+                var colorTop = newColors.colorTop || '#f29766';
+                var colorBot = newColors.colorBot || '#5db0d7';
+                var styles = Inspector.DOCUMENT.querySelectorAll('style');
+                for (var s = 0; s < styles.length; s++) {
+                    var style = styles[s];
+                    if (style.innerHTML.indexOf('insp-wrapper') != -1) {
+                        styles[s].innerHTML = styles[s].innerHTML
+                            .replace(/#242424/g, bColor) // background color
+                            .replace(/#2c2c2c/g, bColorl1) // background-lighter
+                            .replace(/#383838/g, bColorl2) // background-lighter2
+                            .replace(/#454545/g, bColorl3) // background-lighter3
+                            .replace(/#ccc/g, color) // color
+                            .replace(/#f29766/g, colorTop) // color-top
+                            .replace(/#5db0d7/g, colorBot); // color-bot
+                    }
+                }
+            }
         }
         /**
          * If the given element has a position 'asbolute' or 'relative',

inspector/sass/defines.scss

@@ -3,6 +3,11 @@
 
 $font               : 'Inconsolata', sans-serif;
 
+// ------------- //
+// If you update these colors, you should also 
+// replace them in the class Inspector as well, 
+// as it's used for custom themes
+// ------------- //
 
 $color              : #ccc;
 $background         : #242424;

inspector/src/Inspector.ts

@@ -30,7 +30,15 @@ module INSPECTOR {
          * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
          * If the parameter 'popup' is true, the inspector is created in another popup.
          */
-        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement) {
+        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement, newColors?: {
+            backgroundColor?: string,
+            backgroundColorLighter?: string,
+            backgroundColorLighter2?: string,
+            backgroundColorLighter3?: string,
+            color?: string,
+            colorTop?: string,
+            colorBot?: string
+        }) {
 
             //get Tabbar initialTab
             this._initialTab = initialTab;
@@ -183,6 +191,36 @@ module INSPECTOR {
             if (!Helpers.IsBrowserEdge()) {
                 this.refresh();
             }
+
+            // Check custom css colors
+            if (newColors) {
+
+                let bColor = newColors.backgroundColor || '#242424';
+                let bColorl1 = newColors.backgroundColorLighter || '#2c2c2c';
+                let bColorl2 = newColors.backgroundColorLighter2 || '#383838';
+                let bColorl3 = newColors.backgroundColorLighter3 || '#454545';
+
+                let color = newColors.color || '#ccc';
+                let colorTop = newColors.colorTop || '#f29766';
+                let colorBot = newColors.colorBot || '#5db0d7';
+
+                let styles = Inspector.DOCUMENT.querySelectorAll('style');
+                for (let s = 0; s < styles.length; s++) {
+                    let style = styles[s];
+
+                    if (style.innerHTML.indexOf('insp-wrapper') != -1) {
+
+                        styles[s].innerHTML = styles[s].innerHTML
+                            .replace(/#242424/g, bColor) // background color
+                            .replace(/#2c2c2c/g, bColorl1) // background-lighter
+                            .replace(/#383838/g, bColorl2) // background-lighter2
+                            .replace(/#454545/g, bColorl3) // background-lighter3
+                            .replace(/#ccc/g, color) // color
+                            .replace(/#f29766/g, colorTop) // color-top
+                            .replace(/#5db0d7/g, colorBot) // color-bot
+                    }
+                }
+            }
         }
 
         /**

inspector/test/index.js

@@ -16,7 +16,17 @@ var Test = (function () {
     Test.prototype._run = function () {
         var _this = this;
         this._initScene();
-        this.scene.debugLayer.show({ popup: false, parentElement: document.getElementById('inspector') });
+        this.scene.debugLayer.show({
+            popup: false,
+            parentElement: document.getElementById('inspector'),
+            newColors: {
+                backgroundColor: '#eee',
+                backgroundColorLighter: '#fff',
+                backgroundColorLighter2: '#fff',
+                backgroundColorLighter3: '#fff',
+                color: '#333'
+            }
+        });
         this.scene.executeWhenReady(function () {
             _this._initGame();
             _this.engine.runRenderLoop(function () {

src/Debug/babylon.debugLayer.ts

@@ -14,12 +14,25 @@ module BABYLON {
         }
 
         /** Creates the inspector window. */
-        private _createInspector(config: { popup?: boolean, initialTab?: number, parentElement?: HTMLElement } = {}) {
+        private _createInspector(config: {
+            popup?: boolean,
+            initialTab?: number,
+            parentElement?: HTMLElement,
+            newColors?: {
+                backgroundColor?: string,
+                backgroundColorLighter?: string,
+                backgroundColorLighter2?: string,
+                backgroundColorLighter3?: string,
+                color?: string,
+                colorTop?: string,
+                colorBot?: string
+            }
+        } = {}) {
             let popup = config.popup || false;
             let initialTab = config.initialTab || 0;
             let parentElement = config.parentElement || null;
             if (!this._inspector) {
-                this._inspector = new INSPECTOR.Inspector(this._scene, popup, initialTab, parentElement);
+                this._inspector = new INSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
             } // else nothing to do,; instance is already existing
         }
 
@@ -37,7 +50,20 @@ module BABYLON {
             }
         }
 
-        public show(config: { popup?: boolean, initialTab?: number, parentElement?: HTMLElement } = {}) {
+        public show(config: {
+            popup?: boolean,
+            initialTab?: number,
+            parentElement?: HTMLElement,
+            newColors?: {
+                backgroundColor?: string,
+                backgroundColorLighter?: string,
+                backgroundColorLighter2?: string,
+                backgroundColorLighter3?: string,
+                color?: string,
+                colorTop?: string,
+                colorBot?: string
+            }
+        } = {}) {
             if (typeof INSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
                 Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));