novel-front-app/components/theme/DarkModeStyles.vue

<template>
  <!-- 空模板，仅提供样式 -->
</template>

<script>
export default {
  name: 'DarkModeStyles'
}
</script>

<style lang="scss">
/* 通用暗色模式样式 */
.dark-mode {
  /* 文本容器 */
  .text-container {
    color: $dark-text-color-secondary;
    
    .title {
      color: $dark-text-color-primary;
    }
    
    .subtitle {
      color: $dark-text-color-secondary;
    }
    
    .description, .content {
      color: $dark-text-color-secondary;
    }
    
    .hint, .caption {
      color: $dark-text-color-tertiary;
    }
  }
  
  /* 卡片组件 */
  .card {
    background-color: $dark-bg-color-secondary;
    box-shadow: $dark-shadow;
    border-color: $dark-border-color;
    
    .card-title {
      color: $dark-text-color-primary;
    }
    
    .card-content {
      color: $dark-text-color-secondary;
    }
    
    .card-footer {
      border-top-color: $dark-border-color;
    }
  }
  
  /* 按钮组件 */
  .btn {
    &.primary {
      background-color: $dark-accent-color;
    }
    
    &.secondary {
      background-color: $dark-bg-color-tertiary;
      color: $dark-text-color-primary;
    }
    
    &.outline {
      background-color: transparent;
      color: $dark-accent-color;
      border-color: $dark-accent-color;
    }
  }
  
  /* 导航栏 */
  .navbar {
    background-color: $dark-bg-color-secondary;
    box-shadow: $dark-shadow;
    
    .navbar-title {
      color: $dark-text-color-primary;
    }
    
    .navbar-item {
      color: $dark-text-color-secondary;
      
      &.active {
        color: $dark-accent-color;
      }
    }
  }
  
  /* 表单元素 */
  .form-item {
    .label {
      color: $dark-text-color-secondary;
    }
    
    .input {
      background-color: $dark-bg-color-tertiary;
      color: $dark-text-color-primary;
      border-color: $dark-border-color;
      
      &::placeholder {
        color: $dark-text-color-tertiary;
      }
    }
    
    .hint {
      color: $dark-text-color-tertiary;
    }
  }
  
  /* 列表组件 */
  .list {
    .list-item {
      border-bottom-color: $dark-border-color;
      
      .list-title {
        color: $dark-text-color-primary;
      }
      
      .list-desc {
        color: $dark-text-color-secondary;
      }
    }
  }
  
  /* 分割线 */
  .divider {
    background-color: $dark-border-color;
  }
  
  /* 标签 */
  .tag {
    background-color: $dark-bg-color-tertiary;
    color: $dark-text-color-secondary;
    
    &.primary {
      background-color: rgba($dark-accent-color, 0.3);
      color: $dark-accent-color;
    }
  }
  
  /* 底部操作栏 */
  .bottom-action-bar {
    background-color: $dark-bg-color-secondary;
    box-shadow: $dark-shadow;
    
    .action-btn {
      color: $dark-text-color-secondary;
      
      &.active {
        color: $dark-accent-color;
      }
    }
  }
}
</style>