Skip to main content
Coding Theme

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#f735da
  • activityBar.border#57add244
  • activityBar.foreground#2593e7
  • activityBarBadge.background#05abf3
  • activityBarBadge.foreground#f8f6f6
  • badge.background#219fd5
  • badge.foreground#ffffff
  • button.background#03648a
  • button.foreground#ffffff
  • button.hoverBackground#219fd5
  • contrastActiveBorder#c515e8
  • contrastBorder#2081cc
  • debugExceptionWidget.background#011627
  • debugToolBar.background#022846
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • editor.background#fffdff
  • editor.findMatchHighlightBackground#d6e2f2
  • editor.foreground#252829
  • editor.hoverHighlightBackground#0c4994
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#d1d5da77
  • editor.rangeHighlightBackground#cedcef
  • editor.selectionBackground#bacbe0
  • editor.selectionHighlightBackground#eaeff5
  • editor.wordHighlightBackground#f3e5f7
  • editor.wordHighlightStrongBackground#f2c9f8
  • editorBracketMatch.background#219fd54d
  • editorCursor.foreground#219fd5
  • editorError.foreground#ef5350
  • editorGroup.border#219fd544
  • editorGroupHeader.tabsBackground#eebefb
  • editorGutter.background#f4eff5
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#C792EA
  • editorIndentGuide.background#41c2f0
  • editorLineNumber.foreground#e204d4
  • 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#c28736
  • editorWidget.background#0b2942
  • editorWidget.border#262a39
  • errorForeground#EF5350
  • foreground#e104d2
  • 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#178ded
  • notifications.foreground#ffffffcc
  • notificationToast.border#219fd544
  • panel.background#e9eeee
  • panel.border#219fd5
  • panelTitle.activeBorder#0980e1
  • panelTitle.activeForeground#029fcf
  • panelTitle.inactiveForeground#023865
  • peekView.border#f7ecb5
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#0b7dd9
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2e3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#d6e4ef
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#219fd544
  • quickInputList.focusBackground#219fd5
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#99c4e580
  • scrollbarSlider.background#d8e3ec80
  • scrollbarSlider.hoverBackground#44a6f080
  • selection.background#5385d6
  • sideBar.background#9227d9
  • sideBar.border#219fd544
  • sideBar.foreground#e7ecf0
  • sideBarSectionHeader.background#fef9fe
  • sideBarSectionHeader.foreground#067cf2
  • sideBarTitle.foreground#03b7ed
  • statusBar.background#219fd5
  • statusBar.debuggingBackground#b15a91
  • statusBar.noFolderBackground#eb13dc
  • statusBarItem.activeBackground#03648a
  • statusBarItem.hoverBackground#03648a
  • statusBarItem.prominentBackground#03648a
  • statusBarItem.prominentHoverBackground#03648a
  • tab.activeBackground#2fb2f8
  • tab.activeBorderTop#219fd5
  • tab.activeForeground#f1f3f5
  • tab.inactiveBackground#92c5f5
  • tab.inactiveForeground#012645
  • terminal.ansiBlack#011627
  • textLink.activeForeground#eaf2f8
  • textLink.foreground#219fd5
  • titleBar.activeBackground#da8df6
  • titleBar.activeForeground#f60def
  • titleBar.border#ff00f7
  • titleBar.inactiveBackground#f5effa
  • walkThrough.embeddedEditorBackground#9fe3e3
  • welcomePage.buttonBackground#011627
  • welcomePage.buttonHoverBackground#011627
  • widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#22aaf3
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#aac1f1
markup.quote.markdown#a9b7d7
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#09f72d
string#16cd2c
string.quoted, variable.other.readwrite.js#0882ab
constant.numeric#e58612f6
constant.language.boolean#5d2ce4
constant#6309a7
constant.language, punctuation.definition.constant, variable.other.constant#495263
constant.character, constant.other#0a3796
variable#8b04de
variable.other.object.js#08a422bold
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#91b3e7
variable.other.object.property#f381f1bold
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#f53acfbold
variable.other.readwrite.js, variable.parameter#c10ceebold
string.template meta.template.expression#c63ed3
string.template punctuation.definition.string#d4c4c4
storage#6dbdfa
keyword, storage.type, storage.modifier, variable.language.this#03b3ffbold
keyword.operator#06f8c8
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#e714e7
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#0080ffbold
support.variable.property#7fdbca
entity.name.function#994ef5bold
variable.parameter#ee420ebold
entity.name.tag#d710f1bold
entity.name.type#d29ffc
entity.other.attribute-name#0ec00bbold
punctuation.decorator#f7ecb5
punctuation.definition.block, punctuation.definition.tag#206a03
support.function#110e01
support.constant#1eaaebbold
support.type, support.class#87048cbold
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#f2c4c4
markup.quote#78bd65
meta.link#78BD65
source.dockerfile#99d0f7
yoad-extension by codigo-yoad - VS Code Theme