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#F0F0F0
  • activityBar.border#F0F0F0
  • activityBar.dropBackground#D0D0D0
  • activityBar.foreground#403f53
  • activityBarBadge.background#403f53
  • activityBarBadge.foreground#F0F0F0
  • badge.background#2AA298
  • badge.foreground#F0F0F0
  • button.background#2AA298
  • button.foreground#F0F0F0
  • debugExceptionWidget.background#F0F0F0
  • debugExceptionWidget.border#d9d9d9
  • debugToolBar.background#F0F0F0
  • descriptionForeground#403f53
  • dropdown.background#F0F0F0
  • dropdown.border#d9d9d9
  • dropdown.foreground#403f53
  • editor.background#FCFCFC
  • editor.findMatchBackground#93A1A16c
  • editor.findMatchHighlightBackground#93a1a16c
  • editor.findRangeHighlightBackground#E0E7EA
  • editor.foreground#6C7757
  • editor.hoverHighlightBackground#d3e8f8
  • editor.lineHighlightBackground#F0F0F0
  • editor.rangeHighlightBackground#E0E7EA
  • editor.selectionBackground#E0E0E0
  • editor.selectionHighlightBackground#d3e8f8
  • editor.wordHighlightBackground#d3e8f8
  • editor.wordHighlightStrongBackground#A3CFEE
  • editorBracketMatch.background#d3e8f8
  • editorBracketMatch.border#2AA298
  • editorCodeLens.foreground#403f53
  • editorCursor.foreground#90A7B2
  • editorError.border#FBFBFB
  • editorError.foreground#E64D49
  • editorGroup.background#F6F6F6
  • editorGroup.border#F0F0F0
  • editorGroupHeader.noTabsBackground#F0F0F0
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGroupHeader.tabsBorder#F0F0F0
  • editorGutter.addedBackground#49d0c5
  • editorGutter.deletedBackground#f76e6e
  • editorGutter.modifiedBackground#6fbef6
  • editorHoverWidget.background#F0F0F0
  • editorHoverWidget.border#d9d9d9
  • editorIndentGuide.background#d9d9d9
  • editorLineNumber.activeForeground#403f53
  • editorLineNumber.foreground#90A7B2
  • editorMarkerNavigation.background#D0D0D0
  • editorMarkerNavigationError.background#f76e6e
  • editorMarkerNavigationWarning.background#daaa01
  • editorOverviewRuler.errorForeground#E64D49
  • editorOverviewRuler.warningForeground#daaa01
  • editorRuler.foreground#d9d9d9
  • editorSuggestWidget.background#F0F0F0
  • editorSuggestWidget.border#d9d9d9
  • editorSuggestWidget.foreground#403f53
  • editorSuggestWidget.highlightForeground#403f53
  • editorSuggestWidget.selectedBackground#d3e8f8
  • editorWarning.border#daaa01
  • editorWarning.foreground#daaa01
  • editorWhitespace.foreground#d9d9d9
  • editorWidget.background#F0F0F0
  • editorWidget.border#d9d9d9
  • errorForeground#403f53
  • extensionButton.prominentBackground#2AA298
  • extensionButton.prominentForeground#F0F0F0
  • focusBorder#93A1A1
  • foreground#403f53
  • input.background#F0F0F0
  • input.border#d9d9d9
  • input.foreground#403f53
  • input.placeholderForeground#93A1A1
  • inputOption.activeBorder#2AA298
  • inputValidation.errorBackground#f76e6e
  • inputValidation.errorBorder#de3d3b
  • inputValidation.infoBackground#F0F0F0
  • inputValidation.infoBorder#D0D0D0
  • inputValidation.warningBackground#daaa01
  • inputValidation.warningBorder#E0AF02
  • list.activeSelectionBackground#d3e8f8
  • list.activeSelectionForeground#403f53
  • list.errorForeground#E64D49
  • list.focusBackground#d3e8f8
  • list.focusForeground#403f53
  • list.highlightForeground#403f53
  • list.hoverBackground#d3e8f8
  • list.hoverForeground#403f53
  • list.inactiveSelectionBackground#E0E7EA
  • list.inactiveSelectionForeground#403f53
  • list.warningForeground#daaa01
  • notificationCenter.border#CCCCCC
  • notificationCenterHeader.background#F0F0F0
  • notificationCenterHeader.foreground#403f53
  • notificationLink.foreground#994cc3
  • notifications.background#F0F0F0
  • notifications.border#CCCCCC
  • notifications.foreground#403f53
  • notificationToast.border#CCCCCC
  • panel.background#F0F0F0
  • panel.border#d9d9d9
  • peekView.border#d9d9d9
  • peekViewEditor.background#F6F6F6
  • peekViewEditor.matchHighlightBackground#49d0c5
  • peekViewEditorGutter.background#F6F6F6
  • peekViewResult.background#F0F0F0
  • peekViewResult.fileForeground#403f53
  • peekViewResult.lineForeground#403f53
  • peekViewResult.matchHighlightBackground#49d0c5
  • peekViewResult.selectionBackground#E0E7EA
  • peekViewResult.selectionForeground#403f53
  • peekViewTitle.background#F0F0F0
  • peekViewTitleDescription.foreground#403f53
  • peekViewTitleLabel.foreground#403f53
  • pickerGroup.border#d9d9d9
  • pickerGroup.foreground#403f53
  • progressBar.background#2AA298
  • scrollbar.shadow#CCCCCC
  • selection.background#7a8181ad
  • sideBar.background#F0F0F0
  • sideBar.border#F0F0F0
  • sideBar.foreground#403f53
  • sideBarTitle.foreground#403f53
  • statusBar.background#F0F0F0
  • statusBar.border#F0F0F0
  • statusBar.debuggingBackground#F0F0F0
  • statusBar.debuggingForeground#403f53
  • statusBar.foreground#403f53
  • statusBar.noFolderBackground#F0F0F0
  • statusBar.noFolderForeground#403f53
  • tab.activeBackground#F6F6F6
  • tab.activeForeground#403f53
  • tab.activeModifiedBorder#2AA298
  • tab.border#F0F0F0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#403f53
  • tab.inactiveModifiedBorder#93A1A1
  • tab.unfocusedActiveModifiedBorder#93A1A1
  • tab.unfocusedInactiveModifiedBorder#93A1A1
  • terminal.ansiBlack#403f53
  • terminal.ansiBlue#288ed7
  • terminal.ansiBrightBlack#403f53
  • terminal.ansiBrightBlue#288ed7
  • terminal.ansiBrightCyan#2AA298
  • terminal.ansiBrightGreen#08916a
  • terminal.ansiBrightMagenta#d6438a
  • terminal.ansiBrightRed#de3d3b
  • terminal.ansiBrightWhite#F0F0F0
  • terminal.ansiBrightYellow#daaa01
  • terminal.ansiCyan#2AA298
  • terminal.ansiGreen#08916a
  • terminal.ansiMagenta#d6438a
  • terminal.ansiRed#de3d3b
  • terminal.ansiWhite#F0F0F0
  • terminal.ansiYellow#E0AF02
  • terminal.background#F6F6F6
  • terminal.foreground#403f53
  • titleBar.activeBackground#F0F0F0
  • widget.shadow#d9d9d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9AA880italic
comment.block.preprocessor#9AA880
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#6DB65B
keyword, storage#6DB65B
storage.type, support.type#6DB65B
constant.language, support.constant, variable.language#6DB65B
variable, support.variable#6C7757
variable.parameter#EFBB35
entity.name.function, support.function#6C7757bold
entity.name.type, entity.other.inherited-class, support.class, source.go#EFBB35bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#EFBB35
string#008F68
constant.character.escape#DC3958
string.regexp#DC3958
constant.other.symbol#008F68
punctuation#008F68
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#9AA880
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#DC3958
entity.name.tag#DC3958
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#DC3958italic
constant.character.entity, punctuation.definition.entity#6C7757
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#6DB65B
meta.property-name, support.type.property-name#6C7757
meta.property-value, meta.property-value constant.other, support.constant.property-value#EFBB35
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343