diff --git a/css/app.css b/css/app.css
index a2e2f3c51..7938b0963 100644
--- a/css/app.css
+++ b/css/app.css
@@ -340,6 +340,32 @@ input.searchButton {
cursor: pointer;
}
+#theme {
+ display: none;
+ position: fixed;
+
+ height: 17px;
+ width: 70px;
+ top: 70px;
+
+ margin-left: 930px;
+ margin-top: 0px;
+
+ color: #FFF;
+ line-height: 17px;
+ text-align: center;
+ font-size: 10px;
+
+
+ border-radius: 5px;
+ background-color: #AAA;
+}
+
+#theme:hover {
+ background-color: #444;
+ cursor: pointer;
+}
+
#loading, #error {
display: none;
position: fixed;
diff --git a/index.html b/index.html
index 76253f553..7cf302be0 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,10 @@
+
@@ -22,6 +29,7 @@
back to top
edit
+ theme
Loading ...
Oops! ... File not found!
diff --git a/js/ditto.js b/js/ditto.js
index d694a063e..c633dd449 100644
--- a/js/ditto.js
+++ b/js/ditto.js
@@ -4,6 +4,7 @@ var ditto = {
sidebar_id: "#sidebar",
edit_id: "#edit",
back_to_top_id: "#back_to_top",
+ theme_id: "#theme",
loading_id: "#loading",
error_id: "#error",
@@ -11,6 +12,7 @@ var ditto = {
sidebar: true,
edit_button: true,
back_to_top_button: true,
+ theme_button: true,
save_progress: true, // 保存阅读进度
search_bar: true,
@@ -58,6 +60,10 @@ function initialize() {
if (ditto.edit_button) {
init_edit_button();
}
+
+ if (ditto.theme_button) {
+ init_theme_button();
+ }
// page router
router();
@@ -133,12 +139,39 @@ function searchbar_listener(event) {
*/
}
+function init_theme_button() {
+ $(ditto.theme_id).show();
+ // 默认主题
+ var currfontColor = localStorage.getItem('fontColor') || '#0d141e';
+ var currbgColor = localStorage.getItem('bgColor') || '#ffffff';
+ $('body').css({
+ color: currfontColor,
+ backgroundColor: currbgColor
+ })
+ $(ditto.theme_id).on('click', changeTheme);
+}
function init_back_to_top_button() {
$(ditto.back_to_top_id).show();
$(ditto.back_to_top_id).on('click', goTop);
}
+// 改变主题
+function changeTheme() {
+ var fontColor = localStorage.getItem('fontColor') || '#0d141e';
+ var bgColor = localStorage.getItem('bgColor') || '#ffffff';
+ var fontColors = ['#0d141e', '#020000', '#020702', '#d0d3d8'];
+ var bgColors = ['#ffffff', '#f6f0da', '#c0edc6', '#1f2022'];
+ var currIndex = bgColors.indexOf(bgColor);
+ var nextIndex = (currIndex + 1) >= bgColors.length ? 0 : currIndex + 1;
+ $('body').css({
+ color: fontColors[nextIndex],
+ backgroundColor: bgColors[nextIndex],
+ });
+ localStorage.setItem('fontColor', fontColors[nextIndex]);
+ localStorage.setItem('bgColor', bgColors[nextIndex]);
+}
+
function goTop(e) {
if(e) e.preventDefault();
$('html, body').animate({