From 56c9ed579c521abe28fe27c514e410a4c2fe869d Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 3 Apr 2021 10:16:19 +0800
Subject: [PATCH] refactor: reduce output CSS size

---
 src/styles/themes.scss | 48 +++++++++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 05e82df..16edb1b 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -8,35 +8,53 @@
   }
 }
 
-@mixin bindTheme($name) {
-  &[data-#{$name}-theme='light'] {
+// Following rules are organized according to common variables to reduce output CSS size
+:root, // default
+:root {
+  &[data-color-mode='light'][data-light-theme='light'],
+  &[data-color-mode='dark'][data-dark-theme='light'] {
     @include setVariables(light.$variables);
   }
-  &[data-#{$name}-theme='dark'] {
+
+  &[data-color-mode='light'][data-light-theme='dark'],
+  &[data-color-mode='dark'][data-dark-theme='dark'] {
     @include setVariables(dark.$variables);
   }
-  &[data-#{$name}-theme='dark_dimmed'] {
+
+  &[data-color-mode='light'][data-light-theme='dark_dimmed'],
+  &[data-color-mode='dark'][data-dark-theme='dark_dimmed'] {
     @include setVariables(darkDimmed.$variables);
   }
 }
 
-:root, // default
-:root[data-color-mode='light'] {
-  @include bindTheme('light');
-}
-
-:root[data-color-mode='dark'] {
-  @include bindTheme('dark');
-}
-
 @media (prefers-color-scheme: light) {
   :root[data-color-mode='auto'] {
-    @include bindTheme('light');
+    &[data-light-theme='light'] {
+      @include setVariables(light.$variables);
+    }
+
+    &[data-light-theme='dark'] {
+      @include setVariables(dark.$variables);
+    }
+
+    &[data-light-theme='dark_dimmed'] {
+      @include setVariables(darkDimmed.$variables);
+    }
   }
 }
 
 @media (prefers-color-scheme: dark) {
   :root[data-color-mode='auto'] {
-    @include bindTheme('dark');
+    &[data-dark-theme='light'] {
+      @include setVariables(light.$variables);
+    }
+
+    &[data-dark-theme='dark'] {
+      @include setVariables(dark.$variables);
+    }
+
+    &[data-dark-theme='dark_dimmed'] {
+      @include setVariables(darkDimmed.$variables);
+    }
   }
 }