perf: improve dark-light theme transition performance

starknt · Jan 8, 2024 · 4e5844c · 4e5844c
1 parent 35fee4e
commit 4e5844c
Showing 1 changed file with 27 additions and 19 deletions.
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -79,22 +79,30 @@ html.dark.bewly-design {
   display: none;
 }
 
-// /* Color Mode transition */
-// ::view-transition-old(root),
-// ::view-transition-new(root) {
-//   position: relative;
-//   animation: none;
-//   mix-blend-mode: normal;
-// }
-// ::view-transition-old(root) {
-//   z-index: 1;
-// }
-// ::view-transition-new(root) {
-//   z-index: 2147483646;
-// }
-// .dark::view-transition-old(root) {
-//   z-index: 2147483646;
-// }
-// .dark::view-transition-new(root) {
-//   z-index: 1;
-// }
+/* Color Mode transition */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none !important;
+  mix-blend-mode: normal;
+  transition: none !important;
+}
+::view-transition-old(*),
+::view-transition-new(*),
+::view-transition-old(#bewly *),
+::view-transition-new(#bewly *),
+::view-transition-old(#bewly *::after),
+::view-transition-new(#bewly *::before) {
+  transition: none !important;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-old(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}