Minimal Light Background In Dark Mode fix

resources/css/base.css

@@ -29,18 +29,26 @@ body {
     margin: 0;
 }
 
-@media (max-width: 600px) {
-    sp-theme,
-    .plugin {
-        min-height: 100vh;
-    }
+/* Ensure layout containers fill viewport on all screen sizes */
+sp-theme,
+.plugin {
+    min-height: 100vh;
+    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
+}
+
+/* Ensure sp-theme uses flexbox for proper layout */
+sp-theme {
+    display: flex;
+    flex-direction: column;
 }
 
 .plugin {
+    flex: 1; /* Fill available space in sp-theme */
     gap: 50px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    min-height: 100%; /* Inherit parent min-height */
 }
 
 .plugin__main {

resources/css/theme.css

@@ -155,25 +155,19 @@ sp-theme {
     --mod-buttongroup-spacing-horizontal: 10px;
     --mod-button-border-radius: 7px;
     --spectrum-button-height: var(--spectrum-component-height-100);
-
-    /* Smooth transitions for theme switching */
-    transition: all 0.3s ease;
-}
 
-/* Global smooth transitions for theme changes */
-* {
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+    /* Default light mode background */
+    background-color: #e2e2e2;
 }
 
-/* Force background color changes with highest specificity */
-html, body, body.dom-loaded {
-    background-color: var(--body-background-color, #e2e2e2) !important;
+/* Light mode explicit background */
+sp-theme[color="light"] {
+    background-color: #e2e2e2;
 }
 
-/* Debug: Force light mode background */
-html:not([data-theme="dark"]), 
-body:not([data-theme="dark"]) {
-    background-color: #e2e2e2 !important;
+/* Global smooth transitions for theme changes */
+* {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 /* Dark mode overrides for custom variables */
@@ -232,23 +226,15 @@ sp-theme[color="dark"] {
     --dt-modal-color: #f5f5f5;
     --dt-modal-button-color: #f5f5f5;
     --dt-modal-button-background: var(--primary-color);
-}
 
-/* Force dark mode background with highest specificity */
-sp-theme[color="dark"] html, 
-sp-theme[color="dark"] body, 
-sp-theme[color="dark"] body.dom-loaded {
-    background-color: var(--body-background-color, #1a1a1a) !important;
-}
-
-/* Debug: Force dark mode background directly */
-sp-theme[color="dark"] {
-    background-color: #1a1a1a !important;
+    /* Dark mode background */
+    background-color: #1a1a1a;
 }
 
-sp-theme[color="dark"] html,
-sp-theme[color="dark"] body {
-    background-color: #1a1a1a !important;
+/* Ensure html and body match the theme background */
+sp-theme[color="dark"] ~ body,
+html:has(sp-theme[color="dark"]) body {
+    background-color: #1a1a1a;
 }
 
 /* Dark mode styles for text elements */

resources/views/layouts/plugin.php

@@ -34,7 +34,6 @@
 ?>
 
 <sp-theme
-    color="light"
     scale="medium"
     id="main-theme"
 >