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

Improve color contrast for default Light + Dark themes #357

Merged
merged 4 commits into from
Mar 24, 2023
Merged

Conversation

simurai
Copy link
Contributor

@simurai simurai commented Mar 24, 2023

This is part of https://github.com/github/primer/issues/1648 and improves the color contrast for:

  • GitHub Light Default
  • GitHub Dark Default

Screenshots

Before After
Screen Shot 2023-03-24 at 17 58 27 Screen Shot 2023-03-24 at 17 58 53
Screen Shot 2023-03-24 at 18 04 35 Screen Shot 2023-03-24 at 18 05 11

Merge checklist

  • Added/updated colors
  • Added/updated documentation/README
  • Tested in GitHub Light/Dark Default theme

Take a look at the Contribute section for more information on how test your changes locally.

@changeset-bot
Copy link

changeset-bot bot commented Mar 24, 2023

🦋 Changeset detected

Latest commit: 30e8ab6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
github-vscode-theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Mar 24, 2023

Colors changed
--- base/themes/dark-default.json	2023-03-24 09:43:24.887951323 +0000
+++ themes/dark-default.json	2023-03-24 09:43:22.459921500 +0000
@@ -4,7 +4,7 @@
     "focusBorder": "#1f6feb",
-    "foreground": "#c9d1d9",
-    "descriptionForeground": "#8b949e",
+    "foreground": "#e6edf3",
+    "descriptionForeground": "#7d8590",
     "errorForeground": "#f85149",
-    "textLink.foreground": "#58a6ff",
-    "textLink.activeForeground": "#58a6ff",
+    "textLink.foreground": "#2f81f7",
+    "textLink.activeForeground": "#2f81f7",
     "textBlockQuote.background": "#010409",
@@ -12,6 +12,6 @@
     "textCodeBlock.background": "#6e768166",
-    "textPreformat.foreground": "#8b949e",
+    "textPreformat.foreground": "#7d8590",
     "textSeparator.foreground": "#21262d",
-    "icon.foreground": "#8b949e",
-    "keybindingLabel.foreground": "#c9d1d9",
+    "icon.foreground": "#7d8590",
+    "keybindingLabel.foreground": "#e6edf3",
     "button.background": "#238636",
@@ -26,3 +26,3 @@
     "dropdown.border": "#30363d",
-    "dropdown.foreground": "#c9d1d9",
+    "dropdown.foreground": "#e6edf3",
     "dropdown.listBackground": "#161b22",
@@ -30,3 +30,3 @@
     "input.border": "#30363d",
-    "input.foreground": "#c9d1d9",
+    "input.foreground": "#e6edf3",
     "input.placeholderForeground": "#6e7681",
@@ -35,9 +35,9 @@
     "progressBar.background": "#1f6feb",
-    "titleBar.activeForeground": "#8b949e",
+    "titleBar.activeForeground": "#7d8590",
     "titleBar.activeBackground": "#0d1117",
-    "titleBar.inactiveForeground": "#8b949e",
+    "titleBar.inactiveForeground": "#7d8590",
     "titleBar.inactiveBackground": "#010409",
     "titleBar.border": "#30363d",
-    "activityBar.foreground": "#c9d1d9",
-    "activityBar.inactiveForeground": "#8b949e",
+    "activityBar.foreground": "#e6edf3",
+    "activityBar.inactiveForeground": "#7d8590",
     "activityBar.background": "#0d1117",
@@ -47,12 +47,12 @@
     "activityBar.border": "#30363d",
-    "sideBar.foreground": "#c9d1d9",
+    "sideBar.foreground": "#e6edf3",
     "sideBar.background": "#010409",
     "sideBar.border": "#30363d",
-    "sideBarTitle.foreground": "#c9d1d9",
-    "sideBarSectionHeader.foreground": "#c9d1d9",
+    "sideBarTitle.foreground": "#e6edf3",
+    "sideBarSectionHeader.foreground": "#e6edf3",
     "sideBarSectionHeader.background": "#010409",
     "sideBarSectionHeader.border": "#30363d",
-    "list.hoverForeground": "#c9d1d9",
-    "list.inactiveSelectionForeground": "#c9d1d9",
-    "list.activeSelectionForeground": "#c9d1d9",
+    "list.hoverForeground": "#e6edf3",
+    "list.inactiveSelectionForeground": "#e6edf3",
+    "list.activeSelectionForeground": "#e6edf3",
     "list.hoverBackground": "#6e76811a",
