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#c496d7ff
  • activityBar.inactiveForeground#545760ff
  • activityBarBadge.background#c496d7bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#c496d7bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#181e2aff
  • breadcrumb.focusForeground#eeeeeeff
  • breadcrumb.foreground#72747aff
  • breadcrumbPicker.background#1e242fff
  • button.background#8f64a2ff
  • button.foreground#ffffffff
  • button.hoverBackground#a074b3ff
  • 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#eeeeeeff
  • editor.background#181e2aff
  • editor.findMatchBackground#5a75a640
  • editor.findMatchHighlightBackground#5a75a640
  • editor.findRangeHighlightBackground#5a75a640
  • editor.focusedStackFrameHighlightBackground#5a75a640
  • editor.foreground#dcdcdcff
  • editor.hoverHighlightBackground#5a75a640
  • editor.inactiveSelectionBackground#5a75a620
  • editor.lineHighlightBackground#1e242fff
  • editor.lineHighlightBorder#1e242fff
  • editor.rangeHighlightBackground#5a75a640
  • editor.selectionBackground#5a75a640
  • editor.selectionHighlightBackground#5a75a620
  • editor.snippetFinalTabstopHighlightBorder#5a75a640
  • editor.snippetTabstopHighlightBackground#5a75a640
  • editor.stackFrameHighlightBackground#5a75a640
  • editor.wordHighlightBackground#5a75a620
  • editor.wordHighlightStrongBackground#5a75a620
  • editorActiveLineNumber.foreground#72747aff
  • editorBracketMatch.background#5a75a620
  • editorBracketMatch.border#8da8dbff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a5a6a8ff
  • editorError.foreground#c06a6dff
  • editorGroup.border#1e242fff
  • editorGroup.dropBackground#181e2aff
  • editorGroupHeader.noTabsBackground#181e2aff
  • editorGroupHeader.tabsBackground#1e242fff
  • editorGutter.addedBackground#003f1cff
  • editorGutter.background#181e2aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#621621ff
  • editorGutter.modifiedBackground#103560ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1e242fff
  • editorHoverWidget.border#1e242fff
  • editorIndentGuide.activeBackground#2f343fff
  • editorIndentGuide.background#262b36ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#72747aff
  • editorLineNumber.foreground#545760ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c06a6dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00653eff
  • editorOverviewRuler.border#1e242fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8c3d42ff
  • editorOverviewRuler.errorForeground#c06a6dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#3b5886ff
  • 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#eeeeeeff
  • editorSuggestWidget.highlightForeground#eeeeeeff
  • editorSuggestWidget.selectedBackground#262b36ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1e242fff
  • editorWidget.border#1e242fff
  • errorForeground#c06a6dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5a75a6ff
  • foreground#dcdcdcff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#72747aff
  • gitDecoration.modifiedResourceForeground#cd9c67ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#62b78aff
  • input.background#181e2aff
  • input.foreground#eeeeeeff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c496d7ff
  • inputValidation.errorBackground#460008ff
  • inputValidation.errorBorder#6f222aff
  • inputValidation.infoBackground#181e2aff
  • inputValidation.infoBorder#3a3f49ff
  • inputValidation.warningBackground#371400ff
  • inputValidation.warningBorder#5a3503ff
  • list.activeSelectionBackground#262b36ff
  • list.activeSelectionForeground#eeeeeeff
  • list.dropBackground#181e2aff
  • list.errorForeground#c06a6dff
  • list.focusBackground#262b36ff
  • list.highlightForeground#eeeeeeff
  • list.hoverBackground#262b36ff
  • list.inactiveFocusBackground#262b36ff
  • list.inactiveSelectionBackground#262b36ff
  • list.inactiveSelectionForeground#eeeeeeff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1e242fff
  • menu.foreground#b8b8b8ff
  • menu.selectionBackground#262b36ff
  • menu.selectionForeground#eeeeeeff
  • menu.separatorBackground#3a3f49ff
  • menubar.selectionBackground#262b36ff
  • menubar.selectionForeground#eeeeeeff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1e242fff
  • notificationLink.foreground#c496d7ff
  • notifications.background#1e242fff
  • notifications.border#1e242fff
  • panel.background#1e242fff
  • panel.border#1e242fff
  • panel.dropBackground#181e2aff
  • panelTitle.activeBorder#c496d7ff
  • panelTitle.activeForeground#eeeeeeff
  • panelTitle.inactiveForeground#a5a6a8ff
  • 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#545760bf
  • scrollbarSlider.background#3a3f49bf
  • scrollbarSlider.hoverBackground#464a54bf
  • settings.checkboxBackground#181e2aff
  • settings.checkboxBorder#545760ff
  • settings.checkboxForeground#eeeeeeff
  • settings.dropdownBackground#1e242fff
  • settings.dropdownBorder#1e242fff
  • settings.dropdownForeground#eeeeeeff
  • settings.dropdownListBorder#2f343fff
  • settings.headerForeground#d5f0ffff
  • settings.modifiedItemIndicator#5a75a6ff
  • settings.numberInputBackground#1e242fff
  • settings.numberInputForeground#eeeeeeff
  • settings.textInputBackground#1e242fff
  • settings.textInputForeground#eeeeeeff
  • sideBar.background#1e242fff
  • sideBar.dropBackground#181e2aff
  • sideBar.foreground#a5a6a8ff
  • sideBarSectionHeader.background#1e242fff
  • sideBarSectionHeader.foreground#545760ff
  • sideBarTitle.foreground#545760ff
  • statusBar.background#262b36ff
  • statusBar.debuggingBackground#7b4b0bff
  • statusBar.debuggingForeground#a5a6a8ff
  • statusBar.foreground#a5a6a8ff
  • statusBar.noFolderBackground#5a2971ff
  • statusBar.noFolderForeground#a5a6a8ff
  • tab.activeBackground#1e242fff
  • tab.activeBorder#c496d7ff
  • tab.activeForeground#eeeeeeff
  • tab.activeModifiedBorder#c496d7bf
  • tab.border#1e242fff
  • tab.inactiveBackground#1e242fff
  • tab.inactiveForeground#a5a6a8ff
  • tab.inactiveModifiedBorder#c496d7bf
  • tab.unfocusedActiveForeground#eeeeeeff
  • tab.unfocusedActiveModifiedBorder#c496d780
  • tab.unfocusedInactiveForeground#a5a6a8ff
  • tab.unfocusedInactiveModifiedBorder#c496d780
  • terminal.ansiBlack#181e2aff
  • terminal.ansiBlue#9fbaeeff
  • terminal.ansiBrightBlack#545760ff
  • terminal.ansiBrightBlue#9fbaeeff
  • terminal.ansiBrightCyan#53c7e8ff
  • terminal.ansiBrightGreen#74c99cff
  • terminal.ansiBrightMagenta#d1abdfff
  • terminal.ansiBrightRed#f99e9fff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e0ad78ff
  • terminal.ansiCyan#53c7e8ff
  • terminal.ansiGreen#00653eff
  • terminal.ansiMagenta#d1abdfff
  • terminal.ansiRed#8c3d42ff
  • terminal.ansiWhite#dcdcdcff
  • terminal.ansiYellow#e0ad78ff
  • terminal.background#181e2aff
  • terminal.border#1e242fff
  • terminal.foreground#dcdcdcff
  • terminal.selectionBackground#5a75a640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1e242fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c496d7ff
  • textLink.foreground#c496d7ff
  • textPreformat.foreground#d1abdfff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1e242fff
  • titleBar.activeForeground#a5a6a8ff
  • titleBar.inactiveBackground#1e242fff
  • titleBar.inactiveForeground#545760ff
  • widget.shadow#0d131fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme