diff --git a/app/web/static/dataset-picker.js b/app/web/static/dataset-picker.js
index 80716c9..22a6661 100644
--- a/app/web/static/dataset-picker.js
+++ b/app/web/static/dataset-picker.js
@@ -72,6 +72,11 @@ function buildColors(labels, kind) {
   return colors;
 }
 
+function applyPickerBackground(scene, el) {
+  const css = getComputedStyle(el).getPropertyValue('--picker-panel').trim();
+  scene.background = new THREE.Color(css || '#f2eee4');
+}
+
 function createScene(container, dataset) {
   const { positions: basePositions } = normalize(dataset.points);
   const colors = buildColors(dataset.labels, dataset.kind);
@@ -90,7 +95,7 @@ function createScene(container, dataset) {
   });
 
   const scene = new THREE.Scene();
-  scene.background = new THREE.Color(0xf2eee4);
+  applyPickerBackground(scene, container);
   scene.add(new THREE.Points(geometry, material));
 
   const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
@@ -231,6 +236,10 @@ async function main() {
     updateContinue();
   }
 
+  document.addEventListener('themechange', () => {
+    for (const s of scenes) applyPickerBackground(s.scene, s.container);
+  });
+
   const formSubmitBtn = document.querySelector('#run-form button.submit');
   function updateContinue() {
     continueBtn.disabled = !selectedId;
diff --git a/app/web/templates/index.html b/app/web/templates/index.html
index 3d589f2..1c30ab7 100644
--- a/app/web/templates/index.html
+++ b/app/web/templates/index.html
@@ -193,8 +193,8 @@
   <span><span class="k">web</span> · scientific instrument · port 8001</span>
 </footer>
 
-<script src="/static/theme.js?v=6"></script>
-<script type="module" src="/static/dataset-picker.js?v=6"></script>
+<script src="/static/theme.js?v=7"></script>
+<script type="module" src="/static/dataset-picker.js?v=7"></script>
 
 </body>
 </html>