主题颜色
@@ -38,7 +33,6 @@
系统布局配置
-
开启 TopNav
@@ -96,6 +90,8 @@ const sideTheme = ref(store.state.settings.sideTheme)
const storeSettings = computed(() => store.state.settings)
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
+const blackTheme = ref(false)
+
/** 是否需要topnav */
const topNav = computed({
get: () => storeSettings.value.topNav,
@@ -162,6 +158,18 @@ watch(
immediate: true,
},
)
+watch(
+ () => sideTheme,
+ (val) => {
+ console.log(val.value)
+ const body = document.documentElement
+ if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
+ else body.setAttribute('data-theme', '')
+ },
+ {
+ immediate: true,
+ },
+)
/**
* 改变主题颜色
*/
@@ -173,7 +181,7 @@ function themeChange(val) {
theme.value = val
// 设置element-plus ui主题
document.documentElement.style.setProperty('--el-color-primary', val)
-
+
// 颜色变浅
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(val, i / 10)}`)
@@ -185,6 +193,11 @@ function handleTheme(val) {
value: val,
})
sideTheme.value = val
+ const body = document.documentElement
+ if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
+ else body.setAttribute('data-theme', '')
+ console.log('change ' + val)
+ blackTheme.value = val === 'theme-black'
}
function saveSetting() {
proxy.$modal.loading('正在保存到本地，请稍候...')
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 9db073d..1d643bc 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -70,10 +70,10 @@ function isActive(r) {
}
function activeStyle(tag) {
if (!isActive(tag)) return {}
- return {
- 'background-color': theme.value,
- 'border-color': theme.value,
- }
+ // return {
+ // 'background-color': theme.value,
+ // 'border-color': theme.value,
+ // }
}
function isAffix(tag) {
return tag.meta && tag.meta.affix
@@ -226,8 +226,8 @@ function handleScroll() {
.tags-view-container {
height: 34px;
width: 100%;
- background: #fff;
- border-bottom: 1px solid #d8dce5;
+ background: var(--base-topBar-background);
+ // border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper {
.tags-view-item {
@@ -236,9 +236,8 @@ function handleScroll() {
cursor: pointer;
height: 26px;
line-height: 26px;
- border: 1px solid #d8dce5;
- color: #495060;
- background: #fff;
+ border: 1px solid #ccc;
+ color: var(--el-text-color-regular);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
@@ -250,9 +249,9 @@ function handleScroll() {
margin-right: 15px;
}
&.active {
- background-color: #42b983;
+ background-color: var(--el-color-primary);
+ border-color: var(--el-color-primary);
color: #fff;
- border-color: #42b983;
&::before {
content: '';
background: #fff;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 92392a0..93f5f35 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -98,4 +98,4 @@ function setLayout() {
.mobile .fixed-header {
width: 100%;
}
-
\ No newline at end of file
+
