diff --git a/packages/z-flutter/web/index.html b/packages/z-flutter/web/index.html
index 4d26af4..041a495 100644
--- a/packages/z-flutter/web/index.html
+++ b/packages/z-flutter/web/index.html
@@ -64,7 +64,7 @@
#event-log .type { color: #58a6ff; }
#event-log .time { color: #6e7681; margin-right: 8px; }
#event-log .payload { color: #8b949e; }
- #flutter-container { flex: 1; min-height: 0; }
+ #flutter-container { flex: 1; min-height: 0; position: relative; }
@@ -235,11 +235,10 @@
function handleEvent(event) {
switch (event.type) {
- case "content_height": {
- const container = document.getElementById("flutter-container");
- if (container) container.style.height = event.payload.height + "px";
+ case "content_height":
+ // No-op in dev page — flex layout handles sizing.
+ // The event is still logged via logEvent().
break;
- }
case "entry_moved": {
const { entryId, newStart, newEnd, newGroupId, newLane } = event.payload;
const item = currentState.items[entryId];
@@ -299,29 +298,78 @@
// Toolbar actions
// -----------------------------------------------------------------------
+ function setPageTheme(isDark) {
+ const body = document.body;
+ const toolbar = document.getElementById("toolbar");
+ const eventLog = document.getElementById("event-log");
+
+ if (isDark) {
+ body.style.background = "#1a1a2e";
+ body.style.color = "#e0e0e0";
+ toolbar.style.background = "#16213e";
+ toolbar.style.borderBottomColor = "#0f3460";
+ eventLog.style.background = "#0d1117";
+ eventLog.style.borderTopColor = "#0f3460";
+ for (const btn of toolbar.querySelectorAll("button")) {
+ btn.style.background = "#1a1a2e";
+ btn.style.color = "#e0e0e0";
+ btn.style.borderColor = "#0f3460";
+ }
+ for (const sep of toolbar.querySelectorAll(".sep")) {
+ sep.style.background = "#0f3460";
+ }
+ for (const lbl of toolbar.querySelectorAll("label")) {
+ lbl.style.color = "#8899aa";
+ }
+ } else {
+ body.style.background = "#f0f0f0";
+ body.style.color = "#333";
+ toolbar.style.background = "#e0e0e0";
+ toolbar.style.borderBottomColor = "#ccc";
+ eventLog.style.background = "#f5f5f5";
+ eventLog.style.borderTopColor = "#ccc";
+ for (const btn of toolbar.querySelectorAll("button")) {
+ btn.style.background = "#fff";
+ btn.style.color = "#333";
+ btn.style.borderColor = "#ccc";
+ }
+ for (const sep of toolbar.querySelectorAll(".sep")) {
+ sep.style.background = "#ccc";
+ }
+ for (const lbl of toolbar.querySelectorAll("label")) {
+ lbl.style.color = "#666";
+ }
+ }
+ }
+
document.getElementById("btn-dark").addEventListener("click", () => {
currentState.darkMode = true;
- document.body.style.background = "#1a1a2e";
+ setPageTheme(true);
pushState(currentState);
});
document.getElementById("btn-light").addEventListener("click", () => {
currentState.darkMode = false;
- document.body.style.background = "#f0f0f0";
- document.body.style.color = "#333";
+ setPageTheme(false);
pushState(currentState);
});
document.getElementById("btn-few").addEventListener("click", () => {
- pushState(buildFewItems());
+ const state = buildFewItems();
+ state.darkMode = currentState.darkMode;
+ pushState(state);
});
document.getElementById("btn-many").addEventListener("click", () => {
- pushState(buildManyItems());
+ const state = buildManyItems();
+ state.darkMode = currentState.darkMode;
+ pushState(state);
});
document.getElementById("btn-empty").addEventListener("click", () => {
- pushState(buildEmpty());
+ const state = buildEmpty();
+ state.darkMode = currentState.darkMode;
+ pushState(state);
});
document.getElementById("btn-push").addEventListener("click", () => {
@@ -333,6 +381,28 @@
});
+