docs: 文档 dark 主题适配

This commit is contained in:
就眠儀式 2022-03-30 18:35:34 +08:00
parent 09a5502f54
commit d31ef061ef
5 changed files with 52 additions and 32 deletions

View File

@ -236,6 +236,7 @@ const throttle = (func: Function, wait: number) => {
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%); box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
transition: none; transition: none;
-webkit-transition: none; -webkit-transition: none;
color: rgba(0, 0, 0, 0.8);
&:hover { &:hover {
background-color: #e2e2e2; background-color: #e2e2e2;
} }

View File

@ -8,7 +8,7 @@
<lay-layout class="layui-layout-document" style="height:100%"> <lay-layout class="layui-layout-document" style="height:100%">
<lay-header <lay-header
><lay-logo> ><lay-logo>
<img src="../assets/logo-png.png" /> <img src="../assets/logo-png.png" /><span style="margin-left:12px;font-size:20px;color: #213547;letter-spacing: -0.2px;opacity: 0.8;">layui - vue</span>
</lay-logo> </lay-logo>
<ul <ul
class="layui-nav layui-layout-left" class="layui-nav layui-layout-left"
@ -116,7 +116,7 @@
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="https://gitee.com/layui-vue/layui-vue"> <a href="https://gitee.com/layui-vue/layui-vue">
<lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon> Gitee
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
@ -201,7 +201,7 @@
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)"> 0.4.4 </a> <a href="javascript:void(0)"> 1.0.0 </a>
</li> </li>
</ul> </ul>
</lay-header> </lay-header>
@ -326,11 +326,16 @@ export default {
background-color: #f1f1f1!important; background-color: #f1f1f1!important;
} }
.layui-layout-document .layui-nav .layui-nav-item > a, .layui-layout-document .layui-header .layui-nav .layui-nav-item > a,
.layui-layout-document .layui-nav .layui-nav-item > a:hover { .layui-layout-document .layui-header .layui-nav .layui-nav-item > a:hover {
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }
.layui-layout-document .layui-header .layui-logo {
text-align: left;
padding-left: 15px;
}
.layui-logo img { .layui-logo img {
height: 45px; height: 45px;
left: 15px; left: 15px;

View File

@ -20,7 +20,7 @@
> >
</div> </div>
<div class="site-version"> <div class="site-version">
<span>{{ t('home.version') }}<cite class="site-showv">0.4.4</cite></span> <span>{{ t('home.version') }}<cite class="site-showv">1.0.0</cite></span>
<span>{{ t('home.download') }}<em class="site-showdowns">5463</em></span> <span>{{ t('home.download') }}<em class="site-showdowns">5463</em></span>
</div> </div>
</div> </div>
@ -51,7 +51,7 @@
</a> </a>
</div> </div>
</div> </div>
<div style="margin-left: 10%; margin-right: 10%"> <div style="margin-left: 10%; margin-right: 10%;margin-top:40px;">
<div> <div>
<ul class="layui-row layui-col-space30 site-idea"> <ul class="layui-row layui-col-space30 site-idea">
<li class="layui-col-md8"> <li class="layui-col-md8">
@ -92,10 +92,11 @@
</div> </div>
<div class="footer footer-index"> <div class="footer footer-index">
<p> <p>
Copyright © 2022 <a href="/index.html">www.layui-vue.com</a> mit Released under the <a href="/index.html">MIT License</a>.
licence </p>
<p>
Copyright © 2021-2022 layui-vue.com
</p> </p>
<p></p>
</div> </div>
</div> </div>
</template> </template>
@ -119,7 +120,6 @@ html,
body { body {
height: 100%; height: 100%;
} }
.site-container { .site-container {
background: #fff; background: #fff;
margin-top: 60px; margin-top: 60px;
@ -127,18 +127,19 @@ body {
width: 100%; width: 100%;
} }
.site-banner { .site-banner {
border-bottom: 1px solid #eee;
position: relative;
height: 100%; height: 100%;
text-align: center;
overflow: hidden; overflow: hidden;
text-align: center;
position: relative;
border-bottom: 1px solid #eee;
background-image: url(../assets/background.svg); background-image: url(../assets/background.svg);
background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%;
} }
.site-banner-bg { .site-banner-bg {
background-position: center 0; background-position: center 0;
} }
.site-banner-bg, .site-banner-bg,
.site-banner-main { .site-banner-main {
position: absolute; position: absolute;
@ -200,12 +201,17 @@ body {
} }
.site-desc .web-font-desc { .site-desc .web-font-desc {
color: #fff; color: #fff;
color: rgba(60, 60, 60, .7); color: #213547;
font-size: 51px; font-size: 52px;
opacity: 0.9;
} }
.web-font-desc { .web-font-desc {
font-style: normal; font-size: 76px;
font-weight: 300; line-height: 1.25;
font-weight: 900;
letter-spacing: -1.5px;
max-width: 960px;
margin: 0 auto;
} }
.site-desc cite { .site-desc cite {
position: absolute; position: absolute;
@ -235,7 +241,7 @@ body {
.site-banner-other { .site-banner-other {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 35px; bottom: 90px;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 0; font-size: 0;
@ -259,7 +265,9 @@ body {
padding: 30px 15px; padding: 30px 15px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
color: #666; color: rgba(60, 60, 60, .7);
font-weight: 300; font-weight: 300;
font-size: 13.6px;
background: #f9f9f9;
} }
</style> </style>

View File

@ -40,20 +40,26 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
const changeTheme = (theme: string) => { const changeTheme = (theme: string) => {
if (theme === "dark") { if (theme === "dark") {
enableDarkMode({ enableDarkMode(
{
mode: 1, mode: 1,
brightness: 100, brightness: 100,
contrast: 90, contrast: 90,
sepia: 0, sepia: 0,
// darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)', // darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
// darkSchemeBackgroundColor: '#22272E' // darkSchemeBackgroundColor: '#22272E'
}, { },
{
invert: [], invert: [],
css: ``, css: ``,
ignoreInlineStyle: ['.layui-colorpicker-trigger-span','div.layui-color-picker *'], ignoreInlineStyle: [
".layui-colorpicker-trigger-span",
"div.layui-color-picker *",
],
ignoreImageAnalysis: [], ignoreImageAnalysis: [],
disableStyleSheetsProxy: false, disableStyleSheetsProxy: false,
}); }
);
} else { } else {
disableDarkMode(); disableDarkMode();
} }