Add theme toggle to login screen

2026-09-19 00:04:04 +03:00
parent c8190b7eec
commit 393c333794
5 changed files with 190 additions and 13 deletions
@@ -0,0 +1,51 @@
+<roundcube:include file="includes/layout.html" />
+
+<script>
+  (function () {
+    var lightMode = document.cookie.indexOf('colorMode=light') > -1;
+    document.documentElement.setAttribute('data-theme', lightMode ? 'light' : 'dark');
+  }());
+</script>
+
+<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
+
+<div id="layout-content" class="selected no-navbar" role="main">
+  <roundcube:object name="logo" src="/images/logo.svg" id="logo" alt="Logo" />
+  <roundcube:form id="login-form" name="login-form" method="post" class="propform">
+    <roundcube:object name="loginform" form="login-form" size="40" submit=true class="form-control" />
+    <label class="theme-toggle" for="login-theme-toggle">
+      <input id="login-theme-toggle" type="checkbox" role="switch" aria-label="Use dark theme" checked>
+      <span class="theme-toggle-track" aria-hidden="true"></span>
+      <span class="theme-toggle-label">Dark mode</span>
+    </label>
+    <div id="login-footer" role="contentinfo">
+      <roundcube:object name="productname" condition="config:display_product_info &gt; 0" />
+      <roundcube:object name="version" condition="config:display_product_info == 2" />
+      <roundcube:if condition="config:support_url" />
+        &nbsp;&bull;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" rel="noopener" class="support-link"><roundcube:label name="support" /></a>
+      <roundcube:endif />
+      <roundcube:container name="loginfooter" id="login-footer" />
+    </div>
+  </roundcube:form>
+</div>
+
+<script>
+  (function () {
+    var toggle = document.getElementById('login-theme-toggle');
+    var root = document.documentElement;
+    var darkMode = root.getAttribute('data-theme') !== 'light';
+
+    toggle.checked = darkMode;
+    toggle.addEventListener('change', function () {
+      var mode = toggle.checked ? 'dark' : 'light';
+      root.setAttribute('data-theme', mode);
+      document.cookie = 'colorMode=' + mode + '; path=/; max-age=31536000; samesite=lax';
+    });
+  }());
+</script>
+
+<noscript>
+  <p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p>
+</noscript>
+
+<roundcube:include file="includes/footer.html" />