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#0b182bff
  • activityBar.dropBackground#021125ff
  • activityBar.foreground#d39ceaff
  • activityBar.inactiveForeground#4c5466ff
  • activityBarBadge.background#d39ceabf
  • activityBarBadge.foreground#fdffffff
  • badge.background#d39ceabf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#021125ff
  • breadcrumb.focusForeground#f0f3faff
  • breadcrumb.foreground#707787ff
  • breadcrumbPicker.background#0b182bff
  • button.background#9663adff
  • button.foreground#fdffffff
  • button.hoverBackground#aa76c1ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0b182bff
  • debugToolBar.background#021125ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0b182bff
  • dropdown.border#0b182bff
  • dropdown.foreground#f0f3faff
  • editor.background#021125ff
  • editor.findMatchBackground#5378b440
  • editor.findMatchHighlightBackground#5378b440
  • editor.findRangeHighlightBackground#5378b440
  • editor.focusedStackFrameHighlightBackground#5378b440
  • editor.foreground#e2e5edff
  • editor.hoverHighlightBackground#5378b440
  • editor.inactiveSelectionBackground#5378b420
  • editor.lineHighlightBackground#0b182bff
  • editor.lineHighlightBorder#0b182bff
  • editor.rangeHighlightBackground#5378b440
  • editor.selectionBackground#5378b440
  • editor.selectionHighlightBackground#5378b420
  • editor.snippetFinalTabstopHighlightBorder#5378b440
  • editor.snippetTabstopHighlightBackground#5378b440
  • editor.stackFrameHighlightBackground#5378b440
  • editor.wordHighlightBackground#5378b420
  • editor.wordHighlightStrongBackground#5378b420
  • editorActiveLineNumber.foreground#707787ff
  • editorBracketMatch.background#5378b420
  • editorBracketMatch.border#8fb2f1ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#abb0bcff
  • editorError.foreground#cf6a6eff
  • editorGroup.border#0b182bff
  • editorGroup.dropBackground#021125ff
  • editorGroupHeader.noTabsBackground#021125ff
  • editorGroupHeader.tabsBackground#0b182bff
  • editorGutter.addedBackground#00360eff
  • editorGutter.background#021125ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5c0015ff
  • editorGutter.modifiedBackground#002c5eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0b182bff
  • editorHoverWidget.border#0b182bff
  • editorIndentGuide.activeBackground#202a3eff
  • editorIndentGuide.background#142034ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#707787ff
  • editorLineNumber.foreground#4c5466ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cf6a6eff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006336ff
  • editorOverviewRuler.border#0b182bff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#90323bff
  • editorOverviewRuler.errorForeground#cf6a6ebf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2b568eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#021125ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0b182bff
  • editorSuggestWidget.border#0b182bff
  • editorSuggestWidget.foreground#f0f3faff
  • editorSuggestWidget.highlightForeground#f0f3faff
  • editorSuggestWidget.selectedBackground#142034ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0b182bff
  • editorWidget.border#0b182bff
  • errorForeground#cf6a6eff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5378b4ff
  • foreground#e2e5edff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#707787ff
  • gitDecoration.modifiedResourceForeground#dda365ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#5bc38fff
  • input.background#021125ff
  • input.foreground#f0f3faff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d39ceaff
  • inputValidation.errorBackground#3d0000ff
  • inputValidation.errorBorder#6c0c20ff
  • inputValidation.infoBackground#021125ff
  • inputValidation.infoBorder#2d374aff
  • inputValidation.warningBackground#300100ff
  • inputValidation.warningBorder#552b00ff
  • list.activeSelectionBackground#142034ff
  • list.activeSelectionForeground#f0f3faff
  • list.dropBackground#021125ff
  • list.errorForeground#cf6a6eff
  • list.focusBackground#142034ff
  • list.highlightForeground#f0f3faff
  • list.hoverBackground#142034ff
  • list.inactiveFocusBackground#142034ff
  • list.inactiveSelectionBackground#142034ff
  • list.inactiveSelectionForeground#f0f3faff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0b182bff
  • menu.foreground#bec3ceff
  • menu.selectionBackground#142034ff
  • menu.selectionForeground#f0f3faff
  • menu.separatorBackground#2d374aff
  • menubar.selectionBackground#142034ff
  • menubar.selectionForeground#f0f3faff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0b182bff
  • notificationLink.foreground#d39ceaff
  • notifications.background#0b182bff
  • notifications.border#0b182bff
  • panel.background#0b182bff
  • panel.border#0b182bff
  • panel.dropBackground#021125ff
  • panelTitle.activeBorder#d39ceaff
  • panelTitle.activeForeground#f0f3faff
  • panelTitle.inactiveForeground#abb0bcff
  • peekView.border#0b182bff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0b182bff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#021125ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0b182bff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00011cff
  • scrollbarSlider.activeBackground#4c5466bf
  • scrollbarSlider.background#2d374abf
  • scrollbarSlider.hoverBackground#3c4557bf
  • settings.checkboxBackground#021125ff
  • settings.checkboxBorder#4c5466ff
  • settings.checkboxForeground#f0f3faff
  • settings.dropdownBackground#0b182bff
  • settings.dropdownBorder#0b182bff
  • settings.dropdownForeground#f0f3faff
  • settings.dropdownListBorder#202a3eff
  • settings.headerForeground#d3f5ffff
  • settings.modifiedItemIndicator#5378b4ff
  • settings.numberInputBackground#0b182bff
  • settings.numberInputForeground#f0f3faff
  • settings.textInputBackground#0b182bff
  • settings.textInputForeground#f0f3faff
  • sideBar.background#0b182bff
  • sideBar.dropBackground#021125ff
  • sideBar.foreground#abb0bcff
  • sideBarSectionHeader.background#0b182bff
  • sideBarSectionHeader.foreground#4c5466ff
  • sideBarTitle.foreground#4c5466ff
  • statusBar.background#142034ff
  • statusBar.debuggingBackground#7b4600ff
  • statusBar.debuggingForeground#abb0bcff
  • statusBar.foreground#abb0bcff
  • statusBar.noFolderBackground#541b6fff
  • statusBar.noFolderForeground#abb0bcff
  • tab.activeBackground#0b182bff
  • tab.activeBorder#d39ceaff
  • tab.activeForeground#f0f3faff
  • tab.activeModifiedBorder#d39ceabf
  • tab.border#0b182bff
  • tab.inactiveBackground#0b182bff
  • tab.inactiveForeground#abb0bcff
  • tab.inactiveModifiedBorder#d39ceabf
  • tab.unfocusedActiveForeground#f0f3faff
  • tab.unfocusedActiveModifiedBorder#d39cea80
  • tab.unfocusedInactiveForeground#abb0bcff
  • tab.unfocusedInactiveModifiedBorder#d39cea80
  • terminal.ansiBlack#021125ff
  • terminal.ansiBlue#a2c4ffff
  • terminal.ansiBrightBlack#4c5466ff
  • terminal.ansiBrightBlue#a2c4ffff
  • terminal.ansiBrightCyan#39d4fcff
  • terminal.ansiBrightGreen#6fd7a1ff
  • terminal.ansiBrightMagenta#e0b2f3ff
  • terminal.ansiBrightRed#ffa3a5ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#f1b676ff
  • terminal.ansiCyan#39d4fcff
  • terminal.ansiGreen#006336ff
  • terminal.ansiMagenta#e0b2f3ff
  • terminal.ansiRed#90323bff
  • terminal.ansiWhite#e2e5edff
  • terminal.ansiYellow#f1b676ff
  • terminal.background#021125ff
  • terminal.border#0b182bff
  • terminal.foreground#e2e5edff
  • terminal.selectionBackground#5378b440
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0b182bff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d39ceaff
  • textLink.foreground#d39ceaff
  • textPreformat.foreground#e0b2f3ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0b182bff
  • titleBar.activeForeground#abb0bcff
  • titleBar.inactiveBackground#0b182bff
  • titleBar.inactiveForeground#4c5466ff
  • widget.shadow#00011cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...