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.background#1d1f20
  • activityBar.border#D8DCDE
  • activityBar.foreground#F0F2F3
  • activityBar.inactiveForeground#828688
  • activityBarBadge.background#de7470
  • activityBarBadge.foreground#ffffff
  • badge.background#de7470
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#a0a6ad
  • breadcrumb.background#FEFEFE
  • breadcrumb.focusForeground#1D1F20
  • breadcrumb.foreground#727678
  • breadcrumbPicker.background#ffffff
  • button.background#a0a6ad
  • button.border#a0a6ad60
  • button.foreground#ffffff
  • button.hoverBackground#80868D
  • button.secondaryBackground#424648
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#1d1f20
  • descriptionForeground#727678
  • dropdown.background#ffffff
  • dropdown.border#D8DCDE
  • dropdown.foreground#1D1F20
  • dropdown.listBackground#FCFDFD
  • editor.background#FEFEFE
  • editor.findMatchBackground#de747050
  • editor.findMatchBorder#de7470
  • editor.findMatchHighlightBackground#a0a6ad28
  • editor.foreground#1D1F20
  • editor.inactiveSelectionBackground#F0F2F340
  • editor.lineHighlightBackground#F8FAFA
  • editor.lineHighlightBorder#F0F2F300
  • editor.selectionBackground#a0a6ad35
  • editor.wordHighlightBackground#a0a6ad20
  • editor.wordHighlightBorder#a0a6ad60
  • editor.wordHighlightStrongBackground#a0a6ad40
  • editor.wordHighlightStrongBorder#a0a6ad80
  • editorBracketMatch.background#a0a6ad30
  • editorBracketMatch.border#a0a6ad
  • editorCursor.foreground#a0a6ad
  • editorGroupHeader.tabsBackground#FCFDFD
  • editorGroupHeader.tabsBorder#D8DCDE
  • editorGutter.addedBackground#70A888
  • editorGutter.background#FEFEFE
  • editorGutter.deletedBackground#D86870
  • editorGutter.modifiedBackground#A898C8
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#D8DCDE
  • editorHoverWidget.statusBarBackground#FCFDFD
  • editorIndentGuide.activeBackground1#C0C6CA
  • editorIndentGuide.background1#D8DCDE
  • editorLineNumber.activeForeground#a0a6ad
  • editorLineNumber.foreground#C8CCCE
  • editorOverviewRuler.addedForeground#70A888
  • editorOverviewRuler.border#D8DCDE
  • editorOverviewRuler.deletedForeground#D86870
  • editorOverviewRuler.errorForeground#D86870
  • editorOverviewRuler.findMatchForeground#de747080
  • editorOverviewRuler.modifiedForeground#A898C8
  • editorOverviewRuler.warningForeground#A898C8
  • editorRuler.foreground#D8DCDE
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#D8DCDE
  • editorSuggestWidget.focusHighlightForeground#80868D
  • editorSuggestWidget.foreground#1D1F20
  • editorSuggestWidget.highlightForeground#a0a6ad
  • editorSuggestWidget.selectedBackground#F0F2F3
  • editorWidget.background#ffffff
  • editorWidget.border#D8DCDE
  • editorWidget.foreground#1D1F20
  • editorWidget.resizeBorder#a0a6ad
  • errorForeground#D86870
  • focusBorder#a0a6ad80
  • gitDecoration.addedResourceForeground#70A888
  • gitDecoration.conflictingResourceForeground#C8B8B0
  • gitDecoration.deletedResourceForeground#D86870
  • gitDecoration.ignoredResourceForeground#828688
  • gitDecoration.modifiedResourceForeground#A898C8
  • gitDecoration.stageDeletedResourceForeground#D86870
  • gitDecoration.stageModifiedResourceForeground#A898C8
  • gitDecoration.submoduleResourceForeground#98A8B0
  • gitDecoration.untrackedResourceForeground#a0a6ad
  • icon.foreground#a0a6ad
  • input.background#ffffff
  • input.border#D8DCDE
  • input.foreground#1D1F20
  • input.placeholderForeground#828688
  • inputOption.activeBackground#a0a6ad
  • inputOption.activeBorder#80868D
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#D8687020
  • inputValidation.errorBorder#D86870
  • inputValidation.infoBackground#a0a6ad20
  • inputValidation.infoBorder#a0a6ad
  • inputValidation.warningBackground#A898C820
  • inputValidation.warningBorder#A898C8
  • list.activeSelectionBackground#a0a6ad
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#1d1f20
  • list.focusBackground#F0F2F3
  • list.hoverBackground#F8FAFA
  • list.inactiveSelectionBackground#F0F2F3
  • list.inactiveSelectionForeground#1D1F20
  • minimap.background#FEFEFE
  • minimap.errorHighlight#D86870
  • minimap.findMatchHighlight#de747080
  • minimap.selectionHighlight#a0a6ad50
  • minimap.warningHighlight#A898C8
  • minimapGutter.addedBackground#70A888
  • minimapGutter.deletedBackground#D86870
  • minimapGutter.modifiedBackground#A898C8
  • notificationCenter.border#D8DCDE
  • notificationCenterHeader.background#F8FAFA
  • notificationCenterHeader.foreground#1D1F20
  • notifications.background#ffffff
  • notifications.border#D8DCDE
  • notifications.foreground#1D1F20
  • notificationsErrorIcon.foreground#D86870
  • notificationsInfoIcon.foreground#a0a6ad
  • notificationsWarningIcon.foreground#A898C8
  • panel.background#FCFDFD
  • panel.border#D8DCDE
  • panelTitle.activeBorder#a0a6ad
  • panelTitle.activeForeground#1D1F20
  • panelTitle.inactiveForeground#828688
  • peekView.border#a0a6ad
  • peekViewEditor.background#FEFEFE
  • peekViewEditor.matchHighlightBackground#a0a6ad40
  • peekViewEditorGutter.background#FCFDFD
  • peekViewResult.background#FCFDFD
  • peekViewResult.fileForeground#1D1F20
  • peekViewResult.lineForeground#424648
  • peekViewResult.matchHighlightBackground#a0a6ad50
  • peekViewResult.selectionBackground#a0a6ad30
  • peekViewResult.selectionForeground#1D1F20
  • peekViewTitle.background#1d1f20
  • peekViewTitleDescription.foreground#828688
  • peekViewTitleLabel.foreground#F0F2F3
  • progressBar.background#a0a6ad
  • sash.hoverBorder#a0a6ad
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#a0a6ad
  • scrollbarSlider.background#C8D0D560
  • scrollbarSlider.hoverBackground#C8D0D580
  • selection.background#a0a6ad40
  • sideBar.background#FCFDFD
  • sideBar.foreground#424648
  • sideBarSectionHeader.background#F0F2F3
  • sideBarSectionHeader.border#D8DCDE
  • sideBarSectionHeader.foreground#1D1F20
  • sideBarTitle.foreground#a0a6ad
  • statusBar.background#a0a6ad
  • statusBar.border#8A9095
  • statusBar.debuggingBackground#de7470
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#424648
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#FEFEFE
  • tab.activeBorder#a0a6ad
  • tab.activeBorderTop#a0a6ad
  • tab.activeForeground#a0a6ad
  • tab.border#D8DCDE
  • tab.hoverBackground#F8FAFA
  • tab.hoverBorder#a0a6ad80
  • tab.hoverForeground#a0a6ad
  • tab.inactiveBackground#FCFDFD
  • tab.inactiveForeground#727678
  • terminal.ansiBlack#1D1F20
  • terminal.ansiBlue#a0a6ad
  • terminal.ansiBrightBlack#727678
  • terminal.ansiBrightBlue#B0B6BD
  • terminal.ansiBrightCyan#A8B8C0
  • terminal.ansiBrightGreen#88C098
  • terminal.ansiBrightMagenta#C8A8D8
  • terminal.ansiBrightRed#E87880
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#D8C8C0
  • terminal.ansiCyan#98A8B0
  • terminal.ansiGreen#70A888
  • terminal.ansiMagenta#B898C8
  • terminal.ansiRed#D86870
  • terminal.ansiWhite#FCFDFD
  • terminal.ansiYellow#C8B8B0
  • terminal.background#FEFEFE
  • terminal.border#D8DCDE
  • terminal.foreground#1D1F20
  • textBlockQuote.background#F8FAFA
  • textBlockQuote.border#a0a6ad
  • textCodeBlock.background#F8FAFA
  • textLink.activeForeground#80868D
  • textLink.foreground#a0a6ad
  • textPreformat.foreground#A898C8
  • textSeparator.foreground#D8DCDE
  • titleBar.activeBackground#1d1f20
  • titleBar.activeForeground#F0F2F3
  • titleBar.border#D8DCDE
  • titleBar.inactiveBackground#424648
  • titleBar.inactiveForeground#828688

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#828688italic
keyword, storage#80868D
storage.type, support.type#60666D
constant.language, support.constant, variable.language#D88888
variable, support.variable#1D1F20
entity.name.function, support.function#A898C8bold
entity.name.type, entity.other.inherited-class, support.class#60666Dbold
constant.numeric, constant.character, constant#de7470
string#787880
constant.character.escape#a0a6ad
punctuation#727678
entity.name.tag#80868D
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#60666Ditalic
meta.property-name, support.type.property-name#A898C8
markup.heading#a0a6adbold

Shiki preview

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

Loading...

wuthering waves color themes - Coding Theme