✨ Added dark theme and white theme switching

frontend/src/views/settings/components/SettingItem.vue

@@ -21,11 +21,12 @@ defineProps<{
 .setting-item {
   display: flex;
   padding: 14px 0;
-  border-bottom: 1px solid #444444;
+  border-bottom: 1px solid var(--settings-border);
   transition: background-color 0.15s ease;
   
   &:hover {
-    background-color: rgba(255, 255, 255, 0.03);
+    background-color: var(--settings-hover);
+    opacity: 0.8;
   }
   
   &:last-child {
@@ -40,12 +41,12 @@ defineProps<{
       font-size: 14px;
       font-weight: 500;
       margin-bottom: 6px;
-      color: #e0e0e0;
+      color: var(--settings-text);
     }
     
     .setting-description {
       font-size: 12px;
-      color: #a0a0a0;
+      color: var(--settings-text-secondary);
       line-height: 1.5;
     }
   }

frontend/src/views/settings/components/SettingSection.vue

@@ -16,19 +16,20 @@ defineProps<{
 <style scoped lang="scss">
 .setting-section {
   margin-bottom: 30px;
-  background-color: #333333;
+  background-color: var(--settings-card-bg);
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--settings-border);
   
   .section-title {
     font-size: 14px;
     font-weight: 600;
     margin: 0;
     padding: 12px 16px;
-    background-color: #3d3d3d;
-    color: #ffffff;
-    border-bottom: 1px solid #444444;
+    background-color: var(--settings-hover);
+    color: var(--settings-text);
+    border-bottom: 1px solid var(--settings-border);
   }
   
   .section-content {

frontend/src/views/settings/components/ToggleSwitch.vue

@@ -22,7 +22,7 @@ const toggle = () => {
 .toggle-switch {
   width: 40px;
   height: 20px;
-  background-color: #555555;
+  background-color: var(--settings-input-border);
   border-radius: 10px;
   position: relative;
   cursor: pointer;
@@ -44,7 +44,7 @@ const toggle = () => {
     left: 2px;
     width: 16px;
     height: 16px;
-    background-color: #f0f0f0;
+    background-color: var(--settings-text);
     border-radius: 50%;
     transition: all 0.2s ease;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);