diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 121f14e..b58dd44 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -26,8 +26,6 @@
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index a5376ec..7bdcf42 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -1 +1 @@
-<%- js(['js/main.js', "js/common.js"]) %>
\ No newline at end of file
+<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %>
\ No newline at end of file
diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs
index 965f72d..e17dd4d 100644
--- a/layout/_partial/tools.ejs
+++ b/layout/_partial/tools.ejs
@@ -1,6 +1,10 @@
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index 4573fe4..940ccdf 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/source/css/layout/_partial/article-meta-info.styl
@@ -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;
diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl
index 759192b..190187d 100644
--- a/source/css/layout/_partial/footer.styl
+++ b/source/css/layout/_partial/footer.styl
@@ -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;
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index c89a500..60b5a94 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -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 {
diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl
index 492f0bd..2a8e444 100644
--- a/source/css/layout/_partial/local-search.styl
+++ b/source/css/layout/_partial/local-search.styl
@@ -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;
}
diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl
index eb9eee8..19910d6 100644
--- a/source/css/layout/_partial/tools.styl
+++ b/source/css/layout/_partial/tools.styl
@@ -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;
+ }
+
}
}
diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl
index 0c69ad2..e21b613 100644
--- a/source/css/layout/archive-content.styl
+++ b/source/css/layout/archive-content.styl
@@ -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;
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index cd5a26c..222618c 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -11,7 +11,7 @@
}
a {
- color: var(--second-text-color);;
+ color: var(--second-text-color);
}
}
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index 7b64390..bb2815e 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -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);
}
+
}
diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl
index 25e3fff..f91e2da 100644
--- a/source/css/layout/common/markdown.styl
+++ b/source/css/layout/common/markdown.styl
@@ -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;
}
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index 6f3da00..dcaa3a2 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -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;
}
\ No newline at end of file
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 4483fce..136bb3d 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -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);
}
}
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index f36b059..9822d81 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -30,7 +30,7 @@
.sidebar-tools {
position: fixed;
- top: $header-height + 30px;
+ top: $header-height + 50px;
right: 5%;
transition: all 0.5s ease;
}
diff --git a/source/js/common.js b/source/js/common.js
index ef6b5c0..9e501ad 100644
--- a/source/js/common.js
+++ b/source/js/common.js
@@ -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');
- }
-});
\ No newline at end of file
diff --git a/source/js/toggle-mode.js b/source/js/toggle-mode.js
new file mode 100644
index 0000000..643400f
--- /dev/null
+++ b/source/js/toggle-mode.js
@@ -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');
+ }
+
+});
\ No newline at end of file