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#303030ff
  • activityBar.dropBackground#2a2a2aff
  • activityBar.foreground#00b298ff
  • activityBar.inactiveForeground#616161ff
  • activityBarBadge.background#00b298bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00b298bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2a2a2aff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#7d7d7dff
  • breadcrumbPicker.background#303030ff
  • button.background#007861ff
  • button.foreground#ffffffff
  • button.hoverBackground#008a72ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#303030ff
  • debugToolBar.background#2a2a2aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#303030ff
  • dropdown.border#303030ff
  • dropdown.foreground#efefefff
  • editor.background#2a2a2aff
  • editor.findMatchBackground#40689140
  • editor.findMatchHighlightBackground#40689140
  • editor.findRangeHighlightBackground#40689140
  • editor.focusedStackFrameHighlightBackground#40689140
  • editor.foreground#dfdfdfff
  • editor.hoverHighlightBackground#40689140
  • editor.inactiveSelectionBackground#40689120
  • editor.lineHighlightBackground#303030ff
  • editor.lineHighlightBorder#303030ff
  • editor.rangeHighlightBackground#40689140
  • editor.selectionBackground#40689140
  • editor.selectionHighlightBackground#40689120
  • editor.snippetFinalTabstopHighlightBorder#40689140
  • editor.snippetTabstopHighlightBackground#40689140
  • editor.stackFrameHighlightBackground#40689140
  • editor.wordHighlightBackground#40689120
  • editor.wordHighlightStrongBackground#40689120
  • editorActiveLineNumber.foreground#7d7d7dff
  • editorBracketMatch.background#40689120
  • editorBracketMatch.border#55a3e8ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#f65683ff
  • editorError.foreground#df1f5dff
  • editorGroup.border#303030ff
  • editorGroup.dropBackground#2a2a2aff
  • editorGroupHeader.noTabsBackground#2a2a2aff
  • editorGroupHeader.tabsBackground#303030ff
  • editorGutter.addedBackground#002d1cff
  • editorGutter.background#2a2a2aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#6b000aff
  • editorGutter.modifiedBackground#002345ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#303030ff
  • editorHoverWidget.border#303030ff
  • editorIndentGuide.activeBackground#404040ff
  • editorIndentGuide.background#373737ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7d7d7dff
  • editorLineNumber.foreground#616161ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#df1f5dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005541ff
  • editorOverviewRuler.border#303030ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a0002fff
  • editorOverviewRuler.errorForeground#df1f5dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#1a496eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#2a2a2aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#303030ff
  • editorSuggestWidget.border#303030ff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#373737ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#303030ff
  • editorWidget.border#303030ff
  • errorForeground#df1f5dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#406891ff
  • foreground#dfdfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7d7d7dff
  • gitDecoration.modifiedResourceForeground#c98f4fff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b298ff
  • input.background#2a2a2aff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00b298ff
  • inputValidation.errorBackground#4c0000ff
  • inputValidation.errorBorder#7b0018ff
  • inputValidation.infoBackground#2a2a2aff
  • inputValidation.infoBorder#4a4a4aff
  • inputValidation.warningBackground#2c0000ff
  • inputValidation.warningBorder#491e00ff
  • list.activeSelectionBackground#373737ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#2a2a2aff
  • list.errorForeground#df1f5dff
  • list.focusBackground#373737ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#373737ff
  • list.inactiveFocusBackground#373737ff
  • list.inactiveSelectionBackground#373737ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#303030ff
  • menu.foreground#bdbdbdff
  • menu.selectionBackground#373737ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#4a4a4aff
  • menubar.selectionBackground#373737ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#303030ff
  • notificationLink.foreground#00b298ff
  • notifications.background#303030ff
  • notifications.border#303030ff
  • panel.background#303030ff
  • panel.border#303030ff
  • panel.dropBackground#2a2a2aff
  • panelTitle.activeBorder#00b298ff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#acacacff
  • peekView.border#303030ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#303030ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2a2a2aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#303030ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#151515ff
  • scrollbarSlider.activeBackground#616161bf
  • scrollbarSlider.background#4a4a4abf
  • scrollbarSlider.hoverBackground#555555bf
  • settings.checkboxBackground#2a2a2aff
  • settings.checkboxBorder#616161ff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#303030ff
  • settings.dropdownBorder#303030ff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#404040ff
  • settings.headerForeground#c9f1ffff
  • settings.modifiedItemIndicator#406891ff
  • settings.numberInputBackground#303030ff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#303030ff
  • settings.textInputForeground#efefefff
  • sideBar.background#303030ff
  • sideBar.dropBackground#2a2a2aff
  • sideBar.foreground#acacacff
  • sideBarSectionHeader.background#303030ff
  • sideBarSectionHeader.foreground#616161ff
  • sideBarTitle.foreground#616161ff
  • statusBar.background#373737ff
  • statusBar.debuggingBackground#821f01ff
  • statusBar.debuggingForeground#acacacff
  • statusBar.foreground#acacacff
  • statusBar.noFolderBackground#421657ff
  • statusBar.noFolderForeground#acacacff
  • tab.activeBackground#303030ff
  • tab.activeBorder#00b298ff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#00b298bf
  • tab.border#303030ff
  • tab.inactiveBackground#303030ff
  • tab.inactiveForeground#acacacff
  • tab.inactiveModifiedBorder#00b298bf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#00b29880
  • tab.unfocusedInactiveForeground#acacacff
  • tab.unfocusedInactiveModifiedBorder#00b29880
  • terminal.ansiBlack#2a2a2aff
  • terminal.ansiBlue#5ba8edff
  • terminal.ansiBrightBlack#757575ff
  • terminal.ansiBrightBlue#80c0f3ff
  • terminal.ansiBrightCyan#bcacf3ff
  • terminal.ansiBrightGreen#52f6d9ff
  • terminal.ansiBrightMagenta#ff87beff
  • terminal.ansiBrightRed#f73d6fff
  • terminal.ansiBrightWhite#e6e6e6ff
  • terminal.ansiBrightYellow#f9cea1ff
  • terminal.ansiCyan#ae87e1ff
  • terminal.ansiGreen#52f6d9ff
  • terminal.ansiMagenta#ff87beff
  • terminal.ansiRed#f73d6fff
  • terminal.ansiWhite#cdcdcdff
  • terminal.ansiYellow#f9ba78ff
  • terminal.background#2a2a2aff
  • terminal.border#303030ff
  • terminal.foreground#dfdfdfff
  • terminal.selectionBackground#40689140
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#303030ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00b298ff
  • textLink.foreground#00b298ff
  • textPreformat.foreground#ff87beff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#303030ff
  • titleBar.activeForeground#acacacff
  • titleBar.inactiveBackground#303030ff
  • titleBar.inactiveForeground#616161ff
  • widget.shadow#1f1f1fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#e6e6e6ff
