GHES search box uses black text in dark themes (unreadable)

[mengesb]

Description

On GHES, the search box is unreadable in dark themes because the text is black. When highlighting the text is white and backgrounded by the themes color, so is visible then. On github.com, the text is white and readable, highlighting works the same.

Environment (if bug)

• Octotree version: 6.2.2
• Browser & version: Brave Version 1.18.70 (Chromium: 87.0.4280.101) and Chrome 87.0.4280.88
• OS & version: MacOS 10.15.7 (19H114)
• Screenshot, if any (drag an image here)

GHES:

github.com:

• Console error log below this line Brave emits no console errors, however Chrome does on github.com

github.com-1608242688634.log

There's an element difference between GHES and github.com for the search box

GHES:

<input type="text" class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field js-navigation-enable jump-to-field-active jump-to-dropdown-visible" data-hotkey="s,/" name="q" value="" placeholder="Search or jump to…" data-unscoped-placeholder="Search or jump to…" data-scoped-placeholder="Search or jump to…" autocapitalize="off" aria-autocomplete="list" aria-controls="jump-to-results" aria-label="Search or jump to…" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" spellcheck="false" autocomplete="off" aria-activedescendant="jump-to-suggestion-search-scoped">

github.com:

<input type="text" class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable" data-hotkey="s,/" name="q" value="" placeholder="Search or jump to…" data-unscoped-placeholder="Search or jump to…" data-scoped-placeholder="Search or jump to…" autocapitalize="off" aria-autocomplete="list" aria-controls="jump-to-results" aria-label="Search or jump to…" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" spellcheck="false" autocomplete="off">

Unsure if that's related at all or not.

[buunguyen]

Hi, thanks for reporting. What theme you're using? Does this happen with the "GitHub (default)" theme? Would also help tremendously if you can inspect the element with Chrome Dev Tool and trace what piece of CSS setting that black-ish color to the text. Thanks.

[mengesb]

What theme you're using? Theme: Solarized Dark

Theme: Solarized Dark On Chrome, GHES, when typing text in the box, it remains black, when I click out, it turns white On Chrome, github.com, when typing text in the box, it is white, when I click out, it remains white

Theme: Github (default) On Chrome, GHES, when typing text in the box, it is black and the bg color of the box is white, when I click out, it turns white and the bg color of the box turns black On Chrome, github.com, when typing text in the box, it is black and the bg color of the box is white, when I click out, it turns white and the bg color of the box turns black

So the default theme seems to be behaving correctly with colors and text.

Would also help tremendously if you can inspect the element with Chrome Dev Tool and trace what piece of CSS setting that black-ish color to the text. Thanks.

Could you give some instructions or link to me a help guide to give you exactly what you want?

[buunguyen]

Thanks for the information. It's helpful to know the default style works.

Could you give some instructions or link to me a help guide to give you exactly what you want?

Please see the red rectangle in the screenshot. You can use Chrome inspector, click on the search box when it has text, then look at the Styles tab, specifically look for the place that sets the text color to that unexpected black/blue-ish color.

[mengesb]

text is black; still selected in search box:

text is white, clicked out of search box with text:

[mengesb]

It looks like it's adding and deleting it sometimes in those segments.

[mengesb]

When I first load with no search text, I get:

Here's the text, but I had to note the strikethrough text (since copy/paste doesn't obey that)

injected stylesheet
html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) .Header .header-search-wrapper, html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) .Header .header-search-wrapper input, html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) .file-header {
    background: rgb(32, 32, 32) !important;
}
injected stylesheet
html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) .form-control, html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) .form-select {
    color: rgb(198, 198, 198);
    background-color: rgb(24, 24, 24); <=== strikethrough
    box-shadow: none;
    border-color: rgb(52, 52, 52);
}
injected stylesheet
html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) input, html.octotree-ghe[data-octotree-theme]:not([data-octotree-theme="sidebar"]) textarea {
    color: rgb(198, 198, 198); <=== strikethrough
}

Then I click into the search:

Can't copy text because it changes the focus and the text changes

[buunguyen]

Thanks for this. In the last picture, something overrides the "color" of .form-select, causing the strikethrough. If you scroll down that list, do you see anything having "color" not strikethrough?

[mengesb]

In .jump-to-field-active{} there was a color set there. When I unchecked it, and tested I saw the colors behave normally. Came from header-search.scss:109 ; only shows when selected in that search box

[buunguyen]

Thank you, this is very useful. Would you mind test a hot fix build before we release it to the store? If you don't mind, please send an email to support@octotree.io, we'll send you the build to test. Much appreciated.

[mengesb]

The version reports as 6.2.1, however yes it does work as expected in GHES. The text is legible when focused and not focused in the search box

... heh; then after going into the settings again the title says 6.2.3 =) ... guessing these little things will be solved on release

[buunguyen]

Great! Thanks for confirming that the fix works. We've just released to the stores, should be available soon.

[mengesb]

I uninstalled, and re-installed. verified that everything is in good working order. Thanks for the fantastic turn-around.