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#3a3d4fff
  • activityBar.dropBackground#343849ff
  • activityBar.foreground#78a1f5ff
  • activityBar.inactiveForeground#696c7cff
  • activityBarBadge.background#78a1f5bf
  • activityBarBadge.foreground#feffffff
  • badge.background#78a1f5bf
  • badge.foreground#feffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#343849ff
  • breadcrumb.focusForeground#eff0f8ff
  • breadcrumb.foreground#848694ff
  • breadcrumbPicker.background#3a3d4fff
  • button.background#3c6cbbff
  • button.foreground#feffffff
  • button.hoverBackground#507dceff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#3a3d4fff
  • debugToolBar.background#343849ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3a3d4fff
  • dropdown.border#3a3d4fff
  • dropdown.foreground#eff0f8ff
  • editor.background#343849ff
  • editor.findMatchBackground#556c9f40
  • editor.findMatchHighlightBackground#556c9f40
  • editor.findRangeHighlightBackground#556c9f40
  • editor.focusedStackFrameHighlightBackground#556c9f40
  • editor.foreground#e0e1eaff
  • editor.hoverHighlightBackground#556c9f40
  • editor.inactiveSelectionBackground#556c9f20
  • editor.lineHighlightBackground#3a3d4fff
  • editor.lineHighlightBorder#3a3d4fff
  • editor.rangeHighlightBackground#556c9f40
  • editor.selectionBackground#556c9f40
  • editor.selectionHighlightBackground#556c9f20
  • editor.snippetFinalTabstopHighlightBorder#556c9f40
  • editor.snippetTabstopHighlightBackground#556c9f40
  • editor.stackFrameHighlightBackground#556c9f40
  • editor.wordHighlightBackground#556c9f20
  • editor.wordHighlightStrongBackground#556c9f20
  • editorActiveLineNumber.foreground#848694ff
  • editorBracketMatch.background#556c9f20
  • editorBracketMatch.border#78a1f5ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcc00ff
  • editorError.foreground#e3365aff
  • editorGroup.border#3a3d4fff
  • editorGroup.dropBackground#343849ff
  • editorGroupHeader.noTabsBackground#343849ff
  • editorGroupHeader.tabsBackground#3a3d4fff
  • editorGutter.addedBackground#113000ff
  • editorGutter.background#343849ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#75000dff
  • editorGutter.modifiedBackground#032955ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#3a3d4fff
  • editorHoverWidget.border#3a3d4fff
  • editorIndentGuide.activeBackground#494d5eff
  • editorIndentGuide.background#414456ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#848694ff
  • editorLineNumber.foreground#696c7cff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#e3365aff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#325600ff
  • editorOverviewRuler.border#3a3d4fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a6002fff
  • editorOverviewRuler.errorForeground#e3365abf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#344e7dff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#343849ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#3a3d4fff
  • editorSuggestWidget.border#3a3d4fff
  • editorSuggestWidget.foreground#eff0f8ff
  • editorSuggestWidget.highlightForeground#eff0f8ff
  • editorSuggestWidget.selectedBackground#414456ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#3a3d4fff
  • editorWidget.border#3a3d4fff
  • errorForeground#e3365aff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#556c9fff
  • foreground#e0e1eaff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#848694ff
  • gitDecoration.modifiedResourceForeground#c79839ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#87ab55ff
  • input.background#343849ff
  • input.foreground#eff0f8ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#78a1f5ff
  • inputValidation.errorBackground#540000ff
  • inputValidation.errorBorder#840018ff
  • inputValidation.infoBackground#343849ff
  • inputValidation.infoBorder#535667ff
  • inputValidation.warningBackground#2f0600ff
  • inputValidation.warningBorder#4d2c00ff
  • list.activeSelectionBackground#414456ff
  • list.activeSelectionForeground#eff0f8ff
  • list.dropBackground#343849ff
  • list.errorForeground#e3365aff
  • list.focusBackground#414456ff
  • list.highlightForeground#eff0f8ff
  • list.hoverBackground#414456ff
  • list.inactiveFocusBackground#414456ff
  • list.inactiveSelectionBackground#414456ff
  • list.inactiveSelectionForeground#eff0f8ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#3a3d4fff
  • menu.foreground#c0c2ccff
  • menu.selectionBackground#414456ff
  • menu.selectionForeground#eff0f8ff
  • menu.separatorBackground#535667ff
  • menubar.selectionBackground#414456ff
  • menubar.selectionForeground#eff0f8ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#3a3d4fff
  • notificationLink.foreground#78a1f5ff
  • notifications.background#3a3d4fff
  • notifications.border#3a3d4fff
  • panel.background#3a3d4fff
  • panel.border#3a3d4fff
  • panel.dropBackground#343849ff
  • panelTitle.activeBorder#78a1f5ff
  • panelTitle.activeForeground#eff0f8ff
  • panelTitle.inactiveForeground#b0b2beff
  • peekView.border#3a3d4fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#3a3d4fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#343849ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3a3d4fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#1e2333ff
  • scrollbarSlider.activeBackground#696c7cbf
  • scrollbarSlider.background#535667bf
  • scrollbarSlider.hoverBackground#5e6171bf
  • settings.checkboxBackground#343849ff
  • settings.checkboxBorder#696c7cff
  • settings.checkboxForeground#eff0f8ff
  • settings.dropdownBackground#3a3d4fff
  • settings.dropdownBorder#3a3d4fff
  • settings.dropdownForeground#eff0f8ff
  • settings.dropdownListBorder#494d5eff
  • settings.headerForeground#d8edffff
  • settings.modifiedItemIndicator#556c9fff
  • settings.numberInputBackground#3a3d4fff
  • settings.numberInputForeground#eff0f8ff
  • settings.textInputBackground#3a3d4fff
  • settings.textInputForeground#eff0f8ff
  • sideBar.background#3a3d4fff
  • sideBar.dropBackground#343849ff
  • sideBar.foreground#b0b2beff
  • sideBarSectionHeader.background#3a3d4fff
  • sideBarSectionHeader.foreground#696c7cff
  • sideBarTitle.foreground#696c7cff
  • statusBar.background#414456ff
  • statusBar.debuggingBackground#912100ff
  • statusBar.debuggingForeground#b0b2beff
  • statusBar.foreground#b0b2beff
  • statusBar.noFolderBackground#4f1b68ff
  • statusBar.noFolderForeground#b0b2beff
  • tab.activeBackground#3a3d4fff
  • tab.activeBorder#78a1f5ff
  • tab.activeForeground#eff0f8ff
  • tab.activeModifiedBorder#78a1f5bf
  • tab.border#3a3d4fff
  • tab.inactiveBackground#3a3d4fff
  • tab.inactiveForeground#b0b2beff
  • tab.inactiveModifiedBorder#78a1f5bf
  • tab.unfocusedActiveForeground#eff0f8ff
  • tab.unfocusedActiveModifiedBorder#78a1f580
  • tab.unfocusedInactiveForeground#b0b2beff
  • tab.unfocusedInactiveModifiedBorder#78a1f580
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#82aaffff
  • terminal.ansiBrightBlack#676e95ff
  • terminal.ansiBrightBlue#82aaffff
  • terminal.ansiBrightCyan#89ddffff
  • terminal.ansiBrightGreen#c3e88dff
  • terminal.ansiBrightMagenta#d59ff8ff
  • terminal.ansiBrightRed#ff5370ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ffcb6bff
  • terminal.ansiCyan#89ddffff
  • terminal.ansiGreen#c3e88dff
  • terminal.ansiMagenta#d59ff8ff
  • terminal.ansiRed#ff5370ff
  • terminal.ansiWhite#ffffffff
  • terminal.ansiYellow#ffcb6bff
  • terminal.background#343849ff
  • terminal.border#3a3d4fff
  • terminal.foreground#e0e1eaff
  • terminal.selectionBackground#556c9f40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#3a3d4fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#78a1f5ff
  • textLink.foreground#78a1f5ff
  • textPreformat.foreground#d59ff8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#3a3d4fff
  • titleBar.activeForeground#b0b2beff
  • titleBar.inactiveBackground#3a3d4fff
  • titleBar.inactiveForeground#696c7cff
  • widget.shadow#292d3eff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#a6accdff
