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#fd8c73
  • activityBar.background#ffffff
  • activityBar.border#d0d7de
  • activityBar.foreground#24292f
  • activityBar.inactiveForeground#57606a
  • activityBarBadge.background#0969da
  • activityBarBadge.foreground#ffffff
  • badge.background#0969da
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#57606a
  • breadcrumb.focusForeground#24292f
  • breadcrumb.foreground#57606a
  • breadcrumbPicker.background#ffffff
  • button.background#2da44e
  • button.foreground#ffffff
  • button.hoverBackground#2c974b
  • button.secondaryBackground#ebecf0
  • button.secondaryForeground#24292f
  • button.secondaryHoverBackground#f3f4f6
  • checkbox.background#f6f8fa
  • checkbox.border#d0d7de
  • debugToolBar.background#ffffff
  • descriptionForeground#57606a
  • diffEditor.insertedTextBackground#dafbe1
  • diffEditor.removedTextBackground#ffebe9
  • dropdown.background#ffffff
  • dropdown.border#d0d7de
  • dropdown.foreground#24292f
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#bf8700
  • editor.findMatchHighlightBackground#fae17d80
  • editor.focusedStackFrameHighlightBackground#4ac26b66
  • editor.foldBackground#6e77811a
  • editor.foreground#24292f
  • editor.inactiveSelectionBackground#0969da12
  • editor.lineHighlightBackground#1144aa22
  • editor.linkedEditingBackground#0969da12
  • editor.selectionBackground#0969da33
  • editor.selectionHighlightBackground#4ac26b40
  • editor.stackFrameHighlightBackground#d4a72c66
  • editor.wordHighlightBackground#eaeef280
  • editor.wordHighlightBorder#afb8c199
  • editor.wordHighlightStrongBackground#afb8c14d
  • editor.wordHighlightStrongBorder#afb8c199
  • editorBracketMatch.background#4ac26b40
  • editorBracketMatch.border#4ac26b99
  • editorCursor.foreground#0969da
  • editorGroup.border#d0d7de
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#d0d7de
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#ffa000
  • editorIndentGuide.activeBackground#d0d7de
  • editorIndentGuide.background#d8dee4
  • editorLineNumber.activeForeground#ff6d00
  • editorLineNumber.foreground#57606a
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#6e7781
  • editorWidget.background#ffffff
  • errorForeground#cf222e
  • focusBorder#0969da
  • foreground#24292f
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#bc4c00
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#6e7781
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#57606a
  • gitDecoration.untrackedResourceForeground#1a7f37
  • input.background#ffffff
  • input.border#d0d7de
  • input.foreground#24292f
  • input.placeholderForeground#6e7781
  • list.activeSelectionBackground#afb8c133
  • list.activeSelectionForeground#24292f
  • list.focusBackground#ddf4ff
  • list.focusForeground#24292f
  • list.highlightForeground#f57c00
  • list.hoverBackground#eaeef280
  • list.hoverForeground#24292f
  • list.inactiveFocusBackground#ddf4ff
  • list.inactiveSelectionBackground#afb8c133
  • list.inactiveSelectionForeground#24292f
  • notificationCenterHeader.background#f6f8fa
  • notificationCenterHeader.foreground#57606a
  • notifications.background#ffffff
  • notifications.border#d0d7de
  • notifications.foreground#24292f
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0969da
  • notificationsWarningIcon.foreground#9a6700
  • panel.background#f6f8fa
  • panel.border#d0d7de
  • panelInput.border#d0d7de
  • panelTitle.activeBorder#fd8c73
  • panelTitle.activeForeground#24292f
  • panelTitle.inactiveForeground#57606a
  • pickerGroup.border#d0d7de
  • pickerGroup.foreground#57606a
  • progressBar.background#0969da
  • quickInput.background#ffffff
  • quickInput.foreground#24292f
  • quickInputList.focusBackground#03a9f4
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusIconForeground#ffffff
  • scrollbar.shadow#6e778133
  • scrollbarSlider.activeBackground#8c959f87
  • scrollbarSlider.background#8c959f33
  • scrollbarSlider.hoverBackground#8c959f45
  • settings.headerForeground#57606a
  • settings.modifiedItemIndicator#d4a72c66
  • sideBar.background#f6f8fa
  • sideBar.border#d0d7de
  • sideBar.foreground#24292f
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#d0d7de
  • sideBarSectionHeader.foreground#24292f
  • sideBarTitle.foreground#24292f
  • statusBar.background#ffffff
  • statusBar.border#d0d7de00
  • statusBar.debuggingBackground#cf222e
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#57606a
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f6f8fa
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#fd8c73
  • tab.activeForeground#24292f
  • tab.border#d0d7de
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#57606a
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#d0d7de
  • tab.unfocusedHoverBackground#eaeef280
  • terminal.ansiBlack#24292f
  • terminal.ansiBlue#0969da
  • terminal.ansiBrightBlack#57606a
  • terminal.ansiBrightBlue#218bff
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#a475f9
  • terminal.ansiBrightRed#a40e26
  • terminal.ansiBrightWhite#8c959f
  • terminal.ansiBrightYellow#633c01
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#116329
  • terminal.ansiMagenta#8250df
  • terminal.ansiRed#cf222e
  • terminal.ansiWhite#6e7781
  • terminal.ansiYellow#4d2d00
  • terminal.foreground#57606a
  • textBlockQuote.background#f6f8fa
  • textBlockQuote.border#d0d7de
  • textCodeBlock.background#afb8c133
  • textLink.activeForeground#0969da
  • textLink.foreground#0969da
  • textPreformat.foreground#57606a
  • textSeparator.foreground#d8dee4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#57606a
  • titleBar.border#d0d7de
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#57606a
  • tree.indentGuidesStroke#d8dee4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6E7781
constant, entity.name.constant, variable.other.constant, variable.language, entity#0550AE
entity.name, meta.export.default, meta.definition.variable#953800
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#24292F
entity.name.function#8250DF
entity.name.tag, support.class.component#116329
keyword#CF222E
storage, storage.type#CF222E
storage.modifier.package, storage.modifier.import, storage.type.java#24292F
string, punctuation.definition.string, string punctuation.section.embedded source#0A3069
support#0550AE
meta.property-name#0550AE
variable#953800
variable.other#24292F
invalid.broken#82071Eitalic
invalid.deprecated#82071Eitalic
invalid.illegal#82071Eitalic
invalid.unimplemented#82071Eitalic
carriage-return#F6F8FAitalic underline
message.error#82071E
string source#24292F
string variable#0550AE
source.regexp, string.regexp#0A3069
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#0A3069
string.regexp constant.character.escape#116329bold
support.constant#0550AE
support.variable#0550AE
meta.module-reference#0550AE
punctuation.definition.list.begin.markdown#953800
markup.heading, markup.heading entity.name#0550AEbold
markup.quote#116329
markup.italic#24292Fitalic
markup.bold#24292Fbold
markup.raw#0550AE
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#82071E
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#116329
markup.changed, punctuation.definition.changed#953800
markup.ignored, markup.untracked#EAEEF2
meta.diff.range#8250DFbold
meta.diff.header#0550AE
meta.separator#0550AEbold
meta.output#0550AE
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#57606A
brackethighlighter.unmatched#82071E
constant.other.reference.link, string.other.link#0A3069underline
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080