openstyles/stylus

[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

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