Editor Themes

editor/index.html

@@ -56,6 +56,7 @@
 		<script src="script/room_markers.js"></script>
 		<script src="script/find.js"></script>
 		<script src="script/localization.js"></script>
+		<script src="script/theme.js"></script>
 		<script src="script/event_manager.js"></script>
 		<script src="script/palette.js"></script>
 		<script src="script/color_picker.js"></script>

editor/script/editor.js

@@ -778,6 +778,9 @@ function start() {
 		iconUtils.LoadIconAnimated(elements[i]);
 	}
 
+	// theme
+	theme = new Theme('light');
+
 	// localization
 	localization = new Localization(urlParameters["lang"]);
 	Store.init(function () {
@@ -2941,6 +2944,7 @@ function openFindToolWithCurrentPaintCategory() {
 
 /* GAME TOOL */
 var gameTool;
+var theme;
 
 /* SOUND TOOLS */
 var tuneTool;

editor/script/theme.js

@@ -0,0 +1,44 @@
+function Theme(initialTheme) {
+    var self = this;
+    var currentTheme = 'light'
+
+    var themes = {
+        'light': {
+            '--bitsy-color-main-1': '#ffffff',
+            '--bitsy-color-main-2': '#6767b2',
+            '--bitsy-color-accent-1': '#e8e8ff',
+            '--bitsy-color-accent-2': '#ccccff',
+            '--bitsy-color-neutral-1': '#eee',
+            '--bitsy-color-neutral-2': '#888',
+        },
+        'dark': {
+            '--bitsy-color-main-1': '#1a1a1a',
+            '--bitsy-color-main-2': '#8c8cff',
+            '--bitsy-color-accent-1': '#2a2a4f',
+            '--bitsy-color-accent-2': '#3c3c6b',
+            '--bitsy-color-neutral-1': '#2e2e2e',
+            '--bitsy-color-neutral-2': '#aaaaaa',
+        },
+    }
+
+    this.GetCurrentTheme = function () {
+        return currentTheme;
+    }
+    this.GetCurrentThemeColors = function () {
+        return themes[currentTheme];
+    }
+    this.GetAvaliableThemes = function() {
+        return Object.keys(themes);
+    }
+    this.SetTheme = function(theme) {
+        if(Object.keys(themes).includes(theme)) {
+            currentTheme = theme;
+
+            // set theme colors
+            const rootEle = document.querySelector(':root');
+            Object.keys(themes[theme]).forEach((k) => {
+                rootEle.style.setProperty(k, themes[theme][k]);
+            });
+        }
+    }
+}

editor/script/tools/game.js

@@ -24,6 +24,9 @@ function makeGameTool() {
 		// game data
 		var showFontDataInGameData = false;
 
+		// editor theme
+		var avaliableThemes = theme.GetAvaliableThemes();
+
 		// tool settings
 		var languageList = localization.GetLanguageList();
 
@@ -247,6 +250,15 @@ function makeGameTool() {
 				});
 			}
 
+			var themeOptions = [];
+			for(var i = 0; i < avaliableThemes.length; i++) {
+				themeOptions.push({
+					text: avaliableThemes[i],
+					description: avaliableThemes[i],
+					value: avaliableThemes[i],
+				});
+			}
+
 			tool.menu.push({
 				control: "group",
 				text: { id: "editor_settings", text: "tool settings" },
@@ -293,6 +305,19 @@ function makeGameTool() {
 			});
 			tool.menu.pop({ control: "group" });
 
+			tool.menu.push({ control: "group"});
+			tool.menu.push({ control: "label", text: "change editor theme" });
+			tool.menu.push({
+				control: "select",
+				name: "editor_theme_select",
+				value: theme.GetCurrentTheme(),
+				options: themeOptions,
+				onchange: function(e) {
+					theme.SetTheme(e.target.value)
+				},
+			})
+			tool.menu.pop({ control: "group" });
+
 			tool.menu.pop({ control: "group" });
 		}
 

editor/style/bitsyEditorStyle.css

@@ -6,6 +6,7 @@
 	--bitsy-color-accent-2: #ccccff;
 	--bitsy-color-neutral-1: #eee;
 	--bitsy-color-neutral-2: #888;
+
 	--bitsy-space-xxs: 0.05rem;
 	--bitsy-space-xs: 0.125rem;
 	--bitsy-space-s: 0.25rem;
@@ -97,7 +98,7 @@ textarea {
 	background: black;
 	color: white;
 	resize: none;
-	border: none
+	border: none;
 	padding: var(--bitsy-space-s);
 	border-radius: var(--bitsy-space-xs);
 	flex-grow: 1;
@@ -149,7 +150,7 @@ input[type=text] {
 }
 
 input[type=text]:not([readonly]) {
-	color: black;
+	color: var(--bitsy-color-main-2);
 	background: var(--bitsy-color-neutral-1);
 	border-color: var(--bitsy-color-neutral-1);
 }