@@ -60,10 +60,10 @@
     "list.activeSelectionBackground": "#6e768166",
-    "list.focusForeground": "#c9d1d9",
+    "list.focusForeground": "#e6edf3",
     "list.focusBackground": "#388bfd26",
     "list.inactiveFocusBackground": "#388bfd26",
-    "list.highlightForeground": "#58a6ff",
+    "list.highlightForeground": "#2f81f7",
     "tree.indentGuidesStroke": "#21262d",
-    "notificationCenterHeader.foreground": "#8b949e",
+    "notificationCenterHeader.foreground": "#7d8590",
     "notificationCenterHeader.background": "#161b22",
-    "notifications.foreground": "#c9d1d9",
+    "notifications.foreground": "#e6edf3",
     "notifications.background": "#161b22",
@@ -72,8 +72,8 @@
     "notificationsWarningIcon.foreground": "#d29922",
-    "notificationsInfoIcon.foreground": "#58a6ff",
+    "notificationsInfoIcon.foreground": "#2f81f7",
     "pickerGroup.border": "#30363d",
-    "pickerGroup.foreground": "#8b949e",
+    "pickerGroup.foreground": "#7d8590",
     "quickInput.background": "#161b22",
-    "quickInput.foreground": "#c9d1d9",
-    "statusBar.foreground": "#8b949e",
+    "quickInput.foreground": "#e6edf3",
+    "statusBar.foreground": "#7d8590",
     "statusBar.background": "#0d1117",
@@ -85,6 +85,6 @@
     "statusBarItem.prominentBackground": "#6e768166",
-    "statusBarItem.remoteForeground": "#c9d1d9",
+    "statusBarItem.remoteForeground": "#e6edf3",
     "statusBarItem.remoteBackground": "#30363d",
-    "statusBarItem.hoverBackground": "#c9d1d914",
-    "statusBarItem.activeBackground": "#c9d1d91f",
+    "statusBarItem.hoverBackground": "#e6edf314",
+    "statusBarItem.activeBackground": "#e6edf31f",
     "statusBarItem.focusBorder": "#1f6feb",
@@ -93,4 +93,4 @@
     "editorGroup.border": "#30363d",
-    "tab.activeForeground": "#c9d1d9",
-    "tab.inactiveForeground": "#8b949e",
+    "tab.activeForeground": "#e6edf3",
+    "tab.inactiveForeground": "#7d8590",
     "tab.inactiveBackground": "#010409",
@@ -104,7 +104,7 @@
     "tab.activeBorderTop": "#f78166",
-    "breadcrumb.foreground": "#8b949e",
-    "breadcrumb.focusForeground": "#c9d1d9",
-    "breadcrumb.activeSelectionForeground": "#8b949e",
+    "breadcrumb.foreground": "#7d8590",
+    "breadcrumb.focusForeground": "#e6edf3",
+    "breadcrumb.activeSelectionForeground": "#7d8590",
     "breadcrumbPicker.background": "#161b22",
-    "editor.foreground": "#c9d1d9",
+    "editor.foreground": "#e6edf3",
     "editor.background": "#0d1117",
@@ -114,10 +114,10 @@
     "editorLineNumber.foreground": "#6e7681",
-    "editorLineNumber.activeForeground": "#c9d1d9",
-    "editorIndentGuide.background": "#c9d1d91f",
-    "editorIndentGuide.activeBackground": "#c9d1d93d",
+    "editorLineNumber.activeForeground": "#e6edf3",
+    "editorIndentGuide.background": "#e6edf31f",
+    "editorIndentGuide.activeBackground": "#e6edf33d",
     "editorWhitespace.foreground": "#484f58",
-    "editorCursor.foreground": "#58a6ff",
+    "editorCursor.foreground": "#2f81f7",
     "editor.findMatchBackground": "#9e6a03",
     "editor.findMatchHighlightBackground": "#f2cc6080",
-    "editor.linkedEditingBackground": "#58a6ff12",
+    "editor.linkedEditingBackground": "#2f81f712",
     "editor.selectionHighlightBackground": "#3fb95040",
@@ -130,7 +130,7 @@
     "editorInlayHint.background": "#8b949e33",
