feat. added system theme

Author: RohitKushvaha01

src/lib/systemConfiguration.js

@@ -52,3 +52,25 @@ export function getSystemConfiguration() {
 		cordova.exec(resolve, reject, "System", "get-configuration", []);
 	});
 }
+
+
+export function isDeviceDarkTheme() {
+	return new Promise((resolve, reject) => {
+		if(window.cordova && typeof cordova.exec !== 'function'){
+			resolve(true)
+			return
+		}
+		cordova.exec(
+			(result) => {
+				resolve(result.isDark);
+			},
+			(error) => {
+				console.warn(error);
+				resolve(true);
+			},
+			'System',
+			'getTheme',
+			[]
+		);
+	});
+}

src/palettes/changeTheme/index.js

@@ -2,6 +2,8 @@ import "./style.scss";
 import palette from "components/palette";
 import appSettings from "lib/settings";
 import themes from "theme/list";
+import { updateSystemTheme } from "theme/preInstalled";
+import { isDeviceDarkTheme } from "lib/systemConfiguration";
 
 export default function changeTheme(type = "editor") {
 	palette(
@@ -56,11 +58,49 @@ function generateHints(type) {
 	});
 }
 
+
+
+
+
+let previousDark = await isDeviceDarkTheme();
+const updateTimeMs = 3000;
+
+let intervalId = setInterval(async () => {
+	if (appSettings.value.appTheme.toLowerCase() === "system") {
+		const isDark = await isDeviceDarkTheme();
+		if (isDark !== previousDark) {
+			previousDark = isDark
+			updateSystemTheme(isDark);
+		}
+	}
+}, updateTimeMs);
+
 function onselect(value) {
 	if (!value) return;
 
 	const selection = JSON.parse(value);
 
+	if (selection.theme === "system") {
+		// Start interval if not already started
+		if (!intervalId) {
+			intervalId = setInterval(async () => {
+				if (appSettings.value.appTheme.toLowerCase() === "system") {
+					const isDark = await isDeviceDarkTheme();
+					if (isDark !== previousDark) {
+						previousDark = isDark
+						updateSystemTheme(isDark);
+					}
+				}
+			}, updateTimeMs);
+		}
+	} else {
+		// Cancel interval if it's running
+		if (intervalId) {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	}
+
 	if (selection.type === "editor") {
 		editorManager.editor.setTheme(selection.theme);
 		appSettings.update(

src/plugins/system/android/com/foxdebug/system/System.java

@@ -104,6 +104,24 @@ public boolean execute(
     final String arg5 = args.optString(4);
     final String arg6 = args.optString(5);
 
+    if (action.equals("getTheme")) {
+      JSONObject theme = new JSONObject();
+
+      boolean isDark = (cordova.getActivity().getResources().getConfiguration().uiMode
+          & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES;
+
+      try {
+        theme.put("isDark", isDark);
+      } catch (Exception e) {
+        callbackContext.error("Error setting 'isDark' JSON entry.");
+        return true;
+      }
+
+      callbackContext.success(theme);
+
+      return true;
+    }
+
     switch (action) {
       case "get-webkit-info":
       case "file-action":

src/theme/list.js

@@ -68,7 +68,7 @@ function add(theme) {
  * @param {string} id The name of the theme to apply
  * @param {boolean} init Whether or not this is the first time the theme is being applied
  */
-async function apply(id, init) {
+export async function apply(id, init) {
 	if (!DOES_SUPPORT_THEME) {
 		id = "default";
 	}

src/theme/preInstalled.js

@@ -1,4 +1,7 @@
+import appSettings from "lib/settings";
 import { createBuiltInTheme } from "./builder";
+import { apply } from "./list";
+import { isDeviceDarkTheme } from "lib/systemConfiguration";
 
 const WHITE = "rgb(255, 255, 255)";
 const BLACK = "rgb(0, 0, 0)";
@@ -164,11 +167,52 @@ light.linkTextColor = "rgb(104, 103, 149)";
 light.borderColor = "rgb(153, 153, 153)";
 light.popupIconColor = "rgb(51, 62, 89)";
 
+const system = createBuiltInTheme("System");
+
+export function updateSystemTheme(darkTheme) {
+	if (darkTheme) {
+		system.primaryColor = "rgb(49, 49, 49)";
+		system.primaryTextColor = WHITE;
+		system.darkenedPrimaryColor = "rgb(29, 29, 29)";
+		system.secondaryColor = "rgb(37, 37, 37)";
+		system.secondaryTextColor = WHITE;
+		system.activeColor = "rgb(51, 153, 255)";
+		system.linkTextColor = "rgb(181, 180, 233)";
+		system.borderColor = "rgba(230, 230, 230, 0.2)";
+		system.popupIconColor = WHITE;
+
+		system.preferredEditorTheme = "ace/theme/clouds_midnight";
+
+		system.popupBackgroundColor = "rgb(49, 49, 49)";
+		system.popupTextColor = WHITE;
+		system.popupActiveColor = "rgb(255, 215, 0)";
+	} else {
+		system.darkenedPrimaryColor = "rgb(153, 153, 153)";
+		system.primaryColor = WHITE;
+		system.primaryTextColor = "rgb(51, 62, 89)";
+		system.secondaryColor = WHITE;
+		system.secondaryTextColor = "rgb(51, 62, 89)";
+		system.activeColor = "rgb(51, 153, 255)";
+		system.linkTextColor = "rgb(104, 103, 149)";
+		system.borderColor = "rgb(153, 153, 153)";
+		system.popupIconColor = "rgb(51, 62, 89)";
+
+		system.preferredEditorTheme = "ace/theme/crimson_editor";
+	}
+
+	if (appSettings.value.appTheme.toLowerCase() === "system") {
+		apply(system.id, true);
+	}
+}
+
+updateSystemTheme(await isDeviceDarkTheme());
+
 const custom = createBuiltInTheme("Custom");
 custom.autoDarkened = true;
 
 export default [
 	createBuiltInTheme("default", "dark", "free"),
+	system,
 	dark,
 	oled,
 	ocean,