D.T Home: #329 - Light Background In Dark Mode

[kodinkat]

• fixes: Light background in dark mode #329

[corsacca]

@kodinkat Thanks.
It looks like a lot of added css
Just adding height=100vh to the sp-theme seems to do the trick for me. Does that work for you too?

Are there also other fixes include in this PR?

[kodinkat]

@kodinkat Thanks. It looks like a lot of added css Just adding height=100vh to the sp-theme seems to do the trick for me. Does that work for you too?

Are there also other fixes include in this PR?

@corsacca applying height=100vh alone, lacks consistency across browsers and mobile; namely:

• doesn’t address Safari/in-app viewport changes,
• theme-switch background consistency,
• footer/layout constraints

Dynamic viewport adjustments, seemed to be a persistent challenge. The implemented solution ensures reliable full-viewport coverage and background rendering across devices, with dynamic updates during UI chrome changes and theme toggles.

Detailed Implementation Summary

Why we didn’t just set height: 100vh on sp-theme in plugin.php

• 100vh is unreliable on mobile browsers:
  • iOS Safari and many in-app browsers include/hide browser chrome dynamically; 100vh often causes content to be too tall (white gap) or too short (clipped) on scroll, URL bar show/hide, keyboard open, PWA standalone, split view, etc.
  • 100vh doesn’t respond to these transitions; using dvh or a JS-driven custom vh variable (innerHeight) avoids these pitfalls.
• Background rendering and theme toggling:
  • We needed consistent background fill when switching themes and across Safari quirks. Merely setting height on sp-theme doesn’t ensure the background color and the rest of the container chain render correctly during viewport changes.
• Layout structure and footer behavior:
  • The layout has .plugin, .plugin__main, .plugin__footer. Ensuring the footer sits at the bottom and the main area fills the rest usually requires a combination of min-height: 100%, flex layout, and a reliable viewport unit; 100vh alone can break this on mobile transitions.

Other fixes that were included (beyond 100vh)

• Viewport management:
  • Introduced a ViewportManager to compute a stable viewport height (especially for Safari) and update it on resize/scroll/chrome changes.
• sp-theme fill and Safari-specific tweaks:
  • CSS adjustments so sp-theme reliably fills the viewport across devices and Safari background quirks are handled.
• Theme toggle improvements:
  • Toggling themes now also updates background colors and re-applies viewport sizing so background fill remains correct after a theme change.
• Removed hardcoded color on sp-theme:
  • Made sp-theme color flexible so theme CSS controls it (avoids conflicts and improves consistency).

[corsacca]

Hey @kodinkat. Just to make sure, can you test #335 as a minimal version?
It uses dvh to dynamically adjust with view hight.

[kodinkat]

Hey @kodinkat. Just to make sure, can you test #335 as a minimal version? It uses dvh to dynamically adjust with view hight.

@corsacca - excellent call; as the minimal version also holds true for me, across the different browsers and views. Nice work!