-    "editorInlayHint.foreground": "#8b949e",
+    "editorInlayHint.foreground": "#7d8590",
     "editorInlayHint.typeBackground": "#8b949e33",
-    "editorInlayHint.typeForeground": "#8b949e",
+    "editorInlayHint.typeForeground": "#7d8590",
     "editorInlayHint.paramBackground": "#8b949e33",
-    "editorInlayHint.paramForeground": "#8b949e",
+    "editorInlayHint.paramForeground": "#7d8590",
     "editorGutter.modifiedBackground": "#bb800966",
@@ -153,4 +153,4 @@
     "panelTitle.activeBorder": "#f78166",
-    "panelTitle.activeForeground": "#c9d1d9",
-    "panelTitle.inactiveForeground": "#8b949e",
+    "panelTitle.activeForeground": "#e6edf3",
+    "panelTitle.inactiveForeground": "#7d8590",
     "panelInput.border": "#30363d",
@@ -212,3 +212,3 @@
     ],
-    "terminal.foreground": "#c9d1d9",
+    "terminal.foreground": "#e6edf3",
     "terminal.ansiBlack": "#484f58",
@@ -235,3 +235,3 @@
     "editorBracketHighlight.foreground6": "#d2a8ff",
-    "editorBracketHighlight.unexpectedBracket.foreground": "#8b949e",
+    "editorBracketHighlight.unexpectedBracket.foreground": "#7d8590",
     "gitDecoration.addedResourceForeground": "#3fb950",
@@ -242,3 +242,3 @@
     "gitDecoration.conflictingResourceForeground": "#db6d28",
-    "gitDecoration.submoduleResourceForeground": "#8b949e",
+    "gitDecoration.submoduleResourceForeground": "#7d8590",
     "debugToolBar.background": "#161b22",
@@ -250,3 +250,3 @@
     "peekViewResult.background": "#0d1117",
-    "settings.headerForeground": "#c9d1d9",
+    "settings.headerForeground": "#e6edf3",
     "settings.modifiedItemIndicator": "#bb800966",
@@ -310,3 +310,3 @@
       "settings": {
-        "foreground": "#c9d1d9"
+        "foreground": "#e6edf3"
       }
@@ -350,3 +350,3 @@
       "settings": {
-        "foreground": "#c9d1d9"
+        "foreground": "#e6edf3"
       }
@@ -383,3 +383,3 @@
       "settings": {
-        "foreground": "#c9d1d9"
+        "foreground": "#e6edf3"
       }
@@ -512,3 +512,3 @@
         "fontStyle": "italic",
-        "foreground": "#c9d1d9"
+        "foreground": "#e6edf3"
       }
@@ -519,3 +519,3 @@
         "fontStyle": "bold",
-        "foreground": "#c9d1d9"
+        "foreground": "#e6edf3"
       }
--- base/themes/light-default.json	2023-03-24 09:43:24.887951323 +0000
+++ themes/light-default.json	2023-03-24 09:43:22.459921500 +0000
@@ -4,4 +4,4 @@
     "focusBorder": "#0969da",
-    "foreground": "#24292f",
-    "descriptionForeground": "#57606a",
+    "foreground": "#1f2328",
+    "descriptionForeground": "#656d76",
     "errorForeground": "#cf222e",
@@ -12,9 +12,9 @@
     "textCodeBlock.background": "#afb8c133",
-    "textPreformat.foreground": "#57606a",
+    "textPreformat.foreground": "#656d76",
     "textSeparator.foreground": "#d8dee4",
-    "icon.foreground": "#57606a",
-    "keybindingLabel.foreground": "#24292f",
-    "button.background": "#2da44e",
+    "icon.foreground": "#656d76",
+    "keybindingLabel.foreground": "#1f2328",
+    "button.background": "#1f883d",
     "button.foreground": "#ffffff",
-    "button.hoverBackground": "#2c974b",
+    "button.hoverBackground": "#1a7f37",
     "button.secondaryBackground": "#ebecf0",
@@ -26,3 +26,3 @@
     "dropdown.border": "#d0d7de",
-    "dropdown.foreground": "#24292f",
+    "dropdown.foreground": "#1f2328",
     "dropdown.listBackground": "#ffffff",
@@ -30,3 +30,3 @@
     "input.border": "#d0d7de",
-    "input.foreground": "#24292f",
+    "input.foreground": "#1f2328",
     "input.placeholderForeground": "#6e7781",
