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#252525ff
  • activityBar.dropBackground#1f1f1fff
  • activityBar.foreground#00ad93ff
  • activityBar.inactiveForeground#595959ff
  • activityBarBadge.background#00ad93bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00ad93bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1f1f1fff
  • breadcrumb.focusForeground#eeeeeeff
  • breadcrumb.foreground#757575ff
  • breadcrumbPicker.background#252525ff
  • button.background#00705aff
  • button.foreground#ffffffff
  • button.hoverBackground#00846cff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#252525ff
  • debugToolBar.background#1f1f1fff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#252525ff
  • dropdown.border#252525ff
  • dropdown.foreground#eeeeeeff
  • editor.background#1f1f1fff
  • editor.findMatchBackground#38618940
  • editor.findMatchHighlightBackground#38618940
  • editor.findRangeHighlightBackground#38618940
  • editor.focusedStackFrameHighlightBackground#38618940
  • editor.foreground#ddddddff
  • editor.hoverHighlightBackground#38618940
  • editor.inactiveSelectionBackground#38618920
  • editor.lineHighlightBackground#252525ff
  • editor.lineHighlightBorder#252525ff
  • editor.rangeHighlightBackground#38618940
  • editor.selectionBackground#38618940
  • editor.selectionHighlightBackground#38618920
  • editor.snippetFinalTabstopHighlightBorder#38618940
  • editor.snippetTabstopHighlightBackground#38618940
  • editor.stackFrameHighlightBackground#38618940
  • editor.wordHighlightBackground#38618920
  • editor.wordHighlightStrongBackground#38618920
  • editorActiveLineNumber.foreground#757575ff
  • editorBracketMatch.background#38618920
  • editorBracketMatch.border#509ee3ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#f65683ff
  • editorError.foreground#d70f57ff
  • editorGroup.border#252525ff
  • editorGroup.dropBackground#1f1f1fff
  • editorGroupHeader.noTabsBackground#1f1f1fff
  • editorGroupHeader.tabsBackground#252525ff
  • editorGutter.addedBackground#002713ff
  • editorGutter.background#1f1f1fff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5f0000ff
  • editorGutter.modifiedBackground#001a3bff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#252525ff
  • editorHoverWidget.border#252525ff
  • editorIndentGuide.activeBackground#363636ff
  • editorIndentGuide.background#2d2d2dff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#757575ff
  • editorLineNumber.foreground#595959ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d70f57ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004d39ff
  • editorOverviewRuler.border#252525ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#950028ff
  • editorOverviewRuler.errorForeground#d70f57bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#0e4165ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1f1f1fff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#252525ff
  • editorSuggestWidget.border#252525ff
  • editorSuggestWidget.foreground#eeeeeeff
  • editorSuggestWidget.highlightForeground#eeeeeeff
  • editorSuggestWidget.selectedBackground#2d2d2dff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#252525ff
  • editorWidget.border#252525ff
  • errorForeground#d70f57ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#386189ff
  • foreground#ddddddff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#757575ff
  • gitDecoration.modifiedResourceForeground#c48a4aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00ad93ff
  • input.background#1f1f1fff
  • input.foreground#eeeeeeff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00ad93ff
  • inputValidation.errorBackground#4c0000ff
  • inputValidation.errorBorder#6f000eff
  • inputValidation.infoBackground#1f1f1fff
  • inputValidation.infoBorder#404040ff
  • inputValidation.warningBackground#2c0000ff
  • inputValidation.warningBorder#401500ff
  • list.activeSelectionBackground#2d2d2dff
  • list.activeSelectionForeground#eeeeeeff
  • list.dropBackground#1f1f1fff
  • list.errorForeground#d70f57ff
  • list.focusBackground#2d2d2dff
  • list.highlightForeground#eeeeeeff
  • list.hoverBackground#2d2d2dff
  • list.inactiveFocusBackground#2d2d2dff
  • list.inactiveSelectionBackground#2d2d2dff
  • list.inactiveSelectionForeground#eeeeeeff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#252525ff
  • menu.foreground#b9b9b9ff
  • menu.selectionBackground#2d2d2dff
  • menu.selectionForeground#eeeeeeff
  • menu.separatorBackground#404040ff
  • menubar.selectionBackground#2d2d2dff
  • menubar.selectionForeground#eeeeeeff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#252525ff
  • notificationLink.foreground#00ad93ff
  • notifications.background#252525ff
  • notifications.border#252525ff
  • panel.background#252525ff
  • panel.border#252525ff
  • panel.dropBackground#1f1f1fff
  • panelTitle.activeBorder#00ad93ff
  • panelTitle.activeForeground#eeeeeeff
  • panelTitle.inactiveForeground#a7a7a7ff
  • peekView.border#252525ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252525ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1f1f1fff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#252525ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#070707ff
  • scrollbarSlider.activeBackground#595959bf
  • scrollbarSlider.background#404040bf
  • scrollbarSlider.hoverBackground#4c4c4cbf
  • settings.checkboxBackground#1f1f1fff
  • settings.checkboxBorder#595959ff
  • settings.checkboxForeground#eeeeeeff
  • settings.dropdownBackground#252525ff
  • settings.dropdownBorder#252525ff
  • settings.dropdownForeground#eeeeeeff
  • settings.dropdownListBorder#363636ff
  • settings.headerForeground#c9f0ffff
  • settings.modifiedItemIndicator#386189ff
  • settings.numberInputBackground#252525ff
  • settings.numberInputForeground#eeeeeeff
  • settings.textInputBackground#252525ff
  • settings.textInputForeground#eeeeeeff
  • sideBar.background#252525ff
  • sideBar.dropBackground#1f1f1fff
  • sideBar.foreground#a7a7a7ff
  • sideBarSectionHeader.background#252525ff
  • sideBarSectionHeader.foreground#595959ff
  • sideBarTitle.foreground#595959ff
  • statusBar.background#2d2d2dff
  • statusBar.debuggingBackground#781400ff
  • statusBar.debuggingForeground#a7a7a7ff
  • statusBar.foreground#a7a7a7ff
  • statusBar.noFolderBackground#380c4dff
  • statusBar.noFolderForeground#a7a7a7ff
  • tab.activeBackground#252525ff
  • tab.activeBorder#00ad93ff
  • tab.activeForeground#eeeeeeff
  • tab.activeModifiedBorder#00ad93bf
  • tab.border#252525ff
  • tab.inactiveBackground#252525ff
  • tab.inactiveForeground#a7a7a7ff
  • tab.inactiveModifiedBorder#00ad93bf
  • tab.unfocusedActiveForeground#eeeeeeff
  • tab.unfocusedActiveModifiedBorder#00ad9380
  • tab.unfocusedInactiveForeground#a7a7a7ff
  • tab.unfocusedInactiveModifiedBorder#00ad9380
  • terminal.ansiBlack#1f1f1fff
  • terminal.ansiBlue#5ba8edff
  • terminal.ansiBrightBlack#757575ff
  • terminal.ansiBrightBlue#80c0f3ff
  • terminal.ansiBrightCyan#bcacf3ff
  • terminal.ansiBrightGreen#52f6d9ff
  • terminal.ansiBrightMagenta#fd83baff
  • terminal.ansiBrightRed#f73d6fff
  • terminal.ansiBrightWhite#e6e6e6ff
  • terminal.ansiBrightYellow#f9cea1ff
  • terminal.ansiCyan#ae87e1ff
  • terminal.ansiGreen#52f6d9ff
  • terminal.ansiMagenta#fd83baff
  • terminal.ansiRed#f73d6fff
  • terminal.ansiWhite#cdcdcdff
  • terminal.ansiYellow#f9ba78ff
  • terminal.background#1f1f1fff
  • terminal.border#252525ff
  • terminal.foreground#ddddddff
  • terminal.selectionBackground#38618940
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#252525ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00ad93ff
  • textLink.foreground#00ad93ff
  • textPreformat.foreground#fd83baff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#252525ff
  • titleBar.activeForeground#a7a7a7ff
  • titleBar.inactiveBackground#252525ff
  • titleBar.inactiveForeground#595959ff
  • widget.shadow#151515ff

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#fd83baff
entity.name.tag#509ee3ff
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#969696ff
meta.preprocessor#f67cb3ff
meta.preprocessor.string#52f6d9ff
meta.preprocessor.numeric#f9ba78ff
meta.structure.dictionary.key.python#ddddddff
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#9ec5f2ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9ec5f2ff
keyword.control#f67cb3ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#e6e6e6ff
meta.object-literal.key#ddddddff
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#969696ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#fd83baff
keyword.operator.or.regexp, keyword.control.anchor.regexp#e6e6e6ff
keyword.operator.quantifier.regexp#f9ba78ff
constant.character#f67cb3ff
constant.character.escape#969696ff
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#509ee3ff
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#ddddddff
support.function#80c0f3ff
variable.other.constant#f5a0c0ff
meta.brace.round.js, meta.brace.square.js, punctuation#969696ff
support.type.property-name.json#ddddddff
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#9ec5f2ff
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...