mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme picker canvas backgrounds

Browse Source 
Read --picker-panel from the card's computed style at scene creation
and re-apply on themechange, so the three-js canvases flip with the
rest of the UI instead of staying stuck on the light palette.
This commit is contained in:
Michael Pilosov 2026-04-21 21:56:14 -06:00
parent d385337a36
commit 158f3fdefa
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/web/static/dataset-picker.js
View File

@ -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;

4
app/web/templates/index.html
View File

@ -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>