feat. make the system theme default (Closes #746)

Author: RohitKushvaha01

src/lib/settings.js

@@ -5,6 +5,8 @@ import Url from "utils/Url";
 import helpers from "utils/helpers";
 import constants from "./constants";
 import lang from "./lang";
+import { getSystemEditorTheme } from "theme/preInstalled";
+import { isDeviceDarkTheme } from "./systemConfiguration";
 
 /**
  * @typedef {object} fileBrowserSettings
@@ -182,8 +184,8 @@ class Settings {
 		this.settingsFile = Url.join(DATA_STORAGE, "settings.json");
 
 		if (!IS_FREE_VERSION) {
-			this.#defaultSettings.appTheme = "ocean";
-			this.#defaultSettings.editorTheme = "ace/theme/dracula";
+			this.#defaultSettings.appTheme = "system";
+			this.#defaultSettings.editorTheme = getSystemEditorTheme(isDeviceDarkTheme());
 		}
 
 		this.#initialized = true;

src/lib/systemConfiguration.js

@@ -54,12 +54,5 @@ export function getSystemConfiguration() {
 }
 
 export function isDeviceDarkTheme() {
-	return new Promise((resolve, reject) => {
-		try {
-			var isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-			resolve(isDark);
-		} catch (e) {
-			resolve(false);
-		}
-	});
+	return window.matchMedia("(prefers-color-scheme: dark)").matches
 }

src/palettes/changeTheme/index.js

@@ -58,12 +58,12 @@ function generateHints(type) {
 	});
 }
 
-let previousDark = await isDeviceDarkTheme();
+let previousDark = isDeviceDarkTheme();
 const updateTimeMs = 2000;
 
 let intervalId = setInterval(async () => {
 	if (appSettings.value.appTheme.toLowerCase() === "system") {
-		const isDark = await isDeviceDarkTheme();
+		const isDark = isDeviceDarkTheme();
 		if (isDark !== previousDark) {
 			previousDark = isDark;
 			updateSystemTheme(isDark);
@@ -81,7 +81,7 @@ function onselect(value) {
 		if (!intervalId) {
 			intervalId = setInterval(async () => {
 				if (appSettings.value.appTheme.toLowerCase() === "system") {
-					const isDark = await isDeviceDarkTheme();
+					const isDark = isDeviceDarkTheme();
 					if (isDark !== previousDark) {
 						previousDark = isDark;
 						updateSystemTheme(isDark);

src/theme/list.js

@@ -14,7 +14,7 @@ let themeApplied = false;
 function init() {
 	themes.forEach((theme) => add(theme));
 	(async () => {
-		updateSystemTheme(await isDeviceDarkTheme());
+		updateSystemTheme(isDeviceDarkTheme());
 	})();
 }
 

src/theme/preInstalled.js

@@ -171,6 +171,14 @@ light.popupIconColor = "rgb(51, 62, 89)";
 
 const system = createBuiltInTheme("System");
 
+export function getSystemEditorTheme(darkTheme){
+	if(darkTheme){
+		return "ace/theme/clouds_midnight"
+	}else{
+		return "ace/theme/crimson_editor"
+	}
+}
+
 export function updateSystemTheme(darkTheme) {
 	if (darkTheme) {
 		system.primaryColor = "rgb(49, 49, 49)";
@@ -183,8 +191,6 @@ export function updateSystemTheme(darkTheme) {
 		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)";
@@ -201,26 +207,27 @@ export function updateSystemTheme(darkTheme) {
 		system.borderColor = "rgb(153, 153, 153)";
 		system.popupIconColor = "rgb(51, 62, 89)";
 
-		system.preferredEditorTheme = "ace/theme/crimson_editor";
-
 		system.popupBackgroundColor = WHITE;
 		system.popupTextColor = BLACK;
 		system.popupActiveColor = "rgb(255, 215, 0)";
 	}
 
-	if (appSettings.value.appTheme.toLowerCase() === "system") {
+	system.preferredEditorTheme = getSystemEditorTheme(darkTheme)
+
+	if (appSettings !== undefined && appSettings.value !== undefined && appSettings.value.appTheme !== undefined && appSettings.value.appTheme.toLowerCase() === "system") {
 		apply(system.id, true);
 	}
+	
 }
 
-updateSystemTheme(await isDeviceDarkTheme());
+updateSystemTheme(isDeviceDarkTheme());
 
 const custom = createBuiltInTheme("Custom");
 custom.autoDarkened = true;
 
 export default [
-	createBuiltInTheme("default", "dark", "free"),
 	system,
+	createBuiltInTheme("default", "dark", "free"),
 	dark,
 	oled,
 	ocean,