From 409ac6a0ed486dfe39780aa32d893e9b259da5e4 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Tue, 6 Jan 2026 09:32:29 -0300
Subject: [PATCH] feat: update Ace Editor's theme, border, background, and add
 mode-aware styling (#8894)

* Polish Ace editor: theme, border, background, and mode-aware styling for Monokai and GitHub themes

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* remove unnecessary themes

* Fixed active line indicator not moving

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
---
 src/frontend/src/App.css                      |  1 +
 .../src/modals/codeAreaModal/index.tsx        |  4 +-
 .../src/style/custom-ace-overrides.css        | 63 +++++++++++++++++++
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/style/custom-ace-overrides.css

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 9e4dee0996..993c022899 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -1,3 +1,4 @@
+@import "./style/custom-ace-overrides.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 05a459a76e..544d394e2e 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -6,7 +6,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/ext-searchbox";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/theme-twilight";
+import "ace-builds/src-noconflict/theme-monokai";
 import { useEffect, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import type ReactAce from "react-ace/lib/ace";
@@ -221,7 +221,7 @@ export default function CodeAreaModal({
               fontSize={14}
               showGutter
               enableLiveAutocompletion
-              theme={dark ? "twilight" : "github"}
+              theme={dark ? "monokai" : "github"}
               name="CodeEditor"
               onChange={(value) => {
                 setCode(value);
diff --git a/src/frontend/src/style/custom-ace-overrides.css b/src/frontend/src/style/custom-ace-overrides.css
new file mode 100644
index 0000000000..e1686c9cdc
--- /dev/null
+++ b/src/frontend/src/style/custom-ace-overrides.css
@@ -0,0 +1,63 @@
+/* Custom override for Ace Editor GitHub Dark theme background */
+.ace-github-dark,
+.ace-github-dark .ace_scroller {
+  background-color: #111 !important;
+}
+
+/* Custom override for Ace Editor Monokai theme background - only in dark mode */
+.dark .ace-monokai,
+.dark .ace-monokai .ace_scroller {
+  background-color: #141417 !important;
+}
+
+/* Monokai gutter (sidebar/line numbers) */
+.ace-monokai .ace_gutter,
+.ace-monokai .ace_gutter-active-line {
+  background: #181818 !important;
+  color: #555 !important;
+}
+
+/* Strongest override for Monokai selected line highlight */
+.ace-monokai .ace_marker-layer .ace_active-line,
+.ace-monokai .ace_active-line,
+.ace-monokai .ace_gutter-active-line,
+.ace-monokai .ace_marker-layer .ace_selected-word {
+  background-color: #181818 !important;
+  background: #181818 !important;
+  box-shadow: none !important;
+  border: 0px !important;
+}
+
+.dark .ace-monokai .ace_gutter,
+.dark .ace-monokai .ace_gutter-active-line {
+  background: #1a1a1e !important;
+  color: #555 !important;
+}
+
+.dark .ace-monokai .ace_marker-layer .ace_active-line,
+.dark .ace-monokai .ace_active-line,
+.dark .ace-monokai .ace_gutter-active-line,
+.dark .ace-monokai .ace_marker-layer .ace_selected-word {
+  background-color: #181818 !important;
+  background: #181818 !important;
+  box-shadow: none !important;
+  border: 1px !important;
+}
+
+.dark .ace-monokai .ace_content,
+.ace-github .dark .ace-monokai .ace_gutter,
+.ace-github .dark .ace-monokai,
+.ace-github {
+  border: 1px solid rgba(255, 255, 255, 0.18) !important;
+  box-shadow: none !important;
+}
+
+.ace-github,
+.ace-github .ace_scroller {
+  background-color: #fafbfc !important;
+}
+
+.ace-github {
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: none !important;
+}