update

packages/frontend/src/components/NotificationSettings.vue

@@ -118,18 +118,66 @@ const handleSave = (savedSetting: NotificationSetting) => {
 
 <style scoped>
 .notification-settings {
-  padding: 1rem;
+  padding: var(--base-padding, 1rem); /* 使用变量 */
+  /* Inherits text color and background from parent */
 }
 .loading-indicator, .error-message {
-  margin-top: 1rem;
+  margin-top: var(--base-margin, 1rem); /* 使用变量 */
+  color: var(--text-color-secondary); /* 使用次要文本颜色 */
 }
 .error-message {
-  color: var(--bs-danger);
+  color: var(--bs-danger); /* 保留 Bootstrap 变量或特定错误颜色 */
 }
+
+/* Apply variables to list items if needed (assuming Bootstrap classes handle most styling) */
+.list-group-item {
+    background-color: var(--app-bg-color);
+    border-color: var(--border-color);
+    color: var(--text-color);
+}
+.list-group-item .text-muted {
+    color: var(--text-color-secondary);
+}
+/* Apply variables to buttons if not handled by global styles or Bootstrap */
+.btn-primary {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-bg-color);
+    color: var(--button-text-color);
+}
+.btn-primary:hover {
+     background-color: var(--button-hover-bg-color);
+     border-color: var(--button-hover-bg-color);
+}
+.btn-outline-secondary {
+    color: var(--text-color-secondary);
+    border-color: var(--border-color);
+}
+.btn-outline-secondary:hover {
+    background-color: var(--header-bg-color); /* Example hover */
+    color: var(--text-color);
+}
+.btn-outline-danger {
+    color: var(--bs-danger); /* Keep specific color */
+    border-color: var(--bs-danger);
+}
+.btn-outline-danger:hover {
+    background-color: var(--bs-danger);
+    color: var(--button-text-color);
+}
+/* Apply variables to badges if needed */
+.badge.bg-secondary {
+    background-color: var(--text-color-secondary);
+    color: var(--button-text-color); /* Assuming high contrast needed */
+}
+/* Keep success/warning colors for status or define specific variables later */
+/* .badge.bg-success {} */
+/* .badge.bg-warning {} */
+
+
 .modal-placeholder {
-  margin-top: 2rem;
-  padding: 1rem;
-  border: 1px dashed #ccc;
-  background-color: #f8f9fa;
+  margin-top: calc(var(--base-margin, 1rem) * 2); /* 使用变量 */
+  padding: var(--base-padding, 1rem); /* 使用变量 */
+  border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
+  background-color: var(--header-bg-color, #f8f9fa); /* 使用变量 */
 }
 </style>