diff --git a/README.md b/README.md
index bb27dc75..06a36330 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,21 @@
 # GitHub's VS Code themes
 
-![GitHub VS Code theme](https://user-images.githubusercontent.com/378023/114663107-c1c97e00-9d34-11eb-8aa6-0c4f3d35af0b.png)
+![GitHub VS Code theme](https://user-images.githubusercontent.com/378023/132220037-3cd3e777-55a6-445f-9a2e-da6020ebd78d.png)
 
 ## Install
 
 1. Go to [VS Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme).
 2. Click on the "Install" button.
-3. Then [select a theme](https://code.visualstudio.com/docs/getstarted/themes#_selecting-the-color-theme). Currently the following themes are available:
-    - `GitHub Light` (A legacy old theme.)
-    - `GitHub Dark` (A legacy old theme.)
-    - `GitHub Light Default` ✨ new ✨ (A new theme that aims for consistency with GitHub's Primer design system.)
-    - `GitHub Dark Default` ✨ new ✨ (A new theme that aims for consistency with GitHub's Primer design system.)
-    - `GitHub Dark Dimmed` ✨ new ✨ (A new theme that aims for consistency with GitHub's Primer design system.)
+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 Dark Default`
+    - `GitHub Dark Dimmed`
+    - `GitHub Dark High Contrast` ✨ new ✨
+
+Additionally, there are also two older themes. **Note**: They won't get updated anymore and are kept for legacy reasons:
+
+- `GitHub Light` (legacy)
+- `GitHub Dark` (legacy)
 
 ## Override this theme
 
diff --git a/github-vscode-theme-5.0.0-preview.vsix b/github-vscode-theme-5.0.0-preview.vsix
new file mode 100644
index 00000000..d6e2ddd5
Binary files /dev/null and b/github-vscode-theme-5.0.0-preview.vsix differ
diff --git a/package-lock.json b/package-lock.json
index 8c686488..e2607f81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
 	"requires": true,
 	"dependencies": {
 		"@primer/primitives": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.3.0.tgz",
-			"integrity": "sha512-djXxll2yVTufmhnHA1H9bMT8I3S0ID6GlSewAJvKHlv80I+5AoZASVBF+WedtH/SyloLM5wyk+Tqj1ZNmy2+RQ==",
+			"version": "4.7.1",
+			"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.7.1.tgz",
+			"integrity": "sha512-kttAUcP3QgT5UbYLeMTKDxPvnAVzywX0xnKPcLkmEVQyhmEBlTO4LSlYIzL5YcKyklHcFRf1426UcGOY9wdWDQ==",
 			"dev": true
 		},
 		"@sindresorhus/is": {
diff --git a/package.json b/package.json
index 2cd78d72..e601fe65 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,11 @@
 				"uiTheme": "vs-dark",
 				"path": "./themes/dark-dimmed.json"
 			},
+			{
+				"label": "GitHub Dark High Contrast",
+				"uiTheme": "hc-black",
+				"path": "./themes/dark-high-contrast.json"
+			},
 			{
 				"label": "GitHub Light",
 				"uiTheme": "vs",
@@ -60,7 +65,7 @@
 		]
 	},
 	"devDependencies": {
-		"@primer/primitives": "4.3.0",
+		"@primer/primitives": "4.7.1",
 		"chroma-js": "^2.1.0",
 		"color": "^3.1.2",
 		"nodemon": "^2.0.3"
diff --git a/src/colors.js b/src/colors.js
index 2df4d695..cfc816a1 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -1,6 +1,7 @@
 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 hcColors = require("@primer/primitives/dist/json/colors/dark_high_contrast.json");
 
 function getColors(theme) {
   if (theme === "light") {
@@ -9,6 +10,8 @@ function getColors(theme) {
     return darkColors;
   } else if (theme === "dimmed") {
     return dimmedColors;
+  } else if (theme === "hc") {
+    return hcColors;
   }
 }
 
diff --git a/src/index.js b/src/index.js
index e301a831..e1ecda8b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,6 +17,11 @@ const darkDimmedTheme = getTheme({
   name: "GitHub Dark Dimmed"
 })
 
+const darkHighContrastTheme = getTheme({
+  theme: "hc",
+  name: "GitHub Dark High Contrast"
+})
+
 // Classic
 
 const lightTheme = getClassicTheme({
@@ -36,6 +41,7 @@ fs.mkdir("./themes", { recursive: true })
     fs.writeFile("./themes/light-default.json", JSON.stringify(lightDefaultTheme, 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-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)),
   ]))
diff --git a/src/theme.js b/src/theme.js
index f40ad912..16f2075b 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,234 +1,243 @@
 const chroma = require("chroma-js");
 const { getColors } = require("./colors");
 
-// Choosing colors
-// There are two ways to define what color is used:
+// Convert to hex
+// VS Code doesn't support other formats like hsl, rgba etc.
 
-// 1. Color scale from primer/primitives.
-//    e.g. "textLink.foreground": themes({ light: scale.blue[5], dark: scale.blue[2], dimmed: scale.blue[3] }),
-// 2. Hex value: All themes will use this scale. Only use for exceptions
+function hex(color) {
+  return chroma(color).hex();
+}
+
+// Choosing colors from primer/primitives
+// There are multiple ways to define what color is used:
+
+// 1. Global variable
+//    e.g. "textLink.foreground": hex(color.fg.default),
+// 2. Color scale
+//    e.g. "textLink.foreground": scale.blue[5],
+// 3. Hex value: All themes will use this scale. Only use for exceptions
 //    e.g. "textLink.foreground": "#fff",
+// 4. Per theme. Useful when a certain theme needs an exception
+//    e.g. "textLink.foreground": themes({ light: scale.blue[5], dark: scale.blue[2], dimmed: scale.blue[3], hc: scale.blue[3] }),
 
 function getTheme({ theme, name }) {
-  // Usage: themes({ light: "lightblue", dark: "darkblue", dimmed: "royalblue" })
-  const themes = (options) => options[theme];
-  // Usage: color.text.primary
-  const color = getColors(theme);
-  // Usage: scale.blue[6]
-  const scale = color.scale;
+  const themes = (options) => options[theme]; // Usage: themes({ light: "lightblue", dark: "darkblue", dimmed: "royalblue", hc: "blue" })
+  const color = getColors(theme); // Usage: color.fg.default
+  const scale = color.scale; // Usage: scale.blue[6]
 
   return {
     name: name,
     colors: {
-      focusBorder          : color.state.focus.border,
-      foreground           : color.text.primary,
-      descriptionForeground: color.text.tertiary,
-      errorForeground      : color.text.danger,
-
-      "textLink.foreground"      : color.text.link,
-      "textLink.activeForeground": color.text.link,
-      "textBlockQuote.background": color.bg.canvasInset,
-      "textBlockQuote.border"    : color.markdown.blockquoteBorder,
-      "textCodeBlock.background" : chroma(color.markdown.codeBg).hex(),
-      "textPreformat.foreground" : color.text.secondary,
-      "textSeparator.foreground" : color.border.secondary,
-
-      "button.background"     : color.btn.primary.bg,
-      "button.foreground"     : color.btn.primary.text,
-      "button.hoverBackground": color.btn.primary.hoverBg,
-      
-      "button.secondaryBackground"     : color.btn.activeBg,
-      "button.secondaryForeground"     : color.btn.text,
-      "button.secondaryHoverBackground": color.btn.hoverBg,
-
-      "checkbox.background": color.bg.tertiary,
-      "checkbox.border"    : color.border.primary,
-
-      "dropdown.background"    : color.bg.overlay,
-      "dropdown.border"        : color.border.primary,
-      "dropdown.foreground"    : color.text.primary,
-      "dropdown.listBackground": color.bg.overlay,
-
-      "input.background"           : color.input.bg,
-      "input.border"               : color.input.border,
-      "input.foreground"           : color.text.primary,
-      "input.placeholderForeground": color.text.placeholder,
-
-      "badge.foreground": themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
-      "badge.background": themes({ light: scale.blue[1], dark: scale.blue[7], dimmed: scale.blue[7] }),
-
-      "progressBar.background": themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }),
-
-      "titleBar.activeForeground"  : color.text.secondary,
-      "titleBar.activeBackground"  : color.bg.canvas,
-      "titleBar.inactiveForeground": color.text.tertiary,
-      "titleBar.inactiveBackground": color.bg.canvasInset,
-      "titleBar.border"            : color.border.primary,
-
-      "activityBar.foreground"        : color.text.primary,
-      "activityBar.inactiveForeground": color.text.tertiary,
-      "activityBar.background"        : color.bg.canvas,
-      "activityBarBadge.foreground"   : scale.white,
-      "activityBarBadge.background"   : themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }),
-      "activityBar.activeBorder"      : color.underlinenav.borderActive,
-      "activityBar.border"            : color.border.primary,
-
-      "sideBar.foreground"             : color.text.primary,
-      "sideBar.background"             : color.bg.canvasInset,
-      "sideBar.border"                 : color.border.primary,
-      "sideBarTitle.foreground"        : color.text.primary,
-      "sideBarSectionHeader.foreground": color.text.primary,
-      "sideBarSectionHeader.background": color.bg.canvasInset,
-      "sideBarSectionHeader.border"    : color.border.primary,
-
-      "list.hoverForeground"            : color.text.primary,
-      "list.inactiveSelectionForeground": color.text.primary,
-      "list.activeSelectionForeground"  : color.text.primary,
-      "list.hoverBackground"            : themes({ light: "#ebf0f4", dark: scale.gray[8], dimmed: scale.gray[8] }),
-      "list.inactiveSelectionBackground": themes({ light: "#e8eaed", dark: scale.gray[8], dimmed: scale.gray[8] }),
-      "list.activeSelectionBackground"  : themes({ light: "#e2e5e9", dark: scale.gray[7], dimmed: scale.gray[7] }),
-      "list.focusForeground"            : themes({ light: scale.blue[9], dark: scale.gray[0], dimmed: scale.gray[0] }),
-      "list.focusBackground"            : themes({ light: "#cce5ff", dark: scale.gray[7], dimmed: scale.gray[7] }),
-      "list.inactiveFocusBackground"    : themes({ light: scale.blue[1], dark: scale.gray[8], dimmed: scale.gray[8] }),
-      "list.highlightForeground"        : themes({ light: scale.blue[5], dark: scale.blue[4], dimmed: scale.blue[4] }),
-
-      "tree.indentGuidesStroke": color.border.secondary,
-
-      "notificationCenterHeader.foreground": themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }),
-      "notificationCenterHeader.background": themes({ light: scale.gray[2], dark: scale.gray[9], dimmed: scale.gray[9] }),
-      "notifications.foreground"           : color.text.secondary,
-      "notifications.background"           : themes({ light: scale.gray[0], dark: scale.gray[8], dimmed: scale.gray[8] }),
-      "notifications.border"               : color.border.primary,
-      "notificationsErrorIcon.foreground"  : themes({ light: scale.red[5], dark: scale.red[4], dimmed: scale.red[4] }),
-      "notificationsWarningIcon.foreground": themes({ light: scale.orange[6], dark: scale.orange[3], dimmed: scale.orange[3] }),
-      "notificationsInfoIcon.foreground"   : themes({ light: scale.blue[6], dark: scale.blue[3], dimmed: scale.blue[3] }),
-
-      "pickerGroup.border"    : themes({ light: scale.gray[2], dark: scale.gray[7], dimmed: scale.gray[7] }),
-      "pickerGroup.foreground": color.text.secondary,
-      "quickInput.background" : themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9] }),
-      "quickInput.foreground" : color.text.primary,
-
-      "statusBar.foreground"             : color.text.secondary,
-      "statusBar.background"             : color.bg.canvas,
-      "statusBar.border"                 : color.border.primary,
-      "statusBar.noFolderBackground"     : color.bg.canvas,
-      "statusBar.debuggingBackground"    : color.bg.dangerInverse,
-      "statusBar.debuggingForeground"    : scale.white,
-      "statusBarItem.prominentBackground": color.bg.tertiary,
-
-      "editorGroupHeader.tabsBackground": color.bg.canvasInset,
-      "editorGroupHeader.tabsBorder"    : color.border.primary,
-      "editorGroup.border"              : color.border.primary,
-
-      "tab.activeForeground"        : color.text.primary,
-      "tab.inactiveForeground"      : color.text.tertiary,
-      "tab.inactiveBackground"      : color.bg.canvasInset,
-      "tab.activeBackground"        : color.bg.canvas,
-      "tab.hoverBackground"         : color.bg.canvas,
-      "tab.unfocusedHoverBackground": color.state.hover.secondaryBg,
-      "tab.border"                  : color.border.primary,
-      "tab.unfocusedActiveBorderTop": color.border.primary,
-      "tab.activeBorder"            : color.bg.canvas,
-      "tab.unfocusedActiveBorder"   : color.bg.canvas,
-      "tab.activeBorderTop"         : color.underlinenav.borderActive,
-
-      "breadcrumb.foreground"               : color.text.tertiary,
-      "breadcrumb.focusForeground"          : color.text.primary,
-      "breadcrumb.activeSelectionForeground": color.text.secondary,
-      "breadcrumbPicker.background"         : color.bg.overlay,
-
-      "editor.foreground"                 : color.text.primary,
-      "editor.background"                 : color.bg.canvas,
-      "editorWidget.background"           : color.bg.overlay,
-      "editor.foldBackground"             : chroma(scale.gray[4]).alpha(0.1).hex(), // needs opacity
-      "editor.lineHighlightBackground"    : color.codemirror.activelineBg,
-      "editorLineNumber.foreground"       : color.codemirror.linenumberText,
-      "editorLineNumber.activeForeground" : color.text.primary,
-      "editorIndentGuide.background"      : color.border.secondary,
-      "editorIndentGuide.activeBackground": color.border.primary,
-      "editorWhitespace.foreground"       : themes({ light: scale.gray[3], dark: scale.gray[5], dimmed: scale.gray[5] }),
-      "editorCursor.foreground"           : themes({ light: scale.blue[7], dark: scale.blue[2], dimmed: scale.blue[2] }),
-
-      "editor.findMatchBackground"          : themes({ light: scale.yellow[4], dark: "#ffd33d44", dimmed: "#ffd33d44" }),
-      "editor.findMatchHighlightBackground" : themes({ light: "#ffdf5d66", dark: "#ffd33d22", dimmed: "#ffd33d22" }),
-      "editor.linkedEditingBackground"      : themes({ light: "#0366d611", dark: "#3392FF22", dimmed: "#3392FF22" }),
-      "editor.inactiveSelectionBackground"  : themes({ light: "#0366d611", dark: "#3392FF22", dimmed: "#3392FF22" }),
-      "editor.selectionBackground"          : themes({ light: "#0366d625", dark: "#3392FF44", dimmed: "#3392FF44" }),
-      "editor.selectionHighlightBackground" : themes({ light: "#34d05840", dark: "#17E5E633", dimmed: "#17E5E633" }),
-      "editor.selectionHighlightBorder"     : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }),
-      "editor.wordHighlightBackground"      : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }),
-      "editor.wordHighlightStrongBackground": themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }),
-      "editor.wordHighlightBorder"          : themes({ light: "#24943e99", dark: "#17E5E699", dimmed: "#17E5E699" }),
-      "editor.wordHighlightStrongBorder"    : themes({ light: "#24943e50", dark: "#17E5E666", dimmed: "#17E5E666" }),
-      "editorBracketMatch.background"       : themes({ light: "#34d05840", dark: "#17E5E650", dimmed: "#17E5E650" }),
-      "editorBracketMatch.border"           : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }),
-
-      "editorGutter.modifiedBackground": color.diff.change.border,
-      "editorGutter.addedBackground"   : color.diff.addition.border,
-      "editorGutter.deletedBackground" : color.diff.deletion.border,
-
-      "diffEditor.insertedTextBackground": themes({ light: chroma(scale.green[3]).alpha(0.2).hex(), dark: chroma(color.diff.addition.bg).hex(), dimmed: chroma(color.diff.addition.bg).hex() }),
-      "diffEditor.removedTextBackground" : themes({ light: chroma(scale.red[3]  ).alpha(0.15).hex(), dark: chroma(color.diff.deletion.bg).hex(), dimmed: chroma(color.diff.deletion.bg).hex() }),
+      focusBorder          : hex(color.accent.emphasis),
+      foreground           : hex(color.fg.default),
+      descriptionForeground: hex(color.fg.muted),
+      errorForeground      : hex(color.danger.fg),
+
+      "textLink.foreground"      : hex(color.accent.fg),
+      "textLink.activeForeground": hex(color.accent.fg),
+      "textBlockQuote.background": hex(color.canvas.inset),
+      "textBlockQuote.border"    : hex(color.border.default),
+      "textCodeBlock.background" : hex(color.neutral.muted),
+      "textPreformat.foreground" : hex(color.fg.muted),
+      "textSeparator.foreground" : hex(color.border.muted),
+
+      "button.background"     : hex(color.btn.primary.bg),
+      "button.foreground"     : hex(color.btn.primary.text),
+      "button.hoverBackground": hex(color.btn.primary.hoverBg),
+
+      "button.secondaryBackground"     : hex(color.btn.activeBg),
+      "button.secondaryForeground"     : hex(color.btn.text),
+      "button.secondaryHoverBackground": hex(color.btn.hoverBg),
+
+      "checkbox.background": hex(color.canvas.subtle),
+      "checkbox.border"    : hex(color.border.default),
+
+      "dropdown.background"    : hex(color.canvas.overlay),
+      "dropdown.border"        : hex(color.border.default),
+      "dropdown.foreground"    : hex(color.fg.default),
+      "dropdown.listBackground": hex(color.canvas.overlay),
+
+      "input.background"           : hex(color.canvas.default),
+      "input.border"               : hex(color.border.default),
+      "input.foreground"           : hex(color.fg.default),
+      "input.placeholderForeground": hex(color.fg.subtle),
+
+      "badge.foreground": hex(color.fg.onEmphasis),
+      "badge.background": hex(color.accent.emphasis),
+
+      "progressBar.background": hex(color.accent.emphasis),
+
+      "titleBar.activeForeground"  : hex(color.fg.muted),
+      "titleBar.activeBackground"  : hex(color.canvas.default),
+      "titleBar.inactiveForeground": hex(color.fg.muted),
+      "titleBar.inactiveBackground": hex(color.canvas.inset),
+      "titleBar.border"            : hex(color.border.default),
+
+      "activityBar.foreground"        : hex(color.fg.default),
+      "activityBar.inactiveForeground": hex(color.fg.muted),
+      "activityBar.background"        : hex(color.canvas.default),
+      "activityBarBadge.foreground"   : hex(color.fg.onEmphasis),
+      "activityBarBadge.background"   : hex(color.accent.emphasis),
+      "activityBar.activeBorder"      : hex(color.primer.border.active),
+      "activityBar.border"            : hex(color.border.default),
+
+      "sideBar.foreground"             : hex(color.fg.default),
+      "sideBar.background"             : hex(color.canvas.inset),
+      "sideBar.border"                 : hex(color.border.default),
+      "sideBarTitle.foreground"        : hex(color.fg.default),
+      "sideBarSectionHeader.foreground": hex(color.fg.default),
+      "sideBarSectionHeader.background": hex(color.canvas.inset),
+      "sideBarSectionHeader.border"    : hex(color.border.default),
+
+      "list.hoverForeground"            : hex(color.fg.default),
+      "list.inactiveSelectionForeground": hex(color.fg.default),
+      "list.activeSelectionForeground"  : hex(color.fg.default),
+      "list.hoverBackground"            : hex(color.neutral.subtle),
+      "list.inactiveSelectionBackground": hex(color.neutral.muted),
+      "list.activeSelectionBackground"  : hex(color.neutral.muted),
+      "list.focusForeground"            : hex(color.fg.default),
+      "list.focusBackground"            : hex(color.accent.subtle),
+      "list.inactiveFocusBackground"    : hex(color.accent.subtle),
+      "list.highlightForeground"        : hex(color.accent.fg),
+
+      "tree.indentGuidesStroke": hex(color.border.muted),
+
+      "notificationCenterHeader.foreground": hex(color.fg.muted),
+      "notificationCenterHeader.background": hex(color.canvas.subtle),
+      "notifications.foreground"           : hex(color.fg.default),
+      "notifications.background"           : hex(color.canvas.overlay),
+      "notifications.border"               : hex(color.border.default),
+      "notificationsErrorIcon.foreground"  : hex(color.danger.fg),
+      "notificationsWarningIcon.foreground": hex(color.attention.fg),
+      "notificationsInfoIcon.foreground"   : hex(color.accent.fg),
+
+      "pickerGroup.border"    : hex(color.border.default),
+      "pickerGroup.foreground": hex(color.fg.muted),
+      "quickInput.background" : hex(color.canvas.overlay),
+      "quickInput.foreground" : hex(color.fg.default),
+
+      "statusBar.foreground"             : hex(color.fg.muted),
+      "statusBar.background"             : hex(color.canvas.default),
+      "statusBar.border"                 : hex(color.border.default),
+      "statusBar.noFolderBackground"     : hex(color.canvas.default),
+      "statusBar.debuggingBackground"    : hex(color.danger.emphasis),
+      "statusBar.debuggingForeground"    : hex(color.fg.onEmphasis),
+      "statusBarItem.prominentBackground": hex(color.canvas.subtle),
+
+      "editorGroupHeader.tabsBackground": hex(color.canvas.inset),
+      "editorGroupHeader.tabsBorder"    : hex(color.border.default),
+      "editorGroup.border"              : hex(color.border.default),
+
+      "tab.activeForeground"        : hex(color.fg.default),
+      "tab.inactiveForeground"      : hex(color.fg.muted),
+      "tab.inactiveBackground"      : hex(color.canvas.inset),
+      "tab.activeBackground"        : hex(color.canvas.default),
+      "tab.hoverBackground"         : hex(color.canvas.default),
+      "tab.unfocusedHoverBackground": hex(color.neutral.subtle),
+      "tab.border"                  : hex(color.border.default),
+      "tab.unfocusedActiveBorderTop": hex(color.border.default),
+      "tab.activeBorder"            : hex(color.canvas.default),
+      "tab.unfocusedActiveBorder"   : hex(color.canvas.default),
+      "tab.activeBorderTop"         : hex(color.primer.border.active),
+
+      "breadcrumb.foreground"               : hex(color.fg.muted),
+      "breadcrumb.focusForeground"          : hex(color.fg.default),
+      "breadcrumb.activeSelectionForeground": hex(color.fg.muted),
+      "breadcrumbPicker.background"         : hex(color.canvas.overlay),
+
+      "editor.foreground"                 : hex(color.fg.default),
+      "editor.background"                 : hex(color.canvas.default),
+      "editorWidget.background"           : hex(color.canvas.overlay),
+      "editor.foldBackground"             : hex(chroma(color.neutral.emphasis).alpha(0.1)), // needs opacity
+      "editor.lineHighlightBackground"    : hex(color.codemirror.activelineBg),
+      "editor.lineHighlightBorder"        : themes({ hc: color.accent.fg }), // only add border to HC
+      "editorLineNumber.foreground"       : hex(color.codemirror.linenumberText),
+      "editorLineNumber.activeForeground" : hex(color.fg.default),
+      "editorIndentGuide.background"      : hex(color.border.muted),
+      "editorIndentGuide.activeBackground": hex(color.border.default),
+      "editorWhitespace.foreground"       : hex(color.fg.subtle),
+      "editorCursor.foreground"           : hex(color.accent.fg),
+
+      "editor.findMatchBackground"          : themes({ light: "#bf8700", dark: "#ffd33d44", dimmed: "#ffd33d44", hc: "#ffd33d44" }),
+      "editor.findMatchHighlightBackground" : themes({ light: "#ffdf5d66", dark: "#ffd33d22", dimmed: "#ffd33d22", hc: "#ffd33d22" }),
+      "editor.linkedEditingBackground"      : themes({ light: "#0366d611", dark: "#3392FF22", dimmed: "#3392FF22", hc: "#3392FF22" }),
+      "editor.inactiveSelectionBackground"  : themes({ light: "#0366d611", dark: "#3392FF22", dimmed: "#3392FF22", hc: "#addcff66" }),
+      "editor.selectionBackground"          : themes({ light: "#0366d625", dark: "#3392FF44", dimmed: "#3392FF44", hc: "#addcff99" }),
+      "editor.selectionHighlightBackground" : themes({ light: "#34d05840", dark: "#17E5E633", dimmed: "#17E5E633", hc: "#17E5E633" }),
+      "editor.selectionHighlightBorder"     : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600", hc: "#17E5E600" }),
+      "editor.wordHighlightBackground"      : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600", hc: "#17E5E600" }),
+      "editor.wordHighlightStrongBackground": themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600", hc: "#17E5E600" }),
+      "editor.wordHighlightBorder"          : themes({ light: "#24943e99", dark: "#17E5E699", dimmed: "#17E5E699", hc: "#17E5E699" }),
+      "editor.wordHighlightStrongBorder"    : themes({ light: "#24943e50", dark: "#17E5E666", dimmed: "#17E5E666", hc: "#17E5E666" }),
+      "editorBracketMatch.background"       : themes({ light: "#34d05840", dark: "#17E5E650", dimmed: "#17E5E650", hc: "#17E5E650" }),
+      "editorBracketMatch.border"           : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600", hc: "#17E5E600" }),
+
+      "editorGutter.modifiedBackground": hex(color.attention.muted),
+      "editorGutter.addedBackground"   : hex(color.success.muted),
+      "editorGutter.deletedBackground" : hex(color.danger.muted),
+
+      "diffEditor.insertedTextBackground": hex(color.success.subtle),
+      "diffEditor.removedTextBackground" : hex(color.danger.subtle),
 
       "scrollbar.shadow"                : themes({ light: "#6a737d33", dark: "#0008", dimmed: "#0008" }),
-      "scrollbarSlider.background"      : themes({ light: "#959da533", dark: "#484F5833", dimmed: "#484F5833" }),
-      "scrollbarSlider.hoverBackground" : themes({ light: "#959da544", dark: "#484F5844", dimmed: "#484F5844" }),
-      "scrollbarSlider.activeBackground": themes({ light: "#959da588", dark: "#484F5888", dimmed: "#484F5888" }),
-      "editorOverviewRuler.border"      : themes({ light: scale.white, dark: scale.black, dimmed: scale.black }),
-
-      "panel.background"             : color.bg.canvasInset,
-      "panel.border"                 : color.border.primary,
-      "panelTitle.activeBorder"      : color.underlinenav.borderActive,
-      "panelTitle.activeForeground"  : color.text.primary,
-      "panelTitle.inactiveForeground": color.text.tertiary,
-      "panelInput.border"            : color.border.primary,
-
-      "terminal.foreground": color.text.secondary,
-      'terminal.ansiBlack': color.ansi.black,
-      'terminal.ansiRed': color.ansi.red,
-      'terminal.ansiGreen': color.ansi.green,
-      'terminal.ansiYellow': color.ansi.yellow,
-      'terminal.ansiBlue': color.ansi.blue,
-      'terminal.ansiMagenta': color.ansi.magenta,
-      'terminal.ansiCyan': color.ansi.cyan,
-      'terminal.ansiWhite': color.ansi.white,
-      'terminal.ansiBrightBlack': color.ansi.blackBright,
-      'terminal.ansiBrightRed': color.ansi.redBright,
-      'terminal.ansiBrightGreen': color.ansi.greenBright,
-      'terminal.ansiBrightYellow': color.ansi.yellowBright,
-      'terminal.ansiBrightBlue': color.ansi.blueBright,
-      'terminal.ansiBrightMagenta': color.ansi.magentaBright,
-      'terminal.ansiBrightCyan': color.ansi.cyanBright,
-      'terminal.ansiBrightWhite': color.ansi.whiteBright,
-
-      "gitDecoration.addedResourceForeground"      : color.diff.addition.text,
-      "gitDecoration.modifiedResourceForeground"   : color.diff.change.text,
-      "gitDecoration.deletedResourceForeground"    : color.diff.deletion.text,
-      "gitDecoration.untrackedResourceForeground"  : color.diff.addition.text,
-      "gitDecoration.ignoredResourceForeground"    : themes({ light: scale.gray[4], dark: color.text.disabled, dimmed: color.text.disabled }),
-      "gitDecoration.conflictingResourceForeground": color.text.warning,
-      "gitDecoration.submoduleResourceForeground"  : color.text.secondary,
-
-      "debugToolBar.background"                    : color.bg.overlay,
-      "editor.stackFrameHighlightBackground"       : themes({ light: "#ffd33d33", dark: "#D2992225", dimmed: "#C6902625" }), // needs opacity (yellow)
-      "editor.focusedStackFrameHighlightBackground": themes({ light: "#28a74525", dark: "#3FB95025", dimmed: "#2b6a3033" }), // needs opacity (green)
-
-      "peekViewEditor.matchHighlightBackground": themes({ dark: "#ffd33d33", dimmed: "#ffd33d33" }),
-      "peekViewResult.matchHighlightBackground": themes({ dark: "#ffd33d33", dimmed: "#ffd33d33" }),
-      "peekViewEditor.background"              : themes({ dark: "#0d111788", dimmed: "#0d111788" }),
-      "peekViewResult.background"              : themes({ dark: scale.gray[9], dimmed: scale.gray[9] }),
-
-      "settings.headerForeground"        : color.text.secondary,
-      "settings.modifiedItemIndicator"   : color.diff.change.border,
-      "welcomePage.buttonBackground"     : color.btn.bg,
-      "welcomePage.buttonHoverBackground": color.btn.hoverBg,
+      "scrollbarSlider.background"      : themes({ light: "#959da533", dark: "#484F5833", dimmed: "#484F5833", hc: "#484F5833" }),
+      "scrollbarSlider.hoverBackground" : themes({ light: "#959da544", dark: "#484F5844", dimmed: "#484F5844", hc: "#484F5844" }),
+      "scrollbarSlider.activeBackground": themes({ light: "#959da588", dark: "#484F5888", dimmed: "#484F5888", hc: "#484F5888" }),
+      "editorOverviewRuler.border"      : themes({ light: scale.white, dark: scale.black, dimmed: scale.black, hc: scale.black }),
+
+      "panel.background"             : hex(color.canvas.inset),
+      "panel.border"                 : hex(color.border.default),
+      "panelTitle.activeBorder"      : hex(color.primer.border.active),
+      "panelTitle.activeForeground"  : hex(color.fg.default),
+      "panelTitle.inactiveForeground": hex(color.fg.muted),
+      "panelInput.border"            : hex(color.border.default),
+
+      "terminal.foreground": hex(color.fg.muted),
+      'terminal.ansiBlack': hex(color.ansi.black),
+      'terminal.ansiRed': hex(color.ansi.red),
+      'terminal.ansiGreen': hex(color.ansi.green),
+      'terminal.ansiYellow': hex(color.ansi.yellow),
+      'terminal.ansiBlue': hex(color.ansi.blue),
+      'terminal.ansiMagenta': hex(color.ansi.magenta),
+      'terminal.ansiCyan': hex(color.ansi.cyan),
+      'terminal.ansiWhite': hex(color.ansi.white),
+      'terminal.ansiBrightBlack': hex(color.ansi.blackBright),
+      'terminal.ansiBrightRed': hex(color.ansi.redBright),
+      'terminal.ansiBrightGreen': hex(color.ansi.greenBright),
+      'terminal.ansiBrightYellow': hex(color.ansi.yellowBright),
+      'terminal.ansiBrightBlue': hex(color.ansi.blueBright),
+      'terminal.ansiBrightMagenta': hex(color.ansi.magentaBright),
+      'terminal.ansiBrightCyan': hex(color.ansi.cyanBright),
+      'terminal.ansiBrightWhite': hex(color.ansi.whiteBright),
+
+      "gitDecoration.addedResourceForeground"      : hex(color.success.fg),
+      "gitDecoration.modifiedResourceForeground"   : hex(color.attention.fg),
+      "gitDecoration.deletedResourceForeground"    : hex(color.danger.fg),
+      "gitDecoration.untrackedResourceForeground"  : hex(color.success.fg),
+      "gitDecoration.ignoredResourceForeground"    : hex(color.fg.subtle),
+      "gitDecoration.conflictingResourceForeground": hex(color.severe.fg),
+      "gitDecoration.submoduleResourceForeground"  : hex(color.fg.muted),
+
+      "debugToolBar.background"                    : hex(color.canvas.overlay),
+      "editor.stackFrameHighlightBackground"       : themes({ light: "#ffd33d33", dark: "#D2992225", dimmed: "#C6902625", hc: "#C6902625" }), // needs opacity (yellow)
+      "editor.focusedStackFrameHighlightBackground": themes({ light: "#28a74525", dark: "#3FB95025", dimmed: "#2b6a3033", hc: "#2b6a3033" }), // needs opacity (green)
+
+      "peekViewEditor.matchHighlightBackground": themes({ dark: "#ffd33d33", dimmed: "#ffd33d33", hc: "#ffd33d33" }),
+      "peekViewResult.matchHighlightBackground": themes({ dark: "#ffd33d33", dimmed: "#ffd33d33", hc: "#ffd33d33" }),
+      "peekViewEditor.background"              : themes({ dark: "#0d111788", dimmed: "#0d111788", hc: "#0d111788" }),
+      "peekViewResult.background"              : themes({ dark: scale.gray[9], dimmed: scale.gray[9], hc: scale.gray[9] }),
+
+      "settings.headerForeground"        : hex(color.fg.muted),
+      "settings.modifiedItemIndicator"   : hex(color.attention.muted),
+      "welcomePage.buttonBackground"     : hex(color.btn.bg),
+      "welcomePage.buttonHoverBackground": hex(color.btn.hoverBg),
     },
     semanticHighlighting: true,
     tokenColors: [
       {
         scope: ["comment", "punctuation.definition.comment", "string.comment"],
         settings: {
-          foreground: themes({ light: scale.gray[5], dark: scale.gray[3], dimmed: scale.gray[3] }),
+          foreground: themes({ light: scale.gray[5], dark: scale.gray[3], dimmed: scale.gray[3], hc: scale.gray[3] }),
         },
       },
       {
@@ -240,7 +249,7 @@ function getTheme({ theme, name }) {
           "entity",
         ],
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
@@ -250,7 +259,7 @@ function getTheme({ theme, name }) {
           "meta.definition.variable"
         ],
         settings: {
-          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }),
+          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2], hc: scale.orange[2] }),
         },
       },
       {
@@ -264,13 +273,13 @@ function getTheme({ theme, name }) {
           "meta.embedded.expression"
         ],
         settings: {
-          foreground: color.text.primary,
+          foreground: hex(color.fg.default),
         },
       },
       {
         "scope": "entity.name.function",
         "settings": {
-          foreground: themes({ light: scale.purple[5], dark: scale.purple[2], dimmed: scale.purple[2] }),
+          foreground: themes({ light: scale.purple[5], dark: scale.purple[2], dimmed: scale.purple[2], hc: scale.purple[2] }),
         }
       },
       {
@@ -279,19 +288,19 @@ function getTheme({ theme, name }) {
           "support.class.component"
         ],
         settings: {
-          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }),
+          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1], hc: scale.green[1] }),
         },
       },
       {
         scope: "keyword",
         settings: {
-          foreground: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3] }),
+          foreground: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3], hc: scale.red[3] }),
         },
       },
       {
         scope: ["storage", "storage.type"],
         settings: {
-          foreground: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3] }),
+          foreground: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3], hc: scale.red[3] }),
         },
       },
       {
@@ -301,7 +310,7 @@ function getTheme({ theme, name }) {
           "storage.type.java",
         ],
         settings: {
-          foreground: color.text.primary,
+          foreground: hex(color.fg.default),
         },
       },
       {
@@ -311,92 +320,92 @@ function getTheme({ theme, name }) {
           "string punctuation.section.embedded source",
         ],
         settings: {
-          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }),
+          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1], hc: scale.blue[1] }),
         },
       },
       {
         scope: "support",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "meta.property-name",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "variable",
         settings: {
-          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }),
+          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2], hc: scale.orange[2] }),
         },
       },
       {
         scope: "variable.other",
         settings: {
-          foreground: color.text.primary,
+          foreground: hex(color.fg.default),
         },
       },
       {
         scope: "invalid.broken",
         settings: {
           fontStyle: "italic",
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
         scope: "invalid.deprecated",
         settings: {
           fontStyle: "italic",
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
         scope: "invalid.illegal",
         settings: {
           fontStyle: "italic",
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
         scope: "invalid.unimplemented",
         settings: {
           fontStyle: "italic",
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
         scope: "carriage-return",
         settings: {
           fontStyle: "italic underline",
-          background: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3] }),
-          foreground: themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9] }),
+          background: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3], hc: scale.red[3] }),
+          foreground: themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9], hc: scale.gray[9] }),
           content: "^M",
         },
       },
       {
         scope: "message.error",
         settings: {
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
         scope: "string source",
         settings: {
-          foreground: color.text.primary,
+          foreground: hex(color.fg.default),
         },
       },
       {
         scope: "string variable",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: ["source.regexp", "string.regexp"],
         settings: {
-          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }),
+          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1], hc: scale.blue[1] }),
         },
       },
       {
@@ -407,71 +416,71 @@ function getTheme({ theme, name }) {
           "string.regexp string.regexp.arbitrary-repitition",
         ],
         settings: {
-          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }),
+          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1], hc: scale.blue[1] }),
         },
       },
       {
         scope: "string.regexp constant.character.escape",
         settings: {
           fontStyle: "bold",
-          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }),
+          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1], hc: scale.green[1] }),
         },
       },
       {
         scope: "support.constant",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "support.variable",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "meta.module-reference",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "punctuation.definition.list.begin.markdown",
         settings: {
-          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }),
+          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2], hc: scale.orange[2] }),
         },
       },
       {
         scope: ["markup.heading", "markup.heading entity.name"],
         settings: {
           fontStyle: "bold",
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "markup.quote",
         settings: {
-          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }),
+          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1], hc: scale.green[1] }),
         },
       },
       {
         scope: "markup.italic",
         settings: {
           fontStyle: "italic",
-          foreground: color.text.primary,
+          foreground: hex(color.fg.default),
         },
       },
       {
         scope: "markup.bold",
         settings: {
           fontStyle: "bold",
-          foreground: color.text.primary,
+          foreground: hex(color.fg.default),
         },
       },
       {
         scope: "markup.raw",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
@@ -481,8 +490,8 @@ function getTheme({ theme, name }) {
           "punctuation.definition.deleted",
         ],
         settings: {
-          background: themes({ light: scale.red[0], dark: scale.red[9], dimmed: scale.red[9] }),
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          background: themes({ light: scale.red[0], dark: scale.red[9], dimmed: scale.red[9], hc: scale.red[9] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
@@ -492,48 +501,48 @@ function getTheme({ theme, name }) {
           "punctuation.definition.inserted",
         ],
         settings: {
-          background: themes({ light: scale.green[0], dark: scale.green[9], dimmed: scale.green[9] }),
-          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }),
+          background: themes({ light: scale.green[0], dark: scale.green[9], dimmed: scale.green[9], hc: scale.green[9] }),
+          foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1], hc: scale.green[1] }),
         },
       },
       {
         scope: ["markup.changed", "punctuation.definition.changed"],
         settings: {
-          background: themes({ light: scale.orange[1], dark: scale.orange[8], dimmed: scale.orange[8] }),
-          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }),
+          background: themes({ light: scale.orange[1], dark: scale.orange[8], dimmed: scale.orange[8], hc: scale.orange[8] }),
+          foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2], hc: scale.orange[2] }),
         },
       },
       {
         scope: ["markup.ignored", "markup.untracked"],
         settings: {
-          foreground: themes({ light: scale.gray[1], dark: scale.gray[8], dimmed: scale.gray[8] }),
-          background: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.gray[1], dark: scale.gray[8], dimmed: scale.gray[8], hc: scale.gray[8] }),
+          background: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "meta.diff.range",
         settings: {
-          foreground: themes({ light: scale.purple[5], dark: scale.purple[2], dimmed: scale.purple[2] }),
+          foreground: themes({ light: scale.purple[5], dark: scale.purple[2], dimmed: scale.purple[2], hc: scale.purple[2] }),
           fontStyle: "bold",
         },
       },
       {
         scope: "meta.diff.header",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "meta.separator",
         settings: {
           fontStyle: "bold",
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
         scope: "meta.output",
         settings: {
-          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }),
+          foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2], hc: scale.blue[2] }),
         },
       },
       {
@@ -546,19 +555,19 @@ function getTheme({ theme, name }) {
           "brackethighlighter.quote",
         ],
         settings: {
-          foreground: themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3] }),
+          foreground: themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3], hc: scale.gray[3] }),
         },
       },
       {
         scope: "brackethighlighter.unmatched",
         settings: {
-          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }),
+          foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2], hc: scale.red[2] }),
         },
       },
       {
         scope: ["constant.other.reference.link", "string.other.link"],
         settings: {
-          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }),
+          foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1], hc: scale.blue[1] }),
           fontStyle: "underline",
         },
       },