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

client/components/App.vue

@@ -50,7 +50,8 @@ class App {
             if (darkMode !== value) {
                 const vars = [
                     '--bg-app-color', '--text-app-color', '--text-anchor-color',
-                    '--bg-input-color', '--bg-btn1-color'
+                    '--bg-loader-color', '--bg-input-color', '--bg-btn1-color',
+                    '--bg-header1-color', '--bg-header2-color',
                 ];
 
                 let root = document.querySelector(':root');
@@ -223,22 +224,31 @@ export default vueComponent(App);
     --bg-app-color: #fff;
     --text-app-color: #000;
     --text-anchor-color: #00f;
+    --bg-loader-color: #ebe2c9;
     --bg-input-color: #fff;
     --bg-btn1-color: #1976d2;/* primary */
+    --bg-header1-color: #007000;
+    --bg-header2-color: #59B04F;
 
     /* light */
-    --bg-app-color-light: #ebe2c9;
+    --bg-app-color-light: #fff;
     --text-app-color-light: #000;
     --text-anchor-color-light: #00f;
+    --bg-loader-color-light: #ebe2c9;
     --bg-input-color-light: #fff;
     --bg-btn1-color-light: #1976d2;/* primary */
+    --bg-header1-color-light: #007000;
+    --bg-header2-color-light: #59B04F;
 
     /* dark */
     --bg-app-color-dark: #222;
-    --text-app-color-dark: #bbb;
+    --text-app-color-dark: #ccc;
     --text-anchor-color-dark: #09f;
+    --bg-loader-color-dark: #222;
     --bg-input-color-dark: #333;
     --bg-btn1-color-dark: #00695c;/* teal-9 */
+    --bg-header1-color-dark: #004000;
+    --bg-header2-color-dark: #29901F;
     
 }
 

client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue

@@ -8,10 +8,10 @@
             </span>
         </template>
 
-        <div class="fit column" :class="{dark}">
+        <div class="fit column main">
             <q-input v-model="bookTitle" class="q-px-sm" dense borderless placeholder="Введите название текста" />
             <hr />
-            <textarea ref="textArea" class="text" :class="{dark}" @paste="calcTitle"></textarea>
+            <textarea ref="textArea" class="main text" @paste="calcTitle"></textarea>
         </div>
     </Window>
 </template>
@@ -121,9 +121,9 @@ export default vueComponent(PasteTextPage);
     outline: none;
 }
 
-.dark {
-    color: white;
-    background-color: #333;
+.main {
+    color: var(--text-app-color);
+    background-color: var(--bg-app-color);
 }
 
 hr {

client/components/Reader/Reader.vue

@@ -1697,7 +1697,7 @@ export default vueComponent(Reader);
 }
 
 .main {
-    background-color: var(--bg-app-color);
+    background-color: var(--bg-loader-color);
     color: var(--text-app-color);
 }
 

client/components/share/Window.vue

@@ -148,14 +148,14 @@ export default vueComponent(Window);
 
 .window {
     margin: 10px;
-    background-color: #ffffff;
-    border: 3px double black;
+    background-color: var(--bg-app-color);
+    border: 3px double var(--text-app-color);
     border-radius: 4px;
     box-shadow: 3px 3px 5px black;
 }
 
 .header {
-    background: linear-gradient(to bottom right, #007000, #59B04F);
+    background: linear-gradient(to bottom right, var(--bg-header1-color), var(--bg-header2-color));
     align-items: center;
     height: 30px;
 }