diff --git a/client/components/App.vue b/client/components/App.vue index 56ee2ac7..99a67067 100644 --- a/client/components/App.vue +++ b/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; } diff --git a/client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue b/client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue index b473f5d2..5aeaa59c 100644 --- a/client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue +++ b/client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue @@ -8,10 +8,10 @@ -
+

- +
@@ -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 { diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index 14381f3f..f4403014 100644 --- a/client/components/Reader/Reader.vue +++ b/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); } diff --git a/client/components/share/Window.vue b/client/components/share/Window.vue index d41d660e..a1c15fef 100644 --- a/client/components/share/Window.vue +++ b/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; }