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#000000
  • activityBar.background#eeeeee
  • activityBar.border#cccccc00
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#eeeeee
  • badge.background#000000
  • badge.foreground#eeeeee
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#444444
  • breadcrumbPicker.background#eeeeee
  • button.background#000000
  • button.foreground#eeeeee
  • button.hoverBackground#000000
  • button.secondaryBackground#dddddd
  • button.secondaryForeground#444444
  • button.secondaryHoverBackground#cccccc
  • checkbox.background#eeeeee
  • checkbox.border#cccccc
  • commandCenter.activeBackground#cccccc
  • commandCenter.background#dddddd
  • debugToolBar.background#eeeeee
  • descriptionForeground#000000
  • diffEditor.insertedTextBackground#77996633
  • diffEditor.removedTextBackground#88444433
  • dropdown.background#eeeeee
  • dropdown.border#cccccc
  • dropdown.foreground#444444
  • dropdown.listBackground#eeeeee
  • editor.background#eeeeee
  • editor.findMatchBackground#AA884444
  • editor.findMatchHighlightBackground#AA884422
  • editor.focusedStackFrameHighlightBackground#cccccc
  • editor.foldBackground#dddddd
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#dddddd
  • editor.lineHighlightBackground#dddddd
  • editor.linkedEditingBackground#dddddd
  • editor.selectionBackground#dddddd
  • editor.selectionHighlightBackground#dddddd
  • editor.selectionHighlightBorder#dddddd
  • editor.stackFrameHighlightBackground#aa884425
  • editor.wordHighlightBackground#dddddd
  • editor.wordHighlightBorder#eeeeee00
  • editor.wordHighlightStrongBackground#eeeeee00
  • editor.wordHighlightStrongBorder#eeeeee00
  • editorBracketMatch.background#dddddd
  • editorBracketMatch.border#eeeeee00
  • editorCursor.foreground#000000
  • editorGroup.border#cccccc00
  • editorGroupHeader.tabsBackground#eeeeee
  • editorGroupHeader.tabsBorder#cccccc00
  • editorGutter.addedBackground#779966
  • editorGutter.deletedBackground#884444
  • editorGutter.modifiedBackground#AA8844
  • editorHoverWidget.background#eeeeee
  • editorHoverWidget.foreground#444444
  • editorIndentGuide.activeBackground#bbbbbb
  • editorIndentGuide.background#cccccc
  • editorInlayHint.background#dddddd
  • editorInlayHint.foreground#444444
  • editorLineNumber.activeForeground#444444
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.border#eeeeee
  • editorOverviewRuler.errorForeground#884444
  • editorRuler.foreground#cccccc
  • editorWhitespace.foreground#666666
  • editorWidget.background#eeeeee
  • editorWidget.border#cccccc
  • errorForeground#884444
  • errorLens.errorBackground#88444433
  • errorLens.errorBackgroundLight#88444433
  • errorLens.errorForeground#884444
  • errorLens.errorForegroundLight#884444
  • errorLens.hintBackground#44779933
  • errorLens.hintBackgroundLight#44779933
  • errorLens.hintForeground#447799
  • errorLens.hintForegroundLight#447799
  • errorLens.infoBackground#44779933
  • errorLens.infoBackgroundLight#44779933
  • errorLens.infoForeground#447799
  • errorLens.infoForegroundLight#447799
  • errorLens.warningBackground#AA884433
  • errorLens.warningBackgroundLight#AA884433
  • errorLens.warningForeground#AA884433
  • errorLens.warningForegroundLight#AA8844
  • focusBorder#eeeeee00
  • foreground#444444
  • gitDecoration.addedResourceForeground#779966
  • gitDecoration.conflictingResourceForeground#AA8844
  • gitDecoration.deletedResourceForeground#884444
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#AA8844
  • gitDecoration.submoduleResourceForeground#000000
  • gitDecoration.untrackedResourceForeground#779966
  • icon.foreground#444444
  • input.background#eeeeee
  • input.border#cccccc
  • input.foreground#444444
  • input.placeholderForeground#444444
  • list.activeSelectionBackground#dddddd
  • list.activeSelectionForeground#000000
  • list.errorForeground#884444
  • list.focusBackground#dddddd
  • list.focusForeground#000000
  • list.highlightForeground#000000
  • list.hoverBackground#dddddd
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#dddddd
  • list.inactiveSelectionBackground#dddddd
  • list.inactiveSelectionForeground#444444
  • list.warningForeground#AA8844
  • minimap.selectionHighlight#dddddd
  • notificationCenterHeader.background#eeeeee
  • notificationCenterHeader.foreground#444444
  • notifications.background#eeeeee
  • notifications.border#cccccc
  • notifications.foreground#000000
  • notificationsErrorIcon.foreground#884444
  • notificationsInfoIcon.foreground#447799
  • notificationsWarningIcon.foreground#AA8844
  • panel.background#eeeeee
  • panel.border#cccccc00
  • panelInput.border#cccccc
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#444444
  • peekView.border#cccccc
  • peekViewEditor.background#eeeeee
  • peekViewEditor.matchHighlightBackground#AA884433
  • peekViewResult.background#eeeeee
  • peekViewResult.matchHighlightBackground#AA884433
  • peekViewTitle.background#eeeeee
  • pickerGroup.border#cccccc
  • pickerGroup.foreground#000000
  • progressBar.background#000000
  • quickInput.background#eeeeee
  • quickInput.foreground#444444
  • scrollbar.shadow#eeeeee00
  • scrollbarSlider.activeBackground#cccccc
  • scrollbarSlider.background#cccccc
  • scrollbarSlider.hoverBackground#cccccc
  • selection.background#cccccc
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#000000
  • sideBar.background#eeeeee
  • sideBar.border#cccccc00
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#eeeeee
  • sideBarSectionHeader.border#cccccc00
  • sideBarSectionHeader.foreground#444444
  • sideBarTitle.foreground#444444
  • statusBar.background#eeeeee
  • statusBar.border#cccccc00
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingForeground#eeeeee
  • statusBar.foreground#444444
  • statusBar.noFolderBackground#eeeeee
  • statusBarItem.prominentBackground#eeeeee
  • tab.activeBackground#eeeeee
  • tab.activeBorder#000000
  • tab.activeBorderTop#eeeeee
  • tab.activeForeground#000000
  • tab.border#cccccc00
  • tab.hoverBackground#eeeeee
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#444444
  • tab.unfocusedActiveBorder#eeeeee
  • tab.unfocusedActiveBorderTop#eeeeee
  • tab.unfocusedHoverBackground#eeeeee
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#447799
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#447799
  • terminal.ansiBrightCyan#449999
  • terminal.ansiBrightGreen#779966
  • terminal.ansiBrightMagenta#666699
  • terminal.ansiBrightRed#884444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#AA8844
  • terminal.ansiCyan#449999
  • terminal.ansiGreen#779966
  • terminal.ansiMagenta#666699
  • terminal.ansiRed#884444
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#AA8844
  • terminal.foreground#000000
  • terminal.selectionBackground#cccccc
  • textBlockQuote.background#eeeeee
  • textBlockQuote.border#000000
  • textCodeBlock.background#eeeeee
  • textLink.activeForeground#000000
  • textLink.foreground#000000
  • textPreformat.foreground#000000
  • textSeparator.foreground#444444
  • titleBar.activeBackground#eeeeee
  • titleBar.activeForeground#444444
  • titleBar.border#cccccc00
  • titleBar.inactiveBackground#eeeeee
  • titleBar.inactiveForeground#444444
  • tree.indentGuidesStroke#cccccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#666666—
