Implement dark theme support for mobile: update background colors based on theme, enhance layout responsiveness, and add script to enforce dark mode on mobile devices for improved user experience.

magdielcardoso · magdielcardoso · commit 34cd49c4922f · 2025-07-18T12:25:58.000-03:00
diff --git a/examples/mobile.html b/examples/mobile.html
@@ -55,32 +55,61 @@
             margin-top: 0 !important;
         }
 
-        /* Garantir que o fundo permaneça como está, especialmente no Kanban */
-        body {
+        /* Garantir que o fundo seja dark quando o tema dark estiver ativo */
+        body.dark {
+            background-color: #1f2937 !important;
+            /* bg-gray-800 */
+        }
+
+        body:not(.dark) {
             background-color: #f3f4f6 !important;
             /* bg-gray-100 */
         }
 
-        /* Garantir que o app não tenha fundo escuro */
-        #app {
-            background-color: transparent !important;
+        /* Garantir que o app tenha fundo dark quando necessário */
+        #app.dark {
+            background-color: #1f2937 !important;
         }
 
-        /* Garantir que o wrapper principal não tenha fundo escuro */
-        #app>div.flex.flex-wrap.app-wrapper {
+        #app:not(.dark) {
             background-color: transparent !important;
         }
 
-        /* Corrigir fundo escuro específico do Kanban */
-        #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div {
-            background-color: transparent !important;
+        /* Garantir que o wrapper principal tenha fundo dark quando necessário */
+        #app>div.flex.flex-wrap.app-wrapper.dark {
+            background-color: #1f2937 !important;
         }
 
-        /* Garantir que o main do Kanban não tenha fundo escuro */
-        #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main {
+        #app>div.flex.flex-wrap.app-wrapper:not(.dark) {
             background-color: transparent !important;
         }
 
+
+
+        /* Layout responsivo para Kanban no mobile */
+        @media (max-width: 768px) {
+
+            /* Div mãe - forçar flex-col no mobile */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div>div.flex-1.overflow-auto>div {
+                flex-direction: column !important;
+                gap: 1rem !important;
+            }
+
+            /* Coluna esquerda - ocupar largura total no mobile e ficar abaixo */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div>div.flex-1.overflow-auto>div>div.w-2\/3.p-8.space-y-6 {
+                width: 100% !important;
+                padding: 1rem !important;
+                order: 2 !important;
+            }
+
+            /* Coluna direita - ocupar largura total no mobile e ficar acima */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div>div.flex-1.overflow-auto>div>div.w-1\/3.p-4.space-y-6 {
+                width: 100% !important;
+                padding: 1rem !important;
+                order: 1 !important;
+            }
+        }
+
         .navbar-item-indicator {
             height: 3px;
             transition: all 0.3s ease;
@@ -325,6 +354,76 @@
         });
     </script>
 
+    <!-- Script para forçar tema dark no mobile -->
+    <script data-name="ForceDarkTheme">
+        document.addEventListener('DOMContentLoaded', function () {
+            function forceDarkTheme() {
+                // Aplicar apenas no mobile
+                if (window.innerWidth > 768) {
+                    return;
+                }
+
+                // Forçar tema dark no body
+                document.body.classList.remove('light');
+                document.body.classList.add('dark');
+
+                // Forçar tema dark no elemento app
+                const appElement = document.getElementById('app');
+                if (appElement) {
+                    appElement.classList.remove('light');
+                    appElement.classList.add('dark');
+                }
+
+                // Forçar tema dark no wrapper principal
+                const appWrapper = document.querySelector('#app > div.flex.flex-wrap.app-wrapper');
+                if (appWrapper) {
+                    appWrapper.classList.remove('light');
+                    appWrapper.classList.add('dark');
+                }
+
+                // Adicionar classes dark em todos os elementos filhos
+                document.querySelectorAll('*').forEach(element => {
+                    if (!element.classList.contains('dark')) {
+                        element.classList.add('dark');
+                    }
+                    element.classList.remove('light');
+                });
+
+                // Forçar cores dark via CSS
+                document.documentElement.style.setProperty('--color-scheme', 'dark');
+                document.documentElement.style.setProperty('color-scheme', 'dark');
+            }
+
+            // Executar imediatamente
+            forceDarkTheme();
+
+            // Observer para detectar mudanças no DOM
+            const observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (mutation.addedNodes.length) {
+                        forceDarkTheme();
+                    }
+                });
+            });
+
+            // Observar mudanças no body
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class']
+            });
+
+            // Executar periodicamente para garantir
+            setInterval(forceDarkTheme, 1000);
+
+            // Adicionar listener para resize
+            window.addEventListener('resize', function () {
+                forceDarkTheme();
+            });
+        });
+    </script>
+
     <!-- Script para customizar botão IA -->
     <script data-name="AIButton">
         document.addEventListener('DOMContentLoaded', function () {
