Fix #121 - Change default theme and layout from config

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'.
 

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

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:

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);

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);