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#111b2bff
  • activityBar.dropBackground#091425ff
  • activityBar.foreground#1ca1efff
  • activityBar.inactiveForeground#484f60ff
  • activityBarBadge.background#1ca1efbf
  • activityBarBadge.foreground#fcffffff
  • badge.background#1ca1efbf
  • badge.foreground#fcffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#091425ff
  • breadcrumb.focusForeground#e9eef8ff
  • breadcrumb.foreground#676e7dff
  • breadcrumbPicker.background#111b2bff
  • button.background#0066afff
  • button.foreground#fcffffff
  • button.hoverBackground#0079c3ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#111b2bff
  • debugToolBar.background#091425ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#111b2bff
  • dropdown.border#111b2bff
  • dropdown.foreground#e9eef8ff
  • editor.background#091425ff
  • editor.findMatchBackground#0b60ae40
  • editor.findMatchHighlightBackground#0b60ae40
  • editor.findRangeHighlightBackground#0b60ae40
  • editor.focusedStackFrameHighlightBackground#0b60ae40
  • editor.foreground#d6dbe6ff
  • editor.hoverHighlightBackground#0b60ae40
  • editor.inactiveSelectionBackground#0b60ae20
  • editor.lineHighlightBackground#111b2bff
  • editor.lineHighlightBorder#111b2bff
  • editor.rangeHighlightBackground#0b60ae40
  • editor.selectionBackground#0b60ae40
  • editor.selectionHighlightBackground#0b60ae20
  • editor.snippetFinalTabstopHighlightBorder#0b60ae40
  • editor.snippetTabstopHighlightBackground#0b60ae40
  • editor.stackFrameHighlightBackground#0b60ae40
  • editor.wordHighlightBackground#0b60ae20
  • editor.wordHighlightStrongBackground#0b60ae20
  • editorActiveLineNumber.foreground#676e7dff
  • editorBracketMatch.background#0b60ae20
  • editorBracketMatch.border#339bffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a6b399ff
  • editorError.foreground#db0826ff
  • editorGroup.border#111b2bff
  • editorGroup.dropBackground#091425ff
  • editorGroupHeader.noTabsBackground#091425ff
  • editorGroupHeader.tabsBackground#111b2bff
  • editorGutter.addedBackground#002b00ff
  • editorGutter.background#091425ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#620000ff
  • editorGutter.modifiedBackground#001a5bff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#111b2bff
  • editorHoverWidget.border#111b2bff
  • editorIndentGuide.activeBackground#232b3cff
  • editorIndentGuide.background#192233ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#676e7dff
  • editorLineNumber.foreground#484f60ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#db0826ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004f09ff
  • editorOverviewRuler.border#111b2bff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#970000ff
  • editorOverviewRuler.errorForeground#db0826bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#004089ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#091425ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#111b2bff
  • editorSuggestWidget.border#111b2bff
  • editorSuggestWidget.foreground#e9eef8ff
  • editorSuggestWidget.highlightForeground#e9eef8ff
  • editorSuggestWidget.selectedBackground#192233ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#111b2bff
  • editorWidget.border#111b2bff
  • errorForeground#db0826ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#0b60aeff
  • foreground#d6dbe6ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#676e7dff
  • gitDecoration.modifiedResourceForeground#959e00ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b262ff
  • input.background#091425ff
  • input.foreground#e9eef8ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#1ca1efff
  • inputValidation.errorBackground#500000ff
  • inputValidation.errorBorder#710000ff
  • inputValidation.infoBackground#091425ff
  • inputValidation.infoBorder#2e3647ff
  • inputValidation.warningBackground#1d0800ff
  • inputValidation.warningBorder#2c2600ff
  • list.activeSelectionBackground#192233ff
  • list.activeSelectionForeground#e9eef8ff
  • list.dropBackground#091425ff
  • list.errorForeground#db0826ff
  • list.focusBackground#192233ff
  • list.highlightForeground#e9eef8ff
  • list.hoverBackground#192233ff
  • list.inactiveFocusBackground#192233ff
  • list.inactiveSelectionBackground#192233ff
  • list.inactiveSelectionForeground#e9eef8ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#111b2bff
  • menu.foreground#afb5c2ff
  • menu.selectionBackground#192233ff
  • menu.selectionForeground#e9eef8ff
  • menu.separatorBackground#2e3647ff
  • menubar.selectionBackground#192233ff
  • menubar.selectionForeground#e9eef8ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#111b2bff
  • notificationLink.foreground#1ca1efff
  • notifications.background#111b2bff
  • notifications.border#111b2bff
  • panel.background#111b2bff
  • panel.border#111b2bff
  • panel.dropBackground#091425ff
  • panelTitle.activeBorder#1ca1efff
  • panelTitle.activeForeground#e9eef8ff
  • panelTitle.inactiveForeground#9ca2b0ff
  • peekView.border#111b2bff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#111b2bff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#091425ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#111b2bff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000119ff
  • scrollbarSlider.activeBackground#484f60bf
  • scrollbarSlider.background#2e3647bf
  • scrollbarSlider.hoverBackground#3a4253bf
  • settings.checkboxBackground#091425ff
  • settings.checkboxBorder#484f60ff
  • settings.checkboxForeground#e9eef8ff
  • settings.dropdownBackground#111b2bff
  • settings.dropdownBorder#111b2bff
  • settings.dropdownForeground#e9eef8ff
  • settings.dropdownListBorder#232b3cff
  • settings.headerForeground#bceeffff
  • settings.modifiedItemIndicator#0b60aeff
  • settings.numberInputBackground#111b2bff
  • settings.numberInputForeground#e9eef8ff
  • settings.textInputBackground#111b2bff
  • settings.textInputForeground#e9eef8ff
  • sideBar.background#111b2bff
  • sideBar.dropBackground#091425ff
  • sideBar.foreground#9ca2b0ff
  • sideBarSectionHeader.background#111b2bff
  • sideBarSectionHeader.foreground#484f60ff
  • sideBarTitle.foreground#484f60ff
  • statusBar.background#192233ff
  • statusBar.debuggingBackground#870000ff
  • statusBar.debuggingForeground#9ca2b0ff
  • statusBar.foreground#9ca2b0ff
  • statusBar.noFolderBackground#3f0061ff
  • statusBar.noFolderForeground#9ca2b0ff
  • tab.activeBackground#111b2bff
  • tab.activeBorder#1ca1efff
  • tab.activeForeground#e9eef8ff
  • tab.activeModifiedBorder#1ca1efbf
  • tab.border#111b2bff
  • tab.inactiveBackground#111b2bff
  • tab.inactiveForeground#9ca2b0ff
  • tab.inactiveModifiedBorder#1ca1efbf
  • tab.unfocusedActiveForeground#e9eef8ff
  • tab.unfocusedActiveModifiedBorder#1ca1ef80
  • tab.unfocusedInactiveForeground#9ca2b0ff
  • tab.unfocusedInactiveModifiedBorder#1ca1ef80
  • terminal.ansiBlack#000119ff
  • terminal.ansiBlue#0073dfff
  • terminal.ansiBrightBlack#5d677cff
  • terminal.ansiBrightBlue#008fffff
  • terminal.ansiBrightCyan#00bcecff
  • terminal.ansiBrightGreen#00d581ff
  • terminal.ansiBrightMagenta#ff6dffff
  • terminal.ansiBrightRed#ff3442ff
  • terminal.ansiBrightWhite#dbe6feff
  • terminal.ansiBrightYellow#f3f600ff
  • terminal.ansiCyan#00acdeff
  • terminal.ansiGreen#00c06fff
  • terminal.ansiMagenta#ff6dffff
  • terminal.ansiRed#db0726ff
  • terminal.ansiWhite#dbe6feff
  • terminal.ansiYellow#e3e600ff
  • terminal.background#091425ff
  • terminal.border#111b2bff
  • terminal.foreground#d6dbe6ff
  • terminal.selectionBackground#0b60ae40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#111b2bff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#1ca1efff
  • textLink.foreground#1ca1efff
  • textPreformat.foreground#ff6dffff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#111b2bff
  • titleBar.activeForeground#9ca2b0ff
  • titleBar.inactiveBackground#111b2bff
  • titleBar.inactiveForeground#484f60ff
  • widget.shadow#00051bff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...