From 5db2414d052af629e2848f53ce9c2e0e686eefaf Mon Sep 17 00:00:00 2001
From: Aryess <yoann.celton@gmail.com>
Date: Tue, 12 Oct 2021 11:28:41 +1100
Subject: [PATCH] Fix #121 - Change default theme and layout from config

---
 docs/configuration.md            |  5 +++++
 src/App.vue                      |  6 +++++-
 src/assets/defaults.yml          |  6 ++++++
 src/components/DarkMode.vue      | 14 ++++++++++++++
 src/components/SettingToggle.vue |  3 +++
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 50b5bd5..65fd018 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -29,6 +29,11 @@ proxy:
   # NOT All custom services implements this new option YET. Support will be extended very soon.
   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 c263c8a..1f1791c 100644
--- 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 ed1fbc9..85f2698 100644
--- 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 80491fa..677238a 100644
--- 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 985ca84..6c8a10f 100644
--- 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);
-- 
2.41.0