feat: update ThemeSwitcher style

RSS1102 · Aug 27, 2023 · 9dad3bd · 9dad3bd
1 parent edcc9e5
commit 9dad3bd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/src/components/ThemeSwitcher.scss b/src/components/ThemeSwitcher.scss
@@ -1,17 +1,13 @@
 .theme-switch {
   position: relative;
-  width: 72px;
+  width: 85px;
   display: flex;
   align-items: center;
   padding: 4px;
-  background-color: rgba(220, 220, 220, 0.6);
   border-radius: 4px;
   overflow: hidden;
   transition: 0.3s;
 
-  html[theme-mode=dark] & {
-    background-color: rgba(80, 80, 80, 0.8);
-  }
   > .cur-card {
     z-index: 9;
     position: absolute;
@@ -31,7 +27,7 @@
   }
   &[data-mode=auto] > .cur-card {
     left: calc((100% - 8px) / 3 * 2 + 4px);
-    background-color: #4766AC88;
+    background-color: color-mix(in srgb, var(--primary), var(--bg-cr) 50%);
   }
   > .light,
   > .dark,
@@ -58,8 +54,6 @@
   }
   > .auto {
     position: relative;
-    width: 20px;
-    height: 20px;
     > svg:first-child {
       border-right: 2px dashed white;
       color: orange;

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
@@ -50,7 +50,7 @@ export function ThemeSwitcher() {
            updateTheme()
          }}
     >
-      <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <svg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
         <path fill='currentColor'
               d='M9.99996 3.15217C10.5252 3.15217 10.951 2.72636 10.951 2.20109C10.951 1.67582 10.5252 1.25 9.99996 1.25C9.47469 1.25 9.04887 1.67582 9.04887 2.20109C9.04887 2.72636 9.47469 3.15217 9.99996 3.15217Z'></path>
         <path fill='currentColor'
@@ -78,7 +78,7 @@ export function ThemeSwitcher() {
            updateTheme()
          }}
     >
-      <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <svg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
         <path fill='currentColor'
               d='M9.99993 3.12494C6.20294 3.12494 3.12488 6.203 3.12488 10C3.12488 13.797 6.20294 16.8751 9.99993 16.8751C13.7969 16.8751 16.875 13.797 16.875 10C16.875 9.52352 16.8264 9.0577 16.7337 8.6075C16.6752 8.32295 16.4282 8.11628 16.1378 8.10872C15.8474 8.10117 15.5901 8.29473 15.5168 8.57585C15.1411 10.0167 13.8302 11.0795 12.2727 11.0795C10.4212 11.0795 8.92039 9.57869 8.92039 7.72726C8.92039 6.16969 9.98319 4.85879 11.4241 4.48312C11.7052 4.40983 11.8988 4.15249 11.8912 3.86207C11.8836 3.57165 11.677 3.32473 11.3924 3.26616C10.9422 3.1735 10.4764 3.12494 9.99993 3.12494Z'></path>
       </svg>
@@ -92,7 +92,7 @@ export function ThemeSwitcher() {
            updateTheme()
          }}
     >
-      <svg width='10' height='20' viewBox='0 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <svg width='12' height='24' viewBox='0 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
         <path fill='currentColor'
               d='M9.99996 3.15217C10.5252 3.15217 10.951 2.72636 10.951 2.20109C10.951 1.67582 10.5252 1.25 9.99996 1.25C9.47469 1.25 9.04887 1.67582 9.04887 2.20109C9.04887 2.72636 9.47469 3.15217 9.99996 3.15217Z'></path>
         <path fill='currentColor'
@@ -112,7 +112,7 @@ export function ThemeSwitcher() {
         <path fill='currentColor'
               d='M5.43469 4.4837C5.43469 5.00896 5.00887 5.43478 4.4836 5.43478C3.95833 5.43478 3.53252 5.00896 3.53252 4.4837C3.53252 3.95843 3.95833 3.53261 4.4836 3.53261C5.00887 3.53261 5.43469 3.95843 5.43469 4.4837Z'></path>
       </svg>
-      <svg width='10' height='20' viewBox='10 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <svg width='12' height='24' viewBox='10 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
         <path fill='currentColor'
               d='M9.99993 3.12494C6.20294 3.12494 3.12488 6.203 3.12488 10C3.12488 13.797 6.20294 16.8751 9.99993 16.8751C13.7969 16.8751 16.875 13.797 16.875 10C16.875 9.52352 16.8264 9.0577 16.7337 8.6075C16.6752 8.32295 16.4282 8.11628 16.1378 8.10872C15.8474 8.10117 15.5901 8.29473 15.5168 8.57585C15.1411 10.0167 13.8302 11.0795 12.2727 11.0795C10.4212 11.0795 8.92039 9.57869 8.92039 7.72726C8.92039 6.16969 9.98319 4.85879 11.4241 4.48312C11.7052 4.40983 11.8988 4.15249 11.8912 3.86207C11.8836 3.57165 11.677 3.32473 11.3924 3.26616C10.9422 3.1735 10.4764 3.12494 9.99993 3.12494Z'></path>
       </svg>