Skip to content

Commit

Permalink
Merge pull request #225 from primer/feature/color-blind
Browse files Browse the repository at this point in the history
Colorblind Light & Dark Theme
  • Loading branch information
simurai authored Nov 24, 2021
2 parents c39c3a6 + 7bfd849 commit 5acd83d
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 72 deletions.
10 changes: 10 additions & 0 deletions .changeset/honest-pears-punch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"github-vscode-theme": minor
---

# Colorblind Light & Dark Theme
Adds a new GitHub Colorblind Light and Dark theme similar to the themes on github.com.

![Colorblind](https://user-images.githubusercontent.com/980622/136975341-4d5eca55-40d6-4d9f-8b33-ba8acbc805e4.png)


4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
2. Click on the "Install" button.
3. Then [select a theme](https://code.visualstudio.com/docs/getstarted/themes#_selecting-the-color-theme). The GitHub themes try to match the themes available in [github.com's settings](https://github.com/settings/appearance):
- `GitHub Light Default`
- `GitHub Light Colorblind` ✨ new ✨
- `GitHub Dark Default`
- `GitHub Dark Colorblind` ✨ new ✨
- `GitHub Dark Dimmed`
- `GitHub Dark High Contrast` ✨ new ✨
- `GitHub Dark High Contrast`

Additionally, there are also two older themes. **Note**: They might not get updated frequently and are kept for legacy reasons:

Expand Down
14 changes: 13 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@
"theme",
"github",
"light",
"dark"
"dark",
"protanopia",
"colorblind"
],
"contributes": {
"themes": [
Expand All @@ -37,6 +39,11 @@
"uiTheme": "vs",
"path": "./themes/light-default.json"
},
{
"label": "GitHub Light Colorblind (Beta)",
"uiTheme": "vs",
"path": "./themes/light-colorblind.json"
},
{
"label": "GitHub Dark Default",
"uiTheme": "vs-dark",
Expand All @@ -52,6 +59,11 @@
"uiTheme": "hc-black",
"path": "./themes/dark-high-contrast.json"
},
{
"label": "GitHub Dark Colorblind (Beta)",
"uiTheme": "vs-dark",
"path": "./themes/dark-colorblind.json"
},
{
"label": "GitHub Light",
"uiTheme": "vs",
Expand Down
6 changes: 6 additions & 0 deletions src/colors.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
const lightColors = require("@primer/primitives/dist/json/colors/light.json");
const darkColors = require("@primer/primitives/dist/json/colors/dark.json");
const dimmedColors = require("@primer/primitives/dist/json/colors/dark_dimmed.json");
const lightColorblindColors = require("@primer/primitives/dist/json/colors/light_colorblind.json");
const hcColors = require("@primer/primitives/dist/json/colors/dark_high_contrast.json");
const darkColorblindColors = require("@primer/primitives/dist/json/colors/dark_colorblind.json");

function getColors(theme) {
if (theme === "light") {
Expand All @@ -10,8 +12,12 @@ function getColors(theme) {
return darkColors;
} else if (theme === "dimmed") {
return dimmedColors;
} else if (theme === "light_colorblind") {
return lightColorblindColors;
} else if (theme === "hc") {
return hcColors;
} else if (theme === "dark_colorblind") {
return darkColorblindColors;
}
}

Expand Down
12 changes: 12 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ const lightDefaultTheme = getTheme({
name: "GitHub Light Default",
});

const lightColorblindTheme = getTheme({
theme: "light_colorblind",
name: "GitHub Light Colorblind",
});

const darkDefaultTheme = getTheme({
theme: "dark",
name: "GitHub Dark Default",
Expand All @@ -22,6 +27,11 @@ const darkHighContrastTheme = getTheme({
name: "GitHub Dark High Contrast"
})

const darkColorblindTheme = getTheme({
theme: "dark_colorblind",
name: "GitHub Dark Colorblind"
})

// Classic

const lightTheme = getClassicTheme({
Expand All @@ -39,8 +49,10 @@ const darkTheme = getClassicTheme({
fs.mkdir("./themes", { recursive: true })
.then(() => Promise.all([
fs.writeFile("./themes/light-default.json", JSON.stringify(lightDefaultTheme, null, 2)),
fs.writeFile("./themes/light-colorblind.json", JSON.stringify(lightColorblindTheme, null, 2)),
fs.writeFile("./themes/dark-default.json", JSON.stringify(darkDefaultTheme, null, 2)),
fs.writeFile("./themes/dark-dimmed.json", JSON.stringify(darkDimmedTheme, null, 2)),
fs.writeFile("./themes/dark-colorblind.json", JSON.stringify(darkColorblindTheme, null, 2)),
fs.writeFile("./themes/dark-high-contrast.json", JSON.stringify(darkHighContrastTheme, null, 2)),
fs.writeFile("./themes/light.json", JSON.stringify(lightTheme, null, 2)),
fs.writeFile("./themes/dark.json", JSON.stringify(darkTheme, null, 2)),
Expand Down
Loading

0 comments on commit 5acd83d

Please sign in to comment.