From 2e0b1c4aab3f20f0f8cf6be2e48c1db1ed624aa2 Mon Sep 17 00:00:00 2001 From: StevenBtw Date: Mon, 16 Mar 2026 00:10:18 +0100 Subject: [PATCH 1/2] automatic mode, grey theme --- src/anywidget_archimate/ui/index.js | 24 ++++++++++++++++ src/anywidget_archimate/ui/styles.css | 41 ++++++++++++++++----------- 2 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/anywidget_archimate/ui/index.js b/src/anywidget_archimate/ui/index.js index e3bbc0f..9e46098 100644 --- a/src/anywidget_archimate/ui/index.js +++ b/src/anywidget_archimate/ui/index.js @@ -1054,6 +1054,30 @@ function render({ model, el }) { wrapper.className = "aam-wrapper"; el.appendChild(wrapper); + // Auto-detect host theme (marimo uses Tailwind class="dark" on ) + function detectHostDark() { + const html = document.documentElement; + if (html.classList.contains("dark")) return true; + if (html.dataset.theme === "dark") return true; + if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return true; + return false; + } + + const hasHostTheme = !!el.getRootNode()?.host?.tagName?.startsWith("MARIMO-"); + if (hasHostTheme) { + wrapper.classList.add("aam-auto-theme"); + model.set("dark_mode", detectHostDark()); + model.save_changes(); + const themeObserver = new MutationObserver(() => { + const dark = detectHostDark(); + if (model.get("dark_mode") !== dark) { + model.set("dark_mode", dark); + model.save_changes(); + } + }); + themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] }); + } + const toolbar = document.createElement("div"); toolbar.className = "aam-toolbar"; toolbar.innerHTML = ` diff --git a/src/anywidget_archimate/ui/styles.css b/src/anywidget_archimate/ui/styles.css index 9b625f8..56c5c04 100644 --- a/src/anywidget_archimate/ui/styles.css +++ b/src/anywidget_archimate/ui/styles.css @@ -1,15 +1,16 @@ /* anywidget-archimate styles */ +/* Light mode (matches marimo light) */ .aam-wrapper { --aam-bg: #ffffff; - --aam-text: #111827; - --aam-border: #e5e7eb; - --aam-toolbar-bg: #f9fafb; - --aam-btn-bg: #f3f4f6; - --aam-btn-hover: #e5e7eb; - --aam-graph-bg: #fdfdfd; - --aam-detail-bg: #f9fafb; - --aam-panel-bg: #f9fafb; + --aam-text: #0f172a; + --aam-border: #e2e8f0; + --aam-toolbar-bg: #f8f9fa; + --aam-btn-bg: #f1f5f9; + --aam-btn-hover: #e2e8f0; + --aam-graph-bg: #ffffff; + --aam-detail-bg: #f8f9fa; + --aam-panel-bg: #f8f9fa; --aam-panel-width: 220px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; @@ -23,16 +24,17 @@ flex-direction: column; } +/* Dark mode (matches marimo dark) */ .aam-wrapper.aam-dark { - --aam-bg: #1a1a2e; - --aam-text: #e0e0e0; - --aam-border: #333355; - --aam-toolbar-bg: #16162a; - --aam-btn-bg: #2a2a4a; - --aam-btn-hover: #3a3a5a; - --aam-graph-bg: #1e1e3a; - --aam-detail-bg: #22223a; - --aam-panel-bg: #16162a; + --aam-bg: #181c1a; + --aam-text: #eceeed; + --aam-border: #3b403e; + --aam-toolbar-bg: #1f2321; + --aam-btn-bg: #252927; + --aam-btn-hover: #3b403e; + --aam-graph-bg: #181c1a; + --aam-detail-bg: #252927; + --aam-panel-bg: #1f2321; } /* Toolbar */ @@ -396,3 +398,8 @@ border-radius: 3px; font-size: 12px; } + +/* Hide dark mode button when host provides theme */ +.aam-wrapper.aam-auto-theme .aam-btn-dark { + display: none; +} From 9166399061dcd1d77c543f2b600ab53e77d11ece Mon Sep 17 00:00:00 2001 From: StevenBtw Date: Mon, 16 Mar 2026 00:11:27 +0100 Subject: [PATCH 2/2] bump --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 45f78fe..be6dabc 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [project] name = "anywidget-archimate" -version = "0.1.3" +version = "0.1.4" description = "Interactive ArchiMate model viewer widget for Jupyter, Marimo, and VS Code notebooks" readme = "README.md" license = "Apache-2.0"