lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 增加日间/夜间模式自由切换功能

This commit is contained in:
XPoet 2020-04-02 20:37:34 +08:00
parent b8d1b156cc
commit d00fda79a5
17 changed files with 168 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/_partial/header.ejs
View File

@ -26,8 +26,6 @@
<div class="menu-bar">
<div class="menu-bar-middle"></div>
<!--<i class="fa fa-bars"></i>-->
<!--<i class="fa fa-remove"></i>-->
</div>
</div>

2
layout/_partial/scripts.ejs
View File

@ -1 +1 @@
<%- js(['js/main.js', "js/common.js"]) %>
<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %>

10
layout/_partial/tools.ejs
View File

@ -1,6 +1,10 @@
<div class="tools-container">
<ul>
<li class="search-btn"><i class="fa fa-search"></i></li>
<li class="mode-toggle-btn"><i class="fa fa-sun-o"></i></li>
<ul class="tools-list">
<li class="search-btn">
<i class="fa fa-search"></i>
</li>
<li class="mode-toggle-btn">
<i class="fa fa-moon-o"></i>
</li>
</ul>
</div>

4
source/css/layout/_partial/article-meta-info.styl
View File

@ -4,7 +4,7 @@ $article-meta-info-font-size = 12px;
.article-meta-info {
color: var(--third-text-color);;
color: var(--third-text-color);
font-size: $article-meta-info-font-size;
.article-meta-item {
@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px;
}
a {
color: var(--third-text-color);;
color: var(--third-text-color);
&:hover {
color: $primary-color;

4
source/css/layout/_partial/footer.styl
View File

@ -1,10 +1,10 @@
@require '../common/variables.styl'
.footer {
color: var(--third-text-color);;
color: var(--third-text-color);
a {
color: var(--third-text-color);;
color: var(--third-text-color);
&:hover {
color: $primary-color;

22
source/css/layout/_partial/header.styl
View File

@ -8,7 +8,7 @@
display: flex;
align-items: center;
justify-content: center;
transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
transition: all 0.5s ease;
.header-content {
display: flex;
@ -47,7 +47,7 @@
&:hover {
color: var(--normal-text-color);;
color: var(--normal-text-color);
&::after {
content: '';
@ -66,7 +66,7 @@
.active {
color: var(--second-text-color);;
color: var(--second-text-color);
font-weight: bold;
transition: all 0.5s ease;
@ -97,7 +97,7 @@
height: 2px;
margin: 6px 0;
position: relative;
background: var(--normal-text-color);;
background: var(--normal-text-color);
transition: all 0.3s ease;
&::before {
@ -107,7 +107,7 @@
left: 0;
width: 100%;
height: 2px;
background: var(--normal-text-color);;
background: var(--normal-text-color);
transition: all 0.3s ease;
}
@ -118,7 +118,7 @@
left: 0;
width: 100%;
height: 2px;
background: var(--normal-text-color);;
background: var(--normal-text-color);
transition: all 0.3s ease;
}
}
@ -134,7 +134,7 @@
left: 0;
transform: scaleY(0);
transform-origin: top;
background: var(--background-color);;
background: var(--background-color);
transition: all 0.5s ease;
z-index: $z-index-2;
@ -154,18 +154,18 @@
border-radius: 20px;
text-align: center;
line-height: 34px;
color: var(--normal-text-color);;
color: var(--normal-text-color);
transition: all 0.5s ease;
&:hover {
color: var(--second-text-color);;
color: var(--second-text-color);
font-weight: bold;
}
}
.active {
border: 1px solid $primary-color;
color: var(--second-text-color);;
color: var(--second-text-color);
font-weight: bold;
}
@ -224,7 +224,7 @@
.header-wrapper-shrink {
background: var(--background-color);;
background: var(--background-color);
box-shadow: 0 1px 2px $border-color;
.header-content {

2
source/css/layout/_partial/local-search.styl
View File

@ -27,7 +27,7 @@ $keyword-red = #ff2a2a;
z-index: 1001;
.search-icon, .popup-btn-close {
color: var(--normal-text-color);;
color: var(--normal-text-color);
font-size: $icon-size;
padding: 0 10px;
}

31
source/css/layout/_partial/tools.styl
View File

@ -1,11 +1,34 @@
@require '../common/variables.styl'
.tools-container {
ul {
.tools-list {
li {
cursor: pointer;
i {
font-size: 20px;
margin: 6px 0;
padding: 5px;
border-radius: 50%;
border: 1px solid var(--border-color);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 12px;
&:hover {
color: var(--primary-color);
border-color: var(--primary-color);
}
&:last-child {
margin-bottom: 0;
}
i {
transition: all 0.3s ease;
}
}
}

4
source/css/layout/archive-content.styl
View File

@ -12,7 +12,7 @@ $article-date-font-size = 14px;
.archive-item-header {
.archive-year {
font-size: $archive-year-font-size;
color: var(--second-text-color);;
color: var(--second-text-color);
font-weight: 600;
margin-right: 20px;
}
@ -28,7 +28,7 @@ $article-date-font-size = 14px;
font-size: $article-title-font-size;
a.article-title {
color: var(--normal-text-color);;
color: var(--normal-text-color);
&:hover {
color: $primary-color;

2
source/css/layout/article-content.styl
View File

@ -11,7 +11,7 @@
}
a {
color: var(--second-text-color);;
color: var(--second-text-color);
}
}

12
source/css/layout/common/basic.styl
View File

@ -4,13 +4,14 @@
html, body {
margin: 0;
padding: 0;
color: var(--normal-text-color);;
background: var(--background-color);;
color: var(--normal-text-color);
background: var(--background-color);
font-size: $default-font-size;
font-family: $default-font-family;
font-weight: $default-font-weight;
line-height: $default-font-line-height;
-webkit-font-smoothing antialiased;
transition: all 0.5s ease;
}
ul, li, ol {
@ -33,7 +34,7 @@ p {
a {
text-decoration: none;
color: var(--normal-text-color);;
color: var(--normal-text-color);
}
a:hover, a:active {
@ -64,7 +65,7 @@ a:hover, a:active {
.article-title-hover-animation {
display: inline-block;
position: relative;
color: var(--second-text-color);;
color: var(--second-text-color);
border-bottom: none;
line-height: 1.3;
vertical-align: top;
@ -76,7 +77,7 @@ a:hover, a:active {
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--second-text-color);;
background-color: var(--second-text-color);
visibility: hidden;
transform: scaleX(0);
the-transition();
@ -86,6 +87,7 @@ a:hover, a:active {
visibility: visible;
transform: scaleX(1);
}
}

14
source/css/layout/common/markdown.styl
View File

@ -3,7 +3,7 @@
.markdown {
blockquote {
border-left: 5px solid var(--normal-text-color);;
border-left: 5px solid var(--normal-text-color);
margin: 0;
padding: 0 0 0 10px;
background: $border-color;
@ -21,39 +21,39 @@
h1 {
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 2.2em;
font-weight: 700;
}
h2 {
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 2em;
font-weight: 650;
}
h3 {
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 1.8em;
font-weight: 600;
}
h4 {
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 1.6em;
font-weight: 550;
}
h5 {
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 1.4em;
font-weight: 500;
}
h6 {
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 1.2em;
font-weight: 500;
}

55
source/css/layout/common/variables.styl
View File

@ -31,6 +31,15 @@ $third-text-color = #9ca3ad; // 第三文本颜色
$normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
$border-color = #ccc; // 边框颜色
// dark mode color
$dark-background-color = #333; // 背景颜色
$dark-primary-color = #ce3e29; // 主题颜色
$dark-first-text-color = #eee; // 第一文本颜色
$dark-second-text-color = #ccc; // 第二文本颜色
$dark-third-text-color = #aaa; // 第三文本颜色
$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色）
$dark-border-color = #888; // 边框颜色
// ===============================
// font
@ -45,28 +54,44 @@ $default-font-weight = 400;
:root {
--background-color: #fff;
--first-text-color: #3e3d4f;
--second-text-color: #525e6b;
--third-text-color: #9ca3ad;
--normal-text-color: #616161;
--background-color: $background-color;
--primary-color: $primary-color;
--first-text-color: $first-text-color;
--second-text-color: $second-text-color;
--third-text-color: $third-text-color;
--normal-text-color: $normal-text-color;
--border-color: $border-color;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #444;
--first-text-color: #edf2f9;
--second-text-color: #e0e3ec;
--third-text-color: #9ca3ad;
--normal-text-color: #f8f8f8;
--background-color: $dark-background-color;
--primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color;
--normal-text-color: $dark-normal-text-color;
--dark-border-color: $dark-border-color;
}
}
.dark-mode {
--background-color: #444;
--first-text-color: #edf2f9;
--second-text-color: #e0e3ec;
--third-text-color: #9ca3ad;
--normal-text-color: #f8f8f8;
--background-color: $dark-background-color;
--primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color;
--normal-text-color: $dark-normal-text-color;
--dark-border-color: $dark-border-color;
}
.light-mode {
--background-color: $background-color;
--primary-color: $primary-color;
--first-text-color: $first-text-color;
--second-text-color: $second-text-color;
--third-text-color: $third-text-color;
--normal-text-color: $normal-text-color;
--border-color: $border-color;
}

4
source/css/layout/home-content.styl
View File

@ -25,12 +25,12 @@
}
font-weight: 600;
color: var(--second-text-color);;
color: var(--second-text-color);
font-size: 22px;
margin: 0;
a {
color: var(--second-text-color);;
color: var(--second-text-color);
}
}

2
source/css/layout/page.styl
View File

@ -30,7 +30,7 @@
.sidebar-tools {
position: fixed;
top: $header-height + 30px;
top: $header-height + 50px;
right: 5%;
transition: all 0.5s ease;
}

13
source/js/common.js
View File

@ -31,17 +31,4 @@ windowMask.addEventListener('click', function (e) {
const searchBtn = document.querySelector('.search-btn');
searchBtn.addEventListener('click', function (e) {
});
const modeToggleBtn = document.querySelector('.mode-toggle-btn');
modeToggleBtn.addEventListener('click', function (e) {
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
console.log('dark mode');
} else {
document.body.classList.toggle('dark-mode');
}
});

57
source/js/toggle-mode.js Normal file
View File

@ -0,0 +1,57 @@
/**
* 日间/夜间 模式切换
*/
const modeToggleBtn = document.querySelector('.mode-toggle-btn');
const iconDom = modeToggleBtn.querySelector('i');
const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
if (modeConfig) {
if (modeConfig.prefersColorScheme === 'dark') {
if (modeConfig.isDark) {
document.body.classList.remove('light-mode');
iconDom.className = 'fa fa-lightbulb-o';
} else {
iconDom.className = 'fa fa-moon-o';
document.body.classList.add('light-mode');
}
} else {
if (modeConfig.isDark) {
document.body.classList.remove('dark-mode');
iconDom.className = 'fa fa-moon-o';
} else {
document.body.classList.add('dark-mode');
iconDom.className = 'fa fa-lightbulb-o';
}
}
}
const setItemUtil = (modeClass, prefersColorScheme) => {
document.body.classList.toggle(modeClass);
const isDark = document.body.className.indexOf(modeClass) === -1;
iconDom.className = isDark ? 'fa fa-moon-o' : 'fa fa-lightbulb-o';
localStorage.setItem('ils_x', JSON.stringify(
{
prefersColorScheme: prefersColorScheme,
isDark: isDark
}
));
};
modeToggleBtn.addEventListener('click', function (e) {
if (
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
) {
setItemUtil('light-mode', 'dark');
} else {
setItemUtil('dark-mode', 'light');
}
});