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

client/components/App.vue

@@ -30,7 +30,10 @@ const componentOptions = {
         mode: function() {
             this.setAppTitle();
             this.redirectIfNeeded();
-        }
+        },
+        nightMode() {
+            this.setNightMode();
+        },
     },
 
 };
@@ -138,6 +141,8 @@ class App {
         window.addEventListener('resize', (event) => {
             this.$root.eventHook('resize', event);
         });
+
+        this.setNightMode();
     }
 
     mounted() {
@@ -179,6 +184,15 @@ class App {
         return this.$root.getRootRoute();
     }
 
+    get nightMode() {
+        return this.$store.state.reader.settings.nightMode;
+    }
+
+    setNightMode() {
+        this.$root.setDarkMode(this.nightMode);
+        this.$q.dark.set(this.nightMode);
+    }
+
     setAppTitle(title) {
         if (!title) {
             if (this.mode == 'liberama') {
@@ -229,7 +243,7 @@ export default vueComponent(App);
     --text-app-color: #000;
     --text-anchor-color: #00f;
     --bg-loader-color: #ebe2c9;
-    --bg-input-color: #fff;
+    --bg-input-color: #eee;
     --bg-btn-color1: #1976d2;/* primary */
     --bg-header-color1: #007000;
     --bg-header-color2: #59b04f;
@@ -252,7 +266,7 @@ export default vueComponent(App);
     --text-app-color-light: #000;
     --text-anchor-color-light: #00f;
     --bg-loader-color-light: #ebe2c9;
-    --bg-input-color-light: #fff;
+    --bg-input-color-light: #eee;
     --bg-btn-color1-light: #1976d2;/* primary */
     --bg-header-color1-light: #007000;
     --bg-header-color2-light: #59b04f;

client/components/Reader/Reader.vue

@@ -473,8 +473,6 @@ class Reader {
 
         //dark mode
         this.nightModeActive = settings.nightMode;
-        this.$root.setDarkMode(this.nightModeActive);
-        this.$q.dark.set(this.nightModeActive);
 
         this.clickControlActive = settings.clickControl;
         this.blinkCachedLoad = settings.blinkCachedLoad;

client/components/Reader/SearchPage/SearchPage.vue

@@ -11,6 +11,7 @@
                 <q-input
                     ref="input" v-model="needle"
                     class="col" outlined dense
+                    bg-color="input"
                     placeholder="Найти"
                     @keydown="inputKeyDown"         
                 />

client/components/Reader/SetPositionPage/SetPositionPage.vue

@@ -80,7 +80,7 @@ export default vueComponent(SetPositionPage);
 .slider {
     margin: 0 20px 0 20px;
     height: 35px;
-    background-color: #efefef;
+    background-color: var(--bg-input-color);
     border-radius: 15px;
 }
 </style>