You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
2.8 KiB
156 lines
2.8 KiB
<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>
|