fix: apply dark mode in overlay iframe via storage events and apply-theme.js

Agent-Logs-Url: https://github.com/nextcloud/all-in-one/sessions/bc95f559-e0c7-4682-96fb-0799956a95c6 Co-authored-by: szaimen <42591237+szaimen@users.noreply.github.com>
aio-interface: improve overlay log appearance
2026-05-22 03:10:16 +00:00 · 2026-05-21 11:56:51 +00:00 · 2026-05-19 16:30:33 +02:00
7 changed files with 29 additions and 9 deletions
--- a/php/public/apply-theme.js
+++ b/php/public/apply-theme.js
@@ -0,0 +1,14 @@
+"use strict";
+
+// Apply the saved theme immediately to avoid a flash of the wrong theme.
+try { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') ?? ''); } catch (e) {}
+
+// React when the user toggles the theme on the parent page while this page is
+// open in an iframe.  localStorage.setItem() fires a 'storage' event on every
+// other window / frame that shares the same origin, so we can keep in sync
+// without the parent having to know about us.
+window.addEventListener('storage', (e) => {
+    if (e.key === 'theme') {
+        document.documentElement.setAttribute('data-theme', e.newValue ?? '');
+    }
+});
--- a/php/public/logs.css
+++ b/php/public/logs.css
@@ -10,6 +10,7 @@ pre {
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 #floating-box {
    position: fixed;
@@ -26,7 +27,8 @@ pre {
    gap: 0.5rem;
    font-size: large;
    border: solid thin gray;
-    background-color: #f9f9f9;
+    background-color: var(--color-main-background);
+    color: var(--color-main-text);
    width: 10rem;
    padding: 0.5rem 1rem;
    margin: 0 0 0 1rem;
--- a/php/public/style.css
+++ b/php/public/style.css
@@ -483,8 +483,8 @@ input[type="checkbox"]:disabled:not(:checked) + label {
    visibility: hidden;
    opacity: 0;
    align-self: start;
-    width: 300px;
-    height: 200px;
+    width: min(700px, calc(100vw - 4rem));
+    height: min(400px, calc(100vh - 14rem));
    border-radius: var(--border-radius-large);
    border: solid thin rgb(192, 192, 192);
 }
--- a/php/public/toggle-dark-mode.js
+++ b/php/public/toggle-dark-mode.js
@@ -11,7 +11,7 @@ function toggleTheme() {

 function setThemeToDOM(value) {
    // Set the theme to the root document and all possible iframe documents (so they can adapt their styling, too).
-    const documents = [document, Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument)].flat()
+    const documents = [document, ...Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument).filter(Boolean)]
    documents.forEach((doc) => doc.documentElement.setAttribute('data-theme', value));
 }

@@ -35,4 +35,6 @@ setThemeToDOM(getSavedTheme());
 document.addEventListener('DOMContentLoaded', () => {
    setThemeIcon(getSavedTheme())
    document.querySelector('button#theme-toggle')?.addEventListener('click', () => toggleTheme());
+    // Re-apply theme when the overlay-log iframe navigates (e.g. after a form submission).
+    document.querySelector('iframe#overlay-log')?.addEventListener('load', () => setThemeToDOM(getSavedTheme()));
 });
--- a/php/src/Controller/DockerController.php
+++ b/php/src/Controller/DockerController.php
@@ -401,7 +401,8 @@ readonly class DockerController {
        <!DOCTYPE html>
        <html lang="en" class="overlay-iframe">
            <head>
-                <link rel="stylesheet" href="../../style.css?v8" media="all" />
+                <link rel="stylesheet" href="../../style.css?v9" media="all" />
+                <script type="text/javascript" src="../../apply-theme.js?v1"></script>
                <script type="text/javascript" src="../../scroll-into-view.js"></script>
            </head>
            <body>
--- a/php/templates/layout.twig
+++ b/php/templates/layout.twig
@@ -2,10 +2,10 @@
 <html lang="en">
    <head>
        <title>AIO</title>
-        <link rel="stylesheet" href="style.css?v9" media="all" />
+        <link rel="stylesheet" href="style.css?v10" media="all" />
        <link rel="icon" href="img/favicon.png">
        <script type="text/javascript" src="forms.js?v2"></script>
-        <script type="text/javascript" src="toggle-dark-mode.js?v1"></script>
+        <script type="text/javascript" src="toggle-dark-mode.js?v2"></script>
        <script type="text/javascript" src="click-handlers.js?v2"></script>
    </head>

--- a/php/templates/log.twig
+++ b/php/templates/log.twig
@@ -2,9 +2,10 @@
    <head>
        <title>AIO</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <link rel="stylesheet" href="style.css">
-        <link rel="stylesheet" href="logs.css">
+        <link rel="stylesheet" href="style.css?v1">
+        <link rel="stylesheet" href="logs.css?v1">
        <link rel="icon" href="img/favicon.png">
+        <script src="apply-theme.js?v1"></script>
        <script src="log-load.js?v1"></script>
    </head>
    <body data-container-id="{{ id }}">