Работа над ночным режимом

client/components/App.vue

@@ -53,7 +53,7 @@ class App {
             if (darkMode !== value) {
                 const vars = [
                     '--bg-app-color', '--text-app-color', '--text-anchor-color',
-                    '--bg-loader-color', '--bg-input-color', '--bg-btn-color1',
+                    '--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-btn-color2',
                     '--bg-header-color1', '--bg-header-color2', '--bg-header-color3',
                     '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color',
                     '--text-tb-normal', '--bg-tb-normal', '--bg-tb-hover',
@@ -245,7 +245,8 @@ export default vueComponent(App);
     --text-anchor-color: #00f;
     --bg-loader-color: #ebe2c9;
     --bg-input-color: #eee;
-    --bg-btn-color1: #1976d2;/* primary */
+    --bg-btn-color1: #1976d2;
+    --bg-btn-color2: #eee;
     --bg-header-color1: #007000;
     --bg-header-color2: #59b04f;
     --bg-header-color3: #bbdefb;
@@ -271,7 +272,8 @@ export default vueComponent(App);
     --text-anchor-color-light: #00f;
     --bg-loader-color-light: #ebe2c9;
     --bg-input-color-light: #eee;
-    --bg-btn-color1-light: #1976d2;/* primary */
+    --bg-btn-color1-light: #1976d2;
+    --bg-btn-color2-light: #eee;
     --bg-header-color1-light: #007000;
     --bg-header-color2-light: #59b04f;
     --bg-header-color3-light: #bbdefb;
@@ -297,7 +299,8 @@ export default vueComponent(App);
     --text-anchor-color-dark: #09f;
     --bg-loader-color-dark: #222;
     --bg-input-color-dark: #333;
-    --bg-btn-color1-dark: #00695c;/* teal-9 */
+    --bg-btn-color1-dark: #00695c;
+    --bg-btn-color2-dark: #333;
     --bg-header-color1-dark: #004000;
     --bg-header-color2-dark: #29901f;
     --bg-header-color3-dark: #335673;
@@ -314,8 +317,8 @@ export default vueComponent(App);
     --text-tb-disabled-dark: #d3d3d3;
     --bg-tb-disabled-dark: #808080;
 
-    --bg-selected-item-color1-dark: #406040;
-    --bg-selected-item-color2-dark: #304530;
+    --bg-selected-item-color1-dark: #605020;
+    --bg-selected-item-color2-dark: #403010;
 }
 
 a {
@@ -338,6 +341,10 @@ a {
     background-color: var(--bg-btn-color1);
 }
 
+.bg-btn2 {
+    background-color: var(--bg-btn-color2);
+}
+
 .bg-menu-1 {
     background-color: var(--bg-menu-color1);
 }

client/components/Reader/RecentBooksPage/RecentBooksPage.vue

@@ -36,29 +36,29 @@
         <a ref="download" style="display: none;" target="_blank"></a>
 
         <div id="vs-container" ref="vsContainer" class="recent-books-scroll col">
-            <div ref="header" class="scroll-header row bg-blue-2">
-                <q-btn class="tool-button" round @click="showSameBookClick">
+            <div ref="header" class="scroll-header row bg-header-3">
+                <q-btn class="tool-button" color="btn2" round @click="showSameBookClick">
                     <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': showSameBook}" color="green-8" size="24px" />
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                         Показать/скрыть версии книг
                     </q-tooltip>
                 </q-btn>
 
-                <q-btn class="tool-button" round @click="scrollToBegin">
+                <q-btn class="tool-button" color="btn2" round @click="scrollToBegin">
                     <q-icon name="la la-arrow-up" color="green-8" size="24px" />
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                         В начало списка
                     </q-tooltip>
                 </q-btn>
 
-                <q-btn class="tool-button" round @click="scrollToEnd">
+                <q-btn class="tool-button" color="btn2" round @click="scrollToEnd">
                     <q-icon name="la la-arrow-down" color="green-8" size="24px" />
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                         В конец списка
                     </q-tooltip>
                 </q-btn>
 
-                <q-btn class="tool-button" round @click="scrollToActiveBook">
+                <q-btn class="tool-button" color="btn2" round @click="scrollToActiveBook">
                     <q-icon name="la la-location-arrow" color="green-8" size="24px" />
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                         На текущую книгу
@@ -71,7 +71,7 @@
                     class="q-ml-sm q-mt-xs"
                     outlined dense
                     style="width: 185px"
-                    bg-color="white"
+                    bg-color="input"
                     placeholder="Найти"
                     @click.stop
                 >
@@ -86,7 +86,7 @@
                     class="q-ml-sm q-mt-xs"
                     :options="sortMethodOptions"
                     style="width: 180px"
-                    bg-color="white"
+                    bg-color="input"
                     dropdown-icon="la la-angle-down la-sm"
                     outlined dense emit-value map-options display-value-sanitize options-sanitize
                     options-html display-value-html
@@ -140,7 +140,7 @@
                             class="col" style="border: 1px solid #cccccc; border-bottom: 0; padding: 4px; line-height: 140%;"
                             :style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }"
                         >
-                            <div class="text-green-10" style="font-size: 80%">
+                            <div :class="dark ? 'text-lime-4' : 'text-green-10'" style="font-size: 80%">
                                 {{ item.desc.author }}
                             </div>
                             <div style="font-size: 75%">
@@ -349,6 +349,10 @@ class RecentBooksPage {
         return this.$store.state.config.bucEnabled && this.bucEnabled;
     }
 
+    get dark() {
+        return this.$store.state.reader.settings.nightMode;
+    }
+
     async updateTableData() {
         if (!this.inited)
             return;
@@ -847,7 +851,7 @@ export default vueComponent(RecentBooksPage);
     position: sticky;
     z-index: 1;
     top: 0;
-    border-bottom: 2px solid #aaaaaa;
+    border-bottom: 2px solid var(--bg-menu-color2);
     padding-left: 5px;
 }
 
@@ -870,15 +874,15 @@ export default vueComponent(RecentBooksPage);
 }
 
 .even {
-    background-color: #f2f2f2;
+    background-color: var(--bg-menu-color1);
 }
 
 .active-book {
-    background-color: #b0f0b0 !important;
+    background-color: var(--bg-selected-item-color1) !important;
 }
 
 .active-parent-book {
-    background-color: #ffbbbb !important;
+    background-color: var(--bg-selected-item-color2) !important;
 }
 
 .icon {
@@ -895,7 +899,6 @@ export default vueComponent(RecentBooksPage);
     min-height: 30px;
     height: 30px;
     margin: 10px 6px 0px 3px;
-    background-color: white;
 }
 
 .row-info-bottom {