[FR] Editor - add compatibility for Autocomplete's popup menu when using dark Theme
HeveraletLaidCenx opened this issue · 2 comments
Feature Request
Problem Description
In Editor, when Autocomplete on typing
is turned on in the Editor settings
menu, and applied a dark-styled Theme, when typing, the autocomplete popup menu's style defaults to a light appearance, which is inconsistent with the global dark theme. This causes too much contrast, dazzling user's eyes.
Screenshots
![Firefox_Stylus_autocomplete_theme](https://private-user-images.githubusercontent.com/34192286/341264079-18786b00-62f6-48f3-ad46-b9f6386a9d91.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE3NDU2NzcsIm5iZiI6MTczMTc0NTM3NywicGF0aCI6Ii8zNDE5MjI4Ni8zNDEyNjQwNzktMTg3ODZiMDAtNjJmNi00OGYzLWFkNDYtYjlmNjM4NmE5ZDkxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTE2VDA4MjI1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJiYmVkODBjNTE1ODg1N2Q5ZTE4MTdjOWViOWJlNGE1MDA1NzZjMTI3MDk3ZWIxOWExMDJmYjU2ZGFjZjNlMzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.PRLQ2FtG1rVHZ5Ch4GsZG309yqYnD-hx_hd8y82rdz8)
The screenshot above shows the light-styled Autocomplete popup menu which is inconsistent with the dark-styled global Editor's Theme.
System Information
- OS: Windows 11 Pro N x64
- Browser: Firefox Developer Edition 128.0b5
- Stylus Version: 1.5.46
Expected solution
Are there any settings I haven't found that would improve this situation?
If not, is it possible to add a feature to change the style of the popup menu? Or simply add a basic dark theme for the popup menu to match the Editor's dark theme?
Until the new version is published the workaround is to add a new style with this code:
@-moz-document regexp("^\\w+-extension://[^/]+/edit.*") {
@media screen and (prefers-color-scheme: dark), dark {
.CodeMirror-hints {
background: #333;
}
.CodeMirror-hint {
color: var(--fg);
}
}
}
Thanks! I just tried it and this solution works fine!
Further
And some additional selector and properties may help for a better appearance like these:
.CodeMirror-hints { /* the whole popup's border */
border: 1px solid var(--your-border-color);
}
li.CodeMirror-hint-active { /* the current selected active highlight item's style */
background: var(--your-active-item-bg-color);
color: var(--your-active-item-fg-color);
}
Result
![Firefox_Stylus_autocomplete_style_modified](https://private-user-images.githubusercontent.com/34192286/341308911-0f396a3e-aa74-47d7-b03c-45acfd04495f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE3NDU2NzgsIm5iZiI6MTczMTc0NTM3OCwicGF0aCI6Ii8zNDE5MjI4Ni8zNDEzMDg5MTEtMGYzOTZhM2UtYWE3NC00N2Q3LWIwM2MtNDVhY2ZkMDQ0OTVmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTE2VDA4MjI1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNiYzI0NDJkMTcwNzc2YTE4YzlhYmUxMDdkNTQyZWM1YTY1ODQ0NzgzZDlmMWU5M2EzZGZiNTMxOTQ2YTUyY2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.g6jOLDTQePojgCAmZV0WM9-OJmQ_xaAwI_fDFBK-ZwI)