fixed flashing colors on page load by adding transitions on theme change

novcmbro · Jun 6, 2024 · 7661ce9 · 7661ce9
1 parent e7aa1ae
commit 7661ce9
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 11 deletions.
diff --git a/src/css/index.css b/src/css/index.css
@@ -41,7 +41,6 @@
   font-size: var(--font-md);
   font-weight: var(--font-medium);
   scroll-behavior: smooth;
-  transition: background-color var(--transition-duration), color var(--transition-duration);
 }
 
 * {

diff --git a/src/css/input.css b/src/css/input.css
@@ -9,6 +9,10 @@
   outline-width: var(--border-size);
   outline-style: solid;
   outline-offset: calc(var(--border-size) * -1);
+}
+
+.input-section.input-field-has-focus,
+.input-section.input-field-is-invalid {
   transition: outline-color var(--transition-duration);
 }
 

diff --git a/src/css/output.css b/src/css/output.css
@@ -3,7 +3,6 @@
   border-radius: var(--shape);
   flex-grow: 1;
   padding: var(--spacing-md);
-  transition: background-color var(--transition-duration);
 }
 
 .output-placeholder:not([hidden]) {

diff --git a/src/css/themes.css b/src/css/themes.css
@@ -3,24 +3,36 @@
   color: var(--dark-gray);
 }
 
-:root.light .input-section:not(.input-field-has-focus, .input-field-is-invalid) {
-  outline-color: var(--white);
-}
-
-:root.light .output-section {
-  background-color: var(--white);
-}
-
 :root.dark {
   --shadow-opacity: 1;
   background-color: var(--black);
   color: var(--white);
 }
 
+:root.transition {
+  transition: background-color var(--transition-duration), color var(--transition-duration);
+}
+
+:root.light .input-section:not(.input-field-has-focus, .input-field-is-invalid) {
+  outline-color: var(--white);
+}
+
 :root.dark .input-section:not(.input-field-has-focus, .input-field-is-invalid) {
   outline-color: var(--light-black);
 }
 
+:root.transition .input-section {
+  transition: outline-color var(--transition-duration);
+}
+
+:root.light .output-section {
+  background-color: var(--white);
+}
+
 :root.dark .output-section {
   background-color: var(--light-black);
 }
+
+:root.transition .output-section {
+  transition: background-color var(--transition-duration);
+}
diff --git a/src/js/theme.js b/src/js/theme.js
@@ -12,7 +12,10 @@ const theme = {
 
 theme.preferred = () => prefersLightTheme.matches ? "light" : "dark"
 
-theme.update = () => rootElement.className = theme.name()
+theme.update = () => {
+  rootElement.classList.toggle("light", theme.name() === "light")
+  rootElement.classList.toggle("dark", theme.name() === "dark")
+}
 
 theme.init = () => {
   if (!theme.name()) {
@@ -33,6 +36,8 @@ theme.change = ({ currentTarget }) => {
   if (rootElement.className !== themeName) {
     localStorage.setItem(localStorageKey, themeName)
     theme.update()
+    rootElement.classList.add("transition")
+    setTimeout(() => rootElement.classList.remove("transition"), 500)
   }
 }