Fix css, isolate phonon amplitude, and force theme in tag attrs

player/player.view.css

@@ -0,0 +1,3 @@
+[mol_theme="$mol_theme_light"] {
+	--mol_theme_back: white;
+}

player/player.view.css.ts

@@ -51,7 +51,7 @@ namespace $.$$ {
 		},
 
 		Toogle_all: {
-			boxShadow: `0 0.5rem 0.5rem -0.5rem hsla(0,0%,0%,.5)`,	
+			boxShadow: `0 0.5rem 0.5rem -0.5rem hsla(0,0%,0%,.5)`,
 		},
 
 		Overlays: {
@@ -114,6 +114,10 @@ namespace $.$$ {
 			margin: 'auto',
 		},
 
+		Three: {
+			cursor: 'move',
+		},
+
 	} )
 
 }

player/player.view.web.ts

@@ -6,8 +6,14 @@ namespace $.$$ {
 	const TWEEN = $mpds_cifplayer_lib_tween.TWEEN
 	type TWEEN = typeof TWEEN
 
+	const phonon_amp: number = 6
+
 	export class $mpds_cifplayer_player extends $.$mpds_cifplayer_player {
 
+		theme() {
+			return '$mol_theme_' + (this.externals()?.theme || 'dark')
+		}
+
 		@ $mol_mem
 		available_overlays() {
 			try {
@@ -420,12 +426,12 @@ namespace $.$$ {
 			const labels = this.overlay_box().children
 
 			if( phonon.length !== atoms.length) {
-				this.$.$mol_fail( new $mol_data_error(`Internal error: phonon length does not match number of atoms`) )
+				this.$.$mol_fail( new $mol_data_error(`Phonon length does not match number of atoms`) )
 			}
 
 			atoms.forEach( ( atom: InstanceType< THREE["Object3D"] >, i: number ) => {
 				const start = atom.position.toArray()
-				const [ x, y, z ] = phonon[ i ].map( ( v, i ) => start[ i ] + v * 6 )
+				const [ x, y, z ] = phonon[ i ].map( ( v, i ) => start[ i ] + v * phonon_amp )
 
 				this.tweens.add( new TWEEN.Tween( atom.position ).to( { x, y, z }, 750 )
 					.easing( TWEEN.Easing.Cubic.InOut ).repeat( Infinity ).yoyo( true ).start()