@@ -35,9 +35,9 @@
     "progressBar.background": "#0969da",
-    "titleBar.activeForeground": "#57606a",
+    "titleBar.activeForeground": "#656d76",
     "titleBar.activeBackground": "#ffffff",
-    "titleBar.inactiveForeground": "#57606a",
+    "titleBar.inactiveForeground": "#656d76",
     "titleBar.inactiveBackground": "#f6f8fa",
     "titleBar.border": "#d0d7de",
-    "activityBar.foreground": "#24292f",
-    "activityBar.inactiveForeground": "#57606a",
+    "activityBar.foreground": "#1f2328",
+    "activityBar.inactiveForeground": "#656d76",
     "activityBar.background": "#ffffff",
@@ -47,12 +47,12 @@
     "activityBar.border": "#d0d7de",
-    "sideBar.foreground": "#24292f",
+    "sideBar.foreground": "#1f2328",
     "sideBar.background": "#f6f8fa",
     "sideBar.border": "#d0d7de",
-    "sideBarTitle.foreground": "#24292f",
-    "sideBarSectionHeader.foreground": "#24292f",
+    "sideBarTitle.foreground": "#1f2328",
+    "sideBarSectionHeader.foreground": "#1f2328",
     "sideBarSectionHeader.background": "#f6f8fa",
     "sideBarSectionHeader.border": "#d0d7de",
-    "list.hoverForeground": "#24292f",
-    "list.inactiveSelectionForeground": "#24292f",
-    "list.activeSelectionForeground": "#24292f",
+    "list.hoverForeground": "#1f2328",
+    "list.inactiveSelectionForeground": "#1f2328",
+    "list.activeSelectionForeground": "#1f2328",
     "list.hoverBackground": "#eaeef280",
@@ -60,3 +60,3 @@
     "list.activeSelectionBackground": "#afb8c133",
-    "list.focusForeground": "#24292f",
+    "list.focusForeground": "#1f2328",
     "list.focusBackground": "#ddf4ff",
@@ -65,5 +65,5 @@
     "tree.indentGuidesStroke": "#d8dee4",
-    "notificationCenterHeader.foreground": "#57606a",
+    "notificationCenterHeader.foreground": "#656d76",
     "notificationCenterHeader.background": "#f6f8fa",
-    "notifications.foreground": "#24292f",
+    "notifications.foreground": "#1f2328",
     "notifications.background": "#ffffff",
@@ -74,6 +74,6 @@
     "pickerGroup.border": "#d0d7de",
-    "pickerGroup.foreground": "#57606a",
+    "pickerGroup.foreground": "#656d76",
     "quickInput.background": "#ffffff",
-    "quickInput.foreground": "#24292f",
-    "statusBar.foreground": "#57606a",
+    "quickInput.foreground": "#1f2328",
+    "statusBar.foreground": "#656d76",
     "statusBar.background": "#ffffff",
@@ -85,6 +85,6 @@
     "statusBarItem.prominentBackground": "#afb8c133",
-    "statusBarItem.remoteForeground": "#24292f",
+    "statusBarItem.remoteForeground": "#1f2328",
     "statusBarItem.remoteBackground": "#eaeef2",
-    "statusBarItem.hoverBackground": "#24292f14",
-    "statusBarItem.activeBackground": "#24292f1f",
+    "statusBarItem.hoverBackground": "#1f232814",
+    "statusBarItem.activeBackground": "#1f23281f",
     "statusBarItem.focusBorder": "#0969da",
@@ -93,4 +93,4 @@
     "editorGroup.border": "#d0d7de",
-    "tab.activeForeground": "#24292f",
-    "tab.inactiveForeground": "#57606a",
+    "tab.activeForeground": "#1f2328",
+    "tab.inactiveForeground": "#656d76",
     "tab.inactiveBackground": "#f6f8fa",
@@ -104,7 +104,7 @@
     "tab.activeBorderTop": "#fd8c73",
-    "breadcrumb.foreground": "#57606a",
-    "breadcrumb.focusForeground": "#24292f",
-    "breadcrumb.activeSelectionForeground": "#57606a",
+    "breadcrumb.foreground": "#656d76",
+    "breadcrumb.focusForeground": "#1f2328",
+    "breadcrumb.activeSelectionForeground": "#656d76",
     "breadcrumbPicker.background": "#ffffff",
