refactor dark mode mixin

gear-tech · Jan 7, 2025 · f70ea3f · f70ea3f
1 parent b2a52b2
commit f70ea3f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 60 deletions.
diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss
@@ -15,14 +15,15 @@
 }
 
 .container {
+  @include lightDark(background-color, #fff, #272b2f);
+
   display: flex;
   flex-direction: column;
 
-  background-color: #fff;
-  box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15);
+  border: 1px solid transparent;
 
-  @include darkMode() {
-    background-color: #272b2f;
+  @include lightMode() {
+    box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15);
   }
 }
 
@@ -36,13 +37,9 @@
 }
 
 .button {
-  margin-left: auto;
+  @include lightDark(color, #000, #fff);
 
-  color: #000;
-
-  @include darkMode() {
-    color: #fff;
-  }
+  margin-left: auto;
 
   svg {
     width: 20px;
@@ -51,25 +48,18 @@
 }
 
 .body {
-  color: #525251;
+  @include lightDark(color, #525251, #fff);
 
   overflow: hidden;
   text-overflow: ellipsis;
-
-  @include darkMode() {
-    color: #fff;
-  }
 }
 
 .footer {
-  color: #9babb0;
+  @include lightDark(color, #9babb0, rgba(245, 245, 245, 0.8));
+
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-
-  @include darkMode() {
-    color: rgba(245, 245, 245, 0.8);
-  }
 }
 
 .alert {
@@ -106,14 +96,11 @@
   }
 
   .title {
+    @include lightDark(color, #000, #fff);
+
     font-size: 17px;
     font-weight: 700;
     line-height: 1.4;
-    color: #000;
-
-    @include darkMode() {
-      color: #fff;
-    }
   }
 
   .body,
@@ -129,61 +116,45 @@
 }
 
 .success {
-  .header {
-    color: #0dd3a2;
-  }
-
   @include darkMode() {
-    box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6);
-
-    .header {
-      color: #00ffc4;
-    }
+    border-color: rgba(0, 255, 196, 0.6);
   }
-}
 
-.error {
   .header {
-    color: #ff3333;
+    @include lightDark(color, #0dd3a2, #00ffc4);
   }
+}
 
+.error {
   @include darkMode() {
-    box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6);
-
-    .header {
-      color: rgb(255, 56, 86);
-    }
+    border-color: rgba(255, 55, 87, 0.6);
   }
-}
 
-.info {
   .header {
-    color: #000;
+    @include lightDark(color, #ff3231, #ff3757);
   }
+}
 
+.info {
   @include darkMode() {
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
 
-    .header {
-      color: #ffffff;
-    }
+  .header {
+    @include lightDark(color, #000, #fff);
   }
 }
 
 .loading {
+  @include darkMode() {
+    border-color: rgba(58, 172, 233, 0.6);
+  }
+
   .header {
-    color: #3a74e9;
+    @include lightDark(color, #3a74e9, rgba(58, 172, 233, 1));
   }
 
   .icon {
     animation: rotating 1s linear infinite;
   }
-
-  @include darkMode() {
-    box-shadow: 0 0 0 1px rgba(58, 172, 233, 0.6);
-
-    .header {
-      color: rgba(58, 172, 233, 1);
-    }
-  }
 }
diff --git a/utils/vara-ui/src/utils.scss b/utils/vara-ui/src/utils.scss
@@ -1,5 +1,21 @@
-@mixin darkMode {
-  :global(.dark-theme) & {
+@mixin darkMode() {
+  body:global(.dark-theme) & {
     @content;
   }
 }
+
+@mixin lightMode() {
+  body:not(:global(.dark-theme)) & {
+    @content;
+  }
+}
+
+@mixin lightDark($property, $lightValue, $darkValue) {
+  @include lightMode() {
+    #{$property}: $lightValue;
+  }
+
+  @include darkMode() {
+    #{$property}: $darkValue;
+  }
+}