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