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#0f0f0fff
  • activityBar.dropBackground#050505ff
  • activityBar.foreground#6398c8ff
  • activityBar.inactiveForeground#474747ff
  • activityBarBadge.background#6398c8bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#6398c8bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#050505ff
  • breadcrumb.focusForeground#ecececff
  • breadcrumb.foreground#666666ff
  • breadcrumbPicker.background#0f0f0fff
  • button.background#1d5c88ff
  • button.foreground#ffffffff
  • button.hoverBackground#366f9cff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0f0f0fff
  • debugToolBar.background#050505ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0f0f0fff
  • dropdown.border#0f0f0fff
  • dropdown.foreground#ecececff
  • editor.background#050505ff
  • editor.findMatchBackground#3c588640
  • editor.findMatchHighlightBackground#3c588640
  • editor.findRangeHighlightBackground#3c588640
  • editor.focusedStackFrameHighlightBackground#3c588640
  • editor.foreground#d9d9d9ff
  • editor.hoverHighlightBackground#3c588640
  • editor.inactiveSelectionBackground#3c588620
  • editor.lineHighlightBackground#0f0f0fff
  • editor.lineHighlightBorder#0f0f0fff
  • editor.rangeHighlightBackground#3c588640
  • editor.selectionBackground#3c588640
  • editor.selectionHighlightBackground#3c588620
  • editor.snippetFinalTabstopHighlightBorder#3c588640
  • editor.snippetTabstopHighlightBackground#3c588640
  • editor.stackFrameHighlightBackground#3c588640
  • editor.wordHighlightBackground#3c588620
  • editor.wordHighlightStrongBackground#3c588620
  • editorActiveLineNumber.foreground#666666ff
  • editorBracketMatch.background#3c588620
  • editorBracketMatch.border#6395e3ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#afafafff
  • editorError.foreground#bf3431ff
  • editorGroup.border#0f0f0fff
  • editorGroup.dropBackground#050505ff
  • editorGroupHeader.noTabsBackground#050505ff
  • editorGroupHeader.tabsBackground#0f0f0fff
  • editorGutter.addedBackground#002000ff
  • editorGutter.background#050505ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#490000ff
  • editorGutter.modifiedBackground#000d34ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0f0f0fff
  • editorHoverWidget.border#0f0f0fff
  • editorIndentGuide.activeBackground#222222ff
  • editorIndentGuide.background#181818ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#666666ff
  • editorLineNumber.foreground#474747ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#bf3431ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004314ff
  • editorOverviewRuler.border#0f0f0fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#7b0000ff
  • editorOverviewRuler.errorForeground#bf3431bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#143661ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#050505ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0f0f0fff
  • editorSuggestWidget.border#0f0f0fff
  • editorSuggestWidget.foreground#ecececff
  • editorSuggestWidget.highlightForeground#ecececff
  • editorSuggestWidget.selectedBackground#181818ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0f0f0fff
  • editorWidget.border#0f0f0fff
  • errorForeground#bf3431ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#3c5886ff
  • foreground#d9d9d9ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#666666ff
  • gitDecoration.modifiedResourceForeground#949800ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#1ca76dff
  • input.background#050505ff
  • input.foreground#ecececff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#6398c8ff
  • inputValidation.errorBackground#430000ff
  • inputValidation.errorBorder#560000ff
  • inputValidation.infoBackground#050505ff
  • inputValidation.infoBorder#2d2d2dff
  • inputValidation.warningBackground#1a0600ff
  • inputValidation.warningBorder#271c00ff
  • list.activeSelectionBackground#181818ff
  • list.activeSelectionForeground#ecececff
  • list.dropBackground#050505ff
  • list.errorForeground#bf3431ff
  • list.focusBackground#181818ff
  • list.highlightForeground#ecececff
  • list.hoverBackground#181818ff
  • list.inactiveFocusBackground#181818ff
  • list.inactiveSelectionBackground#181818ff
  • list.inactiveSelectionForeground#ecececff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0f0f0fff
  • menu.foreground#b1b1b1ff
  • menu.selectionBackground#181818ff
  • menu.selectionForeground#ecececff
  • menu.separatorBackground#2d2d2dff
  • menubar.selectionBackground#181818ff
  • menubar.selectionForeground#ecececff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0f0f0fff
  • notificationLink.foreground#6398c8ff
  • notifications.background#0f0f0fff
  • notifications.border#0f0f0fff
  • panel.background#0f0f0fff
  • panel.border#0f0f0fff
  • panel.dropBackground#050505ff
  • panelTitle.activeBorder#6398c8ff
  • panelTitle.activeForeground#ecececff
  • panelTitle.inactiveForeground#9d9d9dff
  • peekView.border#0f0f0fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0f0f0fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#050505ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0f0f0fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000ff
  • scrollbarSlider.activeBackground#474747bf
  • scrollbarSlider.background#2d2d2dbf
  • scrollbarSlider.hoverBackground#393939bf
  • settings.checkboxBackground#050505ff
  • settings.checkboxBorder#474747ff
  • settings.checkboxForeground#ecececff
  • settings.dropdownBackground#0f0f0fff
  • settings.dropdownBorder#0f0f0fff
  • settings.dropdownForeground#ecececff
  • settings.dropdownListBorder#222222ff
  • settings.headerForeground#d2ecffff
  • settings.modifiedItemIndicator#3c5886ff
  • settings.numberInputBackground#0f0f0fff
  • settings.numberInputForeground#ecececff
  • settings.textInputBackground#0f0f0fff
  • settings.textInputForeground#ecececff
  • sideBar.background#0f0f0fff
  • sideBar.dropBackground#050505ff
  • sideBar.foreground#9d9d9dff
  • sideBarSectionHeader.background#0f0f0fff
  • sideBarSectionHeader.foreground#474747ff
  • sideBarTitle.foreground#474747ff
  • statusBar.background#181818ff
  • statusBar.debuggingBackground#6e0600ff
  • statusBar.debuggingForeground#9d9d9dff
  • statusBar.foreground#9d9d9dff
  • statusBar.noFolderBackground#2e0243ff
  • statusBar.noFolderForeground#9d9d9dff
  • tab.activeBackground#0f0f0fff
  • tab.activeBorder#6398c8ff
  • tab.activeForeground#ecececff
  • tab.activeModifiedBorder#6398c8bf
  • tab.border#0f0f0fff
  • tab.inactiveBackground#0f0f0fff
  • tab.inactiveForeground#9d9d9dff
  • tab.inactiveModifiedBorder#6398c8bf
  • tab.unfocusedActiveForeground#ecececff
  • tab.unfocusedActiveModifiedBorder#6398c880
  • tab.unfocusedInactiveForeground#9d9d9dff
  • tab.unfocusedInactiveModifiedBorder#6398c880
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#3a72bdff
  • terminal.ansiBrightBlack#666666ff
  • terminal.ansiBrightBlue#4e8ddeff
  • terminal.ansiBrightCyan#51b6d3ff
  • terminal.ansiBrightGreen#45cf90ff
  • terminal.ansiBrightMagenta#f07dedff
  • terminal.ansiBrightRed#e95551ff
  • terminal.ansiBrightWhite#e5e5e5ff
  • terminal.ansiBrightYellow#f6f456ff
  • terminal.ansiCyan#44a6c4ff
  • terminal.ansiGreen#39ba7eff
  • terminal.ansiMagenta#f07dedff
  • terminal.ansiRed#c63b36ff
  • terminal.ansiWhite#e5e5e5ff
  • terminal.ansiYellow#e6e433ff
  • terminal.background#050505ff
  • terminal.border#0f0f0fff
  • terminal.foreground#d9d9d9ff
  • terminal.selectionBackground#3c588640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0f0f0fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#6398c8ff
  • textLink.foreground#6398c8ff
  • textPreformat.foreground#f07dedff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0f0f0fff
  • titleBar.activeForeground#9d9d9dff
  • titleBar.inactiveBackground#0f0f0fff
  • titleBar.inactiveForeground#474747ff
  • widget.shadow#000000ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...