Translate: support dark theme in editor#4176
Conversation
Codecov Report❌ Patch coverage is 🚀 New features to boost your workflow:
|
|
Note that CodeMirror (autocomplete) is not inheriting here if we have an inverted color scheme. |
|
Nice work! Found minor issue in the theme selector - mind the missing border between the 2nd and the 3rd option when the 3rd option is selected: 
Some other observations:
|
Actually we decided to scratch that during the Pontoon call. Only the editor field is changing when changing the theme. |
Could you elaborate on that? What pre-commit checks? Could we move that to a separate PR? |
mathjazz
left a comment
mathjazz
left a comment
There was a problem hiding this comment.
Very well done!
Left some suggestions for minor improvements inline.
We'll also need to update the docs:
https://pontoon.mozilla.org/docs/localizer/users/?h=sett#appearance
| </span> | ||
| {% endmacro %} | ||
|
|
||
| {% macro editor_button(user, long_name=True) %} |
There was a problem hiding this comment.
Have you tried just using one macro for both widgets?
|
|
||
| .failed-checks .warning:before { | ||
| color: var(--grey-3); | ||
| color: var(--status-warning); |
There was a problem hiding this comment.
Nit: that will also require a docs screenshot update. 😅
https://pontoon.mozilla.org/docs/localizer/translate/#warnings
| border: 1px solid var(--main-border-1); | ||
| border-radius: 3px; |
There was a problem hiding this comment.
This will make the field look like on PROD and like the main input field:
| border: 1px solid var(--main-border-1); | |
| border-radius: 3px; | |
| border: none; |
| color: var(--editor-color); | ||
| float: left; | ||
| font-size: 14px; | ||
| height: 24px; |
There was a problem hiding this comment.
While we're at it, let's also fix the height to match the label:
| height: 24px; | |
| height: 26px; |
And for the buttons (.translationform .accesskeys .key), set it like this:
line-height: 24px;
width: 26px;
| </div> | ||
| {{ ThemeToggle.button(user) }} | ||
| <div class="field theme-field"> | ||
| <p class="theme-label">Main</p> |
There was a problem hiding this comment.
| <p class="theme-label">Main</p> | |
| <p class="theme-label">Main interface</p> |
There was a problem hiding this comment.
| <p class="theme-label">Main</p> | |
| <p class="theme-label">Main app</p> |
There was a problem hiding this comment.
In this case, also use "Match main interface/app" in the Editor widget.
3 participants
Fix #4001
dark-theme.css/light-theme.css: rework--editor-{background,color,readonly-background,selection-background,placeholder-color},--diff-*,--search-*,--tags-*, add--tags-string-color.TranslationForm.css/editFieldExtensions.css: wirecm-cursor,cm-dropCursor,cm-selectionBackground,cm-placeholder,.translationform .accesskey-inputto variables.FailedChecks.css: warning icon colorvar(--grey-3)tovar(--status-warning).Per-user editor theme override (
dark/light/match):UserProfile.editor_themeCharField, defaultmatch; migration0117_userprofile_editor_theme.POST /user/editor-theme/(toggle_editor_theme);user_editor_themetemplate helper for Jinja + Django;user_dataview returnseditor_theme.data-editor-themeon<body>inbase.html/allauth/layouts/base.html/translate.html.theme_toggle.editor_buttonmacro; split "Main" / "Editor" sections incontributors/settings.html; AJAX handler intheme-switcher.js.ThemeContextexposeseditorTheme;Editor.tsxapplies${editorTheme}-themeclass on.editorto re-scope CSS variables to the editor subtree.Tests in
pontoon/contributors/tests/test_views.pyfortoggle_editor_theme(valid choices, invalid value, missing value, login required)..github/workflows/backend.yml: install Node 24 (needed for npm-based pre-commit checks).