Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme dropdown is difficult to read when using 'Revert Dark Theme' CSS #433

Closed
EvilJackCarver opened this issue Aug 3, 2019 · 2 comments

Comments

@EvilJackCarver
Copy link

@EvilJackCarver EvilJackCarver commented Aug 3, 2019

The dropdown menus on tweets are very difficult to read when using night-mode with the 'revert dark theme' CSS tweak. The color key in revert-dark-theme.css is set to #292F33.

image

I was able to correct this (temporarily) by going into the element inspector and editing html.dark .dropdown-menu a:not(:hover):not(:focus) to #fff (the element inspector says that's line 517 of revert-dark-theme.css). However, I'm not proficient enough in CSS to be confident in putting that tweak in my Custom CSS slot.

The text is legible when highlighted.

image

@tdeary

This comment has been minimized.

Copy link

@tdeary tdeary commented Aug 22, 2019

Also having this bug. Editing the CSS in the inspector temporarily fixes it as @EvilJackCarver said, but putting the same snippet into the custom CSS does nothing. I tried editing other things in the custom CSS too and it seems like the dark revert stylesheet might be overwriting the changes in custom CSS.

Edit: I did some more testing and it seems like that's what's happening. When I overwrite something that's not edited by the dark theme revert, like changing the usernames to red for example, it works fine. But when overwriting something that is edited by it, the changes flash for a second and then revert. See this GIF showing this where I edited column headers to have a red background color:
btd

@ping

This comment has been minimized.

Copy link

@ping ping commented Nov 17, 2019

I was able to fix this for myself with the snippet below in custom css. Tested on FireFox.

/* fix text color */
htm.dark .dropdown-menu .non-selectable-item
, html.dark .dropdown-menu .js-dropdown-content a:not(:hover):not(:focus)
, html.dark .dropdown-menu .js-dropdown-content .non-selectable-item { color: #e1e8ed; }
/* fix background color */
html.dark .dropdown-menu { background-color: #292F33; }
@eramdam eramdam closed this in 8157f0d Nov 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.