feat: 暗黑模式

src/style/dark.scss

@@ -0,0 +1,28 @@
+/* 暗黑模式 */
+[data-theme="dark"] {
+  filter: invert(0.9) hue-rotate(180deg);
+
+  img,
+  .icon-svg,
+  .login-container {
+    filter: invert(1) hue-rotate(180deg);
+  }
+
+  // element plus
+  .el-radio-button__original-radio:checked + .el-radio-button__inner,
+  .el-image-viewer__close,
+  .el-image-viewer__actions__inner,
+  .el-image-viewer__next,
+  .el-image-viewer__prev {
+    color: #000 !important;
+  }
+
+  .el-overlay {
+    background-color: rgba(0, 0, 0, 0.05) !important;
+  }
+
+  .el-drawer {
+    box-shadow: 0 8px 10px -5px rgb(0 0 0 / 1%), 0 16px 24px 2px rgb(0 0 0 / 2%),
+      0 6px 30px 5px rgb(0 0 0 / 1%);
+  }
+}

src/style/index.scss

@@ -2,6 +2,7 @@
 @import "./transition.scss";
 @import "./element-plus.scss";
 @import "./sidebar.scss";
+@import "./dark.scss";
 
 body {
   width: 100%;

src/style/login.css

@@ -6,7 +6,7 @@
   z-index: -1;
 }
 
-.container {
+.login-container {
   width: 100vw;
   height: 100vh;
   display: grid;
@@ -183,7 +183,7 @@ a:hover {
 }
 
 @media screen and (max-width: 1080px) {
-  .container {
+  .login-container {
     grid-gap: 9rem;
   }
 }
@@ -217,7 +217,7 @@ a:hover {
     display: none;
   }
 
-  .container {
+  .login-container {
     grid-template-columns: 1fr;
   }