pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-23 16:10:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update Ace Editor's theme, border, background, and add mode-aware styling (#8894)

Browse Source 
* 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>
This commit is contained in:
Rodrigo Nader
2026-01-06 09:32:29 -03:00
committed by GitHub
parent 2b39a66901
commit 409ac6a0ed
3 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/frontend/src/App.css
View File

@ -1,3 +1,4 @@
@import "./style/custom-ace-overrides.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

4
src/frontend/src/modals/codeAreaModal/index.tsx
View File

@ -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);

63
src/frontend/src/style/custom-ace-overrides.css Normal file
View File

@ -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;
}