feat(ui): use temporary overlay during light/dark theme switching

pogorielova · web-flow · commit d41e27ff2c29 · 2025-12-10T11:37:54.000+02:00
diff --git a/shkeeper/static/css/common.css b/shkeeper/static/css/common.css
@@ -16,6 +16,23 @@ dialog::backdrop {
   opacity: .9;
 }
 
+.theme-transition-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--theme-transition-color, #000);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .35s ease;
+  z-index: 9999;
+}
+
+html[data-theme="light"] .theme-transition-overlay {
+  --theme-transition-color: #ffffff;
+}
+
+html[data-theme="dark"] .theme-transition-overlay {
+  --theme-transition-color: #000000;
+}
 
 .htmx-indicator{
     display:none;
diff --git a/shkeeper/templates/base.j2 b/shkeeper/templates/base.j2
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tooltips.css') }}">
   </head>
   <body>
+  <div class="theme-transition-overlay"></div>
 
      {% block body %}{% endblock %}
 
@@ -59,13 +60,26 @@
         document.querySelectorAll('img.big-logo, img.menu-logo, img.htmx-indicator').forEach((e, i) => { e.src = e.src.replace('.dark.', '.light.'); });
       }
 
-      function forceColorScheme(is_dark) {
-        if (is_dark) {
-          setDark();
-        } else {
-          setLight();
-        }
-      }
+function forceColorScheme(is_dark) {
+  const overlay = document.querySelector('.theme-transition-overlay');
+
+  overlay.style.opacity = '1';
+
+  setTimeout(() => {
+    if (is_dark) {
+      setDark();
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      setLight();
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  }, 150);
+
+  setTimeout(() => {
+    overlay.style.opacity = '0';
+  }, 350);
+}
+
 
       function useMediaRequestColorScheme() {
           if (document.cookie.match(/theme=(dark|light)/)) return;
