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#263257ff
  • activityBar.dropBackground#1f2d51ff
  • activityBar.foreground#5c9dffff
  • activityBar.inactiveForeground#5a6388ff
  • activityBarBadge.background#5c9dffbf
  • activityBarBadge.foreground#f8feffff
  • badge.background#5c9dffbf
  • badge.foreground#f8feffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1f2d51ff
  • breadcrumb.focusForeground#e8efffff
  • breadcrumb.foreground#767ea3ff
  • breadcrumbPicker.background#263257ff
  • button.background#0066c9ff
  • button.foreground#f8feffff
  • button.hoverBackground#2377ddff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#263257ff
  • debugToolBar.background#1f2d51ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#263257ff
  • dropdown.border#263257ff
  • dropdown.foreground#e8efffff
  • editor.background#1f2d51ff
  • editor.findMatchBackground#3965ad40
  • editor.findMatchHighlightBackground#3965ad40
  • editor.findRangeHighlightBackground#3965ad40
  • editor.focusedStackFrameHighlightBackground#3965ad40
  • editor.foreground#d8deffff
  • editor.hoverHighlightBackground#3965ad40
  • editor.inactiveSelectionBackground#3965ad20
  • editor.lineHighlightBackground#263257ff
  • editor.lineHighlightBorder#263257ff
  • editor.rangeHighlightBackground#3965ad40
  • editor.selectionBackground#3965ad40
  • editor.selectionHighlightBackground#3965ad20
  • editor.snippetFinalTabstopHighlightBorder#3965ad40
  • editor.snippetTabstopHighlightBackground#3965ad40
  • editor.stackFrameHighlightBackground#3965ad40
  • editor.wordHighlightBackground#3965ad20
  • editor.wordHighlightStrongBackground#3965ad20
  • editorActiveLineNumber.foreground#767ea3ff
  • editorBracketMatch.background#3965ad20
  • editorBracketMatch.border#5c9dffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcb00ff
  • editorError.foreground#ea004fff
  • editorGroup.border#263257ff
  • editorGroup.dropBackground#1f2d51ff
  • editorGroupHeader.noTabsBackground#1f2d51ff
  • editorGroupHeader.tabsBackground#263257ff
  • editorGutter.addedBackground#062800ff
  • editorGutter.background#1f2d51ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#730000ff
  • editorGutter.modifiedBackground#00215dff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#263257ff
  • editorHoverWidget.border#263257ff
  • editorIndentGuide.activeBackground#374267ff
  • editorIndentGuide.background#2e3a5eff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#767ea3ff
  • editorLineNumber.foreground#5a6388ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ea004fff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#1d5000ff
  • editorOverviewRuler.border#263257ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a90023ff
  • editorOverviewRuler.errorForeground#ea004fbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#004689ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1f2d51ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#263257ff
  • editorSuggestWidget.border#263257ff
  • editorSuggestWidget.foreground#e8efffff
  • editorSuggestWidget.highlightForeground#e8efffff
  • editorSuggestWidget.selectedBackground#2e3a5eff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#263257ff
  • editorWidget.border#263257ff
  • errorForeground#ea004fff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#3965adff
  • foreground#d8deffff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#767ea3ff
  • gitDecoration.modifiedResourceForeground#c79107ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#79a936ff
  • input.background#1f2d51ff
  • input.foreground#e8efffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#5c9dffff
  • inputValidation.errorBackground#530000ff
  • inputValidation.errorBorder#840009ff
  • inputValidation.infoBackground#1f2d51ff
  • inputValidation.infoBorder#424c71ff
  • inputValidation.warningBackground#2f0000ff
  • inputValidation.warningBorder#492100ff
  • list.activeSelectionBackground#2e3a5eff
  • list.activeSelectionForeground#e8efffff
  • list.dropBackground#1f2d51ff
  • list.errorForeground#ea004fff
  • list.focusBackground#2e3a5eff
  • list.highlightForeground#e8efffff
  • list.hoverBackground#2e3a5eff
  • list.inactiveFocusBackground#2e3a5eff
  • list.inactiveSelectionBackground#2e3a5eff
  • list.inactiveSelectionForeground#e8efffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#263257ff
  • menu.foreground#b6bde0ff
  • menu.selectionBackground#2e3a5eff
  • menu.selectionForeground#e8efffff
  • menu.separatorBackground#424c71ff
  • menubar.selectionBackground#2e3a5eff
  • menubar.selectionForeground#e8efffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#263257ff
  • notificationLink.foreground#5c9dffff
  • notifications.background#263257ff
  • notifications.border#263257ff
  • panel.background#263257ff
  • panel.border#263257ff
  • panel.dropBackground#1f2d51ff
  • panelTitle.activeBorder#5c9dffff
  • panelTitle.activeForeground#e8efffff
  • panelTitle.inactiveForeground#a5add0ff
  • peekView.border#263257ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#263257ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1f2d51ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#263257ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#05183aff
  • scrollbarSlider.activeBackground#5a6388bf
  • scrollbarSlider.background#424c71bf
  • scrollbarSlider.hoverBackground#4d577cbf
  • settings.checkboxBackground#1f2d51ff
  • settings.checkboxBorder#5a6388ff
  • settings.checkboxForeground#e8efffff
  • settings.dropdownBackground#263257ff
  • settings.dropdownBorder#263257ff
  • settings.dropdownForeground#e8efffff
  • settings.dropdownListBorder#374267ff
  • settings.headerForeground#caedffff
  • settings.modifiedItemIndicator#3965adff
  • settings.numberInputBackground#263257ff
  • settings.numberInputForeground#e8efffff
  • settings.textInputBackground#263257ff
  • settings.textInputForeground#e8efffff
  • sideBar.background#263257ff
  • sideBar.dropBackground#1f2d51ff
  • sideBar.foreground#a5add0ff
  • sideBarSectionHeader.background#263257ff
  • sideBarSectionHeader.foreground#5a6388ff
  • sideBarTitle.foreground#5a6388ff
  • statusBar.background#2e3a5eff
  • statusBar.debuggingBackground#920000ff
  • statusBar.debuggingForeground#a5add0ff
  • statusBar.foreground#a5add0ff
  • statusBar.noFolderBackground#4a006cff
  • statusBar.noFolderForeground#a5add0ff
  • tab.activeBackground#263257ff
  • tab.activeBorder#5c9dffff
  • tab.activeForeground#e8efffff
  • tab.activeModifiedBorder#5c9dffbf
  • tab.border#263257ff
  • tab.inactiveBackground#263257ff
  • tab.inactiveForeground#a5add0ff
  • tab.inactiveModifiedBorder#5c9dffbf
  • tab.unfocusedActiveForeground#e8efffff
  • tab.unfocusedActiveModifiedBorder#5c9dff80
  • tab.unfocusedInactiveForeground#a5add0ff
  • tab.unfocusedInactiveModifiedBorder#5c9dff80
  • terminal.ansiBlack#000119ff
  • terminal.ansiBlue#6daaffff
  • terminal.ansiBrightBlack#5e6dabff
  • terminal.ansiBrightBlue#6daaffff
  • terminal.ansiBrightCyan#54e2ffff
  • terminal.ansiBrightGreen#baeb75ff
  • terminal.ansiBrightMagenta#d895ffff
  • terminal.ansiBrightRed#ff386aff
  • terminal.ansiBrightWhite#f5ffffff
  • terminal.ansiBrightYellow#ffc94eff
  • terminal.ansiCyan#54e2ffff
  • terminal.ansiGreen#baeb75ff
  • terminal.ansiMagenta#d895ffff
  • terminal.ansiRed#ff386aff
  • terminal.ansiWhite#f5ffffff
  • terminal.ansiYellow#ffc94eff
  • terminal.background#1f2d51ff
  • terminal.border#263257ff
  • terminal.foreground#d8deffff
  • terminal.selectionBackground#3965ad40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#263257ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#5c9dffff
  • textLink.foreground#5c9dffff
  • textPreformat.foreground#d895ffff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#263257ff
  • titleBar.activeForeground#a5add0ff
  • titleBar.inactiveBackground#263257ff
  • titleBar.inactiveForeground#5a6388ff
  • widget.shadow#132245ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#9fabe5ff
