Merge pull request #311 from Aryess/main

Fix #121 - Change default theme and layout from config

diff --git a/docs/configuration.md b/docs/configuration.md
index 552b22a9b4993722bd10ab5eb3f42f7ed81f2311..2083be3056a74cd9b2e3f87dd79f059c8d99b262 100644 (file)
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -31,6 +31,11 @@ connectivityCheck: true # whether you want to display a message when the apps ar
 proxy:
   useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. 
 
+# Set the default layout and color scheme
+defaults:
+  layout: columns # Either 'columns', or 'list'
+  colorTheme: auto # One of 'auto', 'light', or 'dark'
+
 # Optional theming
 theme: default # 'default' or one of the themes available in 'src/assets/themes'.
 

diff --git a/src/App.vue b/src/App.vue
index d2cb3adfb115d7ff2d0898c58b683e77bc600077..fda13c31e07ef4cb7bcf5f1e50365d29f8fe4e65 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,13 +30,17 @@
         :links="config.links"
         @navbar-toggle="showMenu = !showMenu"
       >
-        <DarkMode @updated="isDark = $event" />
+        <DarkMode
+          @updated="isDark = $event"
+          :defaultValue="this.config.defaults.colorTheme"
+        />
 
         <SettingToggle
           @updated="vlayout = $event"
           name="vlayout"
           icon="fa-list"
           iconAlt="fa-columns"
+          :defaultValue="this.config.defaults.layout == 'columns'"
         />
 
         <SearchInput

diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index ed1fbc9de64e6f7541b54d7018fc0721904da023..85f2698e2647669c2380a93232c8f380ecacac6c 100644 (file)
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -10,6 +10,12 @@ footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a hre
 columns: 3
 connectivityCheck: true
 
+defaults:
+  # columns, list
+  layout: columns
+  # auto, light, dark
+  colorTheme: auto
+
 theme: default
 colors:
   light:

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 80491fafae8d2dc9fb6f467146cac0e7db8495a8..677238acbd101bdf4683e554b66b6a4a0028f2ba 100644 (file)
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -15,6 +15,9 @@
 <script>
 export default {
   name: "Darkmode",
+  props: {
+    defaultValue: String,
+  },
   data: function () {
     return {
       isDark: null,
@@ -30,6 +33,17 @@ export default {
     if ("overrideDark" in localStorage) {
       // Light theme is 1 and Dark theme is 2
       this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
+    } else {
+      switch (this.defaultValue) {
+        case "light":
+          this.mode = 1;
+          break;
+        case "dark":
+          this.mode = 2;
+          break;
+        default:
+          this.mode = 0;
+      }
     }
     this.isDark = this.getIsDark();
     this.$emit("updated", this.isDark);

diff --git a/src/components/SettingToggle.vue b/src/components/SettingToggle.vue
index 985ca84f8f0c6344fa01395b062c8a72eb9599d3..6c8a10fa87a455accd9d25abbf5570a389fc4ca0 100644 (file)
--- a/src/components/SettingToggle.vue
+++ b/src/components/SettingToggle.vue
@@ -12,6 +12,7 @@ export default {
     name: String,
     icon: String,
     iconAlt: String,
+    defaultValue: Boolean,
   },
   data: function () {
     return {
@@ -24,6 +25,8 @@ export default {
 
     if (this.name in localStorage) {
       this.value = JSON.parse(localStorage[this.name]);
+    } else {
+      this.value = this.defaultValue;
     }
 
     this.$emit("updated", this.value);