Skip to main content
CodingTheme

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#1e242fff
  • activityBar.dropBackground#181e2aff
  • activityBar.foreground#d3a4e6ff
  • activityBar.inactiveForeground#5b5e66ff
  • activityBarBadge.background#d3a4e6bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d3a4e6bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#181e2aff
  • breadcrumb.focusForeground#f4f4f4ff
  • breadcrumb.foreground#7d7f84ff
  • breadcrumbPicker.background#1e242fff
  • button.background#9b6fadff
  • button.foreground#ffffffff
  • button.hoverBackground#ae80c0ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1e242fff
  • debugToolBar.background#181e2aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1e242fff
  • dropdown.border#1e242fff
  • dropdown.foreground#f4f4f4ff
  • editor.background#181e2aff
  • editor.findMatchBackground#6580b240
  • editor.findMatchHighlightBackground#6580b240
  • editor.findRangeHighlightBackground#6580b240
  • editor.focusedStackFrameHighlightBackground#6580b240
  • editor.foreground#e6e6e6ff
  • editor.hoverHighlightBackground#6580b240
  • editor.inactiveSelectionBackground#6580b220
  • editor.lineHighlightBackground#1e242fff
  • editor.lineHighlightBorder#1e242fff
  • editor.rangeHighlightBackground#6580b240
  • editor.selectionBackground#6580b240
  • editor.selectionHighlightBackground#6580b220
  • editor.snippetFinalTabstopHighlightBorder#6580b240
  • editor.snippetTabstopHighlightBackground#6580b240
  • editor.stackFrameHighlightBackground#6580b240
  • editor.wordHighlightBackground#6580b220
  • editor.wordHighlightStrongBackground#6580b220
  • editorActiveLineNumber.foreground#7d7f84ff
  • editorBracketMatch.background#6580b220
  • editorBracketMatch.border#9cb6ebff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b4b5b5ff
  • editorError.foreground#ce7779ff
  • editorGroup.border#1e242fff
  • editorGroup.dropBackground#181e2aff
  • editorGroupHeader.noTabsBackground#181e2aff
  • editorGroupHeader.tabsBackground#1e242fff
  • editorGutter.addedBackground#00411eff
  • editorGutter.background#181e2aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#651822ff
  • editorGutter.modifiedBackground#133762ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1e242fff
  • editorHoverWidget.border#1e242fff
  • editorIndentGuide.activeBackground#313641ff
  • editorIndentGuide.background#272c37ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7d7f84ff
  • editorLineNumber.foreground#5b5e66ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ce7779ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#096c44ff
  • editorOverviewRuler.border#1e242fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#944448ff
  • editorOverviewRuler.errorForeground#ce7779bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#435f8eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#181e2aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1e242fff
  • editorSuggestWidget.border#1e242fff
  • editorSuggestWidget.foreground#f4f4f4ff
  • editorSuggestWidget.highlightForeground#f4f4f4ff
  • editorSuggestWidget.selectedBackground#272c37ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1e242fff
  • editorWidget.border#1e242fff
  • errorForeground#ce7779ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6580b2ff
  • foreground#e6e6e6ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7d7f84ff
  • gitDecoration.modifiedResourceForeground#ddaa75ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#71c698ff
  • input.background#181e2aff
  • input.foreground#f4f4f4ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d3a4e6ff
  • inputValidation.errorBackground#460008ff
  • inputValidation.errorBorder#73262dff
  • inputValidation.infoBackground#181e2aff
  • inputValidation.infoBorder#3d424cff
  • inputValidation.warningBackground#371400ff
  • inputValidation.warningBorder#5e3807ff
  • list.activeSelectionBackground#272c37ff
  • list.activeSelectionForeground#f4f4f4ff
  • list.dropBackground#181e2aff
  • list.errorForeground#ce7779ff
  • list.focusBackground#272c37ff
  • list.highlightForeground#f4f4f4ff
  • list.hoverBackground#272c37ff
  • list.inactiveFocusBackground#272c37ff
  • list.inactiveSelectionBackground#272c37ff
  • list.inactiveSelectionForeground#f4f4f4ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1e242fff
  • menu.foreground#c6c6c6ff
  • menu.selectionBackground#272c37ff
  • menu.selectionForeground#f4f4f4ff
  • menu.separatorBackground#3d424cff
  • menubar.selectionBackground#272c37ff
  • menubar.selectionForeground#f4f4f4ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1e242fff
  • notificationLink.foreground#d3a4e6ff
  • notifications.background#1e242fff
  • notifications.border#1e242fff
  • panel.background#1e242fff
  • panel.border#1e242fff
  • panel.dropBackground#181e2aff
  • panelTitle.activeBorder#d3a4e6ff
  • panelTitle.activeForeground#f4f4f4ff
  • panelTitle.inactiveForeground#b4b5b5ff
  • peekView.border#1e242fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1e242fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#181e2aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1e242fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000415ff
  • scrollbarSlider.activeBackground#5b5e66bf
  • scrollbarSlider.background#3d424cbf
  • scrollbarSlider.hoverBackground#4b4f58bf
  • settings.checkboxBackground#181e2aff
  • settings.checkboxBorder#5b5e66ff
  • settings.checkboxForeground#f4f4f4ff
  • settings.dropdownBackground#1e242fff
  • settings.dropdownBorder#1e242fff
  • settings.dropdownForeground#f4f4f4ff
  • settings.dropdownListBorder#313641ff
  • settings.headerForeground#dbf5ffff
  • settings.modifiedItemIndicator#6580b2ff
  • settings.numberInputBackground#1e242fff
  • settings.numberInputForeground#f4f4f4ff
  • settings.textInputBackground#1e242fff
  • settings.textInputForeground#f4f4f4ff
  • sideBar.background#1e242fff
  • sideBar.dropBackground#181e2aff
  • sideBar.foreground#b4b5b5ff
  • sideBarSectionHeader.background#1e242fff
  • sideBarSectionHeader.foreground#5b5e66ff
  • sideBarTitle.foreground#5b5e66ff
  • statusBar.background#272c37ff
  • statusBar.debuggingBackground#835213ff
  • statusBar.debuggingForeground#b4b5b5ff
  • statusBar.foreground#b4b5b5ff
  • statusBar.noFolderBackground#5d2c74ff
  • statusBar.noFolderForeground#b4b5b5ff
  • tab.activeBackground#1e242fff
  • tab.activeBorder#d3a4e6ff
  • tab.activeForeground#f4f4f4ff
  • tab.activeModifiedBorder#d3a4e6bf
  • tab.border#1e242fff
  • tab.inactiveBackground#1e242fff
  • tab.inactiveForeground#b4b5b5ff
  • tab.inactiveModifiedBorder#d3a4e6bf
  • tab.unfocusedActiveForeground#f4f4f4ff
  • tab.unfocusedActiveModifiedBorder#d3a4e680
  • tab.unfocusedInactiveForeground#b4b5b5ff
  • tab.unfocusedInactiveModifiedBorder#d3a4e680
  • terminal.ansiBlack#181e2aff
  • terminal.ansiBlue#adc8fdff
  • terminal.ansiBrightBlack#5b5e66ff
  • terminal.ansiBrightBlue#adc8fdff
  • terminal.ansiBrightCyan#64d6f7ff
  • terminal.ansiBrightGreen#82d8aaff
  • terminal.ansiBrightMagenta#dfb9eeff
  • terminal.ansiBrightRed#ffadadff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f0bc86ff
  • terminal.ansiCyan#64d6f7ff
  • terminal.ansiGreen#096c44ff
  • terminal.ansiMagenta#dfb9eeff
  • terminal.ansiRed#944448ff
  • terminal.ansiWhite#e6e6e6ff
  • terminal.ansiYellow#f0bc86ff
  • terminal.background#181e2aff
  • terminal.border#1e242fff
  • terminal.foreground#e6e6e6ff
  • terminal.selectionBackground#6580b240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1e242fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d3a4e6ff
  • textLink.foreground#d3a4e6ff
  • textPreformat.foreground#dfb9eeff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1e242fff
  • titleBar.activeForeground#b4b5b5ff
  • titleBar.inactiveBackground#1e242fff
  • titleBar.inactiveForeground#5b5e66ff
  • widget.shadow#0d131fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...