新增加暗黑主题
This commit is contained in:
不做码农
parent
5ae44e8519
commit
14546c1d30
139
src/assets/styles/black.scss
Normal file
139
src/assets/styles/black.scss
Normal file
@ -0,0 +1,139 @@
|
||||
// 黑夜模式
|
||||
[data-theme='theme-black'] {
|
||||
// root
|
||||
--base-menu-color: #304156;
|
||||
--base-menu-color-active: #f4f4f5;
|
||||
--base-bg-main: #304156;
|
||||
--base-menu-background: #304156;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #304156 !important;
|
||||
--base-topBar-color: #fff;
|
||||
--base-color: #304156;
|
||||
// --base-tags-bg-border: #304156 !important;
|
||||
//缩小状态下子菜单选中颜色
|
||||
// --base-sub-menu-hover: #000;
|
||||
|
||||
--next-color-white: #ffffff;
|
||||
--next-color-disabled: #304156;
|
||||
--next-color-bar: #dadada;
|
||||
--next-color-primary: #304156;
|
||||
--next-border-color: #424242;
|
||||
--next-border-black: #333333;
|
||||
--next-text-color-regular: #9b9da1;
|
||||
--next-text-color-placeholder: #7a7a7a;
|
||||
--next-color-hover: #3c3c3c;
|
||||
--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
|
||||
|
||||
// el-ement ui 设置
|
||||
--el-fill-color-light: var(--next-color-hover-rgba) !important;
|
||||
--el-fill-color-blank: var(--base-bg-main) !important;
|
||||
// element plus
|
||||
--el-table-bg-color: var(--el-fill-color-blank);
|
||||
--el-color-white: var(--next-color-disabled) !important;
|
||||
--el-text-color-primary: var(--next-color-bar) !important;
|
||||
--el-border-color-base: var(--next-border-black) !important;
|
||||
--el-border-color-light: var(--next-border-black) !important;
|
||||
--el-text-color-regular: var(--next-text-color-regular) !important;
|
||||
--el-bg-color: var(--base-bg-main) !important;
|
||||
--el-color-success-lighter: var(--next-color-primary) !important;
|
||||
--el-color-warning-lighter: var(--next-color-primary) !important;
|
||||
--el-color-danger-lighter: var(--next-color-primary) !important;
|
||||
--el-color-primary-lighter: var(--next-color-primary) !important;
|
||||
--el-color-primary-light-9: var(--next-color-hover) !important;
|
||||
--el-text-color-disabled-base: var(--el-color-primary) !important;
|
||||
--el-border-color-lighter: var(--next-border-black) !important;
|
||||
--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
|
||||
--el-disabled-bg-color: var(--next-color-disabled) !important;
|
||||
--el-fill-base: var(--next-color-white) !important;
|
||||
// el-date-picker bg
|
||||
--el-bg-color-overlay: var(--base-bg-main) !important;
|
||||
// drawer
|
||||
.drawer-item,
|
||||
.drawer-title {
|
||||
color: var(--next-color-white) !important;
|
||||
}
|
||||
|
||||
// button
|
||||
.el-button {
|
||||
&:hover {
|
||||
border-color: var(--next-border-color) !important;
|
||||
}
|
||||
}
|
||||
.el-button--primary,
|
||||
.el-button--info,
|
||||
.el-button--danger,
|
||||
.el-button--success,
|
||||
.el-button--warning {
|
||||
--el-button-text-color: var(--next-color-white) !important;
|
||||
--el-button-hover-text-color: var(--next-color-white) !important;
|
||||
--el-button-disabled-text-color: var(--next-color-white) !important;
|
||||
&:hover {
|
||||
border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// pagination
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
color: var(--next-color-white) !important;
|
||||
}
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
// tabs
|
||||
.el-tabs--border-card {
|
||||
background-color: var(--el-color-white) !important;
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background: var(--next-color-primary) !important;
|
||||
}
|
||||
|
||||
// alert / notice-bar
|
||||
.home-card-item {
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
}
|
||||
.el-alert,
|
||||
.notice-bar {
|
||||
border: 1px solid var(--next-border-color) !important;
|
||||
background-color: var(--next-color-disabled) !important;
|
||||
}
|
||||
|
||||
// colorPicker
|
||||
.el-color-picker__mask {
|
||||
background: unset !important;
|
||||
}
|
||||
.el-color-picker__trigger {
|
||||
border: 1px solid var(--next-border-color-light) !important;
|
||||
}
|
||||
|
||||
// popper / dropdown
|
||||
.el-popper {
|
||||
border: 1px solid var(--next-border-color) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
.el-popper__arrow:before {
|
||||
background: var(--el-color-white) !important;
|
||||
border: 1px solid var(--next-border-color);
|
||||
}
|
||||
a {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.el-popper,
|
||||
.el-dropdown-menu {
|
||||
background: var(--el-color-white) !important;
|
||||
}
|
||||
.el-dropdown-menu__item:hover:not(.is-disabled) {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
//tags menu 选择
|
||||
.tags-view-container .tags-view-wrapper .tags-view-item.active {
|
||||
background-color: var(--base-color) !important;
|
||||
// border-color: var(--base-color) !important;
|
||||
}
|
||||
}
|
||||
@ -5,26 +5,26 @@
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
@import './waves.scss';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
@import './black.scss';
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: var(--base-bg-main);
|
||||
// overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
*,
|
||||
@ -91,7 +91,7 @@ div:focus {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
@ -103,7 +103,7 @@ div:focus {
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-type,
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// 展开sidebar状态设置svg-icon边距
|
||||
.openSidebar .layout-sidebar__container .svg-icon {
|
||||
margin-right: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.hideSidebar {
|
||||
.layout-sidebar__container {
|
||||
|
||||
@ -15,7 +15,10 @@ $panGreen: #30b08f;
|
||||
--base-menu-background: #ffffff;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #ffffff;
|
||||
--base-topBar-color: #5a5e66;
|
||||
--base-sidebar-width: 210px;
|
||||
|
||||
--base-tags-bg-border: #d8dce5;
|
||||
}
|
||||
/***默认主题颜色配置***/
|
||||
[data-theme='theme-light'] {
|
||||
@ -30,8 +33,6 @@ $panGreen: #30b08f;
|
||||
|
||||
//缩小状态下子菜单选中颜色
|
||||
--base-sub-menu-hover: #ccc;
|
||||
|
||||
// el-ement ui 设置
|
||||
}
|
||||
/***深色主题颜色配置***/
|
||||
[data-theme='theme-dark'] {
|
||||
@ -48,15 +49,3 @@ $panGreen: #30b08f;
|
||||
--el-fill-color-blank: #304156;
|
||||
--el-text-color-primary: #bfcbd9;
|
||||
}
|
||||
|
||||
// sidebar
|
||||
//https://github.com/ElemeFE/element/issues/12951
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
/* js中import， import variables from '@/assets/styles/variables.module.scss'
|
||||
template中使用 eg：variables.menuColor
|
||||
*/
|
||||
|
||||
// :export {
|
||||
// }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
},
|
||||
)
|
||||
/**
|
||||
* 改变主题颜色
|
||||
*/
|
||||
@ -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('正在保存到本地，请稍候...')
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user