aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/App.vue4
-rw-r--r--src/assets/app.scss6
-rw-r--r--src/components/DynamicTheme.vue14
3 files changed, 12 insertions, 12 deletions
diff --git a/src/App.vue b/src/App.vue
index 0f137b9..c47b5a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -159,7 +159,9 @@ export default {
159 } 159 }
160 this.config = merge(defaults, config); 160 this.config = merge(defaults, config);
161 this.services = this.config.services; 161 this.services = this.config.services;
162 document.title = this.config.documentTitle || `${this.config.title} | ${this.config.subtitle}`; 162 document.title =
163 this.config.documentTitle ||
164 `${this.config.title} | ${this.config.subtitle}`;
163 if (this.config.stylesheet) { 165 if (this.config.stylesheet) {
164 let stylesheet = ""; 166 let stylesheet = "";
165 for (const file of this.config.stylesheet) { 167 for (const file of this.config.stylesheet) {
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 43d7629..59afd00 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -13,17 +13,17 @@
13 text-overflow: ellipsis; 13 text-overflow: ellipsis;
14} 14}
15 15
16html { 16html, body, body #app {
17 height: 100%; 17 height: 100%;
18 background-color: var(--background);
18} 19}
19 20
20body { 21body {
21 font-family: "Raleway", sans-serif; 22 font-family: "Raleway", sans-serif;
22 height: 100%;
23 23
24 #app { 24 #app {
25 height: auto;
25 min-height: 100%; 26 min-height: 100%;
26 background-color: var(--background);
27 background-image: var(--background-image); 27 background-image: var(--background-image);
28 background-size: cover; 28 background-size: cover;
29 background-position: center; 29 background-position: center;
diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index 2ccb47b..fc2fd55 100644
--- a/src/components/DynamicTheme.vue
+++ b/src/components/DynamicTheme.vue
@@ -1,17 +1,15 @@
1<template> 1<template>
2 <DynamicStyle> 2 <DynamicStyle>
3 /* light / dark theme switch based on system pref if available */ body #app 3 :root, body #app.is-light {
4 {
5 {{ getVars(themes.light) }} 4 {{ getVars(themes.light) }}
6 } @media (prefers-color-scheme: light), (prefers-color-scheme: 5 } @media (prefers-color-scheme: light), (prefers-color-scheme:
7 no-preference) { body #app { 6 no-preference) { :root, body #app {
8 {{ getVars(themes.light) }} 7 {{ getVars(themes.light) }}
9 } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark 8 } } body #app.is-dark {
10 theme override base on user choice. */ body #app.is-dark {
11 {{ getVars(themes.dark) }} 9 {{ getVars(themes.dark) }}
12 } body #app.is-light { 10 } @media (prefers-color-scheme: dark) { :root, body #app {
13 {{ getVars(themes.light) }} 11 {{ getVars(themes.dark) }}
14 } 12 } }
15 </DynamicStyle> 13 </DynamicStyle>
16</template> 14</template>
17 15