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#212431
  • activityBar.border#212431
  • activityBar.dropBackground#5f7e97
  • activityBar.foreground#f5f5f5
  • activityBarBadge.background#011627
  • activityBarBadge.foreground#ffffff
  • badge.background#011627
  • badge.foreground#ffffff
  • button.background#011627
  • dropdown.background#212431
  • dropdown.border#5f7e97
  • editor.background#152638
  • editor.foreground#e5e5e5
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#212431
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#1d3b53
  • editor.selectionHighlightBackground#5f7e9779
  • editor.wordHighlightBackground#32374d
  • editor.wordHighlightStrongBackground#2e3250
  • editorBracketMatch.background#5f7e974d
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#80a4c2
  • editorError.foreground#ef5350
  • editorGroup.background#32374c
  • editorGroup.border#011627
  • editorGroup.dropBackground#7e57c273
  • editorGroupHeader.noTabsBackground#0b2942
  • editorGroupHeader.tabsBackground#212431
  • editorGroupHeader.tabsBorder#262a39
  • editorGutter.addedBackground#48e16e
  • editorGutter.background#152638
  • editorGutter.deletedBackground#FF5555cc
  • editorGutter.modifiedBackground#8BE9FD
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#5f7e974d
  • editorLineNumber.activeForeground#ffffff
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#ef5350
  • editorMarkerNavigationWarning.background#ffca28
  • editorOverviewRuler.border#152638
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#5e81ce52
  • editorSuggestWidget.background#2c3043
  • editorSuggestWidget.border#2b2f40
  • editorSuggestWidget.foreground#7DA6B7
  • editorSuggestWidget.highlightForeground#fff
  • editorSuggestWidget.selectedBackground#3C4559
  • editorWarning.foreground#b39554
  • editorWhitespace.foreground#1E2F43
  • editorWidget.background#152638
  • editorWidget.border#ab47bc
  • editorWidget.resizeBorder#ab47bc
  • errorForeground#ef5350
  • focusBorder#5f7e97
  • gitDecoration.ignoredResourceForeground#416177
  • input.background#212431
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#ab0300f2
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#00589ef2
  • inputValidation.infoBorder#64b5f6
  • inputValidation.warningBackground#675700f2
  • inputValidation.warningBorder#ffca28
  • list.activeSelectionBackground#152638
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#011627
  • list.focusBackground#011627
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#011627
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#152638
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#975f94
  • menu.selectionForeground#ab47bc
  • menubar.selectionForeground#ab47bc
  • merge.currentHeaderBackground#5f7e97
  • merge.incomingHeaderBackground#7e57c25a
  • notebook.cellBorderColor#192133
  • notebook.cellEditorBackground#192133
  • notificationLink.foreground#ab47bc
  • notifications.background#011627
  • notifications.foreground#ffffffcc
  • panel.background#212431
  • panel.border#252b39
  • panelInput.border#252b39
  • panelTitle.activeBorder#fff
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#5f7e97
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#011627
  • peekViewResult.fileForeground#5f7e97
  • peekViewResult.lineForeground#5f7e97
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#2e3250
  • peekViewResult.selectionForeground#5f7e97
  • peekViewTitle.background#011627
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#5f7e97
  • pickerGroup.border#011627
  • pickerGroup.foreground#f5f5f5
  • progressBar.background#ab47bc
  • quickInput.background#152638
  • quickInput.border#212431
  • quickInput.list.focusBackground#011627
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#ab47bc50
  • scrollbarSlider.background#212431cc
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • settings.headerForeground#afe61d
  • settings.modifiedItemIndicator#5f7e97
  • sideBar.background#212431
  • sideBar.border#152638
  • sideBar.foreground#00bfd3
  • sideBarSectionHeader.background#212431
  • sideBarSectionHeader.foreground#f5f5f5
  • sideBarTitle.foreground#5f7e97
  • statusBar.background#212431
  • statusBar.border#262a39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1f2330
  • statusBar.foreground#676e95
  • statusBar.noFolderBackground#011627
  • statusBar.noFolderBorder#25293a
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#152638
  • tab.activeBorder#152638
  • tab.activeForeground#d2dee7
  • tab.border#272b3b
  • tab.inactiveBackground#212431
  • tab.inactiveForeground#5f7e97
  • tab.unfocusedActiveBorder#262a39
  • tab.unfocusedActiveForeground#5f7e97
  • tab.unfocusedInactiveForeground#5f7e97
  • terminal.ansiBlack#011627
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ef5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#addb67
  • titleBar.activeBackground#212431
  • titleBar.activeForeground#00bfd3
  • titleBar.inactiveBackground#212431

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.function.builtin.shell#ff0000
meta.function.parameter variable, meta.function.parameter punctuation.definition.variable.php#FF8E30italic
punctuation.definition.variable.php#FF8E30
keyword.operator.return-value.php#f5f5f5
mcol_4B0082FF#C77DFFFF
mcol_text_4B0082FF#4B0082FF
mcol_FFA500FF#4C3100FF
mcol_text_FFA500FF#FFA500FF
mcol_800080FF#FF7FFEFF
mcol_text_800080FF#800080FF
mcol_0000FFFF#00004CFF
mcol_text_0000FFFF#0000FFFF
mcol_FF0000FF#4C0000FF
mcol_text_FF0000FF#FF0000FF
mcol_00FF00FF#004C00FF
mcol_text_00FF00FF#00FF00FF
mcol_FF6347FF#B81B00FF
mcol_text_FF6347FF#FF6347FF
mcol_008000FF#7FFF7FFF
mcol_text_008000FF#008000FF
mcol_FFFF00FF#4C4C00FF
mcol_text_FFFF00FF#FFFF00FF
mcol_FFC0CBFF#3F000AFF
mcol_text_FFC0CBFF#FFC0CBFF
mcol_00FFFFFF#004C4CFF
mcol_text_00FFFFFF#00FFFFFF
variable.css, variable.argument.css#edbb57italic
variable.other.less#f5f5f5italic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#f5f5f5
punctuation.definition.variable.less#edbb57
#e5e5e5
comment#b87f62
string#fbce33
constant.numeric#00acf6
constant.language#27c3ca
constant.character, constant.other#41bc8e
variable#f8f8f8
meta.function-call variable.function#27C3CA
keyword#ff8e30
storage#a982ff
storage.type.nullable.php#fff
storage.modifier#FC4349
entity.name.class#afe61d
entity.other.inherited-class#afe61ditalic
entity.name.function#27c3ca
variable.parameter#fd861fitalic
entity.name.tag#00acf6
entity.other.attribute-name#ff8e30
support.function#27c3ca
support.constant#fefbf6
support.type, support.class#eabf4ditalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
sublimelinter.mark.error#D02000
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.warning#DDB700
keyword.operator.nullable-type.php#ffffff
entity.name.type.class.php#AFE61D
string.quoted.docstring.multi.python#b87f62
meta.function-call.generic.python#27c3ca
support.function.builtin.shell#27c3ca
markup.heading.markdown#afe61dbold
markup.bold.markdownbold
punctuation.definition.list.begin.markdown#f0b752
markup.inline.raw.string.markdown#8aa1e1
fenced_code.block.language.markdown#8aa1e1
punctuation.definition.markdown#8aa1e1
markup.underline.link.markdown#F0B752
string.other.link.title.markdown#27c3ca
markup.underline.link.image.markdown#F0B752
string.other.link.description.markdown#27c3ca
markup.quote.markdown#b87f62
markup.italic.markdownitalic
entity.name.type.class.python#AFE61D
entity.name.type.class.ruby#AFE61D
constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby#2abd90
punctuation.definition.variable.ruby#fff
support.function.core.ruby#fff
entity.name.function.ruby, meta.function.method.with-arguments.ruby#27C3CA
source.ini#fec945
punctuation.definition.entity.ini, entity.name.section.group-title.ini, punctuation.separator.key-value.ini#ffffff
entity.name.function.preprocessor.c#ffffff
support.type.property-name.json#ff8e30
keyword.other.type.php, meta.function.parameter.typehinted.php#a982ff
constant.language.directive.module.http, constant.language.module.http.proxy#ff8e30
Hivacruz Theme by Yann Defretin - VS Code Theme