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#ca97deff
  • activityBar.inactiveForeground#575d6aff
  • activityBarBadge.background#ca97debf
  • activityBarBadge.foreground#ffffffff
  • badge.background#ca97debf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1b2435ff
  • breadcrumb.focusForeground#eeeff0ff
  • breadcrumb.foreground#747984ff
  • breadcrumbPicker.background#222a3bff
  • button.background#9667abff
  • button.foreground#ffffffff
  • button.hoverBackground#a776bbff
  • 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#eeeff0ff
  • editor.background#1b2435ff
  • editor.findMatchBackground#5a7ab040
  • editor.findMatchHighlightBackground#5a7ab040
  • editor.findRangeHighlightBackground#5a7ab040
  • editor.focusedStackFrameHighlightBackground#5a7ab040
  • editor.foreground#dcdee1ff
  • editor.hoverHighlightBackground#5a7ab040
  • editor.inactiveSelectionBackground#5a7ab020
  • editor.lineHighlightBackground#222a3bff
  • editor.lineHighlightBorder#222a3bff
  • editor.rangeHighlightBackground#5a7ab040
  • editor.selectionBackground#5a7ab040
  • editor.selectionHighlightBackground#5a7ab020
  • editor.snippetFinalTabstopHighlightBorder#5a7ab040
  • editor.snippetTabstopHighlightBackground#5a7ab040
  • editor.stackFrameHighlightBackground#5a7ab040
  • editor.wordHighlightBackground#5a7ab020
  • editor.wordHighlightStrongBackground#5a7ab020
  • editorActiveLineNumber.foreground#747984ff
  • editorBracketMatch.background#5a7ab020
  • editorBracketMatch.border#8cabe4ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a6a9b1ff
  • editorError.foreground#c96c6fff
  • editorGroup.border#222a3bff
  • editorGroup.dropBackground#1b2435ff
  • editorGroupHeader.noTabsBackground#1b2435ff
  • editorGroupHeader.tabsBackground#222a3bff
  • editorGutter.addedBackground#004720ff
  • editorGutter.background#1b2435ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#6d1925ff
  • editorGutter.modifiedBackground#0f3c6cff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#222a3bff
  • editorHoverWidget.border#222a3bff
  • editorIndentGuide.activeBackground#333a4aff
  • editorIndentGuide.background#293142ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#747984ff
  • editorLineNumber.foreground#575d6aff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c96c6fff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006b41ff
  • editorOverviewRuler.border#222a3bff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#963f45ff
  • editorOverviewRuler.errorForeground#c96c6fbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#3c5e92ff
  • 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#eeeff0ff
  • editorSuggestWidget.highlightForeground#eeeff0ff
  • editorSuggestWidget.selectedBackground#293142ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#222a3bff
  • editorWidget.border#222a3bff
  • errorForeground#c96c6fff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5a7ab0ff
  • foreground#dcdee1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#747984ff
  • gitDecoration.modifiedResourceForeground#d39e64ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5dbb8bff
  • input.background#1b2435ff
  • input.foreground#eeeff0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#ca97deff
  • inputValidation.errorBackground#510010ff
  • inputValidation.errorBorder#7a252eff
  • inputValidation.infoBackground#1b2435ff
  • inputValidation.infoBorder#3e4554ff
  • inputValidation.warningBackground#3f1900ff
  • inputValidation.warningBorder#633a02ff
  • list.activeSelectionBackground#293142ff
  • list.activeSelectionForeground#eeeff0ff
  • list.dropBackground#1b2435ff
  • list.errorForeground#c96c6fff
  • list.focusBackground#293142ff
  • list.highlightForeground#eeeff0ff
  • list.hoverBackground#293142ff
  • list.inactiveFocusBackground#293142ff
  • list.inactiveSelectionBackground#293142ff
  • list.inactiveSelectionForeground#eeeff0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#222a3bff
  • menu.foreground#b8bbc1ff
  • menu.selectionBackground#293142ff
  • menu.selectionForeground#eeeff0ff
  • menu.separatorBackground#3e4554ff
  • menubar.selectionBackground#293142ff
  • menubar.selectionForeground#eeeff0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#222a3bff
  • notificationLink.foreground#ca97deff
  • notifications.background#222a3bff
  • notifications.border#222a3bff
  • panel.background#222a3bff
  • panel.border#222a3bff
  • panel.dropBackground#1b2435ff
  • panelTitle.activeBorder#ca97deff
  • panelTitle.activeForeground#eeeff0ff
  • panelTitle.inactiveForeground#a6a9b1ff
  • 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#575d6abf
  • scrollbarSlider.background#3e4554bf
  • scrollbarSlider.hoverBackground#49505fbf
  • settings.checkboxBackground#1b2435ff
  • settings.checkboxBorder#575d6aff
  • settings.checkboxForeground#eeeff0ff
  • settings.dropdownBackground#222a3bff
  • settings.dropdownBorder#222a3bff
  • settings.dropdownForeground#eeeff0ff
  • settings.dropdownListBorder#333a4aff
  • settings.headerForeground#d2f0ffff
  • settings.modifiedItemIndicator#5a7ab0ff
  • settings.numberInputBackground#222a3bff
  • settings.numberInputForeground#eeeff0ff
  • settings.textInputBackground#222a3bff
  • settings.textInputForeground#eeeff0ff
  • sideBar.background#222a3bff
  • sideBar.dropBackground#1b2435ff
  • sideBar.foreground#a6a9b1ff
  • sideBarSectionHeader.background#222a3bff
  • sideBarSectionHeader.foreground#575d6aff
  • sideBarTitle.foreground#575d6aff
  • statusBar.background#293142ff
  • statusBar.debuggingBackground#834f08ff
  • statusBar.debuggingForeground#a6a9b1ff
  • statusBar.foreground#a6a9b1ff
  • statusBar.noFolderBackground#622d7bff
  • statusBar.noFolderForeground#a6a9b1ff
  • tab.activeBackground#222a3bff
  • tab.activeBorder#ca97deff
  • tab.activeForeground#eeeff0ff
  • tab.activeModifiedBorder#ca97debf
  • tab.border#222a3bff
  • tab.inactiveBackground#222a3bff
  • tab.inactiveForeground#a6a9b1ff
  • tab.inactiveModifiedBorder#ca97debf
  • tab.unfocusedActiveForeground#eeeff0ff
  • tab.unfocusedActiveModifiedBorder#ca97de80
  • tab.unfocusedInactiveForeground#a6a9b1ff
  • tab.unfocusedInactiveModifiedBorder#ca97de80
  • terminal.ansiBlack#1b2435ff
  • terminal.ansiBlue#9ebcf7ff
  • terminal.ansiBrightBlack#575d6aff
  • terminal.ansiBrightBlue#9ebcf7ff
  • terminal.ansiBrightCyan#44cbefff
  • terminal.ansiBrightGreen#6fcd9cff
  • terminal.ansiBrightMagenta#d6ace6ff
  • terminal.ansiBrightRed#ff9ea0ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e6af75ff
  • terminal.ansiCyan#44cbefff
  • terminal.ansiGreen#006b41ff
  • terminal.ansiMagenta#d6ace6ff
  • terminal.ansiRed#963f45ff
  • terminal.ansiWhite#dcdee1ff
  • terminal.ansiYellow#e6af75ff
  • terminal.background#1b2435ff
  • terminal.border#222a3bff
  • terminal.foreground#dcdee1ff
  • terminal.selectionBackground#5a7ab040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#222a3bff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#ca97deff
  • textLink.foreground#ca97deff
  • textPreformat.foreground#d6ace6ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#222a3bff
  • titleBar.activeForeground#a6a9b1ff
  • titleBar.inactiveBackground#222a3bff
  • titleBar.inactiveForeground#575d6aff
  • widget.shadow#111a2aff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme