tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 暗黑模式自定义样式调整

Browse Source 
Former-commit-id: 3857806786944e41c688cb6e81a5d90276720e2a
This commit is contained in:
haoxr
2023-01-18 00:57:06 +08:00
parent f7df411480
commit e4fd0f8600
9 changed files with 106 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc-auto-import.json
View File

@@ -107,7 +107,6 @@
"useArrayMap": true,
"useArrayReduce": true,
"useArraySome": true,
"useArrayUnique": true,
"useAsyncQueue": true,
"useAsyncState": true,
"useAttrs": true,

2
src/components/LangSelect/index.vue
View File

@@ -24,7 +24,7 @@ function handleLanguageChange(lang: string) {
@command="handleLanguageChange"
>
<div
class="cursor-pointer h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50"
class="cursor-pointer text-[#5a5e66] h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg-icon icon-class="language" />
</div>

2
src/components/Screenfull/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"

2
src/components/SizeSelect/index.vue
View File

@@ -18,7 +18,7 @@ function handleSizeChange(size: string) {
<template>
<el-dropdown trigger="click" @command="handleSizeChange">
<div
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg-icon icon-class="size" />
</div>

32
src/layout/components/TagsView/index.vue
View File

@@ -210,7 +210,7 @@ function closeAllTags(view: TagView) {
function openTagMenu(tag: TagView, e: MouseEvent) {
const menuMinWidth = 105;
console.log("test",proxy?.$el)
console.log('test', proxy?.$el);
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = proxy?.$el.offsetWidth; // container width
@@ -242,11 +242,8 @@ onMounted(() => {
</script>
<template>
<div class="tags-container">
<scroll-pane
ref="scrollPaneRef"
@scroll="handleScroll"
>
<div class="tags-container">
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
<router-link
:class="'tags-item ' + (isActive(tag) ? 'active' : '')"
v-for="tag in visitedViews"
@@ -340,37 +337,36 @@ onMounted(() => {
border-radius: 50%;
margin-right: 5px;
}
.tags-item-close{
&:hover{
background:rgb(0 0 0 / 0.16)
.tags-item-close {
&:hover {
background: rgb(0 0 0 / 0.16);
}
}
}
&-close{
border-radius:100%;
&:hover{
color:#FFF;
background:rgb(0 0 0 / 0.16)
&-close {
border-radius: 100%;
&:hover {
color: #fff;
background: rgb(0 0 0 / 0.16);
}
}
}
}
.tag-menu {
background: #fff;
background: var(--el-bg-color-overlay);
z-index: 99;
position: absolute;
border-radius: 4px;
font-size: 12px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: var(--el-box-shadow-light);
li {
padding: 8px 16px;
cursor: pointer;
&:hover {
background: #eee;
background: var(--el-fill-color-light);
}
}
}

12
src/styles/dark.scss
View File

@@ -1,12 +1,3 @@
// only scss variables
$--colors: (
"primary": ("base": red),
);
@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
html.dark {
.navbar {
background-color: var(--el-bg-color);
@@ -16,4 +7,7 @@ html.dark {
.hamburger {
fill: var(--el-text-color-regular);
}
}

24
src/styles/index.scss
View File

@@ -3,3 +3,27 @@
@import './tailwind.scss';
@import './global.scss';
@import './dark.scss';
// 自定义全局CSS变量
:root{
--menuBg:#304156;
--menuText:#bfcbd9;
--menuActiveText:#409eff;
--menuHover:#263445;
--subMenuBg: #1f2d3d;
--subMenuActiveText: #f4f4f5;
--subMenuHover: #001528;
}
html.dark{
--menuBg:var(--el-menu-bg-color);
--menuText:var(----el-menu-text-color);
--menuActiveText:var(--el-menu-active-color);
--menuHover:var(--el-menu-hover-bg-color);
--subMenuBg: var(--el-menu-bg-color);
--subMenuActiveText:var(--el-menu-active-color);
--subMenuHover: var(--el-menu-hover-bg-color);
}

14
src/styles/variables.module.scss
View File

@@ -1,11 +1,11 @@
// 全局SCSS变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;
$menuBg: var(--menuBg);
$menuText: var(--menuText);
$menuActiveText: var(--menuActiveText);
$menuHover: var(--menuHover);
$subMenuBg: #1f2d3d;
$subMenuActiveText: #f4f4f5;
$subMenuHover: #001528;
$subMenuBg:var(--subMenuBg);
$subMenuActiveText:var(--subMenuActiveText);
$subMenuHover:var(--subMenuHover);
$sideBarWidth: 210px;

2
src/types/auto-imports.d.ts vendored
View File

@@ -108,7 +108,6 @@ declare global {
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs']
@@ -374,7 +373,6 @@ declare module 'vue' {
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>