emphasisitalic
strongbold
header#000080
comment#5e6dabff
constant.language#ff825dff
constant.numeric#ff825dff
constant.regexp#d895ffff
entity.name.tag#ff6170ff
entity.name.tag.css#ffc94eff
entity.other.attribute-name#ce8bfcff
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#ce8bfcff
invalid#f44747
markup.underlineunderline
markup.bold#ce8bfcffbold
markup.heading#ce8bfcffbold
markup.italicitalic
markup.inserted#ff825dff
markup.deleted#baeb75ff
markup.changed#ce8bfcff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#baeb75ff
punctuation.definition.tag#54e2ffff
meta.preprocessor#ce8bfcff
meta.preprocessor.string#baeb75ff
meta.preprocessor.numeric#ff825dff
meta.structure.dictionary.key.python#d8deffff
meta.diff.header#ce8bfcff
storage#ce8bfcff
storage.type#ce8bfcff
storage.modifier#ce8bfcff
string#baeb75ff
string.tag#baeb75ff
string.value#baeb75ff
string.regexp#baeb75ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#b6bde0ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9fabe5ff
keyword#ce8bfcff
keyword.control#ce8bfcff
keyword.operator#b6bde0ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ce8bfcff
keyword.other.unit#ff825dff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ce8bfcff
support.function.git-rebase#6daaffff
constant.sha.git-rebase#ff825dff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ce8bfcff
entity.name.function, support.function, support.constant.handlebars#6daaffff
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#a1c5ffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a1c5ffff
keyword.control#ce8bfcff
variable, meta.definition.variable.name, support.variable, entity.name.variable#9fabe5ff
meta.object-literal.key#d8deffff
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#baeb75ff
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#54e2ffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d895ffff
keyword.operator.or.regexp, keyword.control.anchor.regexp#b6bde0ff
keyword.operator.quantifier.regexp#ff825dff
constant.character#ce8bfcff
constant.character.escape#54e2ffff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#baeb75ff
string.template#baeb75ff
storage.type.function#ce8bfcff
support.class.component.js#ff6170ff
variable.parameter#ff386aff
variable.other.property#d8deffff
support.function, support.constant.handlebars#6daaffff
support.type, support.class, support.constant.math#ffc94eff
support.type.vendored.property-name, support.type.property-name#d8deffff
support.function#6daaffff
variable.other.constant#ff6170ff
meta.brace.round.js, meta.brace.square.js, punctuation#54e2ffff
support.type.property-name.json#d8deffff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#b6bde0ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ce8bfcff
entity.name.type.class, entity.name.type.module#a1c5ffff
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#5e6dabff
markup.headingnormal

Shiki preview

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

Loading...