-    "editor.foreground": "#24292f",
+    "editor.foreground": "#1f2328",
     "editor.background": "#ffffff",
@@ -114,5 +114,5 @@
     "editorLineNumber.foreground": "#8c959f",
-    "editorLineNumber.activeForeground": "#24292f",
-    "editorIndentGuide.background": "#24292f1f",
-    "editorIndentGuide.activeBackground": "#24292f3d",
+    "editorLineNumber.activeForeground": "#1f2328",
+    "editorIndentGuide.background": "#1f23281f",
+    "editorIndentGuide.activeBackground": "#1f23283d",
     "editorWhitespace.foreground": "#afb8c1",
@@ -130,7 +130,7 @@
     "editorInlayHint.background": "#afb8c133",
-    "editorInlayHint.foreground": "#57606a",
+    "editorInlayHint.foreground": "#656d76",
     "editorInlayHint.typeBackground": "#afb8c133",
-    "editorInlayHint.typeForeground": "#57606a",
+    "editorInlayHint.typeForeground": "#656d76",
     "editorInlayHint.paramBackground": "#afb8c133",
-    "editorInlayHint.paramForeground": "#57606a",
+    "editorInlayHint.paramForeground": "#656d76",
     "editorGutter.modifiedBackground": "#d4a72c66",
@@ -153,4 +153,4 @@
     "panelTitle.activeBorder": "#fd8c73",
-    "panelTitle.activeForeground": "#24292f",
-    "panelTitle.inactiveForeground": "#57606a",
+    "panelTitle.activeForeground": "#1f2328",
+    "panelTitle.inactiveForeground": "#656d76",
     "panelInput.border": "#d0d7de",
@@ -201,3 +201,3 @@
     "symbolIcon.constantForeground": "#116329",
-    "terminal.foreground": "#24292f",
+    "terminal.foreground": "#1f2328",
     "terminal.ansiBlack": "#24292f",
@@ -224,3 +224,3 @@
     "editorBracketHighlight.foreground6": "#8250df",
-    "editorBracketHighlight.unexpectedBracket.foreground": "#57606a",
+    "editorBracketHighlight.unexpectedBracket.foreground": "#656d76",
     "gitDecoration.addedResourceForeground": "#1a7f37",
@@ -231,3 +231,3 @@
     "gitDecoration.conflictingResourceForeground": "#bc4c00",
-    "gitDecoration.submoduleResourceForeground": "#57606a",
+    "gitDecoration.submoduleResourceForeground": "#656d76",
     "debugToolBar.background": "#ffffff",
@@ -235,3 +235,3 @@
     "editor.focusedStackFrameHighlightBackground": "#4ac26b66",
-    "settings.headerForeground": "#24292f",
+    "settings.headerForeground": "#1f2328",
     "settings.modifiedItemIndicator": "#d4a72c66",
@@ -295,3 +295,3 @@
       "settings": {
-        "foreground": "#24292f"
+        "foreground": "#1f2328"
       }
@@ -335,3 +335,3 @@
       "settings": {
-        "foreground": "#24292f"
+        "foreground": "#1f2328"
       }
@@ -368,3 +368,3 @@
       "settings": {
-        "foreground": "#24292f"
+        "foreground": "#1f2328"
       }
@@ -497,3 +497,3 @@
         "fontStyle": "italic",
-        "foreground": "#24292f"
+        "foreground": "#1f2328"
       }
@@ -504,3 +504,3 @@
         "fontStyle": "bold",
-        "foreground": "#24292f"
+        "foreground": "#1f2328"
       }

src/colors.js Outdated Show resolved Hide resolved
src/colors.js Outdated Show resolved Hide resolved
Copy link
Contributor

@lukasoppermann lukasoppermann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few changes

src/colors.js Outdated Show resolved Hide resolved
src/colors.js Outdated Show resolved Hide resolved
src/colors.js Outdated Show resolved Hide resolved
src/colors.js Outdated Show resolved Hide resolved
simurai and others added 2 commits March 24, 2023 18:41
Co-authored-by: Lukas Oppermann <lukasoppermann@github.com>
Co-authored-by: Lukas Oppermann <lukasoppermann@github.com>
@simurai simurai merged commit 4d23b83 into main Mar 24, 2023
@simurai simurai deleted the color-contrast branch March 24, 2023 10:50
@primer-css primer-css mentioned this pull request Mar 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants