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.activeBackground#4ccec8
  • activityBar.activeBorder#a6fba4
  • activityBar.background#f0eee7
  • activityBar.foreground#111111
  • activityBar.inactiveForeground#2424a1
  • activityBarBadge.background#2f1c9c
  • activityBarBadge.foreground#ceebeb
  • badge.background#445588
  • badge.foreground#ffffff
  • breadcrumb.background#eee6d1
  • breadcrumb.foreground#585a65
  • button.background#2a52ad
  • button.foreground#ffffff
  • button.hoverBackground#1b57e3
  • checkbox.background#3d495f
  • checkbox.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#555555
  • editor.background#fbfbfb
  • editor.findMatchBackground#27a1cd2a
  • editor.findMatchHighlightBackground#f6dbd7d9
  • editor.foldBackground#bfbfc333
  • editor.foreground#444444
  • editor.hoverHighlightBackground#44558822
  • editor.lineHighlightBackground#f6f5f5
  • editor.selectionBackground#e2e8eb
  • editor.wordHighlightBackground#bfbfc333
  • editor.wordHighlightStrongBackground#b0bfc753
  • editorBracketMatch.background#44558844
  • editorBracketMatch.border#008080
  • editorCursor.foreground#444444
  • editorGroup.border#447c6b
  • editorGroup.dropBackground#4ccec82c
  • editorGroupHeader.tabsBackground#191b46
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#f4f3ef
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background1#e8ebf3
  • editorLineNumber.activeForeground#1b57e3
  • editorLineNumber.foreground#b5b2aa
  • editorLink.activeForeground#445588
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#00808055
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#c6c6c6
  • editorSuggestWidget.foreground#555555
  • editorSuggestWidget.highlightForeground#445588
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#fbfbfb
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#445588
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#556aaa
  • focusBorder#445588
  • foreground#555555
  • gitDecoration.addedResourceForeground#6a1faf
  • gitDecoration.conflictingResourceForeground#ba1231
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#183a8a
  • gitDecoration.untrackedResourceForeground#137a8c
  • icon.foreground#aaaaaa
  • input.background#ffffff
  • input.border#999999
  • input.foreground#555555
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#008080
  • list.activeSelectionBackground#ceebeb
  • list.activeSelectionForeground#202e41
  • list.errorForeground#611482
  • list.focusBackground#e4dbc3
  • list.hoverBackground#ffffff
  • list.hoverForeground#111111
  • list.inactiveSelectionBackground#f6dbcd
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#445588
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#445588
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#00808055
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#626262
  • peekViewResult.lineForeground#959595
  • peekViewResult.matchHighlightBackground#00808055
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#626262
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#4d4d4d
  • peekViewTitleLabel.foreground#555555
  • progressBar.background#dd1144
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#445588aa
  • scrollbarSlider.background#55555535
  • scrollbarSlider.hoverBackground#44558855
  • sideBar.background#f4f3ef
  • sideBar.foreground#222222
  • sideBarSectionHeader.background#2424a1
  • sideBarSectionHeader.border#4f8d7b
  • sideBarSectionHeader.foreground#ceebeb
  • statusBar.background#252f44
  • statusBar.foreground#d2cdc1
  • statusBar.noFolderBackground#008080
  • tab.activeBackground#ffffff
  • tab.activeForeground#222222
  • tab.border#abb3c1
  • tab.inactiveBackground#eeebe1
  • tab.inactiveForeground#444444
  • terminal.ansiBlack#27a1cd
  • terminal.ansiBlue#78bad1
  • terminal.ansiBrightBlack#acafb4
  • terminal.ansiBrightBlue#3f8098
  • terminal.ansiBrightCyan#ff00ff
  • terminal.ansiBrightGreen#41e984
  • terminal.ansiBrightMagenta#3f8098
  • terminal.ansiBrightRed#ec7355
  • terminal.ansiBrightWhite#e5adad
  • terminal.ansiBrightYellow#9563e7
  • terminal.ansiCyan#41234b
  • terminal.ansiGreen#41e984
  • terminal.ansiMagenta#3f8098
  • terminal.ansiRed#ec7355
  • terminal.ansiWhite#3f8098
  • terminal.ansiYellow#d6bd56
  • terminal.background#191b46
  • terminal.foreground#d2cdc1
  • titleBar.activeBackground#424e6c
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveForeground#dfdfdf
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#777777
keyword, storage#4B83CD
storage.type, support.type#7A3E9D
constant.language, support.constant, variable.language#AB6526
variable, support.variable#7A3E9D
entity.name.function, support.function#AA3731
entity.name.type, entity.other.inherited-class, support.class#7A3E9D
entity.name.exception#660000
constant.numeric, constant.character, constant#AB6526
string#448C27
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#91B3E0italic
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#AB6526
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
comment#578D72
punctuation.definition.comment#578D72
string#093AA5
meta.embedded.assembly#093AA5
keyword - keyword.operator#7E4282
keyword.control#7E4282
storage#7E4282
storage.type#7E4282
constant.numeric#1B57E3
entity.name.type#073AB1
entity.name.class#073AB1
support.type#073AB1
support.class#073AB1
entity.name.function#0B8891
support.function#0B8891
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
Business Time by Mike Healy - VS Code Theme