Merge pull request #5434 from nextcloud/ernolf/darkmode-fix

aio-interface: fix dark-mode

php/public/style.css

@@ -14,6 +14,7 @@
     --color-info: #0071ad;
     --color-info-hover: #00aaef;
     --color-border-maxcontrast: #7d7d7d;
+    --color-loader: #f3f3f3;
     --border: .5px;
     --border-hover: 2px;
     --border-radius: 7px;
@@ -35,6 +36,7 @@
     --color-error-text: #ff8080;
     --color-info: #00aeff;
     --color-info-hover: #33beff;
+    --color-loader: var(--color-border-maxcontrast);
     --border-hover: var(--border);
 }
 
@@ -235,6 +237,7 @@ select:hover {
 textarea {
     border-radius: var(--border-radius);
     border: .5px solid var(--color-main-border);
+    max-width: 100%;
 }
 
 input[type="text"]:focus,
@@ -279,7 +282,7 @@ html[data-theme="dark"] ::-webkit-scrollbar-track {
     background-color: var(--color-main-background);
     border-radius: var(--border-radius-large);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    max-height: calc(100dvh - 40px);
+    max-height: calc(100dvh - 50px);
     overflow: hidden;
 }
 
@@ -385,7 +388,7 @@ label {
 }
 
 .loader {
-    border: 16px solid #f3f3f3;
+    border: 16px solid var(--color-loader);
     border-radius: 50%;
     border-top: 16px solid var(--color-nextcloud-blue);
     width: 120px;
@@ -418,6 +421,7 @@ label {
     font-size: 36px; /* Adjust font size */
     cursor: pointer; /* Change cursor to pointer */
     outline: none;
+    z-index: 9999; /* Ensures the icon is on top of every layer */
 }
 
 /* Icon styling: default state */
@@ -449,7 +453,6 @@ label {
     position: relative; /* Ensures stacking order */
     filter: grayscale(0%); /* Restore full color */
     opacity: 1; /* Fully visible on hover */
-    z-index: 1; /* Ensures the icon is on top of the shadow */
 }
 
 /* Inner glow when hovered */
@@ -462,3 +465,9 @@ label {
 #theme-toggle:not(:hover) #theme-icon {
     opacity: 0.6; /* Slightly transparent */
 }
+
+@media only screen and (max-width: 800px) {
+    .container {
+        margin: 50px auto 0px auto;
+    }
+}

php/public/toggle-dark-mode.js

@@ -1,7 +1,7 @@
 // Function to toggle theme
 function toggleTheme() {
     const currentTheme = document.documentElement.getAttribute('data-theme');
-    const newTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+    const newTheme = (currentTheme === 'dark') ? '' : 'dark'; // Toggle between no theme and dark theme
     document.documentElement.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
 
@@ -13,14 +13,14 @@ function toggleTheme() {
 // Function to apply saved theme from localStorage
 function applySavedTheme() {
     const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) {
+    if (savedTheme === 'dark') {
-        document.documentElement.setAttribute('data-theme', savedTheme);
+        document.documentElement.setAttribute('data-theme', 'dark');
-
+        document.getElementById('theme-icon').textContent = '☀️'; // Sun icon for dark mode
-        // Ensure the icon is set correctly based on the saved theme
+    } else {
-        const themeIcon = document.getElementById('theme-icon');
+        document.documentElement.removeAttribute('data-theme'); // Default to light theme (no data-theme)
-        themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
+        document.getElementById('theme-icon').textContent = '🌙'; // Moon icon for light mode
     }
 }
 
-// Apply theme when the page loads
+// Immediately apply the saved theme
-document.addEventListener('DOMContentLoaded', applySavedTheme);
+applySavedTheme();

php/templates/containers.twig

@@ -683,7 +683,4 @@
 
         </main>
     </div>
-    <div id="overlay">
-        <div class="loader"></div>
-    </div>
 {% endblock %}

php/templates/layout.twig

@@ -4,13 +4,18 @@
         <link rel="stylesheet" href="/style.css?v3" media="all" />
         <link rel="icon" href="/img/favicon.png">
         <script type="text/javascript" src="forms.js"></script>
+        <script type="text/javascript" src="toggle-dark-mode.js"></script>
     </head>
 
     <body>
         <div class="wrapper">
             {% block body %}{% endblock %}
         </div>
-        <button id="theme-toggle" onclick="toggleTheme()"><span id="theme-icon"/></button>
+        <div id="overlay">
-        <script type="text/javascript" src="toggle-dark-mode.js"></script>
+            <div class="loader"></div>
+        </div>
+        <button id="theme-toggle" onclick="toggleTheme()">
+            <span id="theme-icon">🌙</span>
+        </button>
     </body>
 </html>

php/templates/login.twig

@@ -22,7 +22,4 @@
         {% endif %}
     </div>
     <script type="text/javascript" src="before-unload.js"></script>
-    <div id="overlay">
-        <div class="loader"></div>
-    </div>
 {% endblock %}