Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#96A2BE
  • activityBar.activeFocusBorder#B0C0E4
  • activityBar.background#484242
  • activityBar.foreground#E9E2DB
  • activityBar.inactiveForeground#6C6564
  • badge.foreground#E9E2DB
  • breadcrumb.background#363031
  • breadcrumb.foreground#E9E2DB
  • button.background#96A2BE
  • button.border#B0C0E4
  • button.foreground#5A5453
  • button.hoverBackground#B0C0E4
  • diffEditor.diagonalFill#5A545344
  • diffEditor.insertedTextBackground#96A2BE22
  • diffEditor.removedTextBackground#C39F7B22
  • dropdown.background#5A5453
  • dropdown.border#635C5C
  • dropdown.foreground#E9E2DB
  • dropdown.listBackground#5A5453
  • editor.background#363031
  • editor.findMatchBackground#C39F7B66
  • editor.findMatchHighlightBackground#C39F7B33
  • editor.findRangeHighlightBackground#C39F7B10
  • editor.foreground#E9E2DB
  • editor.lineHighlightBorder#363031
  • editor.selectionBackground#5A545366
  • editorCursor.foreground#B599CA
  • editorGroup.border#484242
  • editorGroupHeader.tabsBackground#484242
  • editorGutter.addedBackground#99AD89
  • editorGutter.deletedBackground#C29B9A
  • editorGutter.modifiedBackground#96A2BE
  • editorIndentGuide.activeBackground1#6C656466
  • editorIndentGuide.activeBackground2#6C656466
  • editorIndentGuide.activeBackground3#6C656466
  • editorIndentGuide.activeBackground4#6C656466
  • editorIndentGuide.activeBackground5#6C656466
  • editorIndentGuide.activeBackground6#6C656466
  • editorIndentGuide.background1#514B4A66
  • editorIndentGuide.background2#514B4A66
  • editorIndentGuide.background3#514B4A66
  • editorIndentGuide.background4#514B4A66
  • editorIndentGuide.background5#514B4A66
  • editorIndentGuide.background6#514B4A66
  • editorLineNumber.activeForeground#6C6564
  • editorLineNumber.foreground#514B4A
  • editorStickyScroll.shadow#514B4A66
  • editorWidget.background#484242
  • editorWidget.border#514B4A
  • editorWidget.foreground#E9E2DB
  • foreground#E9E2DB
  • gitDecoration.addedResourceForeground#B3CEA1
  • gitDecoration.deletedResourceForeground#E7B7B6
  • gitDecoration.ignoredResourceForeground#635C5C
  • gitDecoration.modifiedResourceForeground#B0C0E4
  • gitDecoration.untrackedResourceForeground#E7B7B6
  • icon.foreground#E9E2DB
  • input.background#363031
  • input.foreground#E9E2DB
  • input.placeholderForeground#5A5453
  • list.activeFocusBackground#5A5453
  • list.activeSelectionBackground#5A5453
  • list.activeSelectionForeground#E9E2DB
  • list.focusAndSelectionOutline#484242
  • list.focusOutline#484242
  • list.highlightForeground#E9E2DB
  • list.hoverBackground#635C5C
  • list.hoverForeground#E9E2DB
  • list.inactiveFocusBackground#5A5453
  • list.inactiveFocusOutline#484242
  • list.inactiveSelectionBackground#5A5453
  • notebook.cellHoverBackground#48424255
  • notebook.focusedCellBackground#484242
  • notebook.focusedCellBorder#484242
  • notebook.focusedEditorBorder#D7B5F3
  • notebookStatusErrorIcon.foreground#C29B9A
  • notebookStatusRunningIcon.foreground#96A2BE
  • notebookStatusSuccessIcon.foreground#99AD89
  • panelStickyScroll.shadow#514B4A66
  • panelTitle.activeForeground#6C6564
  • panelTitle.inactiveForeground#635C5C
  • pickerGroup.border#635C5C
  • quickInput.background#484242
  • quickInput.foreground#E9E2DB
  • quickInputList.focusBackground#514B4A
  • quickInputList.focusForeground#B0C0E4
  • scrollbar.shadow#514B4A66
  • sideBar.background#484242
  • sideBar.border#484242
  • sideBar.dropBackground#96A2BE
  • sideBarSectionHeader.background#514B4A
  • sideBarSectionHeader.foreground#E9E2DB
  • sideBarStickyScroll.background#514B4A
  • sideBarStickyScroll.shadow#514B4A66
  • sideBarTitle.foreground#E9E2DB
  • statusBar.background#484242
  • statusBar.foreground#E9E2DB
  • tab.activeBorderTop#96A2BE
  • tab.activeForeground#E9E2DB
  • tab.border#484242
  • tab.inactiveBackground#514B4A
  • tab.inactiveForeground#E9E2DB
  • tab.unfocusedActiveBackground#363031
  • terminal.ansiBlue#B0C0E4
  • terminal.ansiBrightBlue#96A2BE
  • terminal.ansiBrightGreen#99AD89
  • terminal.ansiBrightMagenta#B599CA
  • terminal.ansiBrightRed#C29B9A
  • terminal.ansiBrightYellow#C39F7B
  • terminal.ansiGreen#B3CEA1
  • terminal.ansiMagenta#D7B5F3
  • terminal.ansiRed#E7B7B6
  • terminal.ansiYellow#E8BC8F
  • terminal.background#363031
  • terminal.border#484242
  • terminal.foreground#E9E2DB
  • terminal.tab.activeBorder#D7B5F3
  • terminalCursor.background#D7B5F366
  • terminalCursor.foreground#E9E2DB
  • titleBar.activeBackground#484242
  • titleBar.activeForeground#E9E2DB
  • titleBar.inactiveBackground#484242
  • titleBar.inactiveForeground#E9E2DB
  • widgetStickyScroll.shadow#514B4A66
  • window.activeBorder#484242

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B8B1AD
support.type#E8BC8F
support.function.macro#C29B9Aitalic
constant#E7B7B6
constant.numeric#B3CEA1
constant.character.escape#C8C2BCbold italic
keyword.operator#C8C2BC
keyword.operator.boolean#96A2BE
meta.bracket#B8B1AD
string#99AD89
keyword#D7B5F3
variable.interpolation#C29B9A
entity.name.function#B0C0E4italic
support.function#B0C0E4
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#D7B5F3bold
entity.name.tag#D7B5F3bold
string.quoted.single.yaml, string.quoted.double.yaml#B0C0E4
markup.heading.markdown#B0C0E4bold
fenced_code.block.language#D7B5F3italic
string.other.link.title.markdown, string.other.link.description.markdown#B3CEA1bold
constant.other.reference.link.markdown#C39F7Bitalic
markup.underline.link.markdown#96A2BEunderline
markup.inline.raw.string.markdown#D7B5F3
markup.boldbold
markup.italicitalic
string.other.link.description.markdown.citation#C8C2BCunderline
punctuation.definition#A8A19D

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...