feat: add change theme

ruanyf · Aug 21, 2020 · dfe3373 · dfe3373
1 parent 2613635
commit dfe3373
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git 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
@@ -1,3 +1,10 @@
+<!--
+ * @Descripttion: 
+ * @Author: Rick Liu
+ * @Date: 2020-08-21 10:11:13
+ * @LastEditors: Rick Liu
+ * @LastEditTime: 2020-08-21 10:20:34
+-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -22,6 +29,7 @@
   <!-- optional -->
   <div id="back_to_top">back to top</div>
   <div id="edit">edit</div>
+  <div id="theme">theme</div>
   <div id="loading">Loading ...</div>
   <div id="error">Oops! ... File not found!</div>
   <div id="flip"><div id="pageup">上一章</div><div id="pagedown">下一章</div></div>

diff --git a/js/ditto.js b/js/ditto.js
@@ -4,13 +4,15 @@ var ditto = {
     sidebar_id: "#sidebar",
     edit_id: "#edit",
     back_to_top_id: "#back_to_top",
+    theme_id: "#theme",
     loading_id: "#loading",
     error_id: "#error",
 
     // display elements
     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({