Improved color scheme support.

devtools/background.js

@@ -32,6 +32,8 @@ chrome.runtime.onConnect.addListener( port => {
 		if ( tabId ) {
 
 			connections.delete( tabId );
+			// Clear badge if devtools panel is closed for this tab
+			chrome.action.setBadgeText( { tabId: tabId, text: '' } ).catch( () => { /* Tab might be gone */ } );
 
 		}
 
@@ -42,6 +44,19 @@ chrome.runtime.onConnect.addListener( port => {
 // Listen for messages from the content script
 chrome.runtime.onMessage.addListener( ( message, sender, sendResponse ) => {
 
+	if ( message.scheme ) {
+
+		chrome.action.setIcon( {
+			path: {
+				16: `icons/16-${message.scheme}.png`,
+				32: `icons/32-${message.scheme}.png`,
+				48: `icons/48-${message.scheme}.png`,
+				128: `icons/128-${message.scheme}.png`
+			}
+		} );
+
+	}
+
 	if ( sender.tab ) {
 
 		const tabId = sender.tab.id;

devtools/content-script.js

@@ -205,3 +205,15 @@ window.addEventListener( 'message', handleIframeMessage, false );
 
 // Use a single listener for messages from the background script
 chrome.runtime.onMessage.addListener( handleBackgroundMessage );
+
+// Icon color scheme
+const isLightTheme = window.matchMedia( '(prefers-color-scheme: light)' ).matches;
+
+chrome.runtime.sendMessage( { scheme: isLightTheme ? 'light' : 'dark' } );
+
+window.matchMedia( '(prefers-color-scheme: light)' ).onchange = ( event ) => {
+
+	chrome.runtime.sendMessage( { scheme: event.matches ? 'light' : 'dark' } );
+
+};
+

devtools/manifest.json

@@ -4,10 +4,10 @@
 	"version": "1.6",
 	"description": "Developer tools extension for Three.js",
 	"icons": {
-		"16": "icons/16.png",
-		"32": "icons/32.png",
-		"48": "icons/48.png",
-		"128": "icons/128.png"
+		"16": "icons/16-light.png",
+		"32": "icons/32-light.png",
+		"48": "icons/48-light.png",
+		"128": "icons/128-light.png"
 	},
 	"action": {},
 	"devtools_page": "index.html",

devtools/panel/panel.css

@@ -1,18 +1,33 @@
+:root {
+	color-scheme: light dark;
+}
+
 body {
+	background: light-dark( #fff, #333 );
+	color: light-dark( #333, #e0e0e0 );
 	margin: 0;
-	padding: 16px;
+	padding: 10px;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 	font-size: 12px;
-	color: #333;
-	background: #fff;
 }
+
+hr {
+	color: light-dark( #333, #e0e0e0 );
+}
+
+#scene-tree {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
 .info-item {
 	padding: 8px 12px;
-	background: #f5f5f5;
+	background: light-dark( #f5f5f5, #333 );
 	border-radius: 4px;
 	margin-bottom: 16px;
 	font-family: monospace;
-	color: #666;
+	color: light-dark( #666, #aaa );
 }
 .section {
 	margin-bottom: 24px;
@@ -21,20 +36,20 @@ body {
 	margin: 0 0 8px 0;
 	font-size: 11px;
 	text-transform: uppercase;
-	color: #666;
+	color: light-dark( #666, #aaa );
 	font-weight: 500;
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid light-dark( #eee, #444 );
 	padding-bottom: 4px;
 }
+
 .tree-item {
+	padding: 4px;
+	cursor: pointer;
 	display: flex;
 	align-items: center;
-	padding: 2px;
-	/* cursor: pointer; Let summary handle this */
-	border-radius: 4px;
 }
 .tree-item:hover {
-	background: #e0e0e0;
+	background: light-dark( #f0f0f0, #555 );
 }
 .tree-item .icon {
 	margin-right: 4px;
@@ -56,6 +71,7 @@ body {
 	opacity: 0.5;
 	font-size: 0.9em;
 }
+
 .children {
 	margin-left: 0;
 }
@@ -65,7 +81,7 @@ body {
 	cursor: pointer;
 }
 .renderer-summary:hover {
-	background: #e0e0e0;
+	background: light-dark( #f0f0f0, #555 );
 }
 
 /* Hide default details marker when using custom summary */

devtools/panel/panel.html

@@ -4,47 +4,6 @@
 	<meta charset="utf-8">
 	<title>Three.js DevTools</title>
 	<link rel="stylesheet" href="panel.css">
-	<style>
-		body {
-			margin: 0;
-			padding: 10px;
-			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-		}
-		#scene-tree {
-			width: 100%;
-			height: 100%;
-			overflow: auto;
-		}
-		.tree-item {
-			padding: 4px;
-			cursor: pointer;
-			display: flex;
-			align-items: center;
-		}
-		.tree-item:hover {
-			background-color: #f0f0f0;
-		}
-		.tree-item.selected {
-			background-color: #e0e0e0;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			body {
-				background: #232323;
-				color: #e0e0e0;
-			}
-			.info-item{
-				background-color: #333;
-				color: #aaa;
-			}
-			.tree-item:hover {
-				background-color: #333;
-			}
-			.tree-item.selected {
-				background-color: #333;
-			}
-		}
-	</style>
 </head>
 <body>
 	<div id="scene-tree"></div>