daenamnu/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2026-05-30 15:30:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
copilot-swe-agent[bot]
2026-05-21 11:56:51 +00:00
committed by GitHub
parent b0c4f97ba2
commit f178b49cc1
4 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
php/public/apply-theme.js Normal file
View File

@@ -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 ?? '');
}
});

2
php/public/toggle-dark-mode.js
View File

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

1
php/src/Controller/DockerController.php
View File

@@ -402,6 +402,7 @@ readonly class DockerController {
<html lang="en" class="overlay-iframe">
<head>
<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>

1
php/templates/log.twig
View File

@@ -5,6 +5,7 @@
<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 }}">