diff --git a/player/player.view.tree b/player/player.view.tree
index afc8ad7..48982f6 100644
--- a/player/player.view.tree
+++ b/player/player.view.tree
@@ -15,6 +15,7 @@ $optimade_cifplayer_player $mol_view
 		<= Theme $mol_theme_auto
 	-
 	auto /
+		<= external_theme_auto null
 		<= dir_light null
 		<= ambient_light null
 		^ atom_boxes /
@@ -104,7 +105,7 @@ $optimade_cifplayer_player $mol_view
 						<= Zoom_down $mol_button_minor
 							click? <=> zoom_down? null
 							sub / <= Zoom_down_icon $mol_icon_magnify_minus_outline
-				<= Lights $mol_lights_toggle
+				^ lights_toggle / <= Lights $mol_lights_toggle
 		<= Overlays $mol_view
 			sub <= overlays_sub /
 				<= Switch_overlay $mol_switch
diff --git a/player/player.view.web.ts b/player/player.view.web.ts
index 65de356..d251dd4 100644
--- a/player/player.view.web.ts
+++ b/player/player.view.web.ts
@@ -10,8 +10,17 @@ namespace $.$$ {
 
 	export class $optimade_cifplayer_player extends $.$optimade_cifplayer_player {
 
-		theme() {
-			return '$mol_theme_' + (this.externals()?.theme || 'dark')
+		@ $mol_mem
+		external_theme_auto() {
+			const external = this.externals()?.theme
+			if( !external ) return
+
+			this.$.$mol_lights( external == 'light' ? true : false )
+		}
+		
+		@ $mol_mem
+		lights_toggle() {
+			return this.externals()?.theme ? [] : super.lights_toggle()
 		}
 
 		@ $mol_mem