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 11:01:24 +08:00
parent cc94bbba9f
commit b8d1b156cc
19 changed files with 150 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layout/_partial/tools.ejs Normal file
View File

@ -0,0 +1,6 @@
<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>
</div>

4
layout/page.ejs
View File

@ -23,7 +23,11 @@
<%- partial('about') %> <%- partial('about') %>
<% } %> <% } %>
</main> </main>
<div class="sidebar-tools">
<%- partial('_partial/tools') %>
</div> </div>
</div>
<div class="page-bottom"> <div class="page-bottom">
<%- partial('_partial/footer') %> <%- partial('_partial/footer') %>
</div> </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 { .article-meta-info {
color: $third-text-color; color: var(--third-text-color);;
font-size: $article-meta-info-font-size; font-size: $article-meta-info-font-size;
.article-meta-item { .article-meta-item {
@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px;
} }
a { a {
color: $third-text-color; color: var(--third-text-color);;
&:hover { &:hover {
color: $primary-color; color: $primary-color;

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

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

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

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

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

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

12
source/css/layout/_partial/tools.styl Normal file
View File

@ -0,0 +1,12 @@
.tools-container {
ul {
li {
cursor: pointer;
i {
font-size: 20px;
margin: 6px 0;
}
}
}
}

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

@ -22,8 +22,8 @@
.col-80 { .col-80 {
button.vsubmit { button.vsubmit {
background: transparent !important; background: transparent !important;
color: $normal-text-color !important; color: var(--normal-text-color); !important;
border: 1px solid $normal-text-color !important; border: 1px solid var(--normal-text-color); !important;
&:hover { &:hover {

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

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

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

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

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

@ -2,7 +2,7 @@
.category-container { .category-container {
.category-name { .category-name {
color: $second-text-color color: var(--second-text-color);
font-size 20px font-size 20px
font-weight 600 font-weight 600
margin-bottom 10px margin-bottom 10px

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

@ -4,8 +4,8 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $normal-text-color; color: var(--normal-text-color);;
background: $background-color; background: var(--background-color);;
font-size: $default-font-size; font-size: $default-font-size;
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
@ -33,7 +33,7 @@ p {
a { a {
text-decoration: none; text-decoration: none;
color: $normal-text-color; color: var(--normal-text-color);;
} }
a:hover, a:active { a:hover, a:active {
@ -64,7 +64,7 @@ a:hover, a:active {
.article-title-hover-animation { .article-title-hover-animation {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: $second-text-color; color: var(--second-text-color);;
border-bottom: none; border-bottom: none;
line-height: 1.3; line-height: 1.3;
vertical-align: top; vertical-align: top;
@ -76,7 +76,7 @@ a:hover, a:active {
height: 2px; height: 2px;
bottom: -4px; bottom: -4px;
left: 0; left: 0;
background-color: $second-text-color; background-color: var(--second-text-color);;
visibility: hidden; visibility: hidden;
transform: scaleX(0); transform: scaleX(0);
the-transition(); the-transition();

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

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

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

@ -2,52 +2,71 @@
// ils-x variables // ils-x variables
// ================================== // ==================================
// 头部默认高度 // ===============================
$header-height = 100px // layout
// ===============================
// 头部收缩高度 $header-height = 100px; // 头部默认高度
$header-shrink-height = 60px $header-shrink-height = 60px; // 头部收缩高度
$main-content-width = 70%; // 中间内容区域宽度
// 中间内容区域宽度
$main-content-width = 70%
// ===============================
// z-index // z-index
$z-index-1 = 1001 // ===============================
$z-index-2 = 1002 $z-index-1 = 1001;
$z-index-3 = 1003 $z-index-2 = 1002;
$z-index-4 = 1004 $z-index-3 = 1003;
$z-index-5 = 1005 $z-index-4 = 1004;
$z-index-5 = 1005;
$z-index-6 = 1006;
// 主题颜色
$primary-color = #ce3e29
// 第一文本颜色 // ===============================
$first-text-color = #2c3e50 // color
// ===============================
$primary-color = #ce3e29; // 主题颜色
$background-color = #fff; // 背景颜色
$first-text-color = #2c3e50; // 第一文本颜色
$second-text-color = #525e6b; // 第二文本颜色
$third-text-color = #9ca3ad; // 第三文本颜色
$normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
$border-color = #ccc; // 边框颜色
// 第二文本颜色
$second-text-color = #525e6b
// 第三文本颜色 // ===============================
$third-text-color = #9ca3ad // font
// ===============================
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei';
//$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
//$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
$default-font-size = 14px;
$default-font-line-height = 20px;
$default-font-weight = 400;
// 通用文本颜色（默认字体颜色）
$normal-text-color = #616161
// 背景颜色 :root {
$background-color = #fff --background-color: #fff;
--first-text-color: #3e3d4f;
--second-text-color: #525e6b;
--third-text-color: #9ca3ad;
--normal-text-color: #616161;
}
// 边框颜色 @media (prefers-color-scheme: dark) {
$border-color = #ccc :root {
--background-color: #444;
--first-text-color: #edf2f9;
--second-text-color: #e0e3ec;
--third-text-color: #9ca3ad;
--normal-text-color: #f8f8f8;
}
}
// 默认字体样式
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial", 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light', 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif
// 默认字体大小 .dark-mode {
$default-font-size = 14px --background-color: #444;
--first-text-color: #edf2f9;
// 默认字体行高 --second-text-color: #e0e3ec;
$default-font-line-height = 20px --third-text-color: #9ca3ad;
--normal-text-color: #f8f8f8;
// 默认字体加粗程度 }
$default-font-weight = 400

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

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

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

@ -2,6 +2,8 @@
.page-template { .page-template {
padding-top: $header-height; padding-top: $header-height;
position: relative;
.page-top { .page-top {
position: fixed; position: fixed;
@ -24,6 +26,15 @@
position: relative; position: relative;
padding: 40px 0; padding: 40px 0;
} }
.sidebar-tools {
position: fixed;
top: $header-height + 30px;
right: 5%;
transition: all 0.5s ease;
}
} }
.page-bottom { .page-bottom {
@ -37,4 +48,8 @@
.page-top { .page-top {
height: $header-shrink-height; height: $header-shrink-height;
} }
.sidebar-tools {
top: $header-shrink-height + 30px !important;
}
} }

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

@ -2,7 +2,7 @@
.tag-container { .tag-container {
.tag-name { .tag-name {
color: $second-text-color color: var(--second-text-color);
font-size 20px font-size 20px
font-weight 600 font-weight 600
margin-bottom 10px margin-bottom 10px

1
source/css/style.styl
View File

@ -7,6 +7,7 @@
@import "layout/_partial/local-search.styl" @import "layout/_partial/local-search.styl"
@import "layout/_partial/valine.styl" @import "layout/_partial/valine.styl"
@import "layout/_partial/header.styl" @import "layout/_partial/header.styl"
@import "layout/_partial/tools.styl"
@import "layout/_partial/footer.styl" @import "layout/_partial/footer.styl"
@import "layout/_partial/article-meta-info.styl" @import "layout/_partial/article-meta-info.styl"
@import "layout/home-content.styl" @import "layout/home-content.styl"

17
source/js/common.js
View File

@ -28,3 +28,20 @@ windowMask.addEventListener('click', function (e) {
header.classList.toggle('header-drawer-show'); header.classList.toggle('header-drawer-show');
}); });
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');
}
});