entity.other.attribute-name#666699—
constant, entity.name.constant, variable.other.constant, variable.language, entity#666699—
entity.name, meta.export.default, meta.definition.variable#447799—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#000000—
entity.name.function#666699—
entity.name.tag, support.class.component#447799—
keyword#884444—
keyword.operator, storage.type.function.arrow#884444—
storage, storage.type#884444—
storage.modifier.package, storage.modifier.import, storage.type.java#000000—
string, punctuation.definition.string, string punctuation.section.embedded source#447799—
support#447799—
meta.property-name#447799—
variable#000000—
variable.other#000000—
invalid.broken#884444—
invalid.deprecated#884444—
invalid.illegal#884444—
invalid.unimplemented#884444—
carriage-return#111111—
message.error#884444—
string source#000000—
string variable#447799—
source.regexp, string.regexp#447799—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#447799—
string.regexp constant.character.escape#447799bold
support.constant#447799—
support.variable#447799—
meta.module-reference#447799—
punctuation.definition.list.begin.markdown#AA8844—
markup.heading, markup.heading entity.name#447799bold
markup.quote#447799—
markup.italic#000000italic
markup.bold#000000bold
markup.raw#447799—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#884444—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#447799—
markup.changed, punctuation.definition.changed#AA8844—
markup.ignored, markup.untracked#777777—
meta.diff.range#666699bold
meta.diff.header#447799—
meta.separator#447799bold
meta.output#447799—
meta.export.default#000000—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#000000—
brackethighlighter.unmatched#884444—
constant.other.reference.link, string.other.link#447799underline
token.info-token#6796E6—
token.warn-token#AA8844—
token.error-token#884444—
token.debug-token#666699—