emphasisitalic
strongbold
header#000080
comment#676e95ff
constant.language#f78c6cff
constant.numeric#f78c6cff
constant.regexp#d59ff8ff
entity.name.tag#f07178ff
entity.name.tag.css#ffcb6bff
entity.other.attribute-name#c792eaff
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#c792eaff
invalid#f44747
markup.underlineunderline
markup.bold#c792eaffbold
markup.heading#c792eaffbold
markup.italicitalic
markup.inserted#f78c6cff
markup.deleted#c3e88dff
markup.changed#c792eaff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#c3e88dff
punctuation.definition.tag#89ddffff
meta.preprocessor#c792eaff
meta.preprocessor.string#c3e88dff
meta.preprocessor.numeric#f78c6cff
meta.structure.dictionary.key.python#e0e1eaff
meta.diff.header#c792eaff
storage#c792eaff
storage.type#c792eaff
storage.modifier#c792eaff
string#c3e88dff
string.tag#c3e88dff
string.value#c3e88dff
string.regexp#c3e88dff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#c0c2ccff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#a6accdff
keyword#c792eaff
keyword.control#c792eaff
keyword.operator#c0c2ccff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#c792eaff
keyword.other.unit#f78c6cff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#c792eaff
support.function.git-rebase#82aaffff
constant.sha.git-rebase#f78c6cff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#c792eaff
entity.name.function, support.function, support.constant.handlebars#82aaffff
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#b1c7ffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#b1c7ffff
keyword.control#c792eaff
variable, meta.definition.variable.name, support.variable, entity.name.variable#a6accdff
meta.object-literal.key#e0e1eaff
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#c3e88dff
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#89ddffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d59ff8ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#c0c2ccff
keyword.operator.quantifier.regexp#f78c6cff
constant.character#c792eaff
constant.character.escape#89ddffff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#c3e88dff
string.template#c3e88dff
storage.type.function#c792eaff
support.class.component.js#f07178ff
variable.parameter#ff5370ff
variable.other.property#e0e1eaff
support.function, support.constant.handlebars#82aaffff
support.type, support.class, support.constant.math#ffcb6bff
support.type.vendored.property-name, support.type.property-name#e0e1eaff
support.function#82aaffff
variable.other.constant#f07178ff
meta.brace.round.js, meta.brace.square.js, punctuation#89ddffff
support.type.property-name.json#e0e1eaff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#c0c2ccff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#c792eaff
entity.name.type.class, entity.name.type.module#b1c7ffff
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#676e95ff
markup.headingnormal

Shiki preview

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

Loading...