system default theme implemented

app/components/EnRecipes.vue

@@ -1088,7 +1088,7 @@ export default {
     },
   },
   created() {
-    this.setTheme(ApplicationSettings.getString("appTheme", "Light"));
+    this.setTheme(ApplicationSettings.getString("appTheme", "sysDef"));
     this.setLayout(ApplicationSettings.getString("layout", "detailed"));
     if (!this.recipes.length) this.initRecipes();
     this.initListItems();

app/components/Settings/Interface.vue

@@ -67,7 +67,9 @@ export default {
         {
           icon: "theme",
           title: "Theme",
-          subTitle: localize(this.appTheme),
+          subTitle: localize(
+            ApplicationSettings.getString("appTheme", "sysDef")
+          ),
           action: this.selectThemes,
         },
         {
@@ -124,10 +126,15 @@ export default {
       this.$showModal(ActionDialog, {
         props: {
           title: "Theme",
-          list: ["Light", "Dark", "Black"],
+          list: ["Light", "Dark", "Black", "sysDef", "sysDefB"],
         },
       }).then((action) => {
-        if (action && action !== "Cancel" && this.appTheme !== action) {
+        if (
+          action &&
+          (ApplicationSettings.getString("appTheme") != this.appTheme
+            ? true
+            : this.appTheme != action)
+        ) {
           this.setTheme(action);
           Frame.reloadPage();
         }

app/resources/Android/app.gradle

@@ -15,8 +15,8 @@
 
 android {
   defaultConfig {
-    versionCode 7
-    versionName '1.3.2'
+    versionCode 8
+    versionName '1.3.3'
     applicationId 'com.vishnuraghav.enrecipes'
     minSdkVersion 23
     targetSdkVersion 30

app/store.ts

@@ -2,7 +2,7 @@ import Vue from 'nativescript-vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 import { CouchBase } from '@triniwiz/nativescript-couchbase'
-import { getFileAccess, File, ApplicationSettings, Device } from '@nativescript/core'
+import { getFileAccess, File, ApplicationSettings, Application } from '@nativescript/core'
 const EnRecipesDB = new CouchBase('EnRecipes')
 const userCuisinesDB = new CouchBase('userCuisines')
 const userCategoriesDB = new CouchBase('userCategories')
@@ -300,7 +300,7 @@ export default new Vuex.Store({
     selectedCuisine: null,
     selectedCategory: null,
     selectedTag: null,
-    appTheme: 'Light',
+    appTheme: 'sysDef',
     mondayFirst: false,
   },
   mutations: {
@@ -312,7 +312,17 @@ export default new Vuex.Store({
       ApplicationSettings.setBoolean('mondayFirst', bool)
     },
     setTheme(state, theme) {
+      switch (theme) {
+        case 'sysDef':
+          state.appTheme = Application.systemAppearance() == 'dark' ? "Dark" : "Light"
+          break;
+        case 'sysDefB':
+          state.appTheme = Application.systemAppearance() == 'dark' ? "Black" : "Light"
+          break;
+        default:
           state.appTheme = theme
+          break;
+      }
       ApplicationSettings.setString('appTheme', theme)
     },
     clearFilter(state) {