emphasisitalic
strongbold
header#000080
comment#6a6b6eff
constant.language#f9ba78ff
constant.numeric#f9ba78ff
constant.regexp#ff87beff
entity.name.tag#55a3e8ff
entity.name.tag.css#f9cea1ff
entity.other.attribute-name#f9ba78ff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#f9ba78ff
invalid#f44747
markup.underlineunderline
markup.bold#f67cb3ffbold
markup.heading#f67cb3ffbold
markup.italicitalic
markup.inserted#f9ba78ff
markup.deleted#52f6d9ff
markup.changed#f67cb3ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#52f6d9ff
punctuation.definition.tag#9c9c9cff
meta.preprocessor#f67cb3ff
meta.preprocessor.string#52f6d9ff
meta.preprocessor.numeric#f9ba78ff
meta.structure.dictionary.key.python#dfdfdfff
meta.diff.header#f67cb3ff
storage#f67cb3ff
storage.type#f9ba78ff
storage.modifier#f9ba78ff
string#52f6d9ff
string.tag#52f6d9ff
string.value#52f6d9ff
string.regexp#52f6d9ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#e6e6e6ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e6e6e6ff
keyword#f67cb3ff
keyword.control#f67cb3ff
keyword.operator#e6e6e6ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#f67cb3ff
keyword.other.unit#f9ba78ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#f67cb3ff
support.function.git-rebase#80c0f3ff
constant.sha.git-rebase#f9ba78ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#f67cb3ff
entity.name.function, support.function, support.constant.handlebars#80c0f3ff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#a1c8f5ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a1c8f5ff
keyword.control#f67cb3ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#e6e6e6ff
meta.object-literal.key#dfdfdfff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#52f6d9ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#9c9c9cff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff87beff
keyword.operator.or.regexp, keyword.control.anchor.regexp#e6e6e6ff
keyword.operator.quantifier.regexp#f9ba78ff
constant.character#f67cb3ff
constant.character.escape#9c9c9cff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#52f6d9ff
string.template#52f6d9ff
storage.type.function#f9ba78ff
support.class.component.js#55a3e8ff
variable.parameter#bbbbbbff
variable.other.property#e6e6e6ff
support.function, support.constant.handlebars#80c0f3ff
support.type, support.class, support.constant.math#f9cea1ff
support.type.vendored.property-name, support.type.property-name#dfdfdfff
support.function#80c0f3ff
variable.other.constant#f5a0c0ff
meta.brace.round.js, meta.brace.square.js, punctuation#9c9c9cff
support.type.property-name.json#dfdfdfff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#e6e6e6ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#f67cb3ff
entity.name.type.class, entity.name.type.module#a1c8f5ff
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#6a6b6eff
markup.headingnormal

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...