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#151e2dff
  • activityBar.dropBackground#0e1827ff
  • activityBar.foreground#d3a0e8ff
  • activityBar.inactiveForeground#535966ff
  • activityBarBadge.background#d3a0e8bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d3a0e8bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0e1827ff
  • breadcrumb.focusForeground#f3f4f5ff
  • breadcrumb.foreground#777b86ff
  • breadcrumbPicker.background#151e2dff
  • button.background#9969adff
  • button.foreground#ffffffff
  • button.hoverBackground#ac7bc1ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#151e2dff
  • debugToolBar.background#0e1827ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#151e2dff
  • dropdown.border#151e2dff
  • dropdown.foreground#f3f4f5ff
  • editor.background#0e1827ff
  • editor.findMatchBackground#5d7cb340
  • editor.findMatchHighlightBackground#5d7cb340
  • editor.findRangeHighlightBackground#5d7cb340
  • editor.focusedStackFrameHighlightBackground#5d7cb340
  • editor.foreground#e5e6e8ff
  • editor.hoverHighlightBackground#5d7cb340
  • editor.inactiveSelectionBackground#5d7cb320
  • editor.lineHighlightBackground#151e2dff
  • editor.lineHighlightBorder#151e2dff
  • editor.rangeHighlightBackground#5d7cb340
  • editor.selectionBackground#5d7cb340
  • editor.selectionHighlightBackground#5d7cb320
  • editor.snippetFinalTabstopHighlightBorder#5d7cb340
  • editor.snippetTabstopHighlightBackground#5d7cb340
  • editor.stackFrameHighlightBackground#5d7cb340
  • editor.wordHighlightBackground#5d7cb320
  • editor.wordHighlightStrongBackground#5d7cb320
  • editorActiveLineNumber.foreground#777b86ff
  • editorBracketMatch.background#5d7cb320
  • editorBracketMatch.border#96b4eeff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b0b2b9ff
  • editorError.foreground#ce7174ff
  • editorGroup.border#151e2dff
  • editorGroup.dropBackground#0e1827ff
  • editorGroupHeader.noTabsBackground#0e1827ff
  • editorGroupHeader.tabsBackground#151e2dff
  • editorGutter.addedBackground#003c16ff
  • editorGutter.background#0e1827ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#610a1bff
  • editorGutter.modifiedBackground#003160ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#151e2dff
  • editorHoverWidget.border#151e2dff
  • editorIndentGuide.activeBackground#29303fff
  • editorIndentGuide.background#1e2635ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#777b86ff
  • editorLineNumber.foreground#535966ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ce7174ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00673dff
  • editorOverviewRuler.border#151e2dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#923b42ff
  • editorOverviewRuler.errorForeground#ce7174bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#385a8eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0e1827ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#151e2dff
  • editorSuggestWidget.border#151e2dff
  • editorSuggestWidget.foreground#f3f4f5ff
  • editorSuggestWidget.highlightForeground#f3f4f5ff
  • editorSuggestWidget.selectedBackground#1e2635ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#151e2dff
  • editorWidget.border#151e2dff
  • errorForeground#ce7174ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5d7cb3ff
  • foreground#e5e6e8ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#777b86ff
  • gitDecoration.modifiedResourceForeground#dda76dff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#66c594ff
  • input.background#0e1827ff
  • input.foreground#f3f4f5ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d3a0e8ff
  • inputValidation.errorBackground#420000ff
  • inputValidation.errorBorder#701b27ff
  • inputValidation.infoBackground#0e1827ff
  • inputValidation.infoBorder#353c4bff
  • inputValidation.warningBackground#320c00ff
  • inputValidation.warningBorder#593200ff
  • list.activeSelectionBackground#1e2635ff
  • list.activeSelectionForeground#f3f4f5ff
  • list.dropBackground#0e1827ff
  • list.errorForeground#ce7174ff
  • list.focusBackground#1e2635ff
  • list.highlightForeground#f3f4f5ff
  • list.hoverBackground#1e2635ff
  • list.inactiveFocusBackground#1e2635ff
  • list.inactiveSelectionBackground#1e2635ff
  • list.inactiveSelectionForeground#f3f4f5ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#151e2dff
  • menu.foreground#c2c4c9ff
  • menu.selectionBackground#1e2635ff
  • menu.selectionForeground#f3f4f5ff
  • menu.separatorBackground#353c4bff
  • menubar.selectionBackground#1e2635ff
  • menubar.selectionForeground#f3f4f5ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#151e2dff
  • notificationLink.foreground#d3a0e8ff
  • notifications.background#151e2dff
  • notifications.border#151e2dff
  • panel.background#151e2dff
  • panel.border#151e2dff
  • panel.dropBackground#0e1827ff
  • panelTitle.activeBorder#d3a0e8ff
  • panelTitle.activeForeground#f3f4f5ff
  • panelTitle.inactiveForeground#b0b2b9ff
  • peekView.border#151e2dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#151e2dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0e1827ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#151e2dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000118ff
  • scrollbarSlider.activeBackground#535966bf
  • scrollbarSlider.background#353c4bbf
  • scrollbarSlider.hoverBackground#444a58bf
  • settings.checkboxBackground#0e1827ff
  • settings.checkboxBorder#535966ff
  • settings.checkboxForeground#f3f4f5ff
  • settings.dropdownBackground#151e2dff
  • settings.dropdownBorder#151e2dff
  • settings.dropdownForeground#f3f4f5ff
  • settings.dropdownListBorder#29303fff
  • settings.headerForeground#d7f5ffff
  • settings.modifiedItemIndicator#5d7cb3ff
  • settings.numberInputBackground#151e2dff
  • settings.numberInputForeground#f3f4f5ff
  • settings.textInputBackground#151e2dff
  • settings.textInputForeground#f3f4f5ff
  • sideBar.background#151e2dff
  • sideBar.dropBackground#0e1827ff
  • sideBar.foreground#b0b2b9ff
  • sideBarSectionHeader.background#151e2dff
  • sideBarSectionHeader.foreground#535966ff
  • sideBarTitle.foreground#535966ff
  • statusBar.background#1e2635ff
  • statusBar.debuggingBackground#7f4c04ff
  • statusBar.debuggingForeground#b0b2b9ff
  • statusBar.foreground#b0b2b9ff
  • statusBar.noFolderBackground#592472ff
  • statusBar.noFolderForeground#b0b2b9ff
  • tab.activeBackground#151e2dff
  • tab.activeBorder#d3a0e8ff
  • tab.activeForeground#f3f4f5ff
  • tab.activeModifiedBorder#d3a0e8bf
  • tab.border#151e2dff
  • tab.inactiveBackground#151e2dff
  • tab.inactiveForeground#b0b2b9ff
  • tab.inactiveModifiedBorder#d3a0e8bf
  • tab.unfocusedActiveForeground#f3f4f5ff
  • tab.unfocusedActiveModifiedBorder#d3a0e880
  • tab.unfocusedInactiveForeground#b0b2b9ff
  • tab.unfocusedInactiveModifiedBorder#d3a0e880
  • terminal.ansiBlack#0e1827ff
  • terminal.ansiBlue#a8c6ffff
  • terminal.ansiBrightBlack#535966ff
  • terminal.ansiBrightBlue#a8c6ffff
  • terminal.ansiBrightCyan#51d5f9ff
  • terminal.ansiBrightGreen#79d7a5ff
  • terminal.ansiBrightMagenta#e0b6f0ff
  • terminal.ansiBrightRed#ffa8a9ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f1b97eff
  • terminal.ansiCyan#51d5f9ff
  • terminal.ansiGreen#00673dff
  • terminal.ansiMagenta#e0b6f0ff
  • terminal.ansiRed#923b42ff
  • terminal.ansiWhite#e5e6e8ff
  • terminal.ansiYellow#f1b97eff
  • terminal.background#0e1827ff
  • terminal.border#151e2dff
  • terminal.foreground#e5e6e8ff
  • terminal.selectionBackground#5d7cb340
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#151e2dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d3a0e8ff
  • textLink.foreground#d3a0e8ff
  • textPreformat.foreground#e0b6f0ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#151e2dff
  • titleBar.activeForeground#b0b2b9ff
  • titleBar.inactiveBackground#151e2dff
  • titleBar.inactiveForeground#535966ff
  • widget.shadow#000b1dff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme