Introduce light+dark theme via use of @primer/primitives by paramaggarwal · Pull Request #4 · primer/github-vscode-theme

paramaggarwal · 2020-04-23T16:09:32Z

Automatic dark theme generation - works beautifully!
Imported color values rather than hard-coded values.
More readable values like colors.red[3].

Pending:

Values that do not use Primer Colors are not inverting correctly. This is a great reason now to enforce use of Primer colors everywhere.

Light

Dark

System

(fixes #3)

And also auto-generate dark theme.

paramaggarwal

Added some comments to explain the thought process/plan.

paramaggarwal · 2020-04-23T16:16:25Z

    "foreground": "#444d56",
    "descriptionForeground": "#6a737d",
    "errorForeground": "#cb2431",
-


The reason these lines got removed is because this file is now auto-generated. I have intentionally not modified any theme config/colors as I wanted this PR to purely focus on auto-generation first.

paramaggarwal · 2020-04-23T16:17:28Z

+  } else if (name === "white") {
+    darkColors.black = val;
+  } else {
+    darkColors[name] = [...val].reverse();


This is the key part. The colors array go from light to dark shades. For the dark theme, we simply reverse the ordering. This works surprisingly well!

paramaggarwal · 2020-04-23T16:17:53Z

+const fs = require("fs");
+const { colors } = require("@primer/primitives");
+
+const getTheme = require("./theme");


The theme shall reside in this one single place and it references the Primer primitives rather than hardcoding any colors.

paramaggarwal · 2020-04-23T16:18:30Z

+		"@primer/primitives": "^2.0.1"
+	},
+	"scripts": {
+		"build": "node src/index.js"


The script to auto-generate the two themes. This can be hooked into a prepublish step.

paramaggarwal · 2020-04-23T16:18:43Z

 		"publisherId": "7c1c19cd-78eb-4dfb-8999-99caf7679002"
+	},
+	"devDependencies": {
+		"@primer/primitives": "^2.0.1"


The source of our raw color values.

paramaggarwal · 2020-04-23T16:25:09Z

+  return {
+    name: name,
+    colors: {
+      focusBorder: colors.blue[4],


I had written a script to reverse-engineer the color reference from the underlying hardcoded hex string. Also, I have verified that the output theme config is exactly the same as before.

paramaggarwal · 2020-04-23T16:50:11Z

There are total 20 color values that do not have a direct mapping to the colors in Primer Primitives. I have started compiling a few of the suggested mappings:

button.background: #159739 -> #34d058 from colors.green[4]
button.hoverBackground: #138934 -> #22863a from colors.green[6]
list.hoverBackground: #ebf0f4 -> #dbedff from colors.blue[1]
list.inactiveSelectionBackground: #e8eaed -> #fafbfc from colors.gray[0]
list.activeSelectionBackground: #e2e5e9 -> #c8e1ff from colors.blue[2]
activityBar.activeBorder: #f9826c -> #fdaeb7 from colors.red[2]
tab.activeBorderTop: #f9826c -> #fdaeb7 from colors.red[2]

simurai

This is awesome.. 😻 ❤️ Also thanks for explaining everything. 🙇

There are total 20 color values that do not have a direct mapping to the colors in Primer Primitives.

Yeah, some are custom colors that we started to use in https://github.com/primer/css but aren't part of the "system" yet.

we might need the color npm module to make some slight darken(), lighten() operations on the raw color values.

Sometimes no color from the scale made sense. Like when hovering, it should only change a tiny bit but not as much as the next number in the scale. Having color functions would be nice. 👍

we simply reverse the ordering. This works surprisingly well!

Indeed it does. Although I wonder if hand tweaking the colors, here and there, could improve it even more? 🤔 Would something like the following be possible?

If only one color defined: scope: colors.blue[4], -> inverse for dark
If 2 colors defined: scope: { colors.blue[4], colors.blue[3] }, -> first is for light, second is for dark

That would allow to keep the scopes in sync, auto-inverse colors, but still be able to hand-tweak them if needed.

Co-Authored-By: simurai <simulus@gmail.com>

simurai · 2020-04-24T11:14:43Z

btw. sorry, this PR now has a merge conflict since these 3 scopes got added.

Update: Should be fixed.

Initially added with https://github.com/primer/github-vscode-theme/pull/6/files

paramaggarwal · 2020-04-24T16:14:19Z

I like all the suggestions.

For the colors that don't exist directly in the color system, will use the lighten(), darken() approach. I could find the raw colors here.
The ability to manually specify dark and light variants will be nice - will implement this.

simurai · 2020-04-27T00:54:21Z

For the colors that don't exist directly in the color system, will use the lighten(), darken() approach. I could find the raw colors here.

No worries if converting the hex values into lighten()/darken() are hard to figure out. I just "randomly" tweaked them in Chrome's DevTools, so might not be easy to backwards-engineer them all the time. I can give it a try too. And it's also ok if they don't stay 100% the same. It's often just a "bit darker than the background".

paramaggarwal · 2020-04-27T03:37:31Z

✅ - ability to specify a manual mapping of colors pick({ light: XXX, dark: YYY }).
✅ - auto generate color by flipping luminance in HSL value for out-of-theme colors.
✅ - Added npm start to regenerate the theme files when a color value is modified.
✅ - Updated README with steps.

An approach that I found to create dark colors automatically is to use the HSL version and then flip the L value. If L is 10% in light, then the dark version will have 90%. This works well.

I am using this theme now and love it. One thing that I like about this PR is that it does not touch any original color value at all from light.json and the dark.json theme is completely auto-generated!

simurai · 2020-04-27T11:32:45Z

An approach that I found to create dark colors automatically is to use the HSL version and then flip the L value. If L is 10% in light, then the dark version will have 90%. This works well.

Nice! I guess with darken/lighten it's probably not needed that often since most of these colors are small variations. But still good to have as a fallback. 👍

One thing that I like about this PR is that it does not touch any original color value at all from light.json and the dark.json theme is completely auto-generated!

Yep, 0 regressions. 💥

Ok, I think this PR is good to merge. We can polish it more in follow-up PRs. Thanks for getting this up and running in no time. ❤️ 🙇

paramaggarwal · 2020-04-27T14:14:40Z

Thanks! 😊

simurai · 2020-05-08T02:17:27Z

...and published to the Marketplace. 🎉 /cc @paramaggarwal

paramaggarwal · 2020-05-08T02:48:16Z

Wow! Great news @simurai!

Introduce theme generation to enforce use of Primer Colors

4fa5344

And also auto-generate dark theme.

joelhawksley assigned simurai Apr 23, 2020

joelhawksley added the fr-skip label Apr 23, 2020

paramaggarwal commented Apr 23, 2020

View reviewed changes

simurai removed the fr-skip label Apr 24, 2020

simurai reviewed Apr 24, 2020

View reviewed changes

Comment thread package.json Outdated

make VS Code recognize it as a "dark" theme

2e836b3

Co-Authored-By: simurai <simulus@gmail.com>

simurai added 2 commits April 24, 2020 20:33

Merge branch 'master' into pr/4

3477d47

Add statusBar colors

66de64e

Initially added with https://github.com/primer/github-vscode-theme/pull/6/files

paramaggarwal added 4 commits April 27, 2020 08:12

Add hook for manually specifying colors when needed

8fb0d72

Add auto-build when the theme is edited

d5619b1

Update README.md

d00479b

Use HSL luminance for out of theme colors

295430a

split into individual files

7885072

simurai approved these changes Apr 27, 2020

View reviewed changes

simurai merged commit 5e2cb4a into primer:master Apr 27, 2020

Conversation

paramaggarwal commented Apr 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Light

Dark

System

Uh oh!

paramaggarwal left a comment

Choose a reason for hiding this comment

Uh oh!

paramaggarwal Apr 23, 2020

Choose a reason for hiding this comment

Uh oh!

paramaggarwal Apr 23, 2020

Choose a reason for hiding this comment

Uh oh!

paramaggarwal Apr 23, 2020

Choose a reason for hiding this comment

Uh oh!

paramaggarwal Apr 23, 2020

Choose a reason for hiding this comment

Uh oh!

paramaggarwal Apr 23, 2020

Choose a reason for hiding this comment

Uh oh!

paramaggarwal Apr 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paramaggarwal commented Apr 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simurai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

simurai commented Apr 24, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

paramaggarwal commented Apr 24, 2020

Uh oh!

simurai commented Apr 27, 2020

Uh oh!

paramaggarwal commented Apr 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simurai commented Apr 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

paramaggarwal commented Apr 27, 2020

Uh oh!

simurai commented May 8, 2020

Uh oh!

paramaggarwal commented May 8, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

paramaggarwal commented Apr 23, 2020 •

edited

Loading

paramaggarwal Apr 23, 2020 •

edited

Loading

paramaggarwal commented Apr 23, 2020 •

edited

Loading

simurai commented Apr 24, 2020 •

edited

Loading

paramaggarwal commented Apr 27, 2020 •

edited

Loading

simurai commented Apr 27, 2020 •

edited

Loading