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#182438ff
  • activityBar.dropBackground#111e33ff
  • activityBar.foreground#c992e0ff
  • activityBar.inactiveForeground#4f576aff
  • activityBarBadge.background#c992e0bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#c992e0bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#111e33ff
  • breadcrumb.focusForeground#ebeef6ff
  • breadcrumb.foreground#6d7485ff
  • breadcrumbPicker.background#182438ff
  • button.background#9460aaff
  • button.foreground#fdffffff
  • button.hoverBackground#a570bbff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#182438ff
  • debugToolBar.background#111e33ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#182438ff
  • dropdown.border#182438ff
  • dropdown.foreground#ebeef6ff
  • editor.background#111e33ff
  • editor.findMatchBackground#5176b140
  • editor.findMatchHighlightBackground#5176b140
  • editor.findRangeHighlightBackground#5176b140
  • editor.focusedStackFrameHighlightBackground#5176b140
  • editor.foreground#d9dde6ff
  • editor.hoverHighlightBackground#5176b140
  • editor.inactiveSelectionBackground#5176b120
  • editor.lineHighlightBackground#182438ff
  • editor.lineHighlightBorder#182438ff
  • editor.rangeHighlightBackground#5176b140
  • editor.selectionBackground#5176b140
  • editor.selectionHighlightBackground#5176b120
  • editor.snippetFinalTabstopHighlightBorder#5176b140
  • editor.snippetTabstopHighlightBackground#5176b140
  • editor.stackFrameHighlightBackground#5176b140
  • editor.wordHighlightBackground#5176b120
  • editor.wordHighlightStrongBackground#5176b120
  • editorActiveLineNumber.foreground#6d7485ff
  • editorBracketMatch.background#5176b120
  • editorBracketMatch.border#85a8e7ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a1a6b4ff
  • editorError.foreground#c96569ff
  • editorGroup.border#182438ff
  • editorGroup.dropBackground#111e33ff
  • editorGroupHeader.noTabsBackground#111e33ff
  • editorGroupHeader.tabsBackground#182438ff
  • editorGutter.addedBackground#004118ff
  • editorGutter.background#111e33ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#69081eff
  • editorGutter.modifiedBackground#00366aff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#182438ff
  • editorHoverWidget.border#182438ff
  • editorIndentGuide.activeBackground#2a3449ff
  • editorIndentGuide.background#202b40ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6d7485ff
  • editorLineNumber.foreground#4f576aff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c96569ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006639ff
  • editorOverviewRuler.border#182438ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#94363eff
  • editorOverviewRuler.errorForeground#c96569bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2f5991ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#111e33ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#182438ff
  • editorSuggestWidget.border#182438ff
  • editorSuggestWidget.foreground#ebeef6ff
  • editorSuggestWidget.highlightForeground#ebeef6ff
  • editorSuggestWidget.selectedBackground#202b40ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#182438ff
  • editorWidget.border#182438ff
  • errorForeground#c96569ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5176b1ff
  • foreground#d9dde6ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6d7485ff
  • gitDecoration.modifiedResourceForeground#d39a5cff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#51b985ff
  • input.background#111e33ff
  • input.foreground#ebeef6ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c992e0ff
  • inputValidation.errorBackground#4c0002ff
  • inputValidation.errorBorder#761927ff
  • inputValidation.infoBackground#111e33ff
  • inputValidation.infoBorder#353f53ff
  • inputValidation.warningBackground#3a1100ff
  • inputValidation.warningBorder#5e3300ff
  • list.activeSelectionBackground#202b40ff
  • list.activeSelectionForeground#ebeef6ff
  • list.dropBackground#111e33ff
  • list.errorForeground#c96569ff
  • list.focusBackground#202b40ff
  • list.highlightForeground#ebeef6ff
  • list.hoverBackground#202b40ff
  • list.inactiveFocusBackground#202b40ff
  • list.inactiveSelectionBackground#202b40ff
  • list.inactiveSelectionForeground#ebeef6ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#182438ff
  • menu.foreground#b3b8c4ff
  • menu.selectionBackground#202b40ff
  • menu.selectionForeground#ebeef6ff
  • menu.separatorBackground#353f53ff
  • menubar.selectionBackground#202b40ff
  • menubar.selectionForeground#ebeef6ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#182438ff
  • notificationLink.foreground#c992e0ff
  • notifications.background#182438ff
  • notifications.border#182438ff
  • panel.background#182438ff
  • panel.border#182438ff
  • panel.dropBackground#111e33ff
  • panelTitle.activeBorder#c992e0ff
  • panelTitle.activeForeground#ebeef6ff
  • panelTitle.inactiveForeground#a1a6b4ff
  • peekView.border#182438ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#182438ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#111e33ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#182438ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00041eff
  • scrollbarSlider.activeBackground#4f576abf
  • scrollbarSlider.background#353f53bf
  • scrollbarSlider.hoverBackground#414a5ebf
  • settings.checkboxBackground#111e33ff
  • settings.checkboxBorder#4f576aff
  • settings.checkboxForeground#ebeef6ff
  • settings.dropdownBackground#182438ff
  • settings.dropdownBorder#182438ff
  • settings.dropdownForeground#ebeef6ff
  • settings.dropdownListBorder#2a3449ff
  • settings.headerForeground#cef0ffff
  • settings.modifiedItemIndicator#5176b1ff
  • settings.numberInputBackground#182438ff
  • settings.numberInputForeground#ebeef6ff
  • settings.textInputBackground#182438ff
  • settings.textInputForeground#ebeef6ff
  • sideBar.background#182438ff
  • sideBar.dropBackground#111e33ff
  • sideBar.foreground#a1a6b4ff
  • sideBarSectionHeader.background#182438ff
  • sideBarSectionHeader.foreground#4f576aff
  • sideBarTitle.foreground#4f576aff
  • statusBar.background#202b40ff
  • statusBar.debuggingBackground#7f4900ff
  • statusBar.debuggingForeground#a1a6b4ff
  • statusBar.foreground#a1a6b4ff
  • statusBar.noFolderBackground#5d2478ff
  • statusBar.noFolderForeground#a1a6b4ff
  • tab.activeBackground#182438ff
  • tab.activeBorder#c992e0ff
  • tab.activeForeground#ebeef6ff
  • tab.activeModifiedBorder#c992e0bf
  • tab.border#182438ff
  • tab.inactiveBackground#182438ff
  • tab.inactiveForeground#a1a6b4ff
  • tab.inactiveModifiedBorder#c992e0bf
  • tab.unfocusedActiveForeground#ebeef6ff
  • tab.unfocusedActiveModifiedBorder#c992e080
  • tab.unfocusedInactiveForeground#a1a6b4ff
  • tab.unfocusedInactiveModifiedBorder#c992e080
  • terminal.ansiBlack#111e33ff
  • terminal.ansiBlue#97bafaff
  • terminal.ansiBrightBlack#4f576aff
  • terminal.ansiBrightBlue#97bafaff
  • terminal.ansiBrightCyan#24caf1ff
  • terminal.ansiBrightGreen#64cc97ff
  • terminal.ansiBrightMagenta#d6a8e8ff
  • terminal.ansiBrightRed#ff999bff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#e6ac6dff
  • terminal.ansiCyan#24caf1ff
  • terminal.ansiGreen#006639ff
  • terminal.ansiMagenta#d6a8e8ff
  • terminal.ansiRed#94363eff
  • terminal.ansiWhite#d9dde6ff
  • terminal.ansiYellow#e6ac6dff
  • terminal.background#111e33ff
  • terminal.border#182438ff
  • terminal.foreground#d9dde6ff
  • terminal.selectionBackground#5176b140
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#182438ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c992e0ff
  • textLink.foreground#c992e0ff
  • textPreformat.foreground#d6a8e8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#182438ff
  • titleBar.activeForeground#a1a6b4ff
  • titleBar.inactiveBackground#182438ff
  • titleBar.inactiveForeground#4f576aff
  • widget.shadow#051428ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...