lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode

Browse Source
This commit is contained in:
kailong321200875
2022-05-10 21:05:07 +08:00
parent a76858c13f
commit 0758a6a9d8
10 changed files with 150 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/AppView.vue
View File

@@ -22,7 +22,7 @@ const getCaches = computed((): string[] => {
<template>
<section
:class="[
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)]',
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)] dark:bg-[var(--el-bg-color)]',
{
'!min-h-[calc(100%-var(--app-footer-height))]':
fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,

2
src/layout/components/ToolHeader.vue
View File

@@ -42,7 +42,7 @@ export default defineComponent({
class={[
prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'dark:bg-[var(--el-bg-color)]'
'dark:(bg-[var(--el-bg-color)] border-[--el-border-color])'
]}
>
{layout.value !== 'top' ? (

16
src/layout/components/useRenderLayout.tsx
View File

@@ -40,7 +40,7 @@ export const useRenderLayout = () => {
{logo.value ? (
<Logo
class={[
'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)]',
'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)] dark:border-[var(--el-border-color)]',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
@@ -89,10 +89,10 @@ export const useRenderLayout = () => {
]}
style="transition: all var(--transition-time-02);"
>
<ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)]"></ToolHeader>
<ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
{tagsView.value ? (
<TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]"></TagsView>
<TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
) : undefined}
</div>
@@ -139,7 +139,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
{
'!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
@@ -163,7 +163,7 @@ export const useRenderLayout = () => {
const renderTop = () => {
return (
<>
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger"></Logo> : undefined}
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader>
@@ -181,7 +181,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
{
'!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
}
@@ -200,7 +200,7 @@ export const useRenderLayout = () => {
const renderCutMenu = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
@@ -233,7 +233,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
{
'!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':