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#222a3bff
  • activityBar.dropBackground#1b2435ff
  • activityBar.foreground#d9a5edff
  • activityBar.inactiveForeground#5e6370ff
  • activityBarBadge.background#d9a5edbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d9a5edbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1b2435ff
  • breadcrumb.focusForeground#f4f4f5ff
  • breadcrumb.foreground#7f838eff
  • breadcrumbPicker.background#222a3bff
  • button.background#a271b6ff
  • button.foreground#ffffffff
  • button.hoverBackground#b482c8ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#222a3bff
  • debugToolBar.background#1b2435ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#222a3bff
  • dropdown.border#222a3bff
  • dropdown.foreground#f4f4f5ff
  • editor.background#1b2435ff
  • editor.findMatchBackground#6585bc40
  • editor.findMatchHighlightBackground#6585bc40
  • editor.findRangeHighlightBackground#6585bc40
  • editor.focusedStackFrameHighlightBackground#6585bc40
  • editor.foreground#e6e7eaff
  • editor.hoverHighlightBackground#6585bc40
  • editor.inactiveSelectionBackground#6585bc20
  • editor.lineHighlightBackground#222a3bff
  • editor.lineHighlightBorder#222a3bff
  • editor.rangeHighlightBackground#6585bc40
  • editor.selectionBackground#6585bc40
  • editor.selectionHighlightBackground#6585bc20
  • editor.snippetFinalTabstopHighlightBorder#6585bc40
  • editor.snippetTabstopHighlightBackground#6585bc40
  • editor.stackFrameHighlightBackground#6585bc40
  • editor.wordHighlightBackground#6585bc20
  • editor.wordHighlightStrongBackground#6585bc20
  • editorActiveLineNumber.foreground#7f838eff
  • editorBracketMatch.background#6585bc20
  • editorBracketMatch.border#9bb9f3ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b5b7beff
  • editorError.foreground#d7787bff
  • editorGroup.border#222a3bff
  • editorGroup.dropBackground#1b2435ff
  • editorGroupHeader.noTabsBackground#1b2435ff
  • editorGroupHeader.tabsBackground#222a3bff
  • editorGutter.addedBackground#004822ff
  • editorGutter.background#1b2435ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#6f1b26ff
  • editorGutter.modifiedBackground#123d6eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#222a3bff
  • editorHoverWidget.border#222a3bff
  • editorIndentGuide.activeBackground#353c4cff
  • editorIndentGuide.background#2a3242ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7f838eff
  • editorLineNumber.foreground#5e6370ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d7787bff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007247ff
  • editorOverviewRuler.border#222a3bff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9e464bff
  • editorOverviewRuler.errorForeground#d7787bbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#436599ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1b2435ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#222a3bff
  • editorSuggestWidget.border#222a3bff
  • editorSuggestWidget.foreground#f4f4f5ff
  • editorSuggestWidget.highlightForeground#f4f4f5ff
  • editorSuggestWidget.selectedBackground#2a3242ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#222a3bff
  • editorWidget.border#222a3bff
  • errorForeground#d7787bff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6585bcff
  • foreground#e6e7eaff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7f838eff
  • gitDecoration.modifiedResourceForeground#e2ac72ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6bca98ff
  • input.background#1b2435ff
  • input.foreground#f4f4f5ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d9a5edff
  • inputValidation.errorBackground#510010ff
  • inputValidation.errorBorder#7e2831ff
  • inputValidation.infoBackground#1b2435ff
  • inputValidation.infoBorder#414857ff
  • inputValidation.warningBackground#3f1900ff
  • inputValidation.warningBorder#673d05ff
  • list.activeSelectionBackground#2a3242ff
  • list.activeSelectionForeground#f4f4f5ff
  • list.dropBackground#1b2435ff
  • list.errorForeground#d7787bff
  • list.focusBackground#2a3242ff
  • list.highlightForeground#f4f4f5ff
  • list.hoverBackground#2a3242ff
  • list.inactiveFocusBackground#2a3242ff
  • list.inactiveSelectionBackground#2a3242ff
  • list.inactiveSelectionForeground#f4f4f5ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#222a3bff
  • menu.foreground#c6c8cdff
  • menu.selectionBackground#2a3242ff
  • menu.selectionForeground#f4f4f5ff
  • menu.separatorBackground#414857ff
  • menubar.selectionBackground#2a3242ff
  • menubar.selectionForeground#f4f4f5ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#222a3bff
  • notificationLink.foreground#d9a5edff
  • notifications.background#222a3bff
  • notifications.border#222a3bff
  • panel.background#222a3bff
  • panel.border#222a3bff
  • panel.dropBackground#1b2435ff
  • panelTitle.activeBorder#d9a5edff
  • panelTitle.activeForeground#f4f4f5ff
  • panelTitle.inactiveForeground#b5b7beff
  • peekView.border#222a3bff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#222a3bff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1b2435ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#222a3bff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#040f20ff
  • scrollbarSlider.activeBackground#5e6370bf
  • scrollbarSlider.background#414857bf
  • scrollbarSlider.hoverBackground#4e5563bf
  • settings.checkboxBackground#1b2435ff
  • settings.checkboxBorder#5e6370ff
  • settings.checkboxForeground#f4f4f5ff
  • settings.dropdownBackground#222a3bff
  • settings.dropdownBorder#222a3bff
  • settings.dropdownForeground#f4f4f5ff
  • settings.dropdownListBorder#353c4cff
  • settings.headerForeground#d8f6ffff
  • settings.modifiedItemIndicator#6585bcff
  • settings.numberInputBackground#222a3bff
  • settings.numberInputForeground#f4f4f5ff
  • settings.textInputBackground#222a3bff
  • settings.textInputForeground#f4f4f5ff
  • sideBar.background#222a3bff
  • sideBar.dropBackground#1b2435ff
  • sideBar.foreground#b5b7beff
  • sideBarSectionHeader.background#222a3bff
  • sideBarSectionHeader.foreground#5e6370ff
  • sideBarTitle.foreground#5e6370ff
  • statusBar.background#2a3242ff
  • statusBar.debuggingBackground#8b5611ff
  • statusBar.debuggingForeground#b5b7beff
  • statusBar.foreground#b5b7beff
  • statusBar.noFolderBackground#66307fff
  • statusBar.noFolderForeground#b5b7beff
  • tab.activeBackground#222a3bff
  • tab.activeBorder#d9a5edff
  • tab.activeForeground#f4f4f5ff
  • tab.activeModifiedBorder#d9a5edbf
  • tab.border#222a3bff
  • tab.inactiveBackground#222a3bff
  • tab.inactiveForeground#b5b7beff
  • tab.inactiveModifiedBorder#d9a5edbf
  • tab.unfocusedActiveForeground#f4f4f5ff
  • tab.unfocusedActiveModifiedBorder#d9a5ed80
  • tab.unfocusedInactiveForeground#b5b7beff
  • tab.unfocusedInactiveModifiedBorder#d9a5ed80
  • terminal.ansiBlack#1b2435ff
  • terminal.ansiBlue#accaffff
  • terminal.ansiBrightBlack#5e6370ff
  • terminal.ansiBrightBlue#accaffff
  • terminal.ansiBrightCyan#56d9fdff
  • terminal.ansiBrightGreen#7ddba9ff
  • terminal.ansiBrightMagenta#e4baf4ff
  • terminal.ansiBrightRed#ffacadff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f5bd82ff
  • terminal.ansiCyan#56d9fdff
  • terminal.ansiGreen#007247ff
  • terminal.ansiMagenta#e4baf4ff
  • terminal.ansiRed#9e464bff
  • terminal.ansiWhite#e6e7eaff
  • terminal.ansiYellow#f5bd82ff
  • terminal.background#1b2435ff
  • terminal.border#222a3bff
  • terminal.foreground#e6e7eaff
  • terminal.selectionBackground#6585bc40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#222a3bff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d9a5edff
  • textLink.foreground#d9a5edff
  • textPreformat.foreground#e4baf4ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#222a3bff
  • titleBar.activeForeground#b5b7beff
  • titleBar.inactiveBackground#222a3bff
  • titleBar.inactiveForeground#5e6370ff
  • widget.shadow#111a2aff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme