diff --git a/assets/theme.svg b/assets/theme.svg
new file mode 100644
index 0000000..f2f31ac
--- /dev/null
+++ b/assets/theme.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 36.495 36.495" xml:space="preserve">
+<g>
+	<path d="M16.22,23.714l-4.85-4.848c0,0,17.822-17.855,19.252-18.787c0,0,2.465-0.664,2.615,1.855
+		C31.49,5.112,16.22,23.714,16.22,23.714z"/>
+	<path d="M4.48,36.495c0,0-0.682-5.465,4.374-5.465c5.058,0,6.185-6.133,6.185-6.133l-4.85-4.851
+		C-0.672,24.827,4.48,36.495,4.48,36.495z"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/Editor.css b/src/renderer/Editor.css
index 1545e40..9ccd9ec 100644
--- a/src/renderer/Editor.css
+++ b/src/renderer/Editor.css
@@ -92,6 +92,8 @@
 .Editor-toolbar img {
   width: 100%;
   height: 100%;
+  width: 20px;
+  height: 20px;
   transition: filter 0.25s;
   /* Fix other filter variables so transition is directly from black to blue: */
   filter: invert(0%) sepia(100%) hue-rotate(180deg) saturate(0);
diff --git a/src/renderer/Editor.tsx b/src/renderer/Editor.tsx
index 4af4d76..427c786 100644
--- a/src/renderer/Editor.tsx
+++ b/src/renderer/Editor.tsx
@@ -15,6 +15,17 @@ import zoomOutSvg from '../../assets/zoom-out.svg';
 import startRobot from '../../assets/start-robot.svg';
 import stopRobot from '../../assets/stop-robot.svg';
 import keyboardKeySvg from '../../assets/keyboard-key.svg';
+import themeSvg from '../../assets/theme.svg';
+
+import 'ace-builds/src-noconflict/theme-chrome';
+import 'ace-builds/src-noconflict/theme-clouds';
+import 'ace-builds/src-noconflict/theme-dawn';
+import 'ace-builds/src-noconflict/theme-dreamweaver';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-tomorrow_night';
+import 'ace-builds/src-noconflict/theme-clouds_midnight';
+import 'ace-builds/src-noconflict/theme-ambiance';
+
 import './Editor.css';
 
 /**
@@ -38,6 +49,7 @@ const STATUS_TOOLTIPS: { [k in EditorContentStatus]: string } = {
   extDirty:
     'The code that will be uploaded to the robot was last changed in an external program.',
 };
+
 /**
  * Content of the editor status indicator (next to the file name).
  */
@@ -47,6 +59,20 @@ const STATUS_TEXT: { [k in EditorContentStatus]: string } = {
   extDirty: 'Externally modified',
 };
 
+/**
+ * Color themes for the ACE code editor.
+ */
+const ACE_THEMES = {
+  dawn: 'Dawn',
+  chrome: 'Chrome',
+  clouds: 'Clouds',
+  dreamweaver: 'Dreamweaver',
+  monokai: 'Monokai',
+  tomorrow_night: 'Tomorrow Night',
+  clouds_midnight: 'Clouds Midnight',
+  ambiance: 'Ambiance',
+};
+
 /**
  * Component holding the Ace editor and editor toolbar.
  * @param props - props
@@ -141,6 +167,12 @@ export default function Editor({
     setFontSize((old) => old + (increase ? 1 : -1));
   };
 
+  const [theme, setTheme] = useState('dawn'); // Default theme
+  const handleThemeChange = (newTheme: string) => {
+    const cleanTheme = newTheme.replace('ace/theme/', '');
+    setTheme(cleanTheme);
+  };
+
   return (
     <div
       className={`Editor${
@@ -239,6 +271,17 @@ export default function Editor({
             <img src={keyboardKeySvg} alt="Toggle keyboard controls" />
           </button>
         </div>
+        <div className="Editor-toolbar-group">
+          <img src={themeSvg} alt="Change Theme" />
+          <select
+            onChange={(e) => handleThemeChange(`ace/theme/${e.target.value}`)}
+            name="Editor-toolbar-opmode"
+          >
+            {Object.entries(ACE_THEMES).map(([themeKey, themeName]) => (
+              <option value={themeKey}>{themeName}</option>
+            ))}
+          </select>
+        </div>
         <div className="Editor-toolbar-group">
           <label className="Editor-tbopmode" htmlFor="Editor-toolbar-opmode">
             OpMode:
@@ -285,6 +328,7 @@ export default function Editor({
           <span>Keyboard input sent to robot &mdash; disable to edit code</span>
         </div>
         <AceEditor
+          theme={theme}
           fontSize={fontSize}
           style={{ width: '100%', height: '100%' }}
           mode="python"