Skip to main content
CodingTheme

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#011627
  • activityBar.border#219fd544
  • activityBar.foreground#ff0078
  • activityBar.inactiveForeground#ff0078
  • activityBarBadge.background#ef5350
  • activityBarBadge.foreground#ffffff
  • badge.background#219fd5
  • badge.foreground#ffffff
  • button.background#03648a
  • button.foreground#ffffff
  • button.hoverBackground#219fd5
  • contrastActiveBorder#122d42
  • contrastBorder#122d42
  • debugExceptionWidget.background#011627
  • debugToolBar.background#022846
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • editor.background#011627
  • editor.findMatchHighlightBackground#103362
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#0c4994
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0c499477
  • editor.rangeHighlightBackground#103362
  • editor.selectionBackground#103362
  • editor.selectionHighlightBackground#103362
  • editor.wordHighlightBackground#103362
  • editor.wordHighlightStrongBackground#103362
  • editorBracketMatch.background#219fd54d
  • editorCursor.foreground#219fd5
  • editorError.foreground#ef5350
  • editorGroup.border#219fd544
  • editorGroupHeader.tabsBackground#011627
  • editorGutter.background#011627
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorLineNumber.foreground#219fd5
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorSuggestWidget.background#2c3043
  • editorSuggestWidget.border#2b2f40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#0b2942
  • editorWidget.border#262a39
  • errorForeground#ef5350
  • foreground#d6deeb
  • gitDecoration.modifiedResourceForeground#219fd5
  • gitDecoration.untrackedResourceForeground#5abeb0
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputValidation.errorBackground#ef5350
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#219fd5
  • inputValidation.infoBorder#219fd5
  • inputValidation.warningBackground#f7ecb5
  • inputValidation.warningBorder#f7ecb5
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#219fd5
  • list.dropBackground#011627
  • list.focusBackground#03648a
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#011627
  • list.hoverForeground#219fd5
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • notificationLink.foreground#80cbc4
  • notifications.background#011627
  • notifications.foreground#ffffffcc
  • notificationToast.border#219fd544
  • panel.background#011627
  • panel.border#219fd5
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#219fd5
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#f7ecb5
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#011627
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2e3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#011627
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#219fd544
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • sideBar.background#011627
  • sideBar.border#219fd544
  • sideBar.foreground#7799bb
  • sideBarSectionHeader.background#011627
  • sideBarSectionHeader.foreground#7799bb
  • sideBarTitle.foreground#7799bb
  • statusBar.background#ff0078
  • statusBar.debuggingBackground#b15a91
  • statusBar.noFolderBackground#ff0078
  • statusBarItem.activeBackground#03648a
  • statusBarItem.hoverBackground#03648a
  • statusBarItem.prominentBackground#03648a
  • statusBarItem.prominentHoverBackground#03648a
  • statusBarItem.remoteBackground#fda7fb
  • statusBarItem.remoteForeground#ff0078
  • tab.activeBackground#0b2942
  • tab.activeBorderTop#219fd5
  • tab.activeForeground#d2dee7
  • tab.inactiveBackground#010e1a
  • tab.inactiveForeground#5f7e97
  • terminal.ansiBlack#011627
  • textLink.activeForeground#98c8ed
  • textLink.foreground#219fd5
  • titleBar.activeBackground#112233
  • titleBar.activeForeground#eeefff
  • titleBar.border#ff0078
  • titleBar.inactiveBackground#000a11
  • walkThrough.embeddedEditorBackground#001111
  • widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF
markup.quote.markdown#82AAFF
markup.bold.markdown, punctuation.definition.bold.markdown#57CDFFbold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EA
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#F7ECB5
punctuation.definition.metadata.markdown#F3B8C2
markup.underline.link.image.markdown, markup.underline.link.markdown#6DBDFA
comment#999999
punctuation.definition.string#6BFF81
string#D3EED6
string.quoted, variable.other.readwrite.js#D3EED6
constant.numeric#8DEC95
constant.language.boolean#8DEC95
constant#A170C6
constant.language, punctuation.definition.constant, variable.other.constant#92B6F4
constant.character, constant.other#82AAFF
variable#A4CEEE
variable.other.object.js#D6DEEB
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#D6DEEB
meta.class entity.name.type.class.tsx#D29FFC
entity.name.type.tsx, entity.name.type.module.tsx#D29FFC
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#A1BDE6
variable.other.object.property#F7ECB5
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7FDBCA
variable.other.readwrite.js, variable.parameter#D7DBE0
string.template meta.template.expression#C63ED3
string.template punctuation.definition.string#FFFFFF
storage#6DBDFA
keyword, storage.type, storage.modifier, variable.language.this#00BFF9
keyword.operator#00BFF9
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#C792EA
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#D3EED6
entity.name.class#F7ECB5
entity.other.inherited-class#4FB4D8
variable.other.readwrites, meta.definition.variable#F7ECB5
support.variable.property#7FDBCA
entity.name.function#87AFF4
variable.parameter#D7DBE0
entity.name.tag#6DBDFA
entity.name.type#D29FFC
entity.other.attribute-name#F7ECB5
punctuation.decorator#F7ECB5
punctuation.definition.block, punctuation.definition.tag#FFFFFF
support.function#F7ECB5
support.constant#EC9CD2
support.type, support.class#7FDBCA
support.other.variable#CBCDD2
invalid#6DBDFA bold underline
invalid.deprecated#6DBDFA bold underline
support.type.property-name.json#91DACD
support.constant.json#ADDB67
meta.structure.dictionary.value.json string.quoted.double#E0AFF5
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#F29FD8
source.json support#6DBDFA
source.json string, source.json punctuation.definition.string#ECE7CD
markup.list#6DBDFA
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78BD65
meta.paragraph.markdown#FFFFFF
markup.quote#78BD65
meta.link#78BD65
source.dockerfile#99D0F7
keyword.operator
meta.function-call.generic.python#BCE7FF
meta.function.python#87AFF4
keyword.control.import.python#00BFF9
variable.parameter.function.python#D7DBE0
storage.type.function.python#D29FFC
string.quoted.double.python#80CBC4
constant.numeric.python#8DEC95
variable.language.special.self.python#A4CEEE
comment.line.number-sign.python#999999italic
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

Carrot Gay Theme by Anthony Kung - VS Code Theme