/* 暗黑模式样式 */
:root {
  // 默认使用亮色模式变量
  --uni-color-primary: #007aff;
  --uni-color-success: #4cd964;
  --uni-color-warning: #f0ad4e;
  --uni-color-error: #dd524d;

  --uni-text-color: #333;
  --uni-text-color-inverse: #fff;
  --uni-text-color-grey: #999;
  --uni-text-color-placeholder: #808080;
  --uni-text-color-disable: #c0c0c0;

  --uni-bg-color: #ffffff;
  --uni-bg-color-grey: #f8f8f8;
  --uni-bg-color-hover: #f1f1f1;
  --uni-bg-color-mask: rgba(0, 0, 0, 0.4);

  --uni-border-color: #c8c7cc;
}

/* 暗黑模式 */
[data-theme='dark'] {
  --uni-color-primary: #0a84ff;
  --uni-color-success: #34c759;
  --uni-color-warning: #ff9500;
  --uni-color-error: #ff3b30;

  --uni-text-color: #f2f2f7;
  --uni-text-color-inverse: #000000;
  --uni-text-color-grey: #8e8e93;
  --uni-text-color-placeholder: #4c4c4c;
  --uni-text-color-disable: #636366;

  --uni-bg-color: #1c1c1e;
  --uni-bg-color-grey: #2c2c2e;
  --uni-bg-color-hover: #3a3a3c;
  --uni-bg-color-mask: rgba(0, 0, 0, 0.6);

  --uni-border-color: #434346;
}

/* 系统级暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --uni-color-primary: #0a84ff;
    --uni-color-success: #34c759;
    --uni-color-warning: #ff9500;
    --uni-color-error: #ff3b30;

    --uni-text-color: #f2f2f7;
    --uni-text-color-inverse: #000000;
    --uni-text-color-grey: #8e8e93;
    --uni-text-color-placeholder: #4c4c4c;
    --uni-text-color-disable: #636366;

    --uni-bg-color: #1c1c1e;
    --uni-bg-color-grey: #2c2c2e;
    --uni-bg-color-hover: #3a3a3c;
    --uni-bg-color-mask: rgba(0, 0, 0, 0.6);

    --uni-border-color: #434346;
  }
}

/* 应用暗黑模式的通用类 */
.dark-mode {
  background-color: var(--uni-bg-color);
  color: var(--uni-text-color);
}

.dark-mode .dark-invert {
  background-color: var(--uni-bg-color-inverse);
  color: var(--uni-text-color-inverse);
}

/* 通用暗黑模式切换类 */
.light-mode {
  background-color: var(--uni-bg-color);
  color: var(--uni-text-color);
}

/* 通用暗黑模式切换类 */
.dark-mode {
  background-color: var(--uni-bg-color);
  color: var(--uni-text-color);
}