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') %>
<% } %>
</main>
<div class="sidebar-tools">
<%- partial('_partial/tools') %>
</div>
</div>
<div class="page-bottom">
<%- partial('_partial/footer') %>
</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: $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: $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: $third-text-color;
color: var(--third-text-color);;
a {
color: $third-text-color;
color: var(--third-text-color);;
&:hover {
color: $primary-color;

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

@ -4,7 +4,7 @@
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
background: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
@ -25,7 +25,7 @@
font-size: 28px;
font-weight: bold;
letter-spacing: 1px;
color: $first-text-color;
color: var(--first-text-color);
transform-origin: left center;
transition: all 0.5s ease;
}
@ -47,7 +47,7 @@
&:hover {
color: $normal-text-color;
color: var(--normal-text-color);;
&::after {
content: '';
@ -66,7 +66,7 @@
.active {
color: $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: $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: $normal-text-color;
background: var(--normal-text-color);;
transition: all 0.3s ease;
}
@ -118,7 +118,7 @@
left: 0;
width: 100%;
height: 2px;
background: $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: $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: $normal-text-color;
color: var(--normal-text-color);;
transition: all 0.5s ease;
&:hover {
color: $second-text-color;
color: var(--second-text-color);;
font-weight: bold;
}
}
.active {
border: 1px solid $primary-color;
color: $second-text-color;
color: var(--second-text-color);;
font-weight: bold;
}
@ -224,7 +224,7 @@
.header-wrapper-shrink {
background: $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: $normal-text-color;
color: var(--normal-text-color);;
font-size: $icon-size;
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 {
button.vsubmit {
background: transparent !important;
color: $normal-text-color !important;
border: 1px solid $normal-text-color !important;
color: var(--normal-text-color); !important;
border: 1px solid var(--normal-text-color); !important;
&:hover {

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: $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: $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: $second-text-color;
color: var(--second-text-color);;
}
}

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

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

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

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

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

@ -3,7 +3,7 @@
.markdown {
blockquote {
border-left: 5px solid $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: $second-text-color;
color: var(--second-text-color);;
font-size: 2.2em;
font-weight: 700;
}
h2 {
color: $second-text-color;
color: var(--second-text-color);;
font-size: 2em;
font-weight: 650;
}
h3 {
color: $second-text-color;
color: var(--second-text-color);;
font-size: 1.8em;
font-weight: 600;
}
h4 {
color: $second-text-color;
color: var(--second-text-color);;
font-size: 1.6em;
font-weight: 550;
}
h5 {
color: $second-text-color;
color: var(--second-text-color);;
font-size: 1.4em;
font-weight: 500;
}
h6 {
color: $second-text-color;
color: var(--second-text-color);;
font-size: 1.2em;
font-weight: 500;
}

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

@ -2,52 +2,71 @@
// ils-x variables
// ==================================
// 头部默认高度
$header-height = 100px
// 头部收缩高度
$header-shrink-height = 60px
// 中间内容区域宽度
$main-content-width = 70%
// ===============================
// layout
// ===============================
$header-height = 100px; // 头部默认高度
$header-shrink-height = 60px; // 头部收缩高度
$main-content-width = 70%; // 中间内容区域宽度
// ===============================
// z-index
$z-index-1 = 1001
$z-index-2 = 1002
$z-index-3 = 1003
$z-index-4 = 1004
$z-index-5 = 1005
// ===============================
$z-index-1 = 1001;
$z-index-2 = 1002;
$z-index-3 = 1003;
$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
// 背景颜色
$background-color = #fff
:root {
--background-color: #fff;
--first-text-color: #3e3d4f;
--second-text-color: #525e6b;
--third-text-color: #9ca3ad;
--normal-text-color: #616161;
}
// 边框颜色
$border-color = #ccc
@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;
}
}
// 默认字体样式
//$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
// 默认字体大小
$default-font-size = 14px
// 默认字体行高
$default-font-line-height = 20px
// 默认字体加粗程度
$default-font-weight = 400
.dark-mode {
--background-color: #444;
--first-text-color: #edf2f9;
--second-text-color: #e0e3ec;
--third-text-color: #9ca3ad;
--normal-text-color: #f8f8f8;
}

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

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

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

@ -2,6 +2,8 @@
.page-template {
padding-top: $header-height;
position: relative;
.page-top {
position: fixed;
@ -24,6 +26,15 @@
position: relative;
padding: 40px 0;
}
.sidebar-tools {
position: fixed;
top: $header-height + 30px;
right: 5%;
transition: all 0.5s ease;
}
}
.page-bottom {
@ -37,4 +48,8 @@
.page-top {
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-name {
color: $second-text-color
color: var(--second-text-color);
font-size 20px
font-weight 600
margin-bottom 10px

1
source/css/style.styl
View File

@ -7,6 +7,7 @@
@import "layout/_partial/local-search.styl"
@import "layout/_partial/valine.styl"
@import "layout/_partial/header.styl"
@import "layout/_partial/tools.styl"
@import "layout/_partial/footer.styl"
@import "layout/_partial/article-meta-info.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');
});
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');
}
});