light dark color scheme update

RPSoftCompany · Feb 29, 2024 · 3a6c5e3 · 3a6c5e3
1 parent 6b108d8
commit 3a6c5e3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 50 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -140,6 +140,8 @@ onMounted(() => {
 
   if (localStorage.theme) {
     darkTheme.value = localStorage.theme === 'true'
+  } else {
+    darkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches
   }
 })
 

diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -9,6 +9,24 @@
   font-size: 18px;
 }
 
+html {
+  --color-scheme: light;
+
+  --mainTransition: all 0.5s ease;
+
+  color-scheme: var(--color-scheme);
+}
+
+@media (prefers-reduced-motion) {
+  html {
+    --mainTransition: none;
+  }
+}
+
+html:has(.dark) {
+  --color-scheme: dark;
+}
+
 body {
   font-family: "Atkinson Hyperlegible", sans-serif;
 }
@@ -121,29 +139,17 @@ h6 {
 // ==========================================
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s ease;
+  transition: var(--mainTransition);
 }
 
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
 
-@media (prefers-reduced-motion) {
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: none;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    transition: none;
-  }
-}
-
 .scale-enter-active,
 .scale-leave-active {
-  transition: all 0.5s ease;
+  transition: var(--mainTransition);
   overflow: hidden;
 }
 
@@ -160,27 +166,9 @@ h6 {
   height: 1.75rem;
 }
 
-@media (prefers-reduced-motion) {
-  .scale-enter-active,
-  .scale-leave-active {
-    transition: none;
-    overflow: hidden;
-  }
-
-  .scale-enter-from,
-  .scale-leave-to {
-    transition: none;
-  }
-
-  .scale-enter-to,
-  .scale-leave-from {
-    transition: none;
-  }
-}
-
 .scale-card-enter-active,
 .scale-card-leave-active {
-  transition: all 0.5s ease;
+  transition: var(--mainTransition);
   overflow: hidden;
 }
 
@@ -196,20 +184,3 @@ h6 {
 .scale-card-leave-from {
   height: 100%;
 }
-
-@media (prefers-reduced-motion) {
-  .scale-card-enter-active,
-  .scale-card-leave-active {
-    transition: none;
-  }
-
-  .scale-card-enter-from,
-  .scale-card-leave-to {
-    transition: none;
-  }
-
-  .scale-card-enter-to,
-  .scale-card-leave-from {
-    transition: none;
-  }
-}