This is an automated email from the ASF dual-hosted git repository. sadpandajoe pushed a commit to branch fix-sqllab-dark-selected-word in repository https://gitbox.apache.org/repos/asf/superset.git
commit 5c37d178f808c639e7462e1ef4a01e976efcdcf0 Author: sadpandajoe <[email protected]> AuthorDate: Thu Jul 23 23:38:19 2026 +0000 fix(sqllab): make dark-theme occurrence highlight readable The Ace editor uses the light github theme with token-based CSS overrides for dark mode, but .ace_selected-word (the marker on every other occurrence of a selected token) was left at the theme default near-white box. In dark mode the recolored token glyphs became unreadable on it. Override .ace_selected-word to reuse the dark-aware colorEditorSelection token, mirroring the existing .ace_selection and completion-highlight overrides. Light theme is unaffected. Co-Authored-By: Claude Opus 4.8 <[email protected]> --- .../components/AsyncAceEditor/AsyncAceEditor.test.tsx | 14 ++++++++++++++ .../src/components/AsyncAceEditor/index.tsx | 18 ++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx index 646c1f3bd8a..9e40c0f29cd 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx @@ -30,6 +30,7 @@ import { JsonEditor, ConfigEditor, aceCompletionHighlightStyles, + aceSelectedWordStyles, } from '.'; import type { AceModule, AsyncAceEditorOptions } from './types'; @@ -55,6 +56,19 @@ test('themes the autocomplete completion highlight from the theme', () => { expect(styles).toContain(supersetTheme.colorPrimaryText); }); +test('themes the selected-word occurrence markers from the theme', () => { + // The light `github` theme hardcodes a near-white box for the markers Ace + // paints on every other occurrence of the selected token, which makes the + // recolored token glyphs unreadable in dark mode. The shared editor overrides + // the marker to reuse the dark-aware selection color so it stays legible. + const { styles } = aceSelectedWordStyles(supersetTheme); + + expect(styles).toContain('.ace_selected-word'); + expect(styles).toContain( + supersetTheme.colorEditorSelection ?? supersetTheme.colorPrimaryBgHover, + ); +}); + test('SQLEditor uses fontFamilyCode from theme', async () => { const ref = createRef<AceEditor>(); const { container } = render(<SQLEditor ref={ref as React.Ref<never>} />); diff --git a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx index 425db253f89..97f2fcded80 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx @@ -126,6 +126,22 @@ export const aceCompletionHighlightStyles = (token: SupersetTheme) => css` } `; +/** + * Theme-aware styling for the "selected word" markers Ace paints on every other + * occurrence of the currently selected token. The light `github` theme hardcodes + * a near-white box (`rgb(250,250,255)`); in dark mode the recolored token glyphs + * sit on it unreadably. Reuse the same dark-aware selection color as + * `.ace_selection` so the markers stay legible in every theme. + */ +export const aceSelectedWordStyles = (token: SupersetTheme) => css` + .ace_editor .ace_marker-layer .ace_selected-word { + background-color: ${ + token.colorEditorSelection ?? token.colorPrimaryBgHover + } !important; + border: 1px solid ${token.colorBorder} !important; + } +`; + /** * Get an async AceEditor with automatical loading of specified ace modules. */ @@ -394,6 +410,8 @@ export function AsyncAceEditor( } !important; } + ${aceSelectedWordStyles(token)} + /* Improve active line highlighting */ .ace_editor .ace_active-line { background-color: ${token.colorPrimaryBg} !important;
