Support for Github Darkmode #3798

Also, this:

OH MY OMG OMG. So cool

@fregante this is going to be real fun.....

This custom CSS makes it work in both light and dark mode:

.dashboard .js-all-activity-header + div {
    background-color: var(--color-bg-canvas);
    border-color: var(--color-border-primary);
}

Go to the extension settings to apply that.

EDIT: submitted #3801 which fixes this particular issue. There may be other problems though.

The best way to go is to use the CSS variables GitHub is now using, here's a list.

https://primer.style/primitives/

Also this

The best way to go is to use the CSS variables GitHub is now using, here's a list.

https://primer.style/primitives/

Best way shouldn't break every enterprise user out there.

@busches var(--property, fallback)

Would this work?

.dashboard .js-all-activity-header + div {
    background-color: var(--color-bg-canvas, #fff);
    border-color: var(--color-border-primary, var(--github-border-color));
}

Also this for the reaction border colors:

button.reaction-summary-item {
    border-top-color: var(--color-border-primary, rgb(225, 228, 232));
    border-bottom-color: var(--color-border-primary, rgb(225, 228, 232));
}

This custom CSS makes it work in both light and dark mode:

.dashboard .js-all-activity-header + div {
    background-color: var(--color-bg-canvas);
    border-color: var(--color-border-primary);
}

Go to the extension settings to apply that.

EDIT: submitted #3801 which fixes this particular issue. There may be other problems though.

Works like a charm.Kudos :heart:

Both issues have been fixed by #3801 and are being released to Chrome and Firefox.

I’ll leave this issue open so you can report any new issues you see in the next few days

It seems that pinned issues' border is broken either.

The divider line in the activity feed is still whit in dark mode.

The text between backticks that's formatted by RGH should have a colored background like in light mode:

@cheap-glitch Nice catch!

(And I remember seeing unparsed backticks some time ago, but that's another topic though)

Anyone else is seeing this weird box-shadow thingy? It only appears on repo root pages. Screenshot taken in Firefox on Arch Linux with RGH disabled: The faulty element:

<div class="d-none d-lg-block mt-6 mr-3 Popover top-0 right-0 box-shadow-medium col-3"></div>

This might be a GitHub bug since it only appears when Dark mode is enabled.

I do see the element in the markup but since it's height: 0 it doesn't appear on screen (Chrome, extension disabled).

Looks like this has been fixed by #3801 Looking great on FF Thanks Devs

A few more issues on conversation lists:

• own username’s border is too bright

<img width="444" alt="Screen Shot 2020-12-14 at 20 48 30" src="https://user-images.githubusercontent.com/1402241/102157600-c4cb6500-3e4d-11eb-8c30-0e0b93ba4552.png">

• conflicts icon is too bright

<img width="388" alt="Screen Shot 2020-12-14 at 20 42 18" src="https://user-images.githubusercontent.com/1402241/102157607-c5fc9200-3e4d-11eb-98c7-52e354f722e2.png">

• the "draft PR" icon should not be so bright

<img width="475" alt="Screen Shot 2020-12-14 at 20 59 45" src="https://user-images.githubusercontent.com/1402241/102158395-5daeb000-3e4f-11eb-8441-dd88643bde27.png">

And this in conversations:

• the reaction avatars should not have a border, that's meant to be "invisible"

<img width="250" alt="Screen Shot 2020-12-14 at 20 51 04" src="https://user-images.githubusercontent.com/1402241/102157801-268bcf00-3e4e-11eb-8f59-56415899fe19.png">

Looks like nobody noticed anything new. Closing this! Thanks everyone for reporting!