wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增加暗黑主题

Browse Source
This commit is contained in:
不做码农
2022-05-01 16:16:20 +08:00
parent 5ae44e8519
commit 14546c1d30
8 changed files with 203 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/Navbar.vue
+2 -2
View File
@@ -101,7 +101,7 @@ function setLayout() {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
background: var(--base-topBar-background);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
@@ -144,7 +144,7 @@ function setLayout() {
.right-menu-item {
padding: 0 8px;
color: #5a5e66;
color: var(--base-topBar-color);
vertical-align: text-bottom;
}
src/layout/components/Settings/index.vue
+29 -16
View File
@@ -7,27 +7,22 @@
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
<img src="@/assets/images/dark.svg" alt="dark" />
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<i aria-label="图标: check" class="anticon anticon-check">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</i>
<el-icon><Check /></el-icon>
</div>
</div>
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
<img src="@/assets/images/light.svg" alt="light" />
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<i aria-label="图标: check" class="anticon anticon-check">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</i>
<el-icon><Check /></el-icon>
</div>
</div>
<div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
<div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<el-icon><Check /></el-icon>
</div>
<el-icon><moon /></el-icon>
深色模式
</div>
</div>
<div class="drawer-item">
<span>主题颜色</span>
@@ -38,7 +33,6 @@
<el-divider />
<h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item">
<span>开启 TopNav</span>
<span class="comp-style">
@@ -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('正在保存到本地，请稍候...')
src/layout/components/TagsView/index.vue
+10 -11
View File
@@ -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;
src/layout/index.vue
+1 -1
View File
@@ -98,4 +98,4 @@ function setLayout() {
.mobile .fixed-header {
width: 100%;
}
</style>
</style>