fix bug

Former-commit-id: 4a9c109a0ab402699728fd704270a546edf5e015
2026-06-21 22:31:52 -04:00 · 2021-04-17 21:43:25 +08:00
parent 8dfa14853b
commit 063b6f92f9
92 changed files with 856 additions and 714 deletions
--- a/main.js
+++ b/main.js
@@ -44,8 +44,6 @@ app.on("ready", () => {

  mainWin.loadURL(urlLocation);
  const { remote, ipcMain } = require("electron");
-  const { ebtMain } = require("electron-baidu-tongji");
-  ebtMain(ipcMain, isDev);
  mainWin.webContents.on(
    "new-window",
    (event, url, frameName, disposition, options, additionalFeatures) => {
@@ -81,9 +79,10 @@ app.on("ready", () => {
        });
        event.newGuest = new BrowserWindow(options);
      }
-      mainWin.on("minimize", () => {
-        event.newGuest && event.newGuest.show();
-      });
+      mainWin &&
+        mainWin.on("minimize", () => {
+          event.newGuest && event.newGuest.show();
+        });

      event.newGuest.on("close", () => {
        event.newGuest = null;
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
    "axios": "^0.19.2",
    "chardet": "^1.3.0",
    "copy-text-to-clipboard": "^2.2.0",
-    "electron-baidu-tongji": "^1.0.5",
    "electron-is-dev": "^1.1.0",
    "font-list": "^1.2.11",
    "fs-extra": "^9.1.0",
--- a/public/assets/empty_light.svg
+++ b/public/assets/empty_light.svg
@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1371.37" height="565.416" viewBox="0 0 1371.37 565.416">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.43" y1="0.005" x2="0.43" y2="0.577" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#dae0e6"/>
+      <stop offset="1" stop-color="#eff1f3"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="1.146" y1="1" x2="0.038" y2="-0.34" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#536db5" stop-opacity="0"/>
+      <stop offset="1" stop-color="#0e284b" stop-opacity="0.212"/>
+    </linearGradient>
+  </defs>
+  <g id="组_763" data-name="组 763" transform="translate(-295.755 -235)">
+    <path id="Rectangle_Copy" data-name="Rectangle Copy" d="M1311.106,335.481H924.7c-54.321,0-473.383,1.025-757.763,0-130.459.181-114.97.147-172,0s-55.024.014-55.2,0c34-94.858,111.065-117.526,141.341-136.925,37.1-23.772,186.425-66.258,276.359-88.634S458.856,26.1,570.367,3.674C663.653-15.09,760.674,41.28,889.9,132.376c106.941,77.594,154.175,95.475,273.271,129.213S1311.106,335.481,1311.106,335.481Z" transform="translate(356.019 464.479)" opacity="0.25" fill="url(#linear-gradient)"/>
+    <g id="shadow" transform="translate(1068.709 696.823) rotate(180)">
+      <ellipse id="shadow-2" data-name="shadow" cx="28.937" cy="3.472" rx="28.937" ry="3.472" transform="translate(57.875 6.944) rotate(180)" fill="url(#linear-gradient-2)" style="mix-blend-mode: multiply;isolation: isolate"/>
+      <ellipse id="shadow-3" data-name="shadow" cx="28.937" cy="3.472" rx="28.937" ry="3.472" transform="translate(57.875 6.944) rotate(180)" fill="rgba(216,216,216,0.08)" style="mix-blend-mode: darken;isolation: isolate"/>
+    </g>
+    <path id="Path_39" data-name="Path 39" d="M14.468,6.443a37.827,37.827,0,0,1,4.573,24.593c-2.287,13.934-2,34.451-2,34.451H9.461L0,3.373S10.745-.688,14.468.1,14.468,6.443,14.468,6.443Z" transform="translate(1179.929 626.963)" fill="#9ea4b8"/>
+    <path id="Path_39_Copy" data-name="Path 39 Copy" d="M14.468,11.386a37.827,37.827,0,0,1,4.573,24.593c-2.287,13.934-2,34.451-2,34.451H9.461L0,8.316,17.552,0Z" transform="translate(1142.736 620.824) rotate(13)" fill="#9ea4b8"/>
+    <path id="Rectangle_17" data-name="Rectangle 17" d="M27.444,2.8,18.17,0,11.934,2.8l-8.779.914a3.472,3.472,0,0,0-2.979,2.5h0a4.6,4.6,0,0,0,4.409,5.845H22.814a4.629,4.629,0,0,0,4.629-4.629Z" transform="translate(1169.747 689.395)" fill="#302c48"/>
+    <path id="Rectangle_17_Copy" data-name="Rectangle 17 Copy" d="M27.444,2.8,18.17,0,11.934,2.8l-8.779.914a3.472,3.472,0,0,0-2.979,2.5h0a4.6,4.6,0,0,0,4.409,5.845H22.814a4.629,4.629,0,0,0,4.629-4.629Z" transform="translate(1116.502 689.395)" fill="#302c48"/>
+    <path id="Path_31" data-name="Path 31" d="M62.628,62.167V0H7.125L0,62.167H25.335l7.8-32.008,5.5,32.008Z" transform="translate(1136.878 570.678)" fill="#302c48"/>
+    <path id="Path_32" data-name="Path 32" d="M0,70.14C12.567,58.262,12.871,58.6,18.387,51.149c2.633-3.558,5.661-6.342,5.5-6.761C21.431,38.182,12.983,31.253,0,14.494L7.807,0C26.758,18.166,32.49,31.727,35.371,39.02c.7,1.767,1.927,4.976,1.613,7.052C35.6,55.212,23.25,65.773.853,77.662Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1190.725, 483.355)" fill="#9ea4b8"/>
+    <g id="single_thread" data-name="single thread" transform="translate(1097.346 686.539) rotate(180)">
+      <path id="Path_36" data-name="Path 36" d="M11.153,12.624S3.6,3.525,2.906.532C1.254-1.41,0,2.587,0,2.587S4.581,21.959,9.147,25.046s4.565,0,4.565,0Z" transform="translate(26.883 208.789) rotate(180)" fill="#9ea4b8"/>
+      <path id="Path_37" data-name="Path 37" d="M6.567,205.841c-13.143-18.431-7.175-55.829,23.5-93.621S92.989,33.876,54.24,8.415C42.018.384,20.284-4.075,3.095,5.149" transform="translate(72.016 205.841) rotate(180)" fill="none" stroke="#cdd4e0" stroke-miterlimit="10" stroke-width="1.8"/>
+      <path id="Path_35" data-name="Path 35" d="M3.706,20.974c2.721.651,4.213-9.617,1.492-11.5S3.768-.343,1.467.012.289,3.411.177,5.584.985,20.323,3.706,20.974Z" transform="translate(17.095 202.544) rotate(180)" fill="#9ea4b8"/>
+    </g>
+    <path id="Path_32_Copy" data-name="Path 32 Copy" d="M0,70.14C12.567,58.262,12.871,58.6,18.387,51.149c2.633-3.558,5.661-6.342,5.5-6.761C21.431,38.182,12.983,31.253,0,14.494L7.807,0C26.758,18.166,32.49,31.727,35.371,39.02,39.143,48.57,28.336,63.074.853,77.662Z" transform="translate(1156.074 491.021) rotate(82)" fill="#9ea4b8"/>
+    <path id="Path_33" data-name="Path 33" d="M11.692,0S11.939,4.47,8.8,6.959C5.3,9.737,1.384,12.948.48,14.1-1.234,16.27,2.194,16.27,2.194,16.27L.48,30.311l14.26,6.381L11.692,48.578H28.776l2.151-11.887s-4.973-22.321-8.106-28.3C18.576.3,11.692,0,11.692,0Z" transform="translate(1157.71 429.263)" fill="#9ea4b8"/>
+    <path id="Oval_8" data-name="Oval 8" d="M15.756,49.185c-7.26,0-8.271-8.555-12.515-14.11C.011,30.847,0,27.269,0,21.4,0,7.818,2.971,0,15.756,0s23.15,11.01,23.15,24.592S23.8,43.24,15.756,49.185Z" transform="translate(1171.017 417.337)" fill="#302c48"/>
+    <ellipse id="Oval" cx="8.102" cy="7.522" rx="8.102" ry="7.522" transform="translate(1172.883 414.444)" fill="#302c48"/>
+    <ellipse id="Oval_Copy" data-name="Oval Copy" cx="5.209" cy="4.836" rx="5.209" ry="4.836" transform="translate(1184.458 414.444)" fill="#302c48"/>
+    <ellipse id="Oval_Copy_2" data-name="Oval Copy 2" cx="8.102" cy="7.522" rx="8.102" ry="7.522" transform="translate(1190.246 419.073)" fill="#302c48"/>
+    <ellipse id="Oval_Copy_6" data-name="Oval Copy 6" cx="8.102" cy="7.522" rx="8.102" ry="7.522" transform="translate(1194.876 427.174)" fill="#302c48"/>
+    <ellipse id="Oval_Copy_3" data-name="Oval Copy 3" cx="4.051" cy="3.761" rx="4.051" ry="3.761" transform="translate(1192.561 416.758)" fill="#302c48"/>
+    <ellipse id="Oval_Copy_4" data-name="Oval Copy 4" cx="4.051" cy="3.761" rx="4.051" ry="3.761" transform="translate(1169.411 419.073)" fill="#302c48"/>
+    <ellipse id="Oval_Copy_5" data-name="Oval Copy 5" cx="4.051" cy="3.761" rx="4.051" ry="3.761" transform="translate(1167.096 424.859)" fill="#302c48"/>
+    <ellipse id="Oval_2" data-name="Oval 2" cx="4.63" cy="5.208" rx="4.63" ry="5.208" transform="translate(1167.096 442.219)" fill="#9ea4b8"/>
+    <path id="Path_30" data-name="Path 30" d="M92.413,27.082,67.785,4.247S55.934,0,48.224,0h-11.4C32,0,18.195,4.247,18.195,4.247L0,27.082l11.549,16.4,12.633-16.4-14.09,78.261s14.3,4.767,26.736,4.767,30.957-4.629,30.957-4.629V32.657l9.1,10.82Z" transform="translate(1132.132 474.623)" fill="#d6d6d6"/>
+    <path id="Path_34" data-name="Path 34" d="M5.431,44.328,4.061,0,0,12.311Z" transform="translate(1170.112 588.604)" fill="#3b3c45" opacity="0.195" style="mix-blend-mode: multiply;isolation: isolate"/>
+    <path id="Path_38" data-name="Path 38" d="M0,50.671,14.863,0s-6.1,1.908-6.442,4.355S0,50.671,0,50.671Z" transform="translate(1147.833 497.706)" fill="#deeaf4" opacity="0.55" style="mix-blend-mode: multiply;isolation: isolate"/>
+    <g id="Thread" transform="translate(1046.717 694.508) rotate(180)">
+      <ellipse id="Oval_9_Copy" data-name="Oval 9 Copy" cx="4.051" cy="10.416" rx="4.051" ry="10.416" transform="translate(33.567 21.989) rotate(180)" fill="#302c48"/>
+      <rect id="Rectangle" width="25.465" height="15.045" transform="translate(28.937 18.517) rotate(180)" fill="#302c48"/>
+      <path id="Rectangle_Copy-2" data-name="Rectangle Copy" d="M12.732,0H2.315S0,2.487,0,7.416a12.284,12.284,0,0,0,2.315,7.629H12.732a14.017,14.017,0,0,1-2.315-7.2A17.951,17.951,0,0,1,12.732,0Z" transform="translate(24.307 18.517) rotate(180)" fill="#cacaca"/>
+      <ellipse id="Oval_9" data-name="Oval 9" cx="4.051" cy="11.573" rx="4.051" ry="11.573" transform="translate(8.102 23.146) rotate(180)" fill="#686b89"/>
+    </g>
+    <g id="Kite" transform="translate(993.463 393.948) rotate(180)">
+      <g id="Group_6" data-name="Group 6" transform="matrix(0.883, -0.469, 0.469, 0.883, 56.551, 113.53)">
+        <path id="Combined_Shape" data-name="Combined Shape" d="M0,0V24.41H16.529Z" transform="translate(16.529 51.438) rotate(180)" fill="#52556e"/>
+        <path id="Rectangle_18_Copy" data-name="Rectangle 18 Copy" d="M16.529,0V24.41H0Z" transform="translate(35.281 51.438) rotate(180)" fill="#9ea4b8"/>
+        <path id="Rectangle_18_Copy_3" data-name="Rectangle 18 Copy 3" d="M16.529,0V24.41H0Z" transform="translate(0 0)" fill="#9ea4b8"/>
+        <path id="Rectangle_18_Copy_2" data-name="Rectangle 18 Copy 2" d="M0,0V24.41H16.529Z" transform="translate(18.752 0)" fill="#52556e"/>
+      </g>
+      <g id="Group_9" data-name="Group 9" transform="translate(56.359 129.838)">
+        <path id="Triangle_2" data-name="Triangle 2" d="M3.646,0,0,9.356H7.293Z" transform="translate(7.181 5.062) rotate(25)" fill="#52556e"/>
+        <path id="Triangle_2_Copy_7" data-name="Triangle 2 Copy 7" d="M3.646,0,7.293,9.356H0Z" transform="translate(10.757 2.105) rotate(103)" fill="#9ea4b8"/>
+      </g>
+      <g id="Group_8" data-name="Group 8" transform="matrix(-1, 0.017, -0.017, -1, 111.023, 125.412)">
+        <path id="Triangle_2_Copy_9" data-name="Triangle 2 Copy 9" d="M3.646,0,0,9.356H7.293Z" transform="translate(7.181 5.062) rotate(25)" fill="#52556e"/>
+        <path id="Triangle_2_Copy_8" data-name="Triangle 2 Copy 8" d="M3.646,0,7.293,9.356H0Z" transform="translate(10.757 2.105) rotate(103)" fill="#9ea4b8"/>
+      </g>
+      <g id="Group_7" data-name="Group 7" transform="translate(61.224 0)">
+        <path id="Path_41" data-name="Path 41" d="M30.055,0c0,3.984,9.7,21.376-15.555,43.447s-12.37,50.917,0,60.569" transform="translate(40.847 104.016) rotate(180)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3.24" opacity="0.7"/>
+        <path id="Triangle_2-2" data-name="Triangle 2" d="M3.646,0,0,9.356H7.293Z" transform="matrix(-0.602, 0.799, -0.799, -0.602, 11.861, 83.405)" fill="#52556e"/>
+        <path id="Triangle_2_Copy_7-2" data-name="Triangle 2 Copy 7" d="M3.646,0,7.293,9.356H0Z" transform="matrix(0.588, -0.809, 0.809, 0.588, 7.295, 87.86)" fill="#9ea4b8"/>
+        <path id="Triangle_2_Copy" data-name="Triangle 2 Copy" d="M3.646,0,0,9.356H7.293Z" transform="translate(24.755 63.33) rotate(155)" fill="#9ea4b8"/>
+        <path id="Triangle_2_Copy_6" data-name="Triangle 2 Copy 6" d="M3.646,0,7.293,9.356H0Z" transform="matrix(0.914, -0.407, 0.407, 0.914, 18.411, 66.157)" fill="#52556e"/>
+        <path id="Triangle_2_Copy_2" data-name="Triangle 2 Copy 2" d="M3.646,0,0,9.356H7.293Z" transform="translate(40.715 37.911) rotate(109)" fill="#52556e"/>
+        <path id="Triangle_2_Copy_5" data-name="Triangle 2 Copy 5" d="M3.646,0,7.293,9.356H0Z" transform="matrix(0.407, -0.914, 0.914, 0.407, 37.683, 44.383)" fill="#9ea4b8"/>
+        <path id="Triangle_2_Copy_3" data-name="Triangle 2 Copy 3" d="M3.646,0,0,9.356H7.293Z" transform="translate(35.635 10.22) rotate(76)" fill="#9ea4b8"/>
+        <path id="Triangle_2_Copy_4" data-name="Triangle 2 Copy 4" d="M3.646,0,7.293,9.356H0Z" transform="translate(37.156 16.999) rotate(-97)" fill="#52556e"/>
+      </g>
+      <path id="Path_40" data-name="Path 40" d="M82.34,85.36c-15.2-.889-38.511-9.777-44.068-38.656S17.838,3.77,0,0" transform="translate(82.34 127.666) rotate(180)" fill="none" stroke="#cdd4e0" stroke-miterlimit="10" stroke-width="1.62"/>
+    </g>
+    <g id="shadow-4" data-name="shadow" transform="translate(1296.024 708.416) rotate(180)">
+      <ellipse id="shadow-5" data-name="shadow" cx="91.095" cy="6.269" rx="91.095" ry="6.269" transform="translate(182.19 12.537) rotate(180)" fill="url(#linear-gradient-2)" style="mix-blend-mode: multiply;isolation: isolate"/>
+      <ellipse id="shadow-6" data-name="shadow" cx="91.095" cy="6.269" rx="91.095" ry="6.269" transform="translate(182.19 12.537) rotate(180)" fill="rgba(216,216,216,0.08)" style="mix-blend-mode: darken;isolation: isolate"/>
+    </g>
+  </g>
+</svg>
--- a/public/assets/label_light.png
+++ b/public/assets/label_light.png
--- a/public/index.html
+++ b/public/index.html
@@ -198,14 +198,5 @@
      type="text/javascript"
      src="%PUBLIC_URL%/lib/Hammer/hammer.min.js"
    ></script>
-    <script>
-      var _hmt = _hmt || [];
-      (function () {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?358570be1bfc40e01db43adefade5ad5";
-        var s = document.getElementsByTagName("script")[0];
-        s.parentNode.insertBefore(hm, s);
-      })();
-    </script>
  </body>
 </html>
--- a/src/assets/locales/cn/translation.json
+++ b/src/assets/locales/cn/translation.json
@@ -4,8 +4,10 @@
  "Recent Books": "最近阅读",
  "My Bookmarks": "我的书签",
  "My Notes": "我的笔记",
+  "Language": "语言",
  "My Favorites": "我的喜爱",
  "My Digests": "我的书摘",
+  "Turn on dark mode": "开启黑夜模式",
  "My Shelves": "我的书架",
  "Please continue in desktop version": "仅客户端版本支持",
  "It seems like you're lost": "你要访问的内容走丢了",
--- a/src/assets/locales/en/translation.json
+++ b/src/assets/locales/en/translation.json
@@ -137,7 +137,7 @@
  "Turn on touch screen mode": "Turn on touch screen mode",
  "Auto open latest book": "Auto open last-read book",
  "Project link": "About Project",
-  "About developer": "About developer",
+  "About developer": "Developer",
  "Official website": "Our Website",
  "Please import less than 10 books": "Please import less than 10 books",
  "Please delete some books before import": "Please delete some books before import",
@@ -230,6 +230,8 @@
  "Backup your data with Webdav": "Backup your data with Webdav",
  "More formats supported": "More formats supported, mobi, azw3, txt",
  "Click the top-right button to add books": "Click the top-right button to add books",
+  "Turn on dark mode": "Turn on dark mode",
+
  "View Mode": "View Mode",
  "Download Desktop Version": "Download Desktop Version",
  "Koodo Reader's web version are limited by the browser, for more powerful features, please download the desktop version.": "Web version are functionally limited by the browser, for more powerful features, please download the desktop version.",
--- a/src/assets/locales/ru/translation.json
+++ b/src/assets/locales/ru/translation.json
@@ -147,8 +147,8 @@
  "Next Chapter": "Следующая глава",
  "Prev Chapter": "Предыдущая глава",
  "Less": "Меньше",
-  "Current Reading Time": "Время использования：{{count}} мин.",
-  "Finish Reading Time": "Осталось времени：{{count}} мин.",
+  "Current Reading Time": "Время использования：{{count}} min",
+  "Finish Reading Time": "Осталось времени：{{count}} min",
  "Book Page": "Страница {{count}}",
  "Current Chapter Pages": "Страницы",
  "Chapter Redirect": "Главы",
@@ -244,6 +244,7 @@
  "Text Align": "Text Align",
  "Sync Successfully": "Sync Successfully",
  "Permanently Delete": "Permanently Delete",
+  "Turn on dark mode": "Turn on dark mode",

  "Search on the internet": "Search on the internet",
  "Search in the book": "Search in the book",
--- a/src/assets/locales/tw/translation.json
+++ b/src/assets/locales/tw/translation.json
@@ -156,6 +156,7 @@
  "What's New": "新增功能",
  "What's been fixed": "問題修復",
  "Language": "語言",
+  "Turn on dark mode": "开启黑夜模式",
  "Cancel Successfully": "取消成功",
  "Dont't use mimical background": "不使用仿真背景",
  "Please continue in desktop version": "僅客戶端版本支持",
--- a/src/assets/styles/blue.css
+++ b/src/assets/styles/blue.css
--- a/src/assets/styles/dark.css
+++ b/src/assets/styles/dark.css
@@ -0,0 +1,232 @@
+body {
+  -webkit-tap-highlight-color: transparent;
+  background: rgba(47, 52, 55, 1);
+  color: rgba(235, 235, 235, 1);
+}
+
+.book-content-name,
+.booklist-shelf-list,
+.lang-setting-dropdown,
+.book-subcontent-name {
+  color: rgba(235, 235, 235, 1);
+}
+
+.add-dialog-shelf-list-box,
+.add-dialog-shelf-list-option,
+.add-dialog-new-shelf-box,
+.add-dialog-cancel,
+.delete-dialog-cancel,
+.edit-dialog-book-name-box,
+.edit-dialog-book-author-box,
+.edit-dialog-cancel,
+.tag-list-item,
+.token-dialog-cancel,
+.lang-setting-dropdown,
+.tag-list-item-new,
+.input-value,
+.import-from-cloud,
+.booklist-shelf-list,
+.token-dialog-token-box,
+.token-dialog-url-box,
+.token-dialog-username-box,
+.token-dialog-password-box,
+.general-setting-dropdown,
+.active-color,
+.delete-dialog-uncheck-icon,
+.next-chapter,
+.progress-slide-circle,
+.setting-dialog-location-title,
+.delete-dialog-uncheck-icon,
+.previous-chapter,
+.color-option,
+.line-option,
+.original-text-box,
+.trans-text-box,
+.nav-search-page-item {
+  border: 2px solid rgba(235, 235, 235, 1);
+}
+
+.header-search-box,
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input::-ms-input-placeholder,
+textarea::-webkit-input-placeholder,
+textarea::-moz-placeholder,
+textarea::-ms-input-placeholder,
+.editor-box::-ms-input-placeholder,
+.editor-box::-moz-placeholder,
+.header-search-text,
+.editor-box::placeholder {
+  color: rgba(235, 235, 235, 0.8);
+}
+.delete-digest-button,
+.add-dialog-comfirm,
+.backup-page-backup-selector,
+.delete-dialog-comfirm,
+.book-item-config,
+.book-cover-item-config,
+.side-menu-selector-container,
+.download-desk-button,
+.edit-dialog-comfirm,
+.change-location-button,
+.token-dialog-comfirm,
+.new-version-open,
+.update-dialog-container-button,
+.import-from-local,
+.active-tag,
+.single-control-switch,
+.side-menu-selector-container,
+.previous-chapter-single-container,
+.next-chapter-single-container,
+.book-bookmark-link,
+.message-box-container,
+.only-local-icon,
+.popup-close {
+  background-color: rgba(235, 235, 235, 1);
+  color: rgba(47, 52, 55, 1);
+}
+
+.reading-progress-icon,
+.header-search-box,
+#jumpPage,
+#jumpChapter,
+.book-item-cover,
+.book-cover,
+.book-cover-item-cover,
+.book-item-list-cover,
+#newTag {
+  background-color: rgba(235, 235, 235, 0.1);
+}
+.backup-page-close-icon:hover,
+.sidebar-list-icon:hover,
+.nav-close-icon:hover,
+.setting-close-container:hover,
+.side-menu-hover-container,
+.setting-dialog-location-title,
+.note-option:hover,
+.digest-option:hover,
+.translation-option:hover,
+.speaker-option:hover,
+.search-book-option:hover,
+.google-option:hover,
+.header-search-text:hover,
+.reader-setting-icon-container:hover,
+.setting-icon-container:hover,
+.animation-mask,
+.animation-mask-local,
+.copy-option:hover {
+  background-color: rgba(235, 235, 235, 0.035);
+}
+
+.action-dialog-container,
+.add-dialog-container,
+.backup-page-container,
+.delete-dialog-container,
+.download-desk-container,
+.edit-dialog-container,
+.loading-dialog,
+.setting-dialog-container,
+.token-dialog-container,
+.new-version,
+.sort-dialog-container,
+.popup-menu-box,
+.loading-page-cover,
+.loading-page-cover,
+.navigation-panel,
+.book-operation-panel,
+.progress-panel,
+.booklist-shelf-list,
+.input-value,
+.tag-list-item-new,
+.tag-list-item,
+.setting-panel-parent {
+  background: rgba(47, 52, 55, 1);
+  box-shadow: 0px 0px 10px rgba(235, 235, 235, 0.3);
+}
+.backup-page-backup-selector,
+.message-box-container {
+  box-shadow: 0px 0px 12px rgba(235, 235, 235, 0.3);
+}
+
+.add-bookmark-button,
+.exit-reading-button,
+.add-bookmark-button,
+.enter-fullscreen-button,
+.card-list-item-card,
+.navigation-header {
+  box-shadow: 0px 0px 5px rgba(235, 235, 235, 0.18);
+}
+.background-color-circle,
+.background-box1,
+.background-box2,
+.background-box3 {
+  box-shadow: 0px 0px 2px rgba(235, 235, 235, 0.18);
+}
+
+.add-dialog-cancel,
+.delete-dialog-cancel,
+.edit-dialog-cancel,
+.loading-dialog,
+.lang-setting-dropdown,
+.token-dialog-cancel,
+.new-version,
+.popup-menu-box,
+.general-setting-dropdown,
+.card-list-item-card,
+.navigation-header,
+.book-list-view,
+.import-from-cloud,
+.only-local-slider,
+.background,
+.single-control-button,
+.add-dialog-shelf-list-box,
+.add-dialog-new-shelf-box,
+.edit-dialog-book-name-box,
+.edit-dialog-book-author-box,
+::-webkit-scrollbar,
+.progress-slide-circle {
+  background: rgba(47, 52, 55, 1);
+}
+
+.exit-reading-text,
+.add-bookmark-text,
+.enter-fullscreen-text,
+.token-dialog-token-text,
+.token-dialog-link-text,
+.reading-progress-icon,
+.image-operation,
+.popup-menu-triangle-up,
+.add-bookmark-icon,
+.active-page,
+.exit-reading-icon,
+.message-box-icon,
+.active-icon,
+.active-selector,
+.enter-fullscreen-icon,
+.icon-popup,
+.delete-dialog-uncheck-icon,
+.book-bookmark-link {
+  color: rgba(47, 52, 55, 1);
+}
+.general-setting-dropdown,
+#jumpPage,
+#jumpChapter,
+.add-dialog-shelf-list-box,
+.add-dialog-new-shelf-box,
+.edit-dialog-book-name-box,
+.edit-dialog-book-author-box,
+.card-list-item-show-more,
+.cover-banner,
+.book-more-action,
+.reading-progress-icon,
+.book-love-icon,
+.input-value {
+  color: rgba(235, 235, 235, 1);
+}
+.book-content-name,
+.book-subcontent-name,
+.book-bookmark-list,
+.nav-search-list-item,
+.sort-dialog-seperator {
+  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
+}
--- a/src/assets/styles/default.css
+++ b/src/assets/styles/default.css
@@ -0,0 +1,221 @@
+body {
+  -webkit-tap-highlight-color: transparent;
+  background: rgba(255, 255, 255, 1);
+  color: rgba(75, 75, 75, 1);
+}
+
+.book-content-name,
+.book-subcontent-name {
+  color: rgba(75, 75, 75, 1);
+}
+.reading-progress-icon,
+.book-love-icon,
+.book-loved-icon,
+.zoom-in-icon,
+.zoom-out-icon,
+.save-icon,
+.clockwise-icon,
+.counterclockwise-icon,
+.book-more-action {
+  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
+}
+.add-dialog-shelf-list-box,
+.add-dialog-shelf-list-option,
+.add-dialog-new-shelf-box,
+.add-dialog-cancel,
+.delete-dialog-cancel,
+.edit-dialog-book-name-box,
+.edit-dialog-book-author-box,
+.edit-dialog-cancel,
+.tag-list-item,
+.token-dialog-cancel,
+.lang-setting-dropdown,
+.tag-list-item-new,
+.input-value,
+.import-from-cloud,
+.booklist-shelf-list,
+.token-dialog-token-box,
+.token-dialog-url-box,
+.token-dialog-username-box,
+.token-dialog-password-box,
+.general-setting-dropdown,
+.active-color,
+.delete-dialog-uncheck-icon,
+.next-chapter,
+.progress-slide-circle,
+.setting-dialog-location-title,
+.delete-dialog-uncheck-icon,
+.previous-chapter,
+.color-option,
+.original-text-box,
+.trans-text-box,
+.line-option,
+.nav-search-page-item {
+  border: 2px solid rgba(75, 75, 75, 1);
+}
+.header-search-box,
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input::-ms-input-placeholder,
+textarea::-webkit-input-placeholder,
+textarea::-moz-placeholder,
+textarea::-ms-input-placeholder,
+.editor-box::-ms-input-placeholder,
+.editor-box::-moz-placeholder,
+.header-search-text,
+.card-list-item-show-more,
+.editor-box::placeholder {
+  color: rgba(75, 75, 75, 0.8);
+}
+.delete-digest-button,
+.add-dialog-comfirm,
+.backup-page-backup-selector,
+.delete-dialog-comfirm,
+.book-item-config,
+.book-cover-item-config,
+.side-menu-selector-container,
+.download-desk-button,
+.edit-dialog-comfirm,
+.change-location-button,
+.token-dialog-comfirm,
+.new-version-open,
+.update-dialog-container-button,
+.import-from-local,
+.active-tag,
+.single-control-switch,
+.side-menu-selector-container,
+.previous-chapter-single-container,
+.next-chapter-single-container,
+.book-bookmark-link,
+.tag-list-item,
+.message-box-container,
+.only-local-icon,
+.popup-close {
+  background-color: rgba(75, 75, 75, 1);
+  color: rgba(255, 255, 255, 1);
+}
+
+.reading-progress-icon,
+.header-search-box,
+#jumpPage,
+#jumpChapter,
+#newTag {
+  background-color: rgba(75, 75, 75, 0.1);
+}
+.backup-page-close-icon:hover,
+.sidebar-list-icon:hover,
+.nav-close-icon:hover,
+.setting-close-container:hover,
+.side-menu-hover-container,
+.setting-dialog-location-title,
+.note-option:hover,
+.digest-option:hover,
+.translation-option:hover,
+.speaker-option:hover,
+.search-book-option:hover,
+.google-option:hover,
+.header-search-text:hover,
+.reader-setting-icon-container:hover,
+.setting-icon-container:hover,
+.animation-mask,
+.animation-mask-local,
+.copy-option:hover {
+  background-color: rgba(75, 75, 75, 0.035);
+}
+.book-item-cover,
+.book-cover,
+.book-cover-item-cover,
+.book-item-list-cover,
+.action-dialog-container,
+.add-dialog-container,
+.backup-page-container,
+.delete-dialog-container,
+.download-desk-container,
+.edit-dialog-container,
+.loading-dialog,
+.setting-dialog-container,
+.token-dialog-container,
+.new-version,
+.sort-dialog-container,
+.popup-menu-box,
+.loading-page-cover,
+.loading-page-cover,
+.navigation-panel,
+.book-operation-panel,
+.progress-panel,
+.setting-panel-parent {
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+.backup-page-backup-selector,
+.message-box-container {
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
+}
+::-webkit-scrollbar {
+  background-color: white;
+}
+.add-bookmark-button,
+.exit-reading-button,
+.add-bookmark-button,
+.enter-fullscreen-button,
+.card-list-item-card,
+.navigation-header,
+.book-cover {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18);
+}
+.background-color-circle,
+.background-box1,
+.background-box2,
+.background-box3 {
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.18);
+}
+
+.add-dialog-cancel,
+.delete-dialog-cancel,
+.edit-dialog-cancel,
+.loading-dialog,
+.lang-setting-dropdown,
+.token-dialog-cancel,
+.new-version,
+.popup-menu-box,
+.general-setting-dropdown,
+.card-list-item-card,
+.navigation-header,
+.book-list-view,
+.import-from-cloud,
+.only-local-slider,
+.background,
+.single-control-button,
+.progress-slide-circle {
+  background: rgba(255, 255, 255, 1);
+}
+.cover-banner,
+.exit-reading-text,
+.add-bookmark-text,
+.enter-fullscreen-text,
+.token-dialog-token-text,
+.token-dialog-link-text,
+.reading-progress-icon,
+.book-love-icon,
+.book-more-action,
+.image-operation,
+.popup-menu-triangle-up,
+.add-bookmark-icon,
+.active-page,
+.exit-reading-icon,
+.message-box-icon,
+.active-icon,
+.active-selector,
+.enter-fullscreen-icon,
+.icon-popup,
+.delete-dialog-uncheck-icon,
+.book-bookmark-link {
+  color: rgba(255, 255, 255, 1);
+}
+.book-content-name,
+.book-subcontent-name,
+.book-bookmark-list,
+.nav-search-list-item,
+.sort-dialog-seperator {
+  border-bottom: 1px solid rgba(75, 75, 75, 0.1);
+}
--- a/src/assets/styles/fonts/icomoon.eot
+++ b/src/assets/styles/fonts/icomoon.eot
--- a/src/assets/styles/fonts/icomoon.svg
+++ b/src/assets/styles/fonts/icomoon.svg
@@ -35,7 +35,7 @@
 <glyph unicode="&#xe919;" glyph-name="exit" horiz-adv-x="1167" d="M675.775 154.117h-221.144v589.613h221.183v-154.832h93.395v202.748c0 0.047 0 0.102 0 0.158 0 24.336-19.728 44.064-44.064 44.064-0.055 0-0.111 0-0.166 0h-270.348v92.137c0 0.044 0 0.096 0 0.148 0 17.584-14.255 31.839-31.839 31.839-4.471 0-8.728-0.922-12.589-2.586l0.207 0.079-374.797-168.315c-20.795-9.638-35.074-30.112-35.611-53.979l-0.001-0.069v-573.89c0.039-24.086 14.515-44.781 35.235-53.899l0.378-0.148 374.758-168.315c3.76-1.716 8.155-2.716 12.784-2.716 17.367 0 31.446 14.079 31.446 31.446 0 0.264-0.003 0.527-0.010 0.789l0.001-0.039v92.215h270.318c0.047 0 0.102 0 0.158 0 24.336 0 44.064 19.728 44.064 44.064 0 0.055 0 0.111 0 0.166v-0.009 203.967h-93.355zM1156.191 472.194l-223.62 181.837c-5.258 4.237-12.020 6.801-19.381 6.801-17.128 0-31.014-13.885-31.014-31.014 0-0.125 0.001-0.249 0.002-0.374v0.019-104.479h-339.106c-14.205-0.089-25.697-11.58-25.786-25.777v-103.23c0.089-14.205 11.58-25.697 25.777-25.786h339.114v-104.44c0.296-17.139 14.26-30.919 31.442-30.919 7.151 0 13.745 2.387 19.028 6.408l-0.077-0.056 223.62 183.055c6.81 5.804 11.101 14.39 11.101 23.978s-4.291 18.173-11.057 23.941l-0.044 0.037z" />
 <glyph unicode="&#xe91a;" glyph-name="note" horiz-adv-x="851" d="M779.928 35.107h-762.675c-8.83-0.229-15.928-7.327-16.157-16.136v-66.813c0.229-8.83 7.327-15.928 16.136-16.157h763.792c8.83 0.229 15.928 7.327 16.157 16.136v65.746c0.001 0.059 0.001 0.129 0.001 0.198 0 9.404-7.624 17.028-17.028 17.028-0.079 0-0.159-0.001-0.238-0.002h0.012zM842.421 778.421c-41.488 72.746-99.933 131.534-170.159 172.251l-2.203 1.179c-8.979 5.156-19.742 8.197-31.214 8.197-17.718 0-33.742-7.253-45.265-18.951l-521.393-521.393c-4.152-3.987-7.181-9.115-8.583-14.879l-0.043-0.21-62.493-254.216c-0.557-2.304-0.876-4.949-0.876-7.669 0-9.16 3.622-17.474 9.513-23.588l-0.010 0.011c5.736-6.034 13.822-9.788 22.785-9.788 3.012 0 5.925 0.424 8.683 1.215l253.91 62.439c5.974 1.445 11.102 4.474 15.079 8.616l521.62 521.367c11.676 11.261 18.927 27.043 18.927 44.518 0 11.377-3.073 22.036-8.435 31.193l0.158-0.292zM151.765 205.333c-13.449 23.561-32.461 42.563-55.308 55.622l-0.722 0.38 28.099 112.032c58.596-34.456 105.997-82.198 139.065-139.278l0.982-1.837z" />
 <glyph unicode="&#xe91b;" glyph-name="collect" horiz-adv-x="825" d="M152.076 960h520.573c0.52 0.006 1.133 0.010 1.748 0.010 63.116 0 117.197-38.683 139.828-93.633l0.367-1.006c0.638-1.597 1.009-3.448 1.009-5.386 0-8.092-6.457-14.675-14.5-14.879h-642.27c-22.4 0-40.559-18.159-40.559-40.559s18.159-40.559 40.559-40.559v0h652.24c0.361 0.037 0.78 0.059 1.204 0.059 6.829 0 12.365-5.536 12.365-12.365 0-0.424-0.021-0.843-0.063-1.256l0.004 0.052v-662.373c0.001-0.196 0.001-0.427 0.001-0.659 0-83.641-67.805-151.446-151.446-151.446-0.172 0-0.343 0-0.514 0.001h-520.547c-0.187-0.001-0.409-0.001-0.631-0.001-83.641 0-151.446 67.805-151.446 151.446 0 0.232 0.001 0.464 0.002 0.695v-0.036 719.82c-0.001 0.187-0.001 0.409-0.001 0.631 0 83.641 67.805 151.446 151.446 151.446 0.222 0 0.444 0 0.665-0.001h-0.034zM493.409 473.403l108.139-57.447c4.644-3.504 7.614-9.012 7.614-15.213s-2.97-11.709-7.566-15.179l-0.048-0.035-114.951-67.637-57.447-104.761c-2.554-6.001-8.401-10.133-15.213-10.133s-12.659 4.131-15.172 10.025l-0.041 0.108-67.58 114.894-104.761 57.447c-6.001 2.554-10.133 8.401-10.133 15.213s4.131 12.659 10.025 15.172l0.108 0.041 114.894 64.202 57.447 108.139c3.504 4.644 9.012 7.614 15.213 7.614s11.709-2.97 15.179-7.566l0.035-0.048z" />
-<glyph unicode="&#xe91c;" glyph-name="1" d="M875.52 911.36h-727.040c-55.296 0-99.84-44.544-99.84-99.84v-727.040c0-55.296 44.544-99.84 99.84-99.84h727.040c55.296 0 99.84 44.544 99.84 99.84v727.040c0 55.296-44.544 99.84-99.84 99.84zM736.256 834.56v-209.92h-448.512v209.92h448.512zM898.56 84.48c0-12.8-10.24-23.040-23.040-23.040h-727.040c-12.8 0-23.040 10.24-23.040 23.040v727.040c0 12.8 10.24 23.040 23.040 23.040h62.464v-248.32c0-20.992 17.408-38.4 38.4-38.4h525.824c20.992 0 38.4 17.408 38.4 38.4v248.32h61.952c12.8 0 23.040-10.24 23.040-23.040v-727.040zM588.8 765.44h76.8v-76.8h-76.8z" />
+<glyph unicode="&#xe91c;" glyph-name="share" d="M968.348 603.826c-28.939 0-51.2-22.261-51.2-51.2v-507.548h-812.522v507.548c0 28.939-22.261 51.2-51.2 51.2s-51.2-22.261-51.2-51.2v-558.748c0-28.939 22.261-51.2 51.2-51.2h914.922c28.939 0 51.2 22.261 51.2 51.2v558.748c0 28.939-22.261 51.2-51.2 51.2zM313.878 655.026c13.357 0 26.713 4.452 35.617 15.583l111.304 111.304v-318.33c0-28.939 22.261-51.2 51.2-51.2s51.2 22.261 51.2 51.2v316.104l111.304-111.304c8.904-8.904 22.261-15.583 35.617-15.583s26.713 4.452 35.617 15.583c20.035 20.035 20.035 51.2 0 71.235l-198.122 198.122c-8.904 8.904-22.261 15.583-35.617 15.583s-26.713-4.452-35.617-15.583l-195.896-195.896c-20.035-20.035-20.035-51.2 0-71.235 8.904-11.13 22.261-15.583 33.391-15.583z" />
 <glyph unicode="&#xe91d;" glyph-name="copy" horiz-adv-x="819" d="M614.429 748.8h192c7.063 0.017 12.783 5.738 12.8 12.798v0.002c-0.067 18.216-8.303 34.496-21.233 45.375l-0.091 0.074-164.483 136.966c-12.152 9.161-27.299 14.96-43.758 15.771l-0.186 0.007c-0.009 0-0.019 0-0.030 0-8.698 0-15.749-7.051-15.749-15.749 0-0.010 0-0.021 0-0.031v0.002-154.691c0.183-22.379 18.334-40.457 40.724-40.523h0.006zM518.4 789.324v170.676h-279.476c-37.655-0.117-68.147-30.619-68.247-68.267v-716.692c0.1-37.668 30.609-68.176 68.267-68.276h512.010c37.661 0.117 68.16 30.616 68.276 68.265v518.293h-204.8c-52.998 0.067-95.946 43.004-96.029 95.992v0.008zM110.923 115.2v708.276h-42.647c-37.668-0.1-68.176-30.609-68.276-68.267v-750.963c0.117-37.661 30.616-68.16 68.265-68.276h546.135c37.661 0.117 68.16 30.616 68.276 68.265v42.687h-503.476c-37.661 0.117-68.16 30.616-68.276 68.265v0.011z" />
 <glyph unicode="&#xe91e;" glyph-name="success" d="M512.022 960c-0.013 0-0.028 0-0.044 0-282.782 0-512.022-229.24-512.022-512.022s229.24-512.022 512.022-512.022c282.782 0 512.022 229.24 512.022 512.022v0c0.003 0.635 0.004 1.386 0.004 2.138 0 281.604-228.285 509.889-509.889 509.889-0.736 0-1.472-0.002-2.208-0.005h0.113zM779.287 578.846l-312.803-341.536c-10.034-10.52-24.16-17.060-39.813-17.060s-29.779 6.541-39.793 17.039l-0.021 0.022-142.231 153.593c-10.098 10.217-16.335 24.268-16.335 39.776 0 31.257 25.339 56.596 56.596 56.596 18.33 0 34.626-8.714 44.969-22.226l0.1-0.136 96.692-107.968 273.055 296.042c11.030 11.033 26.27 17.858 43.104 17.858 13.769 0 26.472-4.566 36.677-12.266l-0.154 0.112c10.598-10.030 17.193-24.196 17.193-39.902 0-15.727-6.613-29.909-17.21-39.918l-0.026-0.025z" />
 <glyph unicode="&#xe91f;" glyph-name="popup" horiz-adv-x="2560" d="M1280-64l-1280 1024h2560z" />
--- a/src/assets/styles/fonts/icomoon.ttf
+++ b/src/assets/styles/fonts/icomoon.ttf
--- a/src/assets/styles/fonts/icomoon.woff
+++ b/src/assets/styles/fonts/icomoon.woff
--- a/src/assets/styles/green.css
+++ b/src/assets/styles/green.css
--- a/src/assets/styles/red.css
+++ b/src/assets/styles/red.css
--- a/src/assets/styles/reset.css
+++ b/src/assets/styles/reset.css
@@ -150,11 +150,6 @@ body {
  user-select: none;
 }

-body {
-  -webkit-tap-highlight-color: transparent;
-  background-color: white;
-}
-
 html,
 body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
--- a/src/assets/styles/style.css
+++ b/src/assets/styles/style.css
@@ -1,10 +1,10 @@
@font-face {
  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?49oeid');
-  src:  url('fonts/icomoon.eot?49oeid#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?49oeid') format('truetype'),
-    url('fonts/icomoon.woff?49oeid') format('woff'),
-    url('fonts/icomoon.svg?49oeid#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?yiaeyx');
+  src:  url('fonts/icomoon.eot?yiaeyx#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?yiaeyx') format('truetype'),
+    url('fonts/icomoon.woff?yiaeyx') format('woff'),
+    url('fonts/icomoon.svg?yiaeyx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
@@ -25,6 +25,9 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-share:before {
+  content: "\e91c";
+}
 .icon-google:before {
  content: "\e928";
 }
@@ -49,9 +52,6 @@
 .icon-sync:before {
  content: "\e918";
 }
-.icon-1:before {
-  content: "\e91c";
-}
 .icon-folder:before {
  content: "\e920";
 }
--- a/src/components/bookCardtem/bookCardItem.css
+++ b/src/components/bookCardtem/bookCardItem.css
@@ -8,8 +8,6 @@
 .book-item-cover {
  width: 105px;
  height: 137px;
-  background: white;
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.22);
  opacity: 1;
  margin: 15px 15px 5px 15px;
  cursor: pointer;
@@ -21,7 +19,6 @@
  height: 39px;
  font-size: 15px;
  line-height: 17px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  text-overflow: ellipsis;
@@ -34,7 +31,6 @@
 .book-item-config {
  width: 105px;
  height: 35px;
-  background: rgba(0, 0, 0, 0.5);
  position: relative;
  bottom: 71px;
  left: 15px;
@@ -62,9 +58,7 @@
  top: 23px;
  right: 17px;
  font-size: 18px;
-  color: white;
  cursor: pointer;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
  animation: slide-down-rotate 0.1s ease-in-out 0s 1;
 }
 .reading-progress-icon {
@@ -74,10 +68,8 @@
  width: 31px;
  height: 31px;
  border-radius: 50%;
-  background-color: rgba(75, 75, 75, 0.2);
  font-size: 15px;
  line-height: 31px;
-  color: white;
  cursor: pointer;
  transform: scale(0.9);
  animation: slide-down 0.1s ease-in-out 0s 1;
@@ -121,10 +113,8 @@
  bottom: 45px;
  right: 20px;
  font-size: 18px;
-  color: white;
  cursor: pointer;
  z-index: 1;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
  animation: slide-up 0.1s ease-in-out 0s 1;
 }
 .book-loved-icon {
@@ -135,7 +125,6 @@
  color: #f87356;
  cursor: pointer;
  z-index: 2;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
 }
 .action-dialog-parent {
  position: fixed;
--- a/src/components/bookCoverItem/bookCoverItem.css
+++ b/src/components/bookCoverItem/bookCoverItem.css
@@ -8,8 +8,6 @@
 .book-cover-item-cover {
  width: 120px;
  height: 170px;
-  background: white;
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.22);
  opacity: 1;
  margin: 15px 15px 5px 15px;
  cursor: pointer;
@@ -22,7 +20,6 @@
  height: 35px;
  font-size: 15px;
  line-height: 17px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: left;
  text-overflow: ellipsis;
@@ -40,7 +37,6 @@
  height: 18px;
  font-size: 13px;
  line-height: 17px;
-  color: rgba(75, 75, 75, 0.8);
  opacity: 1;
  text-align: left;
  text-overflow: ellipsis;
@@ -54,7 +50,6 @@
 .book-cover-item-config {
  width: 105px;
  height: 35px;
-  background: rgba(0, 0, 0, 0.5);
  position: relative;
  bottom: 71px;
  left: 15px;
@@ -82,9 +77,7 @@
  top: 23px;
  right: 17px;
  font-size: 18px;
-  color: white;
  cursor: pointer;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
  animation: slide-down-rotate 0.1s ease-in-out 0s 1;
 }
 .reading-progress-icon {
@@ -94,10 +87,8 @@
  width: 31px;
  height: 31px;
  border-radius: 50%;
-  background-color: rgba(75, 75, 75, 0.2);
  font-size: 15px;
  line-height: 31px;
-  color: white;
  cursor: pointer;
  transform: scale(0.9);
  animation: slide-down 0.1s ease-in-out 0s 1;
@@ -108,7 +99,6 @@
  height: 60px;
  font-size: 13px;
  line-height: 17px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: left;
  overflow: scroll;
@@ -154,10 +144,8 @@
  bottom: 45px;
  right: 20px;
  font-size: 18px;
-  color: white;
  cursor: pointer;
  z-index: 1;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
  animation: slide-up 0.1s ease-in-out 0s 1;
 }
 .book-loved-icon {
@@ -168,5 +156,4 @@
  color: #f87356;
  cursor: pointer;
  z-index: 2;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
 }
--- a/src/components/bookListItem/bookListItem.css
+++ b/src/components/bookListItem/bookListItem.css
@@ -7,8 +7,6 @@
 .book-item-list-cover {
  width: 57px;
  height: 74px;
-  background: rgba(0, 0, 0, 0);
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.22);
  opacity: 1;
  cursor: pointer;
 }
@@ -16,8 +14,7 @@
 .book-item-list-author {
  height: 30px;
  width: 350px;
-  font-size: 17px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  opacity: 1;
  text-align: center;
  text-overflow: ellipsis;
@@ -36,8 +33,7 @@
 .book-item-list-config {
  height: 30px;
  width: 120px;
-  font-size: 17px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  opacity: 1;
  text-align: center;
  margin: 22px 10px;
--- a/src/components/bookListItem/component.tsx
+++ b/src/components/bookListItem/component.tsx
@@ -184,7 +184,6 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
              onClick={() => {
                this.handleAddShelf();
              }}
-              color="rgba(75,75,75,1)"
            ></span>
            <span
              className="icon-trash list-icon"
--- a/src/components/colorOption/colorOption.css
+++ b/src/components/colorOption/colorOption.css
@@ -10,7 +10,6 @@
 .color-option {
  width: 25px;
  height: 25px;
-  background: rgba(228, 255, 154, 1);
  border-radius: 50%;
  opacity: 1;
  box-sizing: border-box;
--- a/src/components/colorOption/component.tsx
+++ b/src/components/colorOption/component.tsx
@@ -20,11 +20,7 @@ class ColorOption extends React.Component<ColorProps, ColorStates> {
          <div
            className="line-option"
            style={{
-              border: `${
-                this.props.color === index + 4
-                  ? "2px solid rgba(75,75,75,1)"
-                  : ""
-              }`,
+              border: `${this.props.color === index + 4 ? "" : "2px"}`,
            }}
            key={item}
            onClick={() => {
@@ -46,9 +42,7 @@ class ColorOption extends React.Component<ColorProps, ColorStates> {
            className="color-option"
            style={{
              backgroundColor: item,
-              border: `${
-                this.props.color === index ? "2px solid rgba(75,75,75,1)" : ""
-              }`,
+              border: `${this.props.color === index ? "" : "0px"}`,
            }}
            key={item}
            onClick={() => {
--- a/src/components/deleteIcon/deleteIcon.css
+++ b/src/components/deleteIcon/deleteIcon.css
@@ -2,8 +2,6 @@
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
-  background-color: rgba(75, 75, 75, 0.8);
-  color: white;
  cursor: pointer;
  text-align: center;
  position: absolute;
--- a/src/components/dialogs/aboutDialog/component.tsx
+++ b/src/components/dialogs/aboutDialog/component.tsx
@@ -25,8 +25,7 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
        }}
        style={{
          left: "525px",
-          boxShadow: "0px 0px 5px rgba(0, 0, 0, 0.18)",
-          height: "155px",
+          height: "180px",
          width: "120px",
        }}
      >
@@ -37,7 +36,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
              this.props.handleSetting(true);
              this.props.handleAbout(false);
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>Setting</Trans>
          </li>
@@ -46,7 +44,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
            onClick={() => {
              this.handleJump("https://koodo.960960.xyz/support");
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>Feedback</Trans>
          </li>
@@ -63,7 +60,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
                );
              }
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>Help</Trans>
          </li>
@@ -80,7 +76,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
                );
              }
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>Roadmap</Trans>
          </li>
@@ -89,7 +84,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
            onClick={() => {
              this.handleJump("https://koodo.960960.xyz");
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>Our Website</Trans>
          </li>
@@ -98,7 +92,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
            onClick={() => {
              this.handleJump("https://960960.xyz");
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>About developer</Trans>
          </li>
@@ -107,7 +100,6 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
            onClick={() => {
              this.handleJump("https://github.com/troyeguo/koodo-reader");
            }}
-            style={{ color: "rgba(75, 75, 75, 1)" }}
          >
            <Trans>Github Repo</Trans>
          </li>
--- a/src/components/dialogs/actionDialog/actionDialog.css
+++ b/src/components/dialogs/actionDialog/actionDialog.css
@@ -1,21 +1,18 @@
 .action-dialog-container {
  width: 200px;
  height: 340px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  position: fixed;
  z-index: 9;
  animation: popup 0.1s ease-in-out 0s 1;
-  border-radius: 10px;
+  border-radius: 5px;
  overflow: hidden;
 }

 .action-dialog-actions-container {
-  font-size: 16px;
+  font-size: 15px;
  text-align: center;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  /* position: absolute;
  top: 83px;
@@ -24,7 +21,6 @@
 .action-dialog-add,
 .action-dialog-delete,
 .action-dialog-edit {
-  color: #4b4b4b;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
@@ -33,10 +29,9 @@
 }

 .action-name {
-  font-size: 16px;
+  font-size: 15px;
  text-align: center;
  line-height: 25px;
-  color: #4b4b4b;
 }
 .action-dialog-book-info {
  margin-left: 10px;
@@ -47,7 +42,6 @@
  font-size: 15px;
  font-weight: 500;
  line-height: 17px;
-  opacity: 0.8;
  max-height: 190px;
  margin-bottom: 10px;
 }
@@ -55,13 +49,12 @@
 .action-dialog-book-desc,
 .action-dialog-book-publisher,
 .action-dialog-book-added {
-  font-size: 14px;
+  font-size: 15px;
  line-height: 16px;
-  opacity: 0.7;
 }
 .action-dialog-book-detail {
  /* width: 80%; */
  margin-top: 5px;
  max-height: 50px;
-  font-size: 14px;
+  font-size: 15px;
 }
--- a/src/components/dialogs/addDialog/addDialog.css
+++ b/src/components/dialogs/addDialog/addDialog.css
@@ -1,21 +1,18 @@
 .add-dialog-container {
  width: 309px;
  height: 189px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  position: absolute;
  left: calc(50vw - 155px);
  top: calc(50vh - 95px);
  z-index: 10;
  animation: popup 0.1s ease-in-out 0s 1;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 .add-dialog-title {
  width: 120px;
  height: 20px;
-  font-size: 20px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 18px;
  opacity: 1;
  width: 100%;
  text-align: center;
@@ -24,9 +21,8 @@
 }
 .add-dialog-shelf-list-container {
  width: 100%;
-  font-size: 16px;
+  font-size: 15px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  top: 55px;
@@ -39,12 +35,10 @@
 }
 .add-dialog-shelf-list-box {
  float: left;
-  width: 169px;
+  width: 190px;
  height: 31px;
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  box-sizing: border-box;
-  margin-left: 16px;
  font-size: 15px;
  line-height: 31px;
  border-radius: 5px;
@@ -52,7 +46,6 @@
 .add-dialog-shelf-list-option {
  width: 169px;
  height: 31px;
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  box-sizing: border-box;
  margin-left: 16px;
@@ -62,9 +55,8 @@
 }
 .add-dialog-new-shelf-container {
  width: 100%;
-  font-size: 16px;
+  font-size: 15px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  top: 95px;
@@ -77,12 +69,10 @@
 }
 .add-dialog-new-shelf-box {
  float: left;
-  width: 169px;
+  width: 190px;
  height: 31px;
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  box-sizing: border-box;
-  margin-left: 16px;
  padding-left: 5px;
  font-size: 15px;
  line-height: 31px;
@@ -91,18 +81,15 @@
 .add-dialog-cancel {
  width: 60px;
  height: 26px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 147px;
  top: 144px;
  border-radius: 5px;

-  font-size: 14px;
+  font-size: 13px;

  line-height: 26px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  cursor: pointer;
@@ -110,16 +97,14 @@
 .add-dialog-comfirm {
  width: 64px;
  height: 30px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 227px;
  top: 144px;
-  font-size: 14px;
+  font-size: 13px;
  border-radius: 5px;

  line-height: 30px;
-  color: white;
  opacity: 1;
  text-align: center;
  cursor: pointer;
--- a/src/components/dialogs/backupDialog/backupDialog.css
+++ b/src/components/dialogs/backupDialog/backupDialog.css
@@ -5,15 +5,12 @@
  left: calc(50% - 225px);
  top: calc(50% - 150px);
  overflow: hidden;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  z-index: 20;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
-  border-radius: 10px;
+  border-radius: 5px;
  z-index: 10;
  animation: popup 0.1s ease-in-out 0s 1;
 }
@@ -44,9 +41,8 @@

 .backup-page-title {
  width: 100%;
-  font-size: 20px;
+  font-size: 18px;
  line-height: 60px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
 }
@@ -77,7 +73,6 @@
  width: 150px !important;
  font-size: 15px;
  line-height: 30px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  width: 100%;
  text-align: center;
@@ -107,7 +102,6 @@
  height: 38px;
 }
 .backup-page-close-icon:hover {
-  background-color: rgba(75, 75, 75, 0.035);
  border-radius: 50%;
 }
 .backup-page-option {
@@ -121,10 +115,8 @@
 .backup-page-backup {
  width: 152px;
  height: 152px;
-  background: rgba(75, 75, 75, 0);
  font-size: 18px;
  line-height: 40px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  cursor: pointer;
@@ -142,7 +134,6 @@
 .backup-page-next {
  font-size: 18px;
  line-height: 20px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  bottom: 21px;
@@ -152,7 +143,6 @@
 .backup-page-previous {
  font-size: 18px;
  line-height: 20px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  bottom: 21px;
@@ -163,14 +153,11 @@
  width: 152px;
  height: 152px;
  opacity: 1;
-  background-color: rgba(75, 75, 75, 1);
-  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.39);
  animation: popup 0.1s ease-in-out 0s 1;
  margin-left: 49px;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 .icon-local {
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
 }
 .restore-file {
@@ -191,7 +178,6 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  color: rgba(75, 75, 75, 1);
  text-align: center;
 }
 .backup-page-finish-icon {
@@ -200,5 +186,5 @@
 }
 .backup-page-finish-text {
  line-height: 50px;
-  font-size: 20px;
+  font-size: 18px;
 }
--- a/src/components/dialogs/deleteDialog/deleteDialog.css
+++ b/src/components/dialogs/deleteDialog/deleteDialog.css
@@ -1,21 +1,18 @@
 .delete-dialog-container {
  width: 319px;
  height: 199px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  position: fixed;
  left: calc(50% - 160px);
  top: calc(50% - 100px);
  z-index: 10;
  animation: popup 0.1s ease-in-out 0s 1;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 .delete-dialog-title {
  width: 120px;
  height: 25px;
-  font-size: 20px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 18px;
  opacity: 1;
  width: 100%;
  text-align: center;
@@ -29,7 +26,6 @@
  width: calc(100% - 20px);
  line-height: 25px;
  font-size: 18px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  text-overflow: ellipsis;
@@ -44,10 +40,9 @@
  padding-right: 10px;
 }
 .delete-dialog-other-option {
-  font-size: 14px;
+  font-size: 13px;
  text-align: center;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  top: 106px;
@@ -60,18 +55,15 @@
 .delete-dialog-cancel {
  width: 60px;
  height: 26px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 147px;
  top: 154px;
  border-radius: 5px;

-  font-size: 14px;
+  font-size: 13px;

  line-height: 26px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  cursor: pointer;
@@ -79,14 +71,12 @@
 .delete-dialog-comfirm {
  width: 64px;
  height: 30px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 227px;
  top: 154px;
-  font-size: 14px;
+  font-size: 13px;
  line-height: 30px;
-  color: white;
  opacity: 1;
  text-align: center;
  cursor: pointer;
@@ -95,9 +85,7 @@
 .delete-dialog-uncheck-icon {
  width: 12px;
  height: 12px;
-  background: white;
-  border: 1.7px solid black;
-  border-radius: 4px;
+  border-radius: 5px;
  opacity: 1;
  position: absolute;
  top: 106px;
--- a/src/components/dialogs/downloadDesk/updateInfo.css
+++ b/src/components/dialogs/downloadDesk/updateInfo.css
@@ -4,11 +4,9 @@
  position: absolute;
  left: calc(50vw - 225px);
  top: calc(50vh - 240px);
-  background-color: white;
  z-index: 10;
-  box-shadow: 0 0 12px rgba(75, 75, 75, 0.34);
  animation: popup 0.1s ease-in-out 0s 1;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 .download-desk-animation {
  position: absolute;
@@ -16,9 +14,8 @@
  bottom: 0px;
 }
 .download-desk-title {
-  font-size: 20px;
+  font-size: 18px;
  font-weight: 600;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  width: 100%;
@@ -26,8 +23,7 @@
 }
 .download-desk-subtile {
  font-size: 15px;
-  color: rgba(75, 75, 75, 0.6);
-  opacity: 1;
+  opacity: 0.6;
  font-weight: 500;
  text-align: center;
  padding: 20px;
@@ -35,8 +31,7 @@
  line-height: 17px;
 }
 .download-desk-feature-item {
-  font-size: 16px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  text-align: center;
@@ -44,15 +39,13 @@
 .download-desk-button {
  width: 100px;
  height: 32px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  line-height: 32px;
  text-align: center;
-  color: white;
  margin: 22px 175px;
  position: absolute;
  cursor: pointer;
  z-index: 25;
  border-radius: 16px;
-  font-size: 14px;
+  font-size: 13px;
 }
--- a/src/components/dialogs/editDialog/editDialog.css
+++ b/src/components/dialogs/editDialog/editDialog.css
@@ -1,21 +1,18 @@
 .edit-dialog-container {
  width: 309px;
  height: 189px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  position: absolute;
  left: calc(50% - 155px);
  top: calc(50% - 95px);
  z-index: 10;
  animation: popup 0.1s ease-in-out 0s 1;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 .edit-dialog-title {
  width: 120px;
  height: 20px;
-  font-size: 20px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 18px;
  opacity: 1;
  width: 100%;
  text-align: center;
@@ -26,7 +23,6 @@
  width: 100%;
  font-size: 16px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  top: 55px;
@@ -39,21 +35,18 @@
 }
 .edit-dialog-book-name-box {
  float: left;
-  width: 169px;
+  width: 190px;
  height: 31px;
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  box-sizing: border-box;
-  margin-left: 16px;
  padding-left: 5px;
  font-size: 15px;
  border-radius: 5px;
 }
 .edit-dialog-book-author-container {
  width: 100%;
-  font-size: 16px;
+  font-size: 15px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  top: 95px;
@@ -66,12 +59,10 @@
 }
 .edit-dialog-book-author-box {
  float: left;
-  width: 169px;
+  width: 190px;
  height: 31px;
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  box-sizing: border-box;
-  margin-left: 16px;
  padding-left: 5px;
  font-size: 15px;
  border-radius: 5px;
@@ -79,17 +70,14 @@
 .edit-dialog-cancel {
  width: 60px;
  height: 26px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 147px;
  top: 144px;

-  font-size: 14px;
+  font-size: 13px;
  border-radius: 5px;
  line-height: 26px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  cursor: pointer;
@@ -97,15 +85,13 @@
 .edit-dialog-comfirm {
  width: 64px;
  height: 30px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 227px;
  top: 144px;
-  font-size: 14px;
+  font-size: 13px;
  border-radius: 5px;
  line-height: 30px;
-  color: white;
  opacity: 1;
  text-align: center;
  cursor: pointer;
--- a/src/components/dialogs/loadingDialog/loadingDialog.css
+++ b/src/components/dialogs/loadingDialog/loadingDialog.css
@@ -5,18 +5,15 @@
  left: calc(50% - 225px);
  top: calc(50% - 150px);
  overflow: hidden;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  z-index: 20;
-  border-radius: 10px;
+  border-radius: 5px;
  animation: popup 0.1s ease-in-out 0s 1;
 }
 .loading-dialog-title {
  width: 120px;
  height: 20px;
-  font-size: 20px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 18px;
  opacity: 1;
  width: 100%;
  text-align: center;
--- a/src/components/dialogs/settingDialog/component.tsx
+++ b/src/components/dialogs/settingDialog/component.tsx
@@ -26,6 +26,7 @@ class SettingDialog extends React.Component<
      isOpenBook: OtherUtil.getReaderConfig("isOpenBook") === "yes",
      isExpandContent: OtherUtil.getReaderConfig("isExpandContent") === "yes",
      isDisableUpdate: OtherUtil.getReaderConfig("isDisableUpdate") === "yes",
+      isDisplayDark: OtherUtil.getReaderConfig("isDisplayDark") === "yes",
      searchEngine: navigator.language === "zh-CN" ? "baidu" : "google",
    };
  }
@@ -126,6 +127,17 @@ class SettingDialog extends React.Component<
      localStorage.getItem("storageLocation") ||
      ipcRenderer.sendSync("storage-location", "ping");
  };
+  handleDisplayDark = () => {
+    this.setState({ isDisplayDark: !this.state.isDisplayDark });
+    OtherUtil.setReaderConfig(
+      "isDisplayDark",
+      this.state.isDisplayDark ? "no" : "yes"
+    );
+    this.handleRest(this.state.isDisplayDark);
+    setTimeout(() => {
+      window.location.reload();
+    }, 500);
+  };
  render() {
    return (
      <div className="setting-dialog-container">
@@ -175,6 +187,9 @@ class SettingDialog extends React.Component<
                      case 4:
                        this.handleDisableUpdate();
                        break;
+                      case 5:
+                        this.handleDisplayDark();
+                        break;
                      default:
                        break;
                    }
--- a/src/components/dialogs/settingDialog/interface.tsx
+++ b/src/components/dialogs/settingDialog/interface.tsx
@@ -14,6 +14,7 @@ export interface SettingInfoState {
  searchEngine: string;
  isTouch: boolean;
  isOpenBook: boolean;
+  isDisplayDark: boolean;
  isExpandContent: boolean;
  isDisableUpdate: boolean;
  isRememberSize: boolean;
--- a/src/components/dialogs/settingDialog/settingDialog.css
+++ b/src/components/dialogs/settingDialog/settingDialog.css
@@ -5,38 +5,34 @@
  left: calc(50% - 173px);
  top: calc(50% - 240px);
  overflow: hidden;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  z-index: 20;
-  border-radius: 10px;
+  border-radius: 5px;
  animation: popup 0.1s ease-in-out 0s 1;
 }
 .setting-dialog-title {
-  font-size: 20px;
+  font-size: 18px;
  font-weight: 500;
  line-height: 15px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  margin: 20px 0px 10px;
  text-align: center;
  width: 346px;
 }
 .setting-dialog-new-title {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 25px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  margin-top: 10px;
  margin-left: 30px;
  width: 280px;
  display: flex;
  justify-content: space-between;
+  font-weight: 500;
 }
 .setting-dialog-list {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 18px;
-  color: rgba(149, 149, 149, 1);
  opacity: 1;
  margin: 7px;
 }
@@ -57,7 +53,7 @@
 }
 .setting-dialog-url {
  width: 200px;
-  font-size: 14px;
+  font-size: 13px;
  position: absolute;
  bottom: 6px;
  left: 10px;
@@ -66,7 +62,7 @@
  line-height: 16px;
 }
 .setting-dialog-subtitle {
-  font-size: 16px;
+  font-size: 15px;
  margin: 7px 10px;
  text-align: center;
  color: #0078d4;
@@ -77,16 +73,10 @@
  width: 30px;
  height: 30px;
  font-size: 30px;
-  color: rgba(75, 75, 75, 1);
  cursor: pointer;
  float: right;
 }
-.icon-traditional,
-.icon-simplified,
-.icon-english {
-  font-size: 25px;
-  color: rgba(75, 75, 75, 1);
-}
+
 .setting-close-container {
  position: absolute;
  top: 10px;
@@ -98,7 +88,6 @@
 }

 .setting-close-container:hover {
-  background-color: rgba(75, 75, 75, 0.035);
  border-radius: 50%;
 }
 .about-this-project {
@@ -117,33 +106,26 @@
  font-size: 15px;
  margin: 5px;
  text-align: center;
-  color: rgba(75, 75, 75, 1);
 }
 .lang-setting-dropdown {
  width: 100px;
  height: 30px;
  margin-right: 5px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(75, 75, 75, 1);
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 500;
-  color: rgba(75, 75, 75, 1);
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
 }
 .lang-setting-option {
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
-  color: rgba(75, 75, 75, 1);
  text-align: center;
 }
 .setting-dialog-location-title {
-  font-size: 12px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 13px;
  font-weight: 500;
-  border: solid 1.5px black;
  border-radius: 5px;
  padding: 5px;
  width: 75%;
@@ -152,7 +134,6 @@
  word-break: break-all;
  margin-top: 6px;
  margin-bottom: 10px;
-  background-color: rgba(75, 75, 75, 0.05);
  user-select: text;
 }
 .change-location-button {
@@ -165,10 +146,8 @@
  top: 4px;
  left: 2px;
  cursor: pointer;
-  font-size: 12px;
-  color: white;
+  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
-  background-color: rgba(75, 75, 75, 1);
 }
--- a/src/components/dialogs/sortDialog/component.tsx
+++ b/src/components/dialogs/sortDialog/component.tsx
@@ -60,11 +60,7 @@ class SortDialog extends React.Component<SortDialogProps, SortDialogState> {
        onMouseLeave={() => {
          this.handleSortBooks();
        }}
-        style={
-          this.state.isNote
-            ? { boxShadow: "0px 0px 5px rgba(0, 0, 0, 0.18)", height: "120px" }
-            : { boxShadow: "0px 0px 5px rgba(0, 0, 0, 0.18)" }
-        }
+        style={this.state.isNote ? { height: "120px" } : {}}
        // style={this.state.isNote ? { height: "120px" } : {}}
      >
        {this.state.isNote ? (
@@ -76,14 +72,12 @@ class SortDialog extends React.Component<SortDialogProps, SortDialogState> {
                  onClick={() => {
                    this.handleSort(index + 1);
                  }}
-                  style={
-                    sortCode.sort === index + 1
-                      ? { color: "rgba(75, 75, 75, 1)" }
-                      : {}
-                  }
+                  style={sortCode.sort === index + 1 ? {} : { opacity: 0.34 }}
                >
                  <Trans>{item}</Trans>
-                  <span className="icon-message"></span>
+                  {sortCode.sort === index + 1 && (
+                    <span className="icon-check"></span>
+                  )}
                </li>
              );
            })}
@@ -104,11 +98,7 @@ class SortDialog extends React.Component<SortDialogProps, SortDialogState> {
                  onClick={() => {
                    this.handleSort(index);
                  }}
-                  style={
-                    sortCode.sort === index
-                      ? { color: "rgba(75, 75, 75, 1)" }
-                      : {}
-                  }
+                  style={sortCode.sort === index ? {} : { opacity: 0.34 }}
                  key={index}
                >
                  <Trans>{item}</Trans>
@@ -127,7 +117,7 @@ class SortDialog extends React.Component<SortDialogProps, SortDialogState> {
            onClick={() => {
              this.handleOrder(1);
            }}
-            style={sortCode.order === 1 ? { color: "rgba(75, 75, 75, 1)" } : {}}
+            style={sortCode.order === 1 ? {} : { opacity: 0.34 }}
          >
            <Trans>Ascending Order</Trans>
            {sortCode.order === 1 && <span className="icon-check"></span>}
@@ -137,7 +127,7 @@ class SortDialog extends React.Component<SortDialogProps, SortDialogState> {
            onClick={() => {
              this.handleOrder(2);
            }}
-            style={sortCode.order === 2 ? { color: "rgba(75, 75, 75, 1)" } : {}}
+            style={sortCode.order === 2 ? {} : { opacity: 0.34 }}
          >
            <Trans>Descending Order</Trans>
            {sortCode.order === 2 && <span className="icon-check"></span>}
--- a/src/components/dialogs/sortDialog/sortDialog.css
+++ b/src/components/dialogs/sortDialog/sortDialog.css
@@ -1,7 +1,6 @@
 .sort-dialog-container {
  width: 160px;
  height: 220px;
-  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: absolute;
  left: 435px;
@@ -17,10 +16,9 @@
 }
 .sort-by-category-list,
 .sort-by-order-list {
-  font-size: 14px;
+  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
-  color: rgba(75, 75, 75, 0.34);
  opacity: 1;
  line-height: 24px;
  width: calc(100% - 30px);
@@ -34,7 +32,5 @@
 .sort-dialog-seperator {
  width: 100%;
  height: 0px;
-  border: 0.5px solid rgba(0, 0, 0, 1);
-  opacity: 0.1;
  margin: 6px 0px;
 }
--- a/src/components/dialogs/tokenDialog/tokenDialog.css
+++ b/src/components/dialogs/tokenDialog/tokenDialog.css
@@ -5,19 +5,16 @@
  left: calc(50% - 227px);
  top: calc(50% - 139px);
  overflow: hidden;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  z-index: 20;
  animation: popup 0.1s ease-in-out 0s 1;
-  border-radius: 10px;
+  border-radius: 5px;
 }

 .token-dialog-title {
  width: 120px;
  height: 20px;
-  font-size: 20px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 18px;
  opacity: 1;
  width: 100%;
  text-align: center;
@@ -28,10 +25,9 @@
 .token-dialog-info-text {
  width: 416px;
  height: 46px;
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  overflow-y: scroll;
@@ -42,13 +38,12 @@
 .token-dialog-link-text {
  width: 94px;
  height: 29px;
-  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(45, 111, 200, 1);
  opacity: 1;
  position: absolute;
  left: 181px;
  top: 100px;
-  font-size: 14px;
+  font-size: 13px;
  font-weight: 500;
  line-height: 29px;
  color: rgba(45, 111, 200, 1);
@@ -60,12 +55,9 @@
 .token-dialog-token-box {
  width: 382px;
  height: 70px;
-  background: rgba(246, 246, 246, 1);
-  border: 2px solid rgba(112, 112, 112, 1);
  opacity: 1;
  font-size: 13px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  top: 144px;
@@ -77,12 +69,9 @@
 .token-dialog-password-box {
  width: 322px;
  height: 28px;
-  background: rgba(246, 246, 246, 1);
-  border: 2px solid rgba(112, 112, 112, 1);
  opacity: 1;
  font-size: 13px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  margin-left: 60px;
  margin-top: 10px;
@@ -92,15 +81,12 @@
 .token-dialog-cancel {
  width: 60px;
  height: 26px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 157px;
  top: 236px;
-  font-size: 14px;
+  font-size: 13px;
  line-height: 26px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  cursor: pointer;
@@ -109,14 +95,12 @@
 .token-dialog-comfirm {
  width: 64px;
  height: 30px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  position: absolute;
  left: 237px;
  top: 236px;
-  font-size: 14px;
+  font-size: 13px;
  line-height: 30px;
-  color: white;
  opacity: 1;
  text-align: center;
  cursor: pointer;
--- a/src/components/dialogs/updateInfo/component.tsx
+++ b/src/components/dialogs/updateInfo/component.tsx
@@ -65,7 +65,7 @@ class UpdateInfo extends React.Component<UpdateInfoProps, UpdateInfoState> {
    return arr.map((item, index) => {
      return (
        <li className="update-dialog-list" key={index}>
-          <span style={{ color: "black" }}>{index + 1 + ". "}</span>
+          <span >{index + 1 + ". "}</span>
          <span>{item}</span>
        </li>
      );
--- a/src/components/dialogs/updateInfo/updateInfo.css
+++ b/src/components/dialogs/updateInfo/updateInfo.css
@@ -5,18 +5,15 @@
  left: calc(50% - 173px);
  top: calc(50% - 240px);
  overflow: hidden;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34);
  opacity: 1;
  z-index: 20;
-  border-radius: 10px;
+  border-radius: 5px;
  animation: popup 0.1s ease-in-out 0s 1;
 }
 .new-version-title {
-  font-size: 20px;
+  font-size: 18px;
  font-weight: 500;
  line-height: 15px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  margin: 20px 0px 10px;
  text-align: center;
@@ -28,41 +25,36 @@
  width: 98px;
  padding: 0px 10px;
  height: 32px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  border-radius: 25px;
  line-height: 32px;
  text-align: center;
-  color: white;
  cursor: pointer;
  z-index: 50;
  transition: 0.1s;
-  font-size: 14px;
+  font-size: 13px;
 }
 .new-version-copy {
-  color: rgba(75, 75, 75, 1);
  cursor: pointer;
-  font-size: 14px;
+  font-size: 13px;
  font-weight: 500;
  line-height: 35px;
  text-align: center;
-  margin-left: 145px;
+  margin-left: 148px;
  display: inline-block;
 }
 .update-dialog-new-title,
 .update-dialog-fix-title {
-  font-size: 20px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: bold;
  line-height: 15px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  margin-top: 10px;
  margin-left: 20px;
 }
 .update-dialog-list {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 18px;
-  color: rgba(149, 149, 149, 1);
  opacity: 1;
  margin: 7px;
 }
@@ -86,11 +78,9 @@
 .update-dialog-container-button {
  width: 75px;
  height: 32px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  line-height: 32px;
  text-align: center;
-  color: white;
  margin: 12px 130px;
  position: absolute;
  cursor: pointer;
@@ -98,7 +88,7 @@
 }
 .update-dialog-url {
  width: 200px;
-  font-size: 14px;
+  font-size: 13px;
  position: absolute;
  bottom: 6px;
  left: 10px;
@@ -110,11 +100,10 @@
  font-size: 13px;
  margin: 5px;
  text-align: center;
-  color: rgba(75, 75, 75, 1);
 }
 .update-info-text {
  text-align: center;
-  font-size: 16px;
-  color: rgba(75, 75, 75, 0.7);
+  font-size: 15px;
+  opacity: 0.6;
  margin-top: 15px;
 }
--- a/src/components/emptyCover/emptyCover.css
+++ b/src/components/emptyCover/emptyCover.css
@@ -9,16 +9,15 @@
  height: 30px;
  margin-top: 10px;
  line-height: 30px;
-  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-indent: 10px;
-  font-size: 14px;
+  font-size: 15px;
 }
 .cover-title {
  float: left;
-  font-size: 14px;
+  font-size: 15px;
  font-weight: 600;
-  color: rgba(75, 75, 75, 0.8);
+  opacity: 0.9;
  width: 90%;
  height: 80px;
  text-align: left;
@@ -37,9 +36,9 @@
 .cover-footer {
  width: 100%;
  text-align: left;
-  font-size: 12px;
-  color: rgba(75, 75, 75, 0.4);
+  font-size: 13px;
+  opacity: 0.3;
  position: absolute;
-  bottom: 8px;
-  margin-left: 16px;
+  bottom: 6px;
+  margin-left: 13px;
 }
--- a/src/components/imageViewer/imageViewer.css
+++ b/src/components/imageViewer/imageViewer.css
@@ -17,7 +17,6 @@
  position: absolute;
  left: calc(50% - 172px);
  bottom: 30px;
-  color: white;
  font-size: 30px;
  z-index: 6;
 }
@@ -28,7 +27,6 @@
 .counterclockwise-icon {
  margin: 20px;
  cursor: pointer;
-  text-shadow: 0px 0px 5px rgba(75, 75, 75, 0.6);
 }
 .image-background {
  width: 100%;
--- a/src/components/importLocal/component.tsx
+++ b/src/components/importLocal/component.tsx
@@ -15,6 +15,7 @@ import { isElectron } from "react-device-detect";
 import { withRouter } from "react-router-dom";
 import RecentBooks from "../../utils/readUtils/recordRecent";
 import BookUtil from "../../utils/bookUtil";
+import FileSaver from "file-saver";

 declare var window: any;
 var pdfjsLib = window["pdfjs-dist/build/pdf"];
@@ -82,7 +83,7 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
      .then((blob) => {
        let fileTemp = new File(
          [blob],
-          "file." + filePath.split(".").reverse()[0],
+          filePath.split("/").reverse()[0] || filePath.split("\\").reverse()[0],
          {
            lastModified: new Date().getTime(),
            type: blob.type,
@@ -162,7 +163,6 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
        currentChunk = 0,
        spark = new SparkMD5(), //创建SparkMD5的实例
        fileReader = new FileReader();
-
      fileReader.onload = async (e) => {
        if (!e.target) {
          reject();
@@ -228,6 +228,7 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
            reject();
            throw new Error();
          }
+
          if (extension === "pdf") {
            if (!e.target) {
              setTimeout(() => {
@@ -294,6 +295,7 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
                lastModified: new Date().getTime(),
                type: blobTemp.type,
              });
+              FileSaver.saveAs(fileTemp);
              await this.doIncrementalTest(fileTemp);
              resolve();
            };
@@ -459,11 +461,12 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
                  <Tooltip
                    title={t("Import from Local")}
                    position="top"
+                    style={{ height: "20px" }}
                    trigger="mouseenter"
                  >
                    <span
                      className="icon-folder"
-                      style={{ fontSize: "18px", fontWeight: 500 }}
+                      style={{ fontSize: "15px", fontWeight: 500 }}
                    ></span>
                  </Tooltip>
                )}
--- a/src/components/importLocal/importLocal.css
+++ b/src/components/importLocal/importLocal.css
@@ -3,25 +3,21 @@
  right: 160px;
  top: 0px;
  width: 138px;
-
  margin-right: 20px;
  margin-top: 20px;
  min-width: 42px;
  height: 42px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  border-radius: 25px;
  line-height: 42px;
  text-align: center;
-  color: white;
  cursor: pointer;
  z-index: 0;
+  font-size: 15px;
  transition: 0.1s;
  font-weight: 500;
 }
-.import-from-local:hover {
-  background-color: rgba(75, 75, 75, 0.9);
-}
+
 .import-book-box {
  position: relative;
  bottom: 67px;
--- a/src/components/noteTag/noteTag.css
+++ b/src/components/noteTag/noteTag.css
@@ -1,8 +1,6 @@
 .tag-list-item {
  min-width: 45px;
  height: 20px;
-  background: #ffffff;
-  border: 1.5px solid #4b4b4b;
  opacity: 1;
  border-radius: 12px;
  display: flex;
@@ -16,14 +14,10 @@
  padding-left: 5px;
  padding-right: 5px;
 }
-.active-tag {
-  background-color: #4b4b4b;
-  color: white;
-}
+
 .tag-title {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 31px;
-  color: #4b4b4b;
  opacity: 1;
  margin-left: 20px;
  font-weight: 500;
@@ -38,7 +32,6 @@
  border: none;
  border-radius: 10px;
  height: 100%;
-  background-color: rgba(75, 75, 75, 0.1);
  padding-left: 10px;
 }
 #newTag:focus {
@@ -47,8 +40,6 @@
 .tag-list-item-new {
  width: 20px;
  height: 20px;
-  background: #ffffff;
-  border: 1.5px solid #4b4b4b;
  opacity: 1;
  border-radius: 12px;
  display: flex;
@@ -63,6 +54,9 @@
  bottom: 1px;
  box-sizing: border-box;
 }
+.icon-add {
+  font-weight: bold;
+}
 .delete-tag-container {
  position: relative;
  left: 25px;
--- a/src/components/popups/popupMenu/popupMenu.css
+++ b/src/components/popups/popupMenu/popupMenu.css
@@ -1,6 +1,4 @@
 .popup-menu-box {
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.37);
  opacity: 1;
  border-radius: 19px;
  position: relative;
@@ -25,17 +23,12 @@
 .delete-highlighter-container {
  position: relative;
 }
-.popup-menu-triangle-up,
-.icon-popup {
-  color: white;
-}
+
 .popup-close {
  position: absolute;
  top: -35px;
  right: 60px;
  cursor: pointer;
-  background-color: rgba(75, 75, 75, 0.3);
-  color: white;
  display: inline-block;
  width: 20px;
  height: 20px;
--- a/src/components/popups/popupNote/popupNote.css
+++ b/src/components/popups/popupNote/popupNote.css
@@ -2,12 +2,7 @@
  width: 264px;
  height: 172px;
 }
-.note-return-button {
-  position: absolute;
-  left: 13px;
-  top: 12px;
-  font-size: 18px;
-}
+
 .editor-box-parent {
  position: absolute;
  left: 10px;
@@ -19,7 +14,7 @@
  border: none;
  outline: none;
  resize: none;
-  font-size: 16px;
+  font-size: 15px;
  width: 100%;
  height: 70%;
  line-height: 18px;
@@ -27,27 +22,24 @@
 }

 .editor-box::placeholder {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 15px;
-  color: rgba(133, 133, 133, 1);
  opacity: 0.6;
  position: relative;
  top: 6px;
  font-weight: 500;
 }
 .editor-box::-ms-input-placeholder {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 15px;
-  color: rgba(133, 133, 133, 1);
  opacity: 0.6;
  position: relative;
  top: 6px;
  font-weight: 500;
 }
 .editor-box::-moz-placeholder {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 15px;
-  color: rgba(133, 133, 133, 1);
  opacity: 0.6;
  position: relative;
  top: 6px;
@@ -64,14 +56,12 @@
 .confirm-button {
  font-size: 15px;
  line-height: 15px;
-  color: rgba(0, 0, 0, 1);
  opacity: 1;
  cursor: pointer;
 }
 .cancel-button {
  font-size: 15px;
  line-height: 15px;
-  color: rgba(0, 0, 0, 1);
  opacity: 1;
  cursor: pointer;
  margin-right: 20px;
--- a/src/components/popups/popupOption/popupOption.css
+++ b/src/components/popups/popupOption/popupOption.css
@@ -17,7 +17,6 @@
  width: 42px;
  font-size: 14px !important;
  line-height: 15px !important;
-  color: rgba(0, 0, 0, 0.8);
  opacity: 1;
  text-align: center;
  display: flex;
@@ -38,21 +37,9 @@
 .search-book-option:hover,
 .google-option:hover,
 .copy-option:hover {
-  background-color: rgba(75, 75, 75, 0.035);
-  border-radius: 8px;
+  border-radius: 5px;
 }
-/* .digest-option {
-  margin-top: 5px;
-  margin-right: 10px;
-}
-.translation-option {
-  margin-left: 10px;
-  font-size: 15px;
-}
-.note-option {
-  margin-top: 5px;
-  margin-left: 10px;
-} */
+
 .note-icon,
 .translation-icon,
 .speaker-icon,
--- a/src/components/popups/popupTrans/popupTrans.css
+++ b/src/components/popups/popupTrans/popupTrans.css
@@ -6,15 +6,14 @@
 .trans-text-box {
  width: 230px;
  height: 63px;
-  background: rgba(242, 242, 242, 1);
  opacity: 1;
-  border-radius: 10px;
+  border-radius: 5px;
  position: absolute;
  user-select: text;
  overflow-y: scroll;
  padding: 5px;
  box-sizing: border-box;
-  font-size: 16px;
+  font-size: 15px;
 }
 .trans-button-container {
  position: absolute;
--- a/src/components/readerSettings/dropdownList/dropdownList.css
+++ b/src/components/readerSettings/dropdownList/dropdownList.css
@@ -6,8 +6,7 @@
  width: calc(100% - 44px);
 }
 .general-setting-title {
-  font-size: 16px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 10px;
@@ -16,11 +15,8 @@
  width: 220px;
  height: 30px;
  margin-right: 5px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(112, 112, 112, 1);
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 500;
-  color: rgba(75, 75, 75, 1);
  text-align: center;
  cursor: pointer;
  position: relative;
@@ -28,9 +24,8 @@
  border-radius: 5px;
 }
 .general-setting-option {
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
-  color: rgba(75, 75, 75, 1);
  text-align: center;
 }
--- a/src/components/readerSettings/modeControl/modeControl.css
+++ b/src/components/readerSettings/modeControl/modeControl.css
@@ -7,14 +7,12 @@
 .single-page-icon,
 .two-page-icon {
  font-size: 60px;
-  color: rgba(75, 75, 75, 1);
  text-align: center;
 }
 .single-mode-text,
 .double-mode-text {
  font-size: 14px;
  line-height: 27px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
 }
--- a/src/components/readerSettings/settingSwitch/component.tsx
+++ b/src/components/readerSettings/settingSwitch/component.tsx
@@ -31,13 +31,17 @@ class SettingSwitch extends React.Component<
  handleItalic = () => {
    this.setState({ isItalic: !this.state.isItalic }, () => {
      OtherUtil.setReaderConfig("isItalic", this.state.isItalic ? "yes" : "no");
-      window.location.reload();
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
    });
  };
  handleShadow = () => {
    this.setState({ isShadow: !this.state.isShadow }, () => {
      OtherUtil.setReaderConfig("isShadow", this.state.isShadow ? "yes" : "no");
-      window.location.reload();
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
    });
  };
  handleUnderline = () => {
@@ -46,7 +50,9 @@ class SettingSwitch extends React.Component<
        "isUnderline",
        this.state.isUnderline ? "yes" : "no"
      );
-      window.location.reload();
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
    });
  };
  handleChangeBackground = () => {
@@ -59,7 +65,9 @@ class SettingSwitch extends React.Component<
      ? this.props.handleMessage("Turn Off Successfully")
      : this.props.handleMessage("Turn On Successfully");
    this.props.handleMessageBox(true);
-    window.location.reload();
+    setTimeout(() => {
+      window.location.reload();
+    }, 500);
  };
  handleFooter = () => {
    this.setState({ isHideFooter: !this.state.isHideFooter });
--- a/src/components/readerSettings/sliderList/sliderList.css
+++ b/src/components/readerSettings/sliderList/sliderList.css
@@ -4,9 +4,8 @@
  height: 70px;
 }
 .font-size-title {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 27px;
-  color: rgba(75, 75, 75, 1);
  padding-bottom: 10px;
  font-weight: 500;
  margin-bottom: -5px;
@@ -14,9 +13,8 @@
 }
 .ultra-small-size {
  float: left;
-  font-size: 16px;
+  font-size: 15px;
  line-height: 27px;
-  color: rgba(75, 75, 75, 1);
  position: relative;
 }

@@ -24,7 +22,6 @@
  float: right;
  font-size: 40px;
  line-height: 68px;
-  color: rgba(75, 75, 75, 1);
  position: relative;
  bottom: 49px;
  text-align: left;
@@ -42,17 +39,15 @@
  margin-top: 8px;
  float: left;
  display: block;
-  font-size: 12px;
+  font-size: 13px;
 }
 .font-size-demo {
  text-align: center;
-  color: rgba(75, 75, 75, 1);
  position: relative;
  top: 10px;
 }
 .slide-icon {
  font-size: 12px;
-  color: rgba(75, 75, 75, 1);
  margin: 5px;
  cursor: pointer;
 }
@@ -62,7 +57,6 @@
 .input-value {
  width: 50px;
  height: 20px;
-  border: 1.5px solid rgba(75, 75, 75, 1);
  border-radius: 5px;
  margin-left: 10px;
 }
--- a/src/components/readerSettings/themeList/themeList.css
+++ b/src/components/readerSettings/themeList/themeList.css
@@ -5,8 +5,7 @@
 .background-color-text {
  height: 20px;
  width: 100%;
-  font-size: 16px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  font-weight: 500;
  margin-bottom: -5px;
  margin-top: 15px;
@@ -31,7 +30,6 @@
  display: inline-block;
  width: 35px;
  height: 35px;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.33);
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
@@ -39,9 +37,7 @@
  box-sizing: border-box;
  position: relative;
 }
-.active-color {
-  border: 4px solid rgba(0, 0, 0, 1);
-}
+
 .background-color-circle .icon-more {
  position: absolute;
  margin: 9px;
--- a/src/components/searchBox/searchBox.css
+++ b/src/components/searchBox/searchBox.css
@@ -1,14 +1,12 @@
 .header-search-box {
  width: 150px;
  height: 38px;
-  background: rgba(191, 191, 191, 0.28);
  border-radius: 19px;
  border-style: none;
  outline: none;
  padding-left: 20px;
  padding-right: 40px;
-  font-size: 16px;
-  color: rgba(75, 75, 75, 0.8);
+  font-size: 15px;
 }
 input::-webkit-input-placeholder,
 input::-moz-placeholder,
@@ -16,9 +14,8 @@ input::-ms-input-placeholder,
 textarea::-webkit-input-placeholder,
 textarea::-moz-placeholder,
 textarea::-ms-input-placeholder {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 27px;
-  color: rgba(75, 75, 75, 0.8);
  /* opacity: 1; */
 }
 .header-search-icon {
@@ -27,7 +24,7 @@ textarea::-ms-input-placeholder {
  right: -6px;
  font-size: 22px;
  display: inline-block;
-  color: rgba(75, 75, 75, 0.6);
+  opacity: 0.6;
  cursor: pointer;
  margin-right: 10px;
 }
@@ -35,20 +32,18 @@ textarea::-ms-input-placeholder {
  position: absolute;
  top: 1px;
  right: -16px;
-  font-size: 16px;
+  font-size: 15px;
  display: inline-block;
  width: 40px;
  height: 40px;
-  color: #8c8c8c;
  cursor: pointer;
  margin-right: 5px;
 }
 .header-search-text:hover {
-  background-color: rgba(75, 75, 75, 0.035);
  border-radius: 50%;
 }
 .search-text {
-  font-size: 17px;
+  font-size: 18px;
  position: relative;
  right: 180px;
  bottom: 4px;
--- a/src/components/viewMode/component.tsx
+++ b/src/components/viewMode/component.tsx
@@ -29,9 +29,7 @@ class ViewMode extends React.Component<ViewModeProps, ViewModeState> {
                    this.handleChange(item.mode);
                  }}
                  style={
-                    this.props.viewMode !== item.mode
-                      ? { color: "rgba(75,75,75,0.5)" }
-                      : {}
+                    this.props.viewMode !== item.mode ? { opacity: 0.5 } : {}
                  }
                >
                  <span className={`icon-${item.icon}`}></span>
--- a/src/components/viewMode/viewMode.css
+++ b/src/components/viewMode/viewMode.css
@@ -3,7 +3,6 @@
  right: -28px;
  top: 72px;
  font-size: 14px;
-  color: rgba(75, 75, 75, 1);
  margin-right: 30px;
  clear: both;
  width: 110px;
@@ -11,7 +10,6 @@
  height: 20px;
  overflow: hidden;
  padding: 10px;
-  background-color: white;
  border-radius: 5px;
  font-weight: 500;
  transition: all 0.1s ease;
--- a/src/constants/settingList.tsx
+++ b/src/constants/settingList.tsx
@@ -26,8 +26,8 @@ export const settingList = [
  },
  {
    isElectron: false,
-    title: "Collapse sidebar",
-    propName: "isCollapsed",
+    title: "Turn on dark mode",
+    propName: "isDisplayDark",
  },
 ];
 export const langList = [
--- a/src/containers/background/background.css
+++ b/src/containers/background/background.css
@@ -5,7 +5,6 @@
  top: 5px;
  bottom: 5px;
  border: 1px solid rgba(191, 191, 191, 1);
-  box-shadow: 0 0 5px rgba(191, 191, 191, 1);
  z-index: 0;
 }
 .background-box2 {
@@ -15,7 +14,6 @@
  top: 5px;
  bottom: 5px;
  border: 1px solid rgba(191, 191, 191, 1);
-  box-shadow: 0 0 5px rgba(191, 191, 191, 1);
  z-index: 1;
 }
 .background-box3 {
@@ -25,7 +23,6 @@
  top: 5px;
  bottom: 5px;
  border: 1px solid rgba(191, 191, 191, 1);
-  box-shadow: 0 0 5px rgba(191, 191, 191, 1);
  z-index: 2;
  /* display: flex;
  justify-content: space-between;
--- a/src/containers/background/component.tsx
+++ b/src/containers/background/component.tsx
@@ -253,38 +253,45 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
              : {}
          }
        >
-          <div
-            className="spine-shadow-left"
-            style={
-              this.state.isSingle ||
-              (OtherUtil.getReaderConfig("backgroundColor") &&
-                (OtherUtil.getReaderConfig("backgroundColor") ===
-                  "rgba(44,47,49,1)" ||
-                  OtherUtil.getReaderConfig("backgroundColor").startsWith("#")))
-                ? { display: "none" }
-                : {}
-            }
-          ></div>
+          {OtherUtil.getReaderConfig("isDisplayDark") !== "yes" && (
+            <div
+              className="spine-shadow-left"
+              style={
+                this.state.isSingle ||
+                (OtherUtil.getReaderConfig("backgroundColor") &&
+                  (OtherUtil.getReaderConfig("isDisplayDark") === "yes" ||
+                    OtherUtil.getReaderConfig("backgroundColor") ===
+                      "rgba(44,47,49,1)" ||
+                    OtherUtil.getReaderConfig("backgroundColor").startsWith(
+                      "#"
+                    )))
+                  ? { display: "none" }
+                  : {}
+              }
+            ></div>
+          )}
          <div
            className="book-spine"
            style={this.state.isSingle ? { display: "none" } : {}}
          ></div>
-          <div
-            className="spine-shadow-right"
-            style={
-              OtherUtil.getReaderConfig("backgroundColor") &&
-              (OtherUtil.getReaderConfig("backgroundColor") ===
-                "rgba(44,47,49,1)" ||
-                OtherUtil.getReaderConfig("backgroundColor").startsWith("#"))
-                ? { display: "none" }
-                : this.state.isSingle
-                ? {
-                    position: "relative",
-                    right: 0,
-                  }
-                : {}
-            }
-          ></div>
+          {OtherUtil.getReaderConfig("isDisplayDark") !== "yes" && (
+            <div
+              className="spine-shadow-right"
+              style={
+                OtherUtil.getReaderConfig("backgroundColor") &&
+                (OtherUtil.getReaderConfig("backgroundColor") ===
+                  "rgba(44,47,49,1)" ||
+                  OtherUtil.getReaderConfig("backgroundColor").startsWith("#"))
+                  ? { display: "none" }
+                  : this.state.isSingle
+                  ? {
+                      position: "relative",
+                      right: 0,
+                    }
+                  : {}
+              }
+            ></div>
+          )}
        </div>

        <div
--- a/src/containers/emptyPage/component.tsx
+++ b/src/containers/emptyPage/component.tsx
@@ -4,6 +4,7 @@ import "./emptyPage.css";
 import { emptyList } from "../../constants/emptyList";
 import { Trans } from "react-i18next";
 import { EmptyPageProps, EmptyPageState } from "./interface";
+import OtherUtil from "../../utils/otherUtil";

 class EmptyPage extends React.Component<EmptyPageProps, EmptyPageState> {
  render() {
@@ -42,9 +43,9 @@ class EmptyPage extends React.Component<EmptyPageProps, EmptyPageState> {
        >
          <img
            src={
-              process.env.NODE_ENV === "production"
-                ? "./assets/empty.svg"
-                : "../../assets/empty.svg"
+              OtherUtil.getReaderConfig("isDisplayDark") === "yes"
+                ? "./assets/empty_light.svg"
+                : "./assets/empty.svg"
            }
            alt=""
            className="empty-page-illustration"
--- a/src/containers/emptyPage/emptyPage.css
+++ b/src/containers/emptyPage/emptyPage.css
@@ -26,7 +26,6 @@
 .empty-page-info-main {
  font-size: 32px;
  line-height: 50px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
 }
 .empty-page-info-sub {
@@ -34,6 +33,5 @@
  font-size: 24px;

  line-height: 30px;
-  color: rgba(75, 75, 75, 1);
  opacity: 0.49;
 }
--- a/src/containers/epubViewer/epubViewer.css
+++ b/src/containers/epubViewer/epubViewer.css
@@ -34,7 +34,6 @@
  left: 0;
  width: 100%;
  height: 100%;
-  background-color: white;
  box-sizing: border-box;
  z-index: -10;
  display: flex;
@@ -120,7 +119,6 @@
  bottom: 0px;
  left: calc(50% - 206px);
  z-index: 15;
-
  transition: transform 0.5s ease;
 }
 .setting-panel-container {
@@ -155,10 +153,8 @@
 .previous-chapter-single-container {
  width: 50px !important;
  height: 50px !important;
-  background-color: rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
-  color: white;
  position: absolute;
  bottom: 20px;
  left: 20px;
@@ -174,10 +170,8 @@
 .next-chapter-single-container {
  width: 50px;
  height: 50px;
-  background-color: rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
-  color: white;
  position: absolute;
  bottom: 20px;
  right: 20px;
@@ -223,7 +217,6 @@
  align-items: center;
 }
 .reader-setting-icon-container:hover {
-  background-color: rgba(75, 75, 75, 0.07);
  border-radius: 50%;
  opacity: 0.5;
 }
--- a/src/containers/header/component.tsx
+++ b/src/containers/header/component.tsx
@@ -231,8 +231,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                  trigger="mouseenter"
                >
                  <span
-                    className="icon-save"
-                    style={{ fontSize: "18px", fontWeight: 500 }}
+                    className="icon-share"
+                    style={{ fontSize: "15px", fontWeight: 600 }}
                  ></span>
                </Tooltip>
              )}
--- a/src/containers/header/header.css
+++ b/src/containers/header/header.css
@@ -6,7 +6,6 @@
 }

 .setting-icon-container:hover {
-  background-color: rgba(75, 75, 75, 0.035);
  border-radius: 50%;
 }

@@ -22,9 +21,8 @@
 }
 .only-local-text {
  float: left;
-  font-size: 16px;
+  font-size: 15px;
  line-height: 27px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
 }
 .only-local-icon {
@@ -34,7 +32,6 @@
  width: 30px;
  height: 16px;
  border-radius: 10px;
-  background-color: black;
  cursor: pointer;
 }
 .only-local-slider {
@@ -44,7 +41,6 @@
  width: 12px;
  height: 12px;
  border-radius: 50%;
-  background-color: white;
 }
 .import-from-cloud {
  margin-right: 20px;
@@ -52,14 +48,12 @@
  width: 138px;
  max-width: 158px;
  height: 42px;
-  border: 2px solid #4b4b4b;
-  background: white;
  opacity: 1;
  padding: 0 !important;
  border-radius: 25px;
+  font-size: 15px;
  line-height: 18px;
  text-align: center;
-  color: #4b4b4b;
  box-sizing: border-box;
  cursor: pointer;
  transition: 0.2s;
@@ -113,7 +107,6 @@
  position: absolute;
  top: 0px;
  left: 0px;
-  background-color: rgba(75, 75, 75, 0.05);
  transition: 0.1s;
  transform: scaleX(0);
  transform-origin: left;
@@ -135,11 +128,10 @@
  width: 50px;
  height: 50px;
  font-size: 25px;
-  line-height: 37px;
+  line-height: 50px;
  position: absolute;
  left: 560px;
  top: 20px;
-  color: rgba(75, 75, 75, 1);
  cursor: pointer;
  transition: 0.1s;
  display: flex;
--- a/src/containers/lists/bookList/booklist.css
+++ b/src/containers/lists/bookList/booklist.css
@@ -28,12 +28,12 @@
  line-height: 30px;
  color: rgb(231, 69, 69);
  cursor: pointer;
+  border-radius: 5px;
 }

 .booklist-shelf-list {
  width: 169px;
  height: 31px;
-  border: 2px solid rgba(75, 75, 75, 1);
  opacity: 1;
  box-sizing: border-box;
  margin-left: 16px;
--- a/src/containers/lists/cardList/cardList.css
+++ b/src/containers/lists/cardList/cardList.css
@@ -22,9 +22,8 @@
 .card-page-item-date {
  /* float: left; */
  position: absolute;
-  font-size: 17px;
+  font-size: 18px;
  line-height: 25px;
-  color: rgba(75, 75, 75, 1);
  opacity: 0.75;
  margin-left: 19px;
  height: 20px;
@@ -52,23 +51,20 @@
  /* display: inline-block; */
  min-width: 330px;
  cursor: pointer;
-  font-size: 16px;
+  font-size: 15px;
  width: calc(50vw - 135px);
  height: 176px;
  opacity: 1;
  border: 15px solid transparent;
-  font-size: 14px;
+  font-size: 15px;
  line-height: 14px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  position: relative;
  bottom: 10px;
 }
 .card-list-item-card {
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
-  background: rgba(255, 255, 255, 1);
  height: 100%;
-  border-radius: 7px;
+  border-radius: 5px;
 }
 .card-list-item-chapter {
  overflow: hidden;
@@ -78,11 +74,11 @@
  -webkit-box-orient: vertical;
  height: 18px;
  line-height: 16px;
-  font-size: 16px;
+  font-size: 15px;
  max-width: 130px;
 }
 .card-list-item-citation {
-  font-size: 16px;
+  font-size: 15px;
  position: absolute;
  bottom: 30px;
  right: 5px;
@@ -90,7 +86,6 @@
  white-space: nowrap;
  white-space: normal;
  word-break: break-all;
-  color: rgba(155, 155, 155, 1);
 }
 .card-list-item-text-parent {
  position: absolute;
@@ -102,7 +97,7 @@
  top: 90px;
  width: 100%;
  height: 104px;
-  color: rgba(75, 75, 75, 0.68);
+  opacity: 0.6;
 }
 .card-list-item-text {
  width: calc(100% - 20px);
@@ -112,7 +107,7 @@
  position: absolute;
  cursor: text;
  line-height: 18px;
-  font-size: 16px;
+  font-size: 15px;
 }
 .card-list-item-note {
  width: calc(100% - 20px);
@@ -122,12 +117,11 @@
  position: absolute;
  cursor: text;
  line-height: 18px;
-  font-size: 16px;
+  font-size: 15px;
 }
 ::-webkit-scrollbar {
  width: 0.3rem;
  height: 0.5rem;
-  background: hsla(0, 0%, 100%, 0.6);
 }

 ::-webkit-scrollbar-track {
@@ -160,7 +154,6 @@
  width: 100%;
  font-size: 15px;
  line-height: 17px;
-  color: rgba(155, 155, 155, 1);
  opacity: 1;
  text-align: center;
  position: absolute;
@@ -169,9 +162,8 @@
 }
 .card-list-show-more-icon {
  /* display: block; */
-  font-size: 12px;
+  font-size: 13px;
  line-height: 13px;
-  color: rgba(191, 191, 191, 1);
  opacity: 1;
  text-align: center;
  position: absolute;
--- a/src/containers/lists/cardList/component.tsx
+++ b/src/containers/lists/cardList/component.tsx
@@ -138,7 +138,7 @@ class CardList extends React.Component<CardListProps, CardListStates> {
              >
                <div
                  className="card-list-item-show-more"
-                  style={{ color: "rgba(75,75,75,0.8)", bottom: "10px" }}
+                  style={{ bottom: "10px" }}
                >
                  {this.props.mode === "note" ? (
                    <Trans>{"More Notes"}</Trans>
--- a/src/containers/lists/contentList/contentList.css
+++ b/src/containers/lists/contentList/contentList.css
@@ -1,19 +1,17 @@
 .book-content-list {
  float: left;
-  width: calc(100% - 20px);
+  width: calc(100% - 15px);
  margin-left: 18px;
 }
 .book-content-name {
  display: block;
  padding: 10px 0px;
  width: 94%;
-  font-size: 14px;
+  font-size: 15px;
  line-height: 18px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  float: left;
  transition: none;
-  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
 }
 .book-subcontent-name {
  display: block;
@@ -22,9 +20,7 @@
  font-size: 13px;

  line-height: 20px;
-  color: rgba(75, 75, 75, 1);
  opacity: 0.64;
-  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  padding: 8px;
 }
 .book-subcontent-list {
--- a/src/containers/lists/navList/navList.css
+++ b/src/containers/lists/navList/navList.css
@@ -1,7 +1,6 @@
 .book-bookmark-list {
  /* max-height: 200px; */
  width: 264px;
-  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  margin-left: 18px;
  box-sizing: border-box;
  overflow: hidden;
@@ -11,9 +10,8 @@
  margin: 15px 5px 10px;
  width: 255px;
  max-height: 198px;
-  font-size: 14px;
+  font-size: 13px;
  line-height: 18px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -29,8 +27,7 @@
  float: left;
  width: 200px;
  height: 16px;
-  font-size: 14px;
-  color: rgba(161, 161, 161, 1);
+  font-size: 13px;
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -48,8 +45,7 @@
  height: 18px;
  margin-left: 12px;
  /* margin-top: 8px; */
-  font-size: 14px;
-  color: rgba(161, 161, 161, 1);
+  font-size: 13px;
  opacity: 1;
  float: left;
  line-height: 18px;
@@ -58,12 +54,10 @@
  float: left;
  width: 63px;
  height: 26px;
-  background: rgba(191, 191, 191, 1);
  opacity: 1;
  border-radius: 13px;
  font-size: 11px;
  line-height: 24px;
-  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  cursor: pointer;
--- a/src/containers/loadingPage/loadingPage.css
+++ b/src/containers/loadingPage/loadingPage.css
@@ -27,9 +27,7 @@
 .loading-page-cover {
  width: 105px;
  height: 137px;
-  background: rgba(75, 75, 75, 0.67);
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.22);
-  /* opacity: 0.4; */
+  opacity: 0.6;
  margin: 15px 15px 37px 15px;
  cursor: pointer;
  animation: changeColor 1s linear infinite;
@@ -44,7 +42,6 @@
 .loading-page-title {
  height: 30px;
  font-size: 15px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  text-align: center;
  text-overflow: ellipsis;
--- a/src/containers/messageBox/messageBox.css
+++ b/src/containers/messageBox/messageBox.css
@@ -1,8 +1,6 @@
 .message-box-container {
  max-width: 900px;
  height: 45px;
-  background: rgb(70, 70, 70);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.38);
  opacity: 1;
  border-radius: 22px;
  z-index: 50;
@@ -12,7 +10,6 @@
  height: 45px;
  font-size: 17px;
  line-height: 45px;
-  color: rgba(220, 220, 220, 1);
  opacity: 1;
  display: inline-block;
  margin-left: 15px;
@@ -25,7 +22,6 @@
  line-height: 45px;
  margin-left: 30px;
  position: relative;
-  color: white;
 }
 .message-box-container-parent {
  width: 100%;
--- a/src/containers/panels/navigationPanel/component.tsx
+++ b/src/containers/panels/navigationPanel/component.tsx
@@ -236,9 +236,7 @@ class NavigationPanel extends React.Component<
                    this.handleChangeTab("contents");
                  }}
                  style={
-                    this.state.currentTab === "contents"
-                      ? { color: "rgba(112, 112, 112, 1)" }
-                      : { color: "rgba(217, 217, 217, 1)" }
+                    this.state.currentTab === "contents" ? {} : { opacity: 0.5 }
                  }
                >
                  <Trans>Content</Trans>
@@ -247,8 +245,8 @@ class NavigationPanel extends React.Component<
                  className="book-bookmark-title"
                  style={
                    this.state.currentTab === "bookmarks"
-                      ? { color: "rgba(112, 112, 112, 1)" }
-                      : { color: "rgba(217, 217, 217, 1)" }
+                      ? {}
+                      : { opacity: 0.5 }
                  }
                  onClick={() => {
                    this.handleChangeTab("bookmarks");
@@ -259,9 +257,7 @@ class NavigationPanel extends React.Component<
                <span
                  className="book-bookmark-title"
                  style={
-                    this.state.currentTab === "notes"
-                      ? { color: "rgba(112, 112, 112, 1)" }
-                      : { color: "rgba(217, 217, 217, 1)" }
+                    this.state.currentTab === "notes" ? {} : { opacity: 0.5 }
                  }
                  onClick={() => {
                    this.handleChangeTab("notes");
@@ -272,9 +268,7 @@ class NavigationPanel extends React.Component<
                <span
                  className="book-bookmark-title"
                  style={
-                    this.state.currentTab === "digests"
-                      ? { color: "rgba(112, 112, 112, 1)" }
-                      : { color: "rgba(217, 217, 217, 1)" }
+                    this.state.currentTab === "digests" ? {} : { opacity: 0.5 }
                  }
                  onClick={() => {
                    this.handleChangeTab("digests");
--- a/src/containers/panels/navigationPanel/navigationPanel.css
+++ b/src/containers/panels/navigationPanel/navigationPanel.css
@@ -2,8 +2,6 @@
  position: fixed;
  width: 299px;
  height: 173px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
  opacity: 1;
  z-index: 10;
 }
@@ -11,8 +9,6 @@
  float: left;
  width: 91px;
  height: 118px;
-  background: rgba(0, 0, 0, 0);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  position: relative;
  left: 12px;
  top: 14px;
@@ -26,7 +22,6 @@
  height: 30px;
  font-size: 15px;
  line-height: 15px;
-  color: rgba(75, 75, 75, 1);
  opacity: 1;
  width: 150px;
  text-overflow: ellipsis;
@@ -42,7 +37,6 @@
  height: 30px;
  font-size: 15px;
  line-height: 15px;
-  color: rgba(75, 75, 75, 0.65);
  opacity: 1;
  width: 150px;
  text-overflow: ellipsis;
@@ -61,7 +55,6 @@
  top: 60px;
  font-size: 14px;
  line-height: 22px;
-  color: rgba(75, 75, 75, 1);
 }

 .book-content-title {
@@ -99,7 +92,6 @@
  justify-content: center;
  align-items: center;
  font-size: 15px;
-  color: rgba(75, 75, 75, 0.8);
  line-height: 60px;
 }
 .navigation-navigation {
@@ -116,8 +108,6 @@
  left: 0px;
  width: 299px;
  height: 100%;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.38);
  opacity: 1;
  z-index: 10;
  animation: fade-left 0.2s ease-in-out 0s 1;
@@ -133,8 +123,7 @@
  align-items: center;
  width: calc(100% - 44px);
  height: 38px;
-  font-size: 16px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  margin: 6px 22px;
  font-weight: 500;
 }
@@ -148,7 +137,6 @@
  height: 38px;
 }
 .nav-close-icon:hover {
-  background-color: rgba(75, 75, 75, 0.035);
  border-radius: 50%;
 }
 .nav-search-list {
@@ -161,7 +149,6 @@
  overflow: scroll;
 }
 .nav-search-list-item {
-  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  padding: 8px;
  cursor: pointer;
 }
@@ -184,21 +171,16 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  color: rgba(75, 75, 75, 1);
-  border: 1px solid rgba(75, 75, 75, 1);
  cursor: pointer;
  transition: all 0.3s ease;
 }
-.active-page {
-  background-color: rgba(75, 75, 75, 1);
-  color: white;
-}
+
 .nav-lock-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
-  color: rgba(75, 75, 75, 0.3);
+  opacity: 0.3;
  margin: 10px;
  cursor: pointer;
  font-size: 20px;
--- a/src/containers/panels/operationPanel/operationPanel.css
+++ b/src/containers/panels/operationPanel/operationPanel.css
@@ -3,7 +3,6 @@
  width: 105px;
  height: 37px;
  background: rgba(146, 146, 146, 1);
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18);
  opacity: 1;
  margin-top: 11px;
  margin-left: 23px;
@@ -14,12 +13,10 @@
 }
 .exit-reading-icon {
  font-size: 21px;
-  color: white;
 }
 .exit-reading-text {
-  font-size: 14px;
+  font-size: 13px;
  line-height: 37px;
-  color: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-left: 10px;
 }
@@ -28,7 +25,6 @@
  width: 105px;
  height: 37px;
  background: rgba(92, 143, 211, 0.83);
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18);
  opacity: 1;
  margin-top: 11px;
  margin-left: 26px;
@@ -39,13 +35,11 @@
 }
 .add-bookmark-icon {
  font-size: 20px;
-  color: white;
  margin-left: 5px;
 }
 .add-bookmark-text {
-  font-size: 14px;
+  font-size: 13px;
  line-height: 14px;
-  color: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-left: 10px;
 }
@@ -54,7 +48,6 @@
  width: 105px;
  height: 37px;
  background: rgba(94, 178, 148, 1);
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18);
  opacity: 1;
  margin-top: 11px;
  margin-left: 26px;
@@ -65,21 +58,17 @@
 }
 .enter-fullscreen-icon {
  font-size: 19px;
-  color: white;
  margin-left: 5px;
 }
 .enter-fullscreen-text {
-  font-size: 14px;
+  font-size: 13px;
  line-height: 14px;
-  color: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-left: 10px;
 }
 .book-operation-panel {
  width: 412px !important;
  height: 90px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.38);
  opacity: 1;
  position: absolute;
  top: 0px;
@@ -90,7 +79,6 @@
 .book-opeartion-info {
  text-align: center;
  line-height: 25px;
-  color: rgba(75, 75, 75, 1);
  margin-top: 7px;
-  font-size: 14px;
+  font-size: 15px;
 }
--- a/src/containers/panels/progressPanel/progressPanel.css
+++ b/src/containers/panels/progressPanel/progressPanel.css
@@ -1,6 +1,5 @@
 .progress-text {
-  font-size: 14px;
-  color: rgba(75, 75, 75, 1);
+  font-size: 15px;
  width: 100%;
  margin-top: 75px;
  text-align: center;
@@ -21,8 +20,6 @@
 .progress-slide-circle {
  width: 15px;
  height: 15px;
-  background: rgba(255, 255, 255, 1);
-  border: 2px solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
  position: absolute;
@@ -32,28 +29,24 @@
 .previous-chapter {
  width: 25px !important;
  height: 25px !important;
-  border: 2px solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
-  color: rgba(112, 112, 112, 1);
  position: absolute;
  bottom: 10px;
  left: 20px;
-  font-size: 14px;
+  font-size: 15px;
  transform: rotate(90deg);
  cursor: pointer;
 }
 .next-chapter {
  width: 25px;
  height: 25px;
-  border: 2px solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
-  color: rgba(112, 112, 112, 1);
  position: absolute;
  bottom: 10px;
  left: 360px;
-  font-size: 14px;
+  font-size: 15px;
  transform: rotate(-90deg);
  cursor: pointer;
 }
@@ -101,7 +94,6 @@ input[type="range"]:focus {
 input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
-  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
@@ -109,12 +101,12 @@ input[type="range"]::-webkit-slider-thumb {
  bottom: 9px;
  cursor: pointer;
  box-sizing: border-box;
+  background: rgba(255, 255, 255, 1);
 }

 input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
-  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
@@ -122,12 +114,12 @@ input[type="range"]::-moz-range-thumb {
  bottom: 9px;
  cursor: pointer;
  box-sizing: border-box;
+  background: rgba(255, 255, 255, 1);
 }

 input[type="range"]::-ms-thumb {
  width: 20px;
  height: 20px;
-  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(112, 112, 112, 1);
  border-radius: 50%;
  opacity: 1;
@@ -135,12 +127,11 @@ input[type="range"]::-ms-thumb {
  bottom: 9px;
  cursor: pointer;
  box-sizing: border-box;
+  background: rgba(255, 255, 255, 1);
 }
 .progress-panel {
  width: 412px !important;
  height: 100px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.38);
  opacity: 1;
  position: absolute;
  bottom: 0px;
@@ -159,7 +150,6 @@ input[type="range"]::-ms-thumb {
  border: none;
  height: 20px;
  border-radius: 5px;
-  background-color: rgba(75, 75, 75, 0.1);
  padding-left: 10px;
  margin-right: 5px;
  margin-left: 5px;
--- a/src/containers/panels/settingPanel/settingPanel.css
+++ b/src/containers/panels/settingPanel/settingPanel.css
@@ -4,7 +4,6 @@
  align-items: center;
  width: calc(100% - 44px);
  height: 38px;
-  color: rgba(75, 75, 75, 1);
  font-weight: 500;
  margin: 4px 22px;
 }
@@ -15,15 +14,12 @@
  width: 299px;
  height: 100%;
  overflow: hidden;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.38);
  animation: fade-right 0.2s ease-in-out 0s 1;
  z-index: 10;
-  background: rgba(255, 255, 255, 1);
  opacity: 1;
 }

 .setting-panel {
-  background: rgba(255, 255, 255, 1);
  opacity: 1;
  width: 100%;
  height: calc(100% - 55px);
@@ -40,16 +36,14 @@
  cursor: pointer;
 }
 .single-control-switch-title {
-  font-size: 16px;
+  font-size: 15px;
  line-height: 16px;
-  color: rgba(75, 75, 75, 1);
  font-weight: 500;
 }
 .single-control-switch {
  display: inline-block;
  width: 40px;
  height: 20px;
-  background: rgba(75, 75, 75, 1);
  opacity: 1;
  border-radius: 10px;
  position: relative;
@@ -62,7 +56,6 @@
  height: 16px;
  width: 16px;
  border-radius: 50%;
-  background-color: white;
  margin: 2px;
 }
 .lock-icon {
@@ -70,7 +63,7 @@
  top: 0px;
  left: 0px;
  font-size: 20px;
-  color: rgba(75, 75, 75, 0.3);
+  opacity: 0.3;
  margin: 10px;
  cursor: pointer;
  font-size: 20px;
--- a/src/containers/sidebar/component.tsx
+++ b/src/containers/sidebar/component.tsx
@@ -71,7 +71,7 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
                  this.handleHover(-1);
                }}
                style={
-                  this.state.isCollapsed ? { width: 40, marginLeft: 15 } : {}
+                  this.props.isCollapsed ? { width: 40, marginLeft: 15 } : {}
                }
              >
                {this.state.index === index ? (
@@ -95,7 +95,7 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
                    <div
                      className="side-menu-icon"
                      style={
-                        this.state.isCollapsed ? {} : { marginLeft: "38px" }
+                        this.props.isCollapsed ? {} : { marginLeft: "38px" }
                      }
                    >
                      <span
@@ -105,13 +105,13 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
                            : `icon-${item.icon}`
                        }
                        style={
-                          this.state.isCollapsed ? { marginLeft: "-25px" } : {}
+                          this.props.isCollapsed ? { marginLeft: "-25px" } : {}
                        }
                      ></span>
                    </div>
                  </Tooltip>
                  <span
-                    style={this.state.isCollapsed ? { display: "none" } : {}}
+                    style={this.props.isCollapsed ? { display: "none" } : {}}
                  >
                    <Trans>{item.name}</Trans>
                  </span>
@@ -134,7 +134,7 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
            {(t) => (
              <Tooltip
                title={t(
-                  this.state.isCollapsed ? "Show sidebar" : "Collapse sidebar"
+                  this.props.isCollapsed ? "Show sidebar" : "Collapse sidebar"
                )}
                position="top"
                trigger="mouseenter"
@@ -147,9 +147,9 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {

        <img
          src={
-            process.env.NODE_ENV === "production"
-              ? "./assets/label.png"
-              : "../../assets/label.png"
+            OtherUtil.getReaderConfig("isDisplayDark") === "yes"
+              ? "./assets/label_light.png"
+              : "./assets/label.png"
          }
          alt=""
          onClick={() => {
--- a/src/containers/sidebar/index.tsx
+++ b/src/containers/sidebar/index.tsx
@@ -11,7 +11,7 @@ import {
 } from "../../store/actions/sidebar";

 const mapStateToProps = (state: stateType) => {
-  return { mode: state.sidebar.mode };
+  return { mode: state.sidebar.mode, isCollapsed: state.sidebar.isCollapsed };
 };
 const actionCreator = {
  handleMode,
--- a/src/containers/sidebar/interface.tsx
+++ b/src/containers/sidebar/interface.tsx
@@ -2,6 +2,7 @@ import { RouteComponentProps } from "react-router";

 export interface SidebarProps extends RouteComponentProps<any> {
  mode: string;
+  isCollapsed: boolean;
  handleMode: (mode: string) => void;
  handleSearch: (isSearch: boolean) => void;
  handleCollapse: (isCollapsed: boolean) => void;
--- a/src/containers/sidebar/sidebar.css
+++ b/src/containers/sidebar/sidebar.css
@@ -29,14 +29,13 @@
  left: 10px;
  cursor: pointer;
  font-size: 20px;
-  color: rgba(75, 75, 75, 1);
+
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
 }
 .sidebar-list-icon:hover {
-  background-color: rgba(75, 75, 75, 0.035);
  border-radius: 50%;
 }
 .side-menu-container {
@@ -52,7 +51,6 @@
 .side-menu-icon {
  /* float: left; */
  font-size: 17px;
-  color: rgba(0, 0, 0, 1);
  margin: 9px 12px 7px 18px;
  display: flex;
  justify-content: center;
@@ -63,14 +61,13 @@
 .side-menu-item {
  margin-top: 2px;
  list-style-type: none;
-  font-size: 16px;
+  font-size: 15px;
  width: 100%;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: -20px;
  margin-bottom: 10px;
-  color: rgba(75, 75, 75, 1);
  position: relative;
  bottom: 1px;
  overflow: hidden;
@@ -79,16 +76,13 @@
 .side-menu-selector {
  width: 100%;
  height: 39px;
-  color: rgba(75, 75, 75, 1);
  line-height: 39px;
  z-index: 40;
  display: flex;
  align-items: center;
  font-weight: 500;
 }
-.active-selector {
-  color: white;
-}
+
 .shelf-list-container-parent {
  margin-top: 20px;
  height: 140px;
@@ -115,7 +109,6 @@
  white-space: nowrap;
  margin-bottom: 15px;
  margin-left: 31px;
-  color: rgba(75, 75, 75, 0.5);
  opacity: 1;
 }

@@ -123,21 +116,13 @@
  font-size: 13px;
 }

-.active-icon {
-  color: white;
-}
-.inactive-selector {
-  background-color: #fff;
-}
 .side-menu-shelf {
  margin-left: 45px;
  margin-top: 25px;
  cursor: pointer;
-  color: rgba(75, 75, 75, 1);
 }
 .active-shelf {
-  color: black;
-  font-size: 16px;
+  font-size: 15px;
  margin-left: 27px;
 }
 .side-menu-selector-container {
@@ -145,7 +130,6 @@
  height: 39px;
  border-radius: 25px;
  line-height: 39px;
-  background-color: rgba(75, 75, 75, 1);
  position: absolute;
  z-index: -1;
  animation: popup 0.1s ease-in-out 0s 1;
@@ -158,7 +142,6 @@
  height: 39px;
  border-radius: 25px;
  line-height: 39px;
-  background-color: rgba(75, 75, 75, 0.05);
  position: absolute;
  z-index: -1;
  animation: slidein 0.1s ease-in-out 0s 1;
@@ -181,15 +164,7 @@
  display: inline-block;
  margin-left: 13px;
 }
-.download-desktop-version {
-  font-size: 14px;
-  color: #0078d4;
-  text-align: center;
-  position: absolute;
-  bottom: 20px;
-  cursor: pointer;
-  width: 180px;
-}
+
 .icon-idea {
  font-size: 20px;
 }
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,12 +9,11 @@ import { Provider } from "react-redux";
 import "./i18n";
 import store from "./store";
 import Router from "./router/index";
-import { isElectron } from "react-device-detect";
-
-if (isElectron) {
-  const { ipcRenderer } = window.require("electron");
-  const { ebtRenderer } = window.require("electron-baidu-tongji");
-  ebtRenderer(ipcRenderer, "358570be1bfc40e01db43adefade5ad5", Router);
+import OtherUtil from "./utils/otherUtil";
+if (OtherUtil.getReaderConfig("isDisplayDark") === "yes") {
+  require("./assets/styles/dark.css");
+} else {
+  require("./assets/styles/default.css");
 }

 let coverLoading: any = document.querySelector(".loading-cover");
--- a/src/pages/manager/component.tsx
+++ b/src/pages/manager/component.tsx
@@ -107,9 +107,9 @@ class Manager extends React.Component<ManagerProps, ManagerState> {
          <div>
            <img
              src={
-                process.env.NODE_ENV === "production"
-                  ? "./assets/empty.svg"
-                  : "../../assets/empty.svg"
+                OtherUtil.getReaderConfig("isDisplayDark") === "yes"
+                  ? "./assets/empty_light.svg"
+                  : "./assets/empty.svg"
              }
              alt=""
              className="waring-pic"
--- a/src/pages/manager/manager.css
+++ b/src/pages/manager/manager.css
@@ -4,7 +4,6 @@
 }
 .arrow-text {
  font-size: 20px;
-  color: rgba(75, 75, 75);
 }

 .auth-page-close-icon {
--- a/src/pages/redirect/component.tsx
+++ b/src/pages/redirect/component.tsx
@@ -156,9 +156,9 @@ class Redirect extends React.Component<RedirectProps, RedirectState> {
        </div>
        <img
          src={
-            process.env.NODE_ENV === "production"
-              ? "./assets/empty.svg"
-              : "../../assets/empty.svg"
+            OtherUtil.getReaderConfig("isDisplayDark") === "yes"
+              ? "./assets/empty_light.svg"
+              : "./assets/empty.svg"
          }
          alt=""
          className="empty-page-illustration"
--- a/src/pages/redirect/manager.css
+++ b/src/pages/redirect/manager.css
@@ -5,10 +5,9 @@
 .token-dialog-token-text {
  width: 100%;
  height: 29px;
-  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(45, 111, 200, 1);
  opacity: 1;
-  font-size: 14px;
+  font-size: 15px;
  font-weight: 500;
  line-height: 29px;
  color: rgba(45, 111, 200, 1);
--- a/src/utils/bookUtil.tsx
+++ b/src/utils/bookUtil.tsx
@@ -2,7 +2,7 @@ import OtherUtil from "./otherUtil";
 import { isElectron } from "react-device-detect";
 import localforage from "localforage";
 import BookModel from "../model/Book";
-const isTitle = (line: string, isSuccess: boolean) => {
+const isTitle = (line: string) => {
  return (
    line.length < 30 &&
    line.indexOf("[") === -1 &&
@@ -11,7 +11,6 @@ const isTitle = (line: string, isSuccess: boolean) => {
      line.startsWith("Chapter ") ||
      line.startsWith("序章") ||
      line.startsWith("前言") ||
-      (line.startsWith(isSuccess ? "@" : "*") && line !== "*") ||
      line.startsWith("写在前面的话") ||
      line.startsWith("后记") ||
      line.startsWith("楔子") ||
@@ -26,6 +25,24 @@ const isTitle = (line: string, isSuccess: boolean) => {
      (line.indexOf("第") > -1 &&
        line.indexOf("回") > -1 &&
        line.indexOf("第") < line.indexOf("回")) ||
+      (line.indexOf("第") > -1 &&
+        line.indexOf("卷") > -1 &&
+        line.indexOf("第") < line.indexOf("卷")) ||
+      (line.indexOf("第") > -1 &&
+        line.indexOf("部") > -1 &&
+        line.indexOf("第") < line.indexOf("部")) ||
+      (line.indexOf("第") > -1 &&
+        line.indexOf("辑") > -1 &&
+        line.indexOf("第") < line.indexOf("辑")) ||
+      (line.indexOf("第") > -1 &&
+        line.indexOf("集") > -1 &&
+        line.indexOf("第") < line.indexOf("集")) ||
+      (line.indexOf("第") > -1 &&
+        line.indexOf("话") > -1 &&
+        line.indexOf("第") < line.indexOf("话")) ||
+      (line.indexOf("第") > -1 &&
+        line.indexOf("篇") > -1 &&
+        line.indexOf("第") < line.indexOf("篇")) ||
      /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07]+$/.test(
        line
      ) ||
@@ -215,6 +232,7 @@ class BookUtil {
          path.join(dirPath, file.name),
          Buffer.from(event.target!.result as any)
        );
+
        var metadata = {
          id: new Date().getTime(),
          title: bookName,
@@ -236,7 +254,7 @@ class BookUtil {
        var epub = nodepub.document(metadata, path.join(dirPath, `cover.png`));
        let content: any = [];
        let contentFilter: any = [];
-        const analyzeChapter = (isSuccess) => {
+        const analyzeChapter = () => {
          const data = readFileSync(path.join(dirPath, file.name), {
            encoding: "binary",
          });
@@ -250,9 +268,9 @@ class BookUtil {
          lines.splice(imgIndex, lineLength - imgIndex);
          for (let i = 0; i < lines.length; i++) {
            const line = escapeHTML(lines[i]).trim();
-            if (isTitle(line, isSuccess)) {
+            if (isTitle(line)) {
              content.push({
-                title: line.startsWith("*") ? line.substr(1) : line,
+                title: line,
                data: "",
              });
            } else if (line) {
@@ -287,18 +305,15 @@ class BookUtil {
            return item.data.trim() && item.data.trim().length > 50;
          });
        };
-        analyzeChapter(true);
-        if (contentFilter.length < 7) {
-          content = [];
-          contentFilter = [];
-          analyzeChapter(false);
-        }
+        analyzeChapter();
+
        for (let i = 0; i < contentFilter.length; i++) {
          epub.addSection(
            contentFilter[i].title,
            `<h1>${contentFilter[i].title}</h1>` + contentFilter[i].data
          );
        }
+
        epub.writeEPUB(
          function (e) {
            console.log("Error:", e);
@@ -313,6 +328,7 @@ class BookUtil {
              lastModified: new Date().getTime(),
              type: blobTemp.type,
            });
+
            try {
              const fs = window.require("fs-extra");
              fs.remove(path.join(dirPath, `${bookName}.epub`), (err) => {
--- a/src/utils/mobiUtil.tsx
+++ b/src/utils/mobiUtil.tsx
@@ -392,16 +392,12 @@ class MobiFile {
      var content = this.read_text();
      var bookDoc = domParser.parseFromString(content, "text/html")
        .documentElement;
-      const lines: any = Array.from(bookDoc.querySelectorAll("p,b,font,h3"));
+      let lines: any = Array.from(bookDoc.querySelectorAll("p,b,font,h3,h1"));
      let parseContent: any = [];
      for (let i = 0, len = lines.length; i < len - 1; i++) {
-        parseContent.push(
-          lines[i].tagName === "FONT" ||
-            lines[i].tagName === "B" ||
-            lines[i].tagName === "H3"
-            ? "*" + lines[i].innerText
-            : lines[i].innerText
-        );
+        lines[i].innerText &&
+          lines[i].innerText !== parseContent[parseContent.length - 1] &&
+          parseContent.push(lines[i].innerText);
        let imgDoms = lines[i].getElementsByTagName("img");
        if (imgDoms.length > 0) {
          for (let i = 0; i < imgDoms.length; i++) {
--- a/yarn.lock
+++ b/yarn.lock
@@ -4351,7 +4351,7 @@ colors@1.0.3:
  resolved "https://registry.npm.taobao.org/colors/download/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
  integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=

-combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@~1.0.6:
  version "1.0.8"
  resolved "https://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
  integrity sha1-w9RaizT9cwYxoRCoolIGgrMdWn8=
@@ -4397,7 +4397,7 @@ component-classes@^1.2.5:
  dependencies:
    component-indexof "0.0.3"

-component-emitter@^1.2.1, component-emitter@^1.3.0:
+component-emitter@^1.2.1:
  version "1.3.0"
  resolved "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
  integrity sha1-FuQHD7qK4ptnnyIVhT7hgasuq8A=
@@ -4558,11 +4558,6 @@ cookie@0.4.0:
  resolved "https://registry.npm.taobao.org/cookie/download/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
  integrity sha1-vrQ35wIrO21JAZ0IhmUwPr6cFLo=

-cookiejar@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.npm.taobao.org/cookiejar/download/cookiejar-2.1.2.tgz#dd8a235530752f988f9a0844f3fc589e3111125c"
-  integrity sha1-3YojVTB1L5iPmghE8/xYnjERElw=
-
 copy-concurrently@^1.0.0:
  version "1.0.5"
  resolved "https://registry.npm.taobao.org/copy-concurrently/download/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -5528,13 +5523,6 @@ ejs@^3.1.6:
  dependencies:
    jake "^10.6.1"

-electron-baidu-tongji@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npm.taobao.org/electron-baidu-tongji/download/electron-baidu-tongji-1.0.5.tgz#44919d812f5cb53339938ef8e6ed8c5a816c6ccd"
-  integrity sha1-RJGdgS9ctTM5k4745u2MWoFsbM0=
-  dependencies:
-    superagent "^6.1.0"
-
 electron-builder@^22.10.5:
  version "22.10.5"
  resolved "https://registry.npm.taobao.org/electron-builder/download/electron-builder-22.10.5.tgz#03b156b93e6012609027c3aaa69201a3ad21e454"
@@ -6300,11 +6288,6 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
  resolved "https://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz?cache=0&sync_timestamp=1595428000133&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-levenshtein%2Fdownload%2Ffast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=

-fast-safe-stringify@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.npm.taobao.org/fast-safe-stringify/download/fast-safe-stringify-2.0.7.tgz?cache=0&sync_timestamp=1618073799925&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-safe-stringify%2Fdownload%2Ffast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
-  integrity sha1-EkqohYmSYfaK7bQqfAgN6dpgh0M=
-
 fast-xml-parser@^3.17.4:
  version "3.17.6"
  resolved "https://registry.npm.taobao.org/fast-xml-parser/download/fast-xml-parser-3.17.6.tgz#4f5df8cf927c3e59a10362abcfb7335c34bc5c5f"
@@ -6536,15 +6519,6 @@ fork-ts-checker-webpack-plugin@4.1.6:
    tapable "^1.0.0"
    worker-rpc "^0.1.0"

-form-data@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npm.taobao.org/form-data/download/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
-  integrity sha1-69U3kbeDVqma+aMA1CgsTV65dV8=
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.8"
-    mime-types "^2.1.12"
-
 form-data@~2.3.2:
  version "2.3.3"
  resolved "https://registry.npm.taobao.org/form-data/download/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -6554,11 +6528,6 @@ form-data@~2.3.2:
    combined-stream "^1.0.6"
    mime-types "^2.1.12"

-formidable@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.npm.taobao.org/formidable/download/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
-  integrity sha1-v2muopcpgmdfAIZTQrmCmG9rjdk=
-
 forwarded@~0.1.2:
  version "0.1.2"
  resolved "https://registry.npm.taobao.org/forwarded/download/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -9236,7 +9205,7 @@ merge2@^1.3.0:
  resolved "https://registry.npm.taobao.org/merge2/download/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
  integrity sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4=

-methods@^1.1.2, methods@~1.1.2:
+methods@~1.1.2:
  version "1.1.2"
  resolved "https://registry.npm.taobao.org/methods/download/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
@@ -9315,7 +9284,7 @@ mime@^2.4.4:
  resolved "https://registry.npm.taobao.org/mime/download/mime-2.4.6.tgz?cache=0&sync_timestamp=1590596728112&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
  integrity sha1-5bQHyQ20QvK+tbFiNz0Htpr/pNE=

-mime@^2.4.6, mime@^2.5.0:
+mime@^2.5.0:
  version "2.5.2"
  resolved "https://registry.npm.taobao.org/mime/download/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
  integrity sha1-bj3GzCuVEGQ4MOXxnVy3U9pe6r4=
@@ -11386,13 +11355,6 @@ qs@6.7.0:
  resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
  integrity sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=

-qs@^6.9.4:
-  version "6.10.1"
-  resolved "https://registry.npm.taobao.org/qs/download/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
-  integrity sha1-STFIL6jWR6Wqt5nFJx0hM7mB+2o=
-  dependencies:
-    side-channel "^1.0.4"
-
 qs@~6.5.2:
  version "6.5.2"
  resolved "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -13336,23 +13298,6 @@ sumchecker@^3.0.1:
  dependencies:
    debug "^4.1.0"

-superagent@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.npm.taobao.org/superagent/download/superagent-6.1.0.tgz#09f08807bc41108ef164cfb4be293cebd480f4a6"
-  integrity sha1-CfCIB7xBEI7xZM+0vik869SA9KY=
-  dependencies:
-    component-emitter "^1.3.0"
-    cookiejar "^2.1.2"
-    debug "^4.1.1"
-    fast-safe-stringify "^2.0.7"
-    form-data "^3.0.0"
-    formidable "^1.2.2"
-    methods "^1.1.2"
-    mime "^2.4.6"
-    qs "^6.9.4"
-    readable-stream "^3.6.0"
-    semver "^7.3.2"
-
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz?cache=0&sync_timestamp=1598611719015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"