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#282c34
  • activityBarBadge.background#c68ed7
  • activityBarBadge.foreground#282c34
  • badge.background#c68ed7
  • badge.foreground#282c34
  • button.background#d6ab6399
  • debugExceptionWidget.background#282c34
  • debugExceptionWidget.border#c63957
  • debugToolBar.background#282c34
  • diffEditor.border#c68ed760
  • diffEditor.diagonalFill#c68ed760
  • diffEditor.insertedTextBackground#5cbb5b20
  • diffEditor.removedTextBackground#c6395720
  • dropdown.background#282c34
  • dropdown.border#5c77a2
  • editor.background#282c34
  • editor.findMatchBackground#c68ed760
  • editor.findMatchHighlightBackground#c68ed760
  • editor.lineHighlightBackground#202329
  • editor.selectionBackground#c68ed760
  • editor.selectionHighlightBackground#c68ed760
  • editor.wordHighlightBackground#d6ab6327
  • editor.wordHighlightBorder#d6ab63b6
  • editor.wordHighlightStrongBackground#495d7eaa
  • editorCursor.foreground#c63957
  • editorGroup.border#282c34
  • editorGroup.dropBackground#495d7e44
  • editorGroup.emptyBackground#282c34
  • editorGroupHeader.tabsBackground#282c34
  • editorGutter.background#202329
  • editorHoverWidget.background#202329
  • editorHoverWidget.border#5cbb5b
  • editorLineNumber.foreground#495d7e
  • editorLink.activeForeground#d6ab63
  • editorMarkerNavigationError.background#c63957
  • editorMarkerNavigationWarning.background#d6ab63
  • editorSuggestWidget.background#202329
  • editorSuggestWidget.border#c68ed760
  • editorSuggestWidget.foreground#d6ab63
  • editorSuggestWidget.highlightForeground#46aeb9
  • editorSuggestWidget.selectedBackground#c68ed760
  • editorWhitespace.foreground#d6ab6380
  • editorWidget.background#282c34
  • errorForeground#d6ab63
  • focusBorder#495d7e99
  • gitDecoration.addedResourceForeground#5cbb5b
  • gitDecoration.conflictingResourceForeground#c68ed7
  • gitDecoration.deletedResourceForeground#c63957
  • gitDecoration.ignoredResourceForeground#727475
  • gitDecoration.modifiedResourceForeground#d6ab63
  • gitDecoration.untrackedResourceForeground#46aeb9
  • input.background#282c34
  • input.foreground#a2a2a2
  • input.placeholderForeground#d6ab63aa
  • inputOption.activeBorder#495d7e99
  • inputValidation.errorBackground#c63957
  • inputValidation.errorBorder#c94f6a
  • inputValidation.errorForeground#495d7e
  • inputValidation.infoBackground#648cdd
  • inputValidation.infoBorder#75a6d6
  • inputValidation.warningBackground#d6ab63
  • inputValidation.warningBorder#d6ab63
  • list.activeSelectionBackground#495d7e
  • list.dropBackground#495d7e
  • list.focusBackground#495d7e
  • list.hoverBackground#495d7eaa
  • list.inactiveSelectionBackground#495d7e
  • panel.border#c68ed750
  • peekView.border#648cdd
  • peekViewEditor.matchHighlightBackground#d6ab6340
  • peekViewEditorGutter.background#282c34
  • peekViewResult.background#282c34
  • peekViewTitle.background#282c34
  • pickerGroup.border#495d7e99
  • pickerGroup.foreground#495d7e99
  • progressBar.background#282c34
  • selection.background#c68ed760
  • sideBar.background#282c34
  • sideBar.border#c68ed750
  • sideBarTitle.foreground#d6ab63
  • statusBar.background#282c34
  • statusBar.debuggingBackground#282c34
  • statusBar.foreground#d6ab63
  • statusBar.noFolderBackground#282c34
  • statusBarItem.prominentBackground#282c34
  • statusBarItem.prominentHoverBackground#282c34
  • tab.activeBackground#282c34
  • tab.activeForeground#a2a2a2
  • tab.border#282c34
  • tab.inactiveBackground#293548
  • tab.inactiveForeground#a2a2a2
  • terminal.ansiBlack#495d7e
  • terminal.ansiBlue#648cdd
  • terminal.ansiBrightBlack#495d7e
  • terminal.ansiBrightBlue#648cdd
  • terminal.ansiBrightCyan#46aeb9
  • terminal.ansiBrightGreen#5cbb5b
  • terminal.ansiBrightMagenta#c68ed7
  • terminal.ansiBrightRed#c63957
  • terminal.ansiBrightWhite#a2a2a2
  • terminal.ansiBrightYellow#d6ab63
  • terminal.ansiCyan#46aeb9
  • terminal.ansiGreen#5cbb5b
  • terminal.ansiMagenta#c68ed7
  • terminal.ansiRed#c63957
  • terminal.ansiWhite#a2a2a2
  • terminal.ansiYellow#d6ab63
  • terminal.foreground#a2a2a2
  • terminal.selectionBackground#c68ed760
  • welcomePage.background#282c34

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#a2a2a2—
meta.embedded, source.groovy.embedded#d6ab63—
comment#7a92777eitalic bold
string.quoted.docstring.multi.python#7a92777eitalic bold
string#648cdd—
string.regexp#c63957—
constant.numeric#c68ed7—
variable.language, variable.other#d6ab63—
keyword#5cbb5b—
storage#d6ab63bold
entity.name.class, entity.name.type#c63957
entity.name.function#d6ab63—
punctuation.definition.variable#5cbb5b—
punctuation.section.embedded.begin, punctuation.section.embedded.end#c63957—
constant.language, meta.preprocessor#d6ab63—
support.function.construct, keyword.other.new#c63957—
constant.character, constant.other#c63957—
entity.other.inherited-class#c68ed7—
variable.parameter——
entity.name.tag#d6ab63—
punctuation.definition.tag#796137—
entity.other.attribute-name#d6ab63—
support.function#d6ab63—
punctuation.separator.continuation#c63957—
support.constant——
support.type, support.class#5cbb5b—
support.type.exception#c63957—
support.other.variable——
invalid——
meta.diff, meta.diff.header#5cbb5bitalic
markup.deleted#c63957
markup.changed#c63957
markup.inserted#5cbb5b—
markup.quote#5cbb5b—
markup.list#d6ab63—
markup.bold, markup.italic#c68ed7—
markup.inline.raw#648cdd
markup.heading#d6ab63—
markup.heading.setext#d6ab63
token.info-token#d6ab63—
token.warn-token#d6ab63—
token.error-token#c63957—
token.debug-token#c68ed7—
variable.object.property#d6ab63—
variable.parameter#d6ab63—
support.type—
storage.type.function—
entity.other.inherited-class#d6ab63—
storage.modifier#5cbb5bff
storage.type#5cbb5bff
keyword.control.import#c68ed7—
storage.modifier.async#5cbb5bff
meta.import#d6ab63—
source.ts#d6ab63—
meta.function-call#d6ab63—
entity.name.type#d6ab63—
entity.name.function#d6ab63—
variable.other#d6ab63—
storage.modifier.tsx#5cbb5b—
entity.name.type.class.python#d6ab63—
support.type.python#d6ab63—
source.python#a2a2a2—
keyword.control.import#c63957—
keyword.control.from#c63957—
constant.language.python#648cdd—
entity.name.function.python#46aeb9—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.separator.dictionary.pair.json#d6ab63—
storage.type.ts#d6ab63—
support.type.primitive#d6ab63—
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#c68ed7—
CHPastel by Jakub Gawlik - VS Code Theme