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#1b2434ff
  • activityBar.dropBackground#151e2eff
  • activityBar.foreground#c794dbff
  • activityBar.inactiveForeground#515765ff
  • activityBarBadge.background#c794dbbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#c794dbbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#151e2eff
  • breadcrumb.focusForeground#eeeef0ff
  • breadcrumb.foreground#6f7480ff
  • breadcrumbPicker.background#1b2434ff
  • button.background#9262a6ff
  • button.foreground#ffffffff
  • button.hoverBackground#a372b7ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1b2434ff
  • debugToolBar.background#151e2eff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1b2434ff
  • dropdown.border#1b2434ff
  • dropdown.foreground#eeeef0ff
  • editor.background#151e2eff
  • editor.findMatchBackground#5676ac40
  • editor.findMatchHighlightBackground#5676ac40
  • editor.findRangeHighlightBackground#5676ac40
  • editor.focusedStackFrameHighlightBackground#5676ac40
  • editor.foreground#dbdcdfff
  • editor.hoverHighlightBackground#5676ac40
  • editor.inactiveSelectionBackground#5676ac20
  • editor.lineHighlightBackground#1b2434ff
  • editor.lineHighlightBorder#1b2434ff
  • editor.rangeHighlightBackground#5676ac40
  • editor.selectionBackground#5676ac40
  • editor.selectionHighlightBackground#5676ac20
  • editor.snippetFinalTabstopHighlightBorder#5676ac40
  • editor.snippetTabstopHighlightBackground#5676ac40
  • editor.stackFrameHighlightBackground#5676ac40
  • editor.wordHighlightBackground#5676ac20
  • editor.wordHighlightStrongBackground#5676ac20
  • editorActiveLineNumber.foreground#6f7480ff
  • editorBracketMatch.background#5676ac20
  • editorBracketMatch.border#89a8e1ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a3a6aeff
  • editorError.foreground#c4686bff
  • editorGroup.border#1b2434ff
  • editorGroup.dropBackground#151e2eff
  • editorGroupHeader.noTabsBackground#151e2eff
  • editorGroupHeader.tabsBackground#1b2434ff
  • editorGutter.addedBackground#00401aff
  • editorGutter.background#151e2eff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#66101fff
  • editorGutter.modifiedBackground#033665ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1b2434ff
  • editorHoverWidget.border#1b2434ff
  • editorIndentGuide.activeBackground#2d3444ff
  • editorIndentGuide.background#232b3bff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6f7480ff
  • editorLineNumber.foreground#515765ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c4686bff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00663cff
  • editorOverviewRuler.border#1b2434ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#903940ff
  • editorOverviewRuler.errorForeground#c4686bbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#36598cff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#151e2eff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1b2434ff
  • editorSuggestWidget.border#1b2434ff
  • editorSuggestWidget.foreground#eeeef0ff
  • editorSuggestWidget.highlightForeground#eeeef0ff
  • editorSuggestWidget.selectedBackground#232b3bff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1b2434ff
  • editorWidget.border#1b2434ff
  • errorForeground#c4686bff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5676acff
  • foreground#dbdcdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6f7480ff
  • gitDecoration.modifiedResourceForeground#d09b62ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5ab888ff
  • input.background#151e2eff
  • input.foreground#eeeef0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c794dbff
  • inputValidation.errorBackground#490005ff
  • inputValidation.errorBorder#731e29ff
  • inputValidation.infoBackground#151e2eff
  • inputValidation.infoBorder#383f4eff
  • inputValidation.warningBackground#381300ff
  • inputValidation.warningBorder#5c3400ff
  • list.activeSelectionBackground#232b3bff
  • list.activeSelectionForeground#eeeef0ff
  • list.dropBackground#151e2eff
  • list.errorForeground#c4686bff
  • list.focusBackground#232b3bff
  • list.highlightForeground#eeeef0ff
  • list.hoverBackground#232b3bff
  • list.inactiveFocusBackground#232b3bff
  • list.inactiveSelectionBackground#232b3bff
  • list.inactiveSelectionForeground#eeeef0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1b2434ff
  • menu.foreground#b6b8beff
  • menu.selectionBackground#232b3bff
  • menu.selectionForeground#eeeef0ff
  • menu.separatorBackground#383f4eff
  • menubar.selectionBackground#232b3bff
  • menubar.selectionForeground#eeeef0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1b2434ff
  • notificationLink.foreground#c794dbff
  • notifications.background#1b2434ff
  • notifications.border#1b2434ff
  • panel.background#1b2434ff
  • panel.border#1b2434ff
  • panel.dropBackground#151e2eff
  • panelTitle.activeBorder#c794dbff
  • panelTitle.activeForeground#eeeef0ff
  • panelTitle.inactiveForeground#a3a6aeff
  • peekView.border#1b2434ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1b2434ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#151e2eff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1b2434ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00041aff
  • scrollbarSlider.activeBackground#515765bf
  • scrollbarSlider.background#383f4ebf
  • scrollbarSlider.hoverBackground#444a59bf
  • settings.checkboxBackground#151e2eff
  • settings.checkboxBorder#515765ff
  • settings.checkboxForeground#eeeef0ff
  • settings.dropdownBackground#1b2434ff
  • settings.dropdownBorder#1b2434ff
  • settings.dropdownForeground#eeeef0ff
  • settings.dropdownListBorder#2d3444ff
  • settings.headerForeground#d2f0ffff
  • settings.modifiedItemIndicator#5676acff
  • settings.numberInputBackground#1b2434ff
  • settings.numberInputForeground#eeeef0ff
  • settings.textInputBackground#1b2434ff
  • settings.textInputForeground#eeeef0ff
  • sideBar.background#1b2434ff
  • sideBar.dropBackground#151e2eff
  • sideBar.foreground#a3a6aeff
  • sideBarSectionHeader.background#1b2434ff
  • sideBarSectionHeader.foreground#515765ff
  • sideBarTitle.foreground#515765ff
  • statusBar.background#232b3bff
  • statusBar.debuggingBackground#7d4a02ff
  • statusBar.debuggingForeground#a3a6aeff
  • statusBar.foreground#a3a6aeff
  • statusBar.noFolderBackground#5c2774ff
  • statusBar.noFolderForeground#a3a6aeff
  • tab.activeBackground#1b2434ff
  • tab.activeBorder#c794dbff
  • tab.activeForeground#eeeef0ff
  • tab.activeModifiedBorder#c794dbbf
  • tab.border#1b2434ff
  • tab.inactiveBackground#1b2434ff
  • tab.inactiveForeground#a3a6aeff
  • tab.inactiveModifiedBorder#c794dbbf
  • tab.unfocusedActiveForeground#eeeef0ff
  • tab.unfocusedActiveModifiedBorder#c794db80
  • tab.unfocusedInactiveForeground#a3a6aeff
  • tab.unfocusedInactiveModifiedBorder#c794db80
  • terminal.ansiBlack#151e2eff
  • terminal.ansiBlue#9bbaf4ff
  • terminal.ansiBrightBlack#515765ff
  • terminal.ansiBrightBlue#9bbaf4ff
  • terminal.ansiBrightCyan#40c9ecff
  • terminal.ansiBrightGreen#6ccb99ff
  • terminal.ansiBrightMagenta#d3aae3ff
  • terminal.ansiBrightRed#fe9c9dff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e3ac72ff
  • terminal.ansiCyan#40c9ecff
  • terminal.ansiGreen#00663cff
  • terminal.ansiMagenta#d3aae3ff
  • terminal.ansiRed#903940ff
  • terminal.ansiWhite#dbdcdfff
  • terminal.ansiYellow#e3ac72ff
  • terminal.background#151e2eff
  • terminal.border#1b2434ff
  • terminal.foreground#dbdcdfff
  • terminal.selectionBackground#5676ac40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1b2434ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c794dbff
  • textLink.foreground#c794dbff
  • textPreformat.foreground#d3aae3ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1b2434ff
  • titleBar.activeForeground#a3a6aeff
  • titleBar.inactiveBackground#1b2434ff
  • titleBar.inactiveForeground#515765ff
  • widget.shadow#091423ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...