Merge pull request #36505 from overleaf/mj-themed-url-field

[web] Enable dark mode url fields

GitOrigin-RevId: 97e820e773e9d1528a5e852f10fa31fab84a185b
This commit is contained in:
Mathias Jakobsen
2026-09-17 11:55:09 +00:00
committed by Copybot
parent 0ee4158abe
commit 1edb50de7b
2 changed files with 26 additions and 0 deletions
@@ -245,6 +245,30 @@ const commandTooltipTheme = EditorView.baseTheme({
'.ol-cm-command-tooltip-form': {
padding: '0 8px',
},
'&dark .ol-cm-command-tooltip-form .form-label': {
color: 'var(--content-secondary-dark)',
},
// Keep in sync with services/web/frontend/stylesheets/components/form.scss
// The overrides are needed because we theme the controls based on editor
// theme, not overall theme.
'&light .ol-cm-command-tooltip-form .form-control, &light .ol-cm-command-tooltip-form .form-control-wrapper':
{
'--input-field-color': 'var(--content-primary)',
'--input-field-bg': 'var(--bg-light-primary)',
'--input-field-border-color': 'var(--border-primary)',
'--input-placeholder-content': 'var(--content-placeholder)',
'--input-border-hover': 'var(--border-hover)',
'--input-field-content-disabled': 'var(--content-disabled)',
},
'&dark .ol-cm-command-tooltip-form .form-control, &dark .ol-cm-command-tooltip-form .form-control-wrapper':
{
'--input-field-color': 'var(--content-primary-dark)',
'--input-field-bg': 'var(--bg-dark-primary)',
'--input-field-border-color': 'var(--border-primary-dark)',
'--input-placeholder-content': 'var(--content-placeholder-dark)',
'--input-border-hover': 'var(--border-hover-dark)',
'--input-field-content-disabled': 'var(--content-disabled-dark)',
},
})
export const resolveCommandNode = (state: EditorState) => {
@@ -128,6 +128,7 @@
--form-select-option-disabled-color: var(--content-disabled-dark);
}
// Keep in sync with services/web/frontend/js/features/source-editor/extensions/command-tooltip.ts
@mixin light-input {
--input-field-color: var(--content-primary);
--input-field-bg: var(--bg-light-primary);
@@ -532,6 +533,7 @@ input[type='range'] {
input.form-control[type='text'],
input.form-control[type='search'],
input.form-control[type='number'],
input.form-control[type='url'],
textarea.form-control {
color: var(--input-field-color);
background-color: var(--input-field-bg);