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

client/components/App.vue

@@ -48,7 +48,10 @@ class App {
         let darkMode = null;
         this.$root.setDarkMode = (value) => {
             if (darkMode !== value) {
-                const vars = ['--app-bg-color', '--app-text-color', '--bg-input-color'];
+                const vars = [
+                    '--bg-app-color', '--text-app-color', '--text-anchor-color',
+                    '--bg-input-color', '--bg-btn1-color'
+                ];
 
                 let root = document.querySelector(':root');
                 let cs = getComputedStyle(root);
@@ -214,27 +217,44 @@ export default vueComponent(App);
 </style>
 
 <style>
+/* color schemes */
 :root {
     /* current */
-    --app-bg-color: #fff;
-    --app-text-color: #000;
+    --bg-app-color: #fff;
+    --text-app-color: #000;
+    --text-anchor-color: #00f;
     --bg-input-color: #fff;
+    --bg-btn1-color: #1976d2;/* primary */
 
     /* light */
-    --app-bg-color-light: #ebe2c9;
-    --app-text-color-light: #000;
+    --bg-app-color-light: #ebe2c9;
+    --text-app-color-light: #000;
+    --text-anchor-color-light: #00f;
     --bg-input-color-light: #fff;
+    --bg-btn1-color-light: #1976d2;/* primary */
 
     /* dark */
-    --app-bg-color-dark: #222;
-    --app-text-color-dark: #bbb;
+    --bg-app-color-dark: #222;
+    --text-app-color-dark: #bbb;
+    --text-anchor-color-dark: #09f;
     --bg-input-color-dark: #333;
+    --bg-btn1-color-dark: #00695c;/* teal-9 */
+    
+}
+
+a {
+    color: var(--text-anchor-color);
 }
 
 .bg-input {
     background-color: var(--bg-input-color);
 }
 
+.bg-btn1 {
+    background-color: var(--bg-btn1-color);
+}
+
+/* main section */
 body, html, #app {    
     margin: 0;
     padding: 0;

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -29,13 +29,13 @@
             />
 
             <div class="q-my-sm"></div>
-            <q-btn no-caps dense class="q-px-sm" size="13px" @click="loadFileClick">
+            <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadFileClick">
                 <q-icon class="q-mr-xs" name="la la-caret-square-up" size="24px" />
                 Загрузить файл с диска
             </q-btn>
             
             <div class="q-my-sm"></div>
-            <q-btn no-caps dense class="q-px-sm" size="13px" @click="loadBufferClick">
+            <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadBufferClick">
                 <q-icon class="q-mr-xs" name="la la-comment" size="24px" />
                 Из буфера обмена
             </q-btn>
@@ -217,7 +217,7 @@ export default vueComponent(LoaderPage);
 }
 
 .clickable {
-    color: blue;
+    color: var(--text-anchor-color);
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/Reader.vue

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