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#2f3748ff
  • activityBar.dropBackground#293143ff
  • activityBar.foreground#d09de5ff
  • activityBar.inactiveForeground#616775ff
  • activityBarBadge.background#d09de5bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d09de5bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#293143ff
  • breadcrumb.focusForeground#eff0f1ff
  • breadcrumb.foreground#7d828eff
  • breadcrumbPicker.background#2f3748ff
  • button.background#a070b4ff
  • button.foreground#ffffffff
  • button.hoverBackground#b07ec4ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2f3748ff
  • debugToolBar.background#293143ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2f3748ff
  • dropdown.border#2f3748ff
  • dropdown.foreground#eff0f1ff
  • editor.background#293143ff
  • editor.findMatchBackground#6483ba40
  • editor.findMatchHighlightBackground#6483ba40
  • editor.findRangeHighlightBackground#6483ba40
  • editor.focusedStackFrameHighlightBackground#6483ba40
  • editor.foreground#dfe0e3ff
  • editor.hoverHighlightBackground#6483ba40
  • editor.inactiveSelectionBackground#6483ba20
  • editor.lineHighlightBackground#2f3748ff
  • editor.lineHighlightBorder#2f3748ff
  • editor.rangeHighlightBackground#6483ba40
  • editor.selectionBackground#6483ba40
  • editor.selectionHighlightBackground#6483ba20
  • editor.snippetFinalTabstopHighlightBorder#6483ba40
  • editor.snippetTabstopHighlightBackground#6483ba40
  • editor.stackFrameHighlightBackground#6483ba40
  • editor.wordHighlightBackground#6483ba20
  • editor.wordHighlightStrongBackground#6483ba20
  • editorActiveLineNumber.foreground#7d828eff
  • editorBracketMatch.background#6483ba20
  • editorBracketMatch.border#92b1ebff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#acafb7ff
  • editorError.foreground#d27477ff
  • editorGroup.border#2f3748ff
  • editorGroup.dropBackground#293143ff
  • editorGroupHeader.noTabsBackground#293143ff
  • editorGroupHeader.tabsBackground#2f3748ff
  • editorGutter.addedBackground#00542cff
  • editorGutter.background#293143ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#7c2730ff
  • editorGutter.modifiedBackground#22487aff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2f3748ff
  • editorHoverWidget.border#2f3748ff
  • editorIndentGuide.activeBackground#3f4757ff
  • editorIndentGuide.background#363e4fff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7d828eff
  • editorLineNumber.foreground#616775ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d27477ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#04764bff
  • editorOverviewRuler.border#2f3748ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a34a4fff
  • editorOverviewRuler.errorForeground#d27477bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#48699dff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#293143ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2f3748ff
  • editorSuggestWidget.border#2f3748ff
  • editorSuggestWidget.foreground#eff0f1ff
  • editorSuggestWidget.highlightForeground#eff0f1ff
  • editorSuggestWidget.selectedBackground#363e4fff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2f3748ff
  • editorWidget.border#2f3748ff
  • errorForeground#d27477ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6483baff
  • foreground#dfe0e3ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7d828eff
  • gitDecoration.modifiedResourceForeground#daa46aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#63c191ff
  • input.background#293143ff
  • input.foreground#eff0f1ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d09de5ff
  • inputValidation.errorBackground#620c1dff
  • inputValidation.errorBorder#88323aff
  • inputValidation.infoBackground#293143ff
  • inputValidation.infoBorder#495160ff
  • inputValidation.warningBackground#4d2700ff
  • inputValidation.warningBorder#71460fff
  • list.activeSelectionBackground#363e4fff
  • list.activeSelectionForeground#eff0f1ff
  • list.dropBackground#293143ff
  • list.errorForeground#d27477ff
  • list.focusBackground#363e4fff
  • list.highlightForeground#eff0f1ff
  • list.hoverBackground#363e4fff
  • list.inactiveFocusBackground#363e4fff
  • list.inactiveSelectionBackground#363e4fff
  • list.inactiveSelectionForeground#eff0f1ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2f3748ff
  • menu.foreground#bdbfc6ff
  • menu.selectionBackground#363e4fff
  • menu.selectionForeground#eff0f1ff
  • menu.separatorBackground#495160ff
  • menubar.selectionBackground#363e4fff
  • menubar.selectionForeground#eff0f1ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2f3748ff
  • notificationLink.foreground#d09de5ff
  • notifications.background#2f3748ff
  • notifications.border#2f3748ff
  • panel.background#2f3748ff
  • panel.border#2f3748ff
  • panel.dropBackground#293143ff
  • panelTitle.activeBorder#d09de5ff
  • panelTitle.activeForeground#eff0f1ff
  • panelTitle.inactiveForeground#acafb7ff
  • peekView.border#2f3748ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2f3748ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#293143ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2f3748ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#131d2dff
  • scrollbarSlider.activeBackground#616775bf
  • scrollbarSlider.background#495160bf
  • scrollbarSlider.hoverBackground#555b6abf
  • settings.checkboxBackground#293143ff
  • settings.checkboxBorder#616775ff
  • settings.checkboxForeground#eff0f1ff
  • settings.dropdownBackground#2f3748ff
  • settings.dropdownBorder#2f3748ff
  • settings.dropdownForeground#eff0f1ff
  • settings.dropdownListBorder#3f4757ff
  • settings.headerForeground#d4f2ffff
  • settings.modifiedItemIndicator#6483baff
  • settings.numberInputBackground#2f3748ff
  • settings.numberInputForeground#eff0f1ff
  • settings.textInputBackground#2f3748ff
  • settings.textInputForeground#eff0f1ff
  • sideBar.background#2f3748ff
  • sideBar.dropBackground#293143ff
  • sideBar.foreground#acafb7ff
  • sideBarSectionHeader.background#2f3748ff
  • sideBarSectionHeader.foreground#616775ff
  • sideBarTitle.foreground#616775ff
  • statusBar.background#363e4fff
  • statusBar.debuggingBackground#905a16ff
  • statusBar.debuggingForeground#acafb7ff
  • statusBar.foreground#acafb7ff
  • statusBar.noFolderBackground#703988ff
  • statusBar.noFolderForeground#acafb7ff
  • tab.activeBackground#2f3748ff
  • tab.activeBorder#d09de5ff
  • tab.activeForeground#eff0f1ff
  • tab.activeModifiedBorder#d09de5bf
  • tab.border#2f3748ff
  • tab.inactiveBackground#2f3748ff
  • tab.inactiveForeground#acafb7ff
  • tab.inactiveModifiedBorder#d09de5bf
  • tab.unfocusedActiveForeground#eff0f1ff
  • tab.unfocusedActiveModifiedBorder#d09de580
  • tab.unfocusedInactiveForeground#acafb7ff
  • tab.unfocusedInactiveModifiedBorder#d09de580
  • terminal.ansiBlack#293143ff
  • terminal.ansiBlue#a3c1fcff
  • terminal.ansiBrightBlack#616775ff
  • terminal.ansiBrightBlue#a3c1fcff
  • terminal.ansiBrightCyan#4bd0f4ff
  • terminal.ansiBrightGreen#74d2a0ff
  • terminal.ansiBrightMagenta#dbb1ebff
  • terminal.ansiBrightRed#ffa3a4ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ebb479ff
  • terminal.ansiCyan#4bd0f4ff
  • terminal.ansiGreen#04764bff
  • terminal.ansiMagenta#dbb1ebff
  • terminal.ansiRed#a34a4fff
  • terminal.ansiWhite#dfe0e3ff
  • terminal.ansiYellow#ebb479ff
  • terminal.background#293143ff
  • terminal.border#2f3748ff
  • terminal.foreground#dfe0e3ff
  • terminal.selectionBackground#6483ba40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2f3748ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d09de5ff
  • textLink.foreground#d09de5ff
  • textPreformat.foreground#dbb1ebff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2f3748ff
  • titleBar.activeForeground#acafb7ff
  • titleBar.inactiveBackground#2f3748ff
  • titleBar.inactiveForeground#616775ff
  • widget.shadow#1e2738ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty – Ardent by Alexander Teinum - VS Code Theme