Update GitHub Dark + test GitHub Dimmed #98

simurai · 2020-12-11T08:19:43Z

github.com now has an official dark mode. To keep this theme close to github.com, this PR does the following:

Move the existing GitHub Dark theme to a new repo -> github-vscode-theme-dark
Update GitHub Dark with the new colors. There is already a PR sync dark colors with new official GitHub dark theme #95 that we could try to merge into this one.
Use functional variables
Add initial version of GitHub Dimmed theme.
Finalize GitHub Dimmed theme.

Nice to have:

Automatically convert all rgba() colors from primer/primitives to #rrggbbaa. VS Code doesn't allow rgba() and falls back to red. Currently it uses this workaround but that isn't a great long-term solution.

The plan is: 1. Rename "GitHub Dark" to "GitHub SpaceGray" 2. Use new dark colors for "GitHub Dark"

Not sure if this is a better name, but it relates to what VS Code calls "uiTheme".

Co-Authored-By: Boris Krstic <[email protected]>

lutzroeder · 2020-12-11T13:34:46Z

For names, what about GitHub Gray instead of GitHub SpaceGray? The shorter name would be more consistent with the Light and Dark names which are short as well.

lutzroeder · 2020-12-11T13:37:15Z

The activity bar in the GitHub Dark screenshot uses the gray color. Should it switch to the new dark color as well?

simurai · 2020-12-11T14:38:00Z

For names, what about GitHub Gray instead of GitHub SpaceGray? The shorter name would be more consistent with the Light and Dark names which are short as well.

Yeah, GitHub Gray might be a good choice. 👍

The activity bar in the GitHub Dark screenshot uses the gray color. Should it switch to the new dark color as well?

Yes, right. I just updated the screenshots. Might still need some more tweaking.

mazhengcn · 2020-12-16T09:34:00Z

Something off the topic but I just wonder what is icon theme in the screenshot? @simurai

Thanks.

simurai · 2020-12-16T13:33:19Z

@mazhengcn Something off the topic but I just wonder what is icon theme in the screenshot?

It's the City Lights Icon package. It has an option where you can make the icons monochrome. Harder to differentiate, but a bit calmer. 😄

mazhengcn · 2020-12-16T14:40:50Z

@mazhengcn Something off the topic but I just wonder what is icon theme in the screenshot?

It's the City Lights Icon package. It has an option where you can make the icons monochrome. Harder to differentiate, but a bit calmer. 😄

Thanks!

keremciu · 2020-12-17T01:20:11Z

I had the idea of seeing same on browser and vscode, thanks for bringing consistency here, hope it would be merged soon 💯

keremciu · 2020-12-17T02:17:07Z

this PR solves many consistency problems but I wanted to give feedback while I already started to use this one.

I put an examle here for this file: https://github.com/keremciu/house-of-decks/blob/ws-implement/client/src/Components/Button.js

I could try help if it's possible to make this reach and JavaScript implementation more consistent

tejasag · 2020-12-25T11:19:24Z

I wanted to ask if the theme is synced with the official github dark mode, and if not, is there any eta?
Looking forward to it a lot! (:

nonameolsson · 2020-12-29T09:40:19Z

Looking forward to this update. Is there anything we can help with?

keremciu · 2021-01-03T17:16:10Z

I tried to update just by looking for JavaScript react highlighting differences.

keremciu@679cec8#diff-09ce39aad75bba2010ea6e7fb785187ec76b341be11d5f7f2cc6b83839a1b728

don't know if this is a sustainable way to make changes while I have no idea what GitHub uses for the interface :)

I can confirm that my react code highlighting works consistent with this change, it can be improved of course. if someone can help to try it out, I can go deeper :)

simurai · 2021-01-04T02:12:47Z

@tejasag, @nonameolsson, @Gameghostify It might will take a bit longer since we're still trying to improve the "dimmed" version.

But you can already test it with:

Download github-vscode-theme-1.1.5.vsix.zip
Unzip
Following the Install from a VSIX guide to install the VSIX.

Eventually I would delete it again since it won't get any updates.

larxx · 2021-01-04T02:18:38Z

@tejasag, @nonameolsson, @Gameghostify It might will take a bit longer since we're still trying to improve the "dimmed" version.

But you can already test it with:

Download github-vscode-theme-1.1.5.vsix.zip

Unzip

Following the Install from a VSIX guide to install the VSIX.

Eventually I would delete it again since it won't get any updates.

I just tried this one out and it looks so damn good! This theme is gonna take over 💯. Thank you so much for your hard work 🙏

simurai · 2021-01-04T03:45:49Z

@keremciu I tried to update just by looking for JavaScript react highlighting differences.

keremciu@679cec8#diff-09ce39aad75bba2010ea6e7fb785187ec76b341be11d5f7f2cc6b83839a1b728

Added it to this PR #100 including a couple screenshots to compare. I can spot changes to these "JSX tabs" like <StyledButton>, which is great. 👍 We can merge that after merging this PR.

kherock · 2021-01-04T19:49:52Z

@tejasag, @nonameolsson, @Gameghostify It might will take a bit longer since we're still trying to improve the "dimmed" version.

But you can already test it with:

Download github-vscode-theme-1.1.5.vsix.zip

Unzip

Following the Install from a VSIX guide to install the VSIX.

This build seems to work well except that additions are highlighted in red (and deletions in green) in the diff editor! ~~It doesn't seem like a bug in the @primer/primitives build being, and the light theme has the correct colors.~~ found the issue in my next comment below.

kherock · 2021-01-04T20:13:42Z

src/theme.js

+      "editorGutter.deletedBackground" : color.diff.deletion.border,
+
+      "diffEditor.insertedTextBackground": color.diff.addition.bg,
+      "diffEditor.removedTextBackground":  color.diff.deletion.bg,


These colors are stored as rgba() in the dark themes in @primer/primitives, but VSCode needs them to be in #RRGGBBAA form here. My VSCode defaults them to a very bright and opaque red or green on the dark modes.

👍 Yes, seems VS Code only allows the #RRGGBBAA format for transparency. When using rgba() it defaults to red:

Hmm.. seems that rgba() has slightly better browser support, so we might still wanna keep using it for @primer/primitives. For the VSCode theme we could try to convert it to #RRGGBBAA.

@kherock thanks for reporting this! Was just about to report it myself :)

Ok, it's currently fixed by wrapping the @primer/primitives color with a chroma(...).hex() that supports #RRGGBBAA:

But it could break anytime if @primer/primitives uses rgba() for any of the other colors. Would be better if we could convert all colors before generating the theme.

I'm not entirely sure if this Is the same issue, but the same thing occurs on the git popup in the editor.

@jeffgennari Yes.. thanks for spotting this. Should be fixed with 66bc8f0.

So we can use the `#RRGGBBAA` format that VS Code needs.

simurai and others added 9 commits December 10, 2020 16:24

Add SpaceGray theme

e0daad2

The plan is: 1. Rename "GitHub Dark" to "GitHub SpaceGray" 2. Use new dark colors for "GitHub Dark"

Rename style to mode

7d0cb6d

Not sure if this is a better name, but it relates to what VS Code calls "uiTheme".

Add "theme" parameter

7b13e6a

Rename primer to colors

aa18f7b

Update guide

e9adb70

Add SpaceGray colors

a355759

Indent

4000b65

Use new colors from @primer/primitives

1cf816a

sync dark colors with new official dark theme

2b069bf

Co-Authored-By: Boris Krstic <[email protected]>

simurai mentioned this pull request Dec 11, 2020

sync dark colors with new official GitHub dark theme #95

Closed

Invert Dark colors

39dcc73

simurai added 4 commits December 11, 2020 22:58

Tweak Dark colors

85fcede

Refactor

8dc2de5

Update Dark editorLineNumber

6285b33

Update Dark text colors

0c9ad08

Tweak Dark colors

ab5552d

simurai marked this pull request as ready for review December 14, 2020 08:10

simurai mentioned this pull request Dec 15, 2020

Add support for multiple color modes primer/primitives#18

Merged

10 tasks

simurai added 2 commits December 15, 2020 16:56

Add Dimmed theme

fede548

Update Dimmed border color

a3e467a

Bump Dimmed editor text

f424f98

simurai changed the title ~~Update GitHub Dark to match github.com~~ Update GitHub Dark theme Dec 17, 2020

simurai changed the title ~~Update GitHub Dark theme~~ Update GitHub Dark to match github.com Dec 17, 2020

Remove SpaceGray

3192fc6

simurai mentioned this pull request Dec 23, 2020

🐛 Fixed a syntax highlight problem #94

Closed

simurai added 3 commits December 24, 2020 15:04

Use all colors

7be7c47

Use functional variables

85a8669

Use more functional variables

3e9d9eb

kherock reviewed Jan 4, 2021

View reviewed changes

simurai added 3 commits January 5, 2021 11:56

Switch to chroma-js

dae606f

So we can use the `#RRGGBBAA` format that VS Code needs.

Convert rgba() to #RRGGBBAA

7cee89c

Fix textCodeBlock.background

66bc8f0

This was referenced Jan 7, 2021

Automatically convert colors to the #RRGGBBAA format #101

Closed

Update GitHub Dark to match github.com #102

Merged

simurai changed the title ~~Update GitHub Dark to match github.com~~ Update GitHub Dark + add GitHub Dimmed Jan 8, 2021

simurai marked this pull request as draft January 8, 2021 08:57

simurai changed the title ~~Update GitHub Dark + add GitHub Dimmed~~ Add GitHub Dimmed Jan 20, 2021

simurai merged commit 66bc8f0 into master Jan 20, 2021

simurai deleted the dark-and-spacegray branch January 20, 2021 03:16

simurai restored the dark-and-spacegray branch January 20, 2021 03:49

simurai deleted the dark-and-spacegray branch January 20, 2021 03:50

simurai changed the title ~~Add GitHub Dimmed~~ Update GitHub Dark + test GitHub Dimmed Jan 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update GitHub Dark + test GitHub Dimmed #98

Update GitHub Dark + test GitHub Dimmed #98

simurai commented Dec 11, 2020 •

edited

Loading

lutzroeder commented Dec 11, 2020

lutzroeder commented Dec 11, 2020

simurai commented Dec 11, 2020

mazhengcn commented Dec 16, 2020

simurai commented Dec 16, 2020

mazhengcn commented Dec 16, 2020

keremciu commented Dec 17, 2020

keremciu commented Dec 17, 2020

tejasag commented Dec 25, 2020

nonameolsson commented Dec 29, 2020

keremciu commented Jan 3, 2021

simurai commented Jan 4, 2021

larxx commented Jan 4, 2021

simurai commented Jan 4, 2021

kherock commented Jan 4, 2021 •

edited

Loading

kherock Jan 4, 2021

simurai Jan 5, 2021 •

edited

Loading

evamaxfield Jan 5, 2021

simurai Jan 5, 2021

jeffgennari Jan 6, 2021

simurai Jan 7, 2021

Update GitHub Dark + test GitHub Dimmed #98

Update GitHub Dark + test GitHub Dimmed #98

Conversation

simurai commented Dec 11, 2020 • edited Loading

lutzroeder commented Dec 11, 2020

lutzroeder commented Dec 11, 2020

simurai commented Dec 11, 2020

mazhengcn commented Dec 16, 2020

simurai commented Dec 16, 2020

mazhengcn commented Dec 16, 2020

keremciu commented Dec 17, 2020

keremciu commented Dec 17, 2020

tejasag commented Dec 25, 2020

nonameolsson commented Dec 29, 2020

keremciu commented Jan 3, 2021

simurai commented Jan 4, 2021

larxx commented Jan 4, 2021

simurai commented Jan 4, 2021

kherock commented Jan 4, 2021 • edited Loading

kherock Jan 4, 2021

Choose a reason for hiding this comment

simurai Jan 5, 2021 • edited Loading

Choose a reason for hiding this comment

evamaxfield Jan 5, 2021

Choose a reason for hiding this comment

simurai Jan 5, 2021

Choose a reason for hiding this comment

jeffgennari Jan 6, 2021

Choose a reason for hiding this comment

simurai Jan 7, 2021

Choose a reason for hiding this comment

simurai commented Dec 11, 2020 •

edited

Loading

kherock commented Jan 4, 2021 •

edited

Loading

simurai Jan 5, 2021 •

edited

Loading