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#DCDCE4
  • activityBar.dropBackground#FFF
  • activityBar.foreground#373F45
  • activityBarBadge.background#4BD064
  • activityBarBadge.foreground#FFF
  • badge.background#4BD064
  • breadcrumb.focusForeground#373F45
  • breadcrumb.foreground#373F45
  • button.background#009FDC
  • button.foreground#FFF
  • button.hoverBackground#4BD064
  • debugExceptionWidget.background#AED4FB
  • debugExceptionWidget.border#261C25
  • debugToolBar.background#DCDCE4
  • dropdown.background#FFF
  • dropdown.border#373F45
  • dropdown.foreground#373F45
  • dropdown.listBackground#FFF
  • editor.background#FFF
  • editor.findMatchBackground#AED4FB
  • editor.foreground#000
  • editor.lineHighlightBackground#EEEEEE
  • editor.selectionBackground#AED4FB
  • editor.wordHighlightBackground#AED4FB
  • editor.wordHighlightStrongBackground#AED4FB
  • editorGroup.emptyBackground#F8F8FA
  • editorGroup.focusedEmptyBorder#F8F8FA
  • editorGroupHeader.tabsBackground#F9F9F9
  • editorHint.border#F9F9F9
  • editorHint.foreground#F9F9F9
  • editorIndentGuide.activeBackground#dbdbdb
  • editorIndentGuide.background#F3F3F3
  • editorLineNumber.activeForeground#009FDC
  • editorLineNumber.foreground#b9b9b9
  • editorMarkerNavigation.background#F9F9F9
  • editorMarkerNavigationError.background#F44C5E
  • editorMarkerNavigationInfo.background#6182b8
  • editorMarkerNavigationWarning.background#F6B555
  • editorPane.background#F8F8FA
  • editorSuggestWidget.foreground#36373B
  • editorSuggestWidget.highlightForeground#36373B
  • editorSuggestWidget.selectedBackground#b9b9b9
  • editorWidget.background#F9F9F9
  • editorWidget.border#dbdbdb
  • extensionButton.prominentBackground#DCDCE4
  • extensionButton.prominentForeground#F6F6F6
  • extensionButton.prominentHoverBackground#000
  • focusBorder#DCDCE4
  • foreground#36373B
  • gitDecoration.conflictingResourceForeground#000
  • gitDecoration.deletedResourceForeground#000
  • gitDecoration.ignoredResourceForeground#000
  • gitDecoration.modifiedResourceForeground#000
  • gitDecoration.untrackedResourceForeground#000
  • input.background#FFF
  • input.border#DCDCE4
  • input.foreground#000
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#3E313C
  • inputValidation.errorBackground#F44C5E
  • inputValidation.errorForeground#FFF
  • inputValidation.infoBackground#6182b8
  • inputValidation.infoForeground#FFF
  • inputValidation.warningBackground#F6B555
  • inputValidation.warningForeground#000
  • list.activeSelectionBackground#009FDC
  • list.activeSelectionForeground#F8F8FA
  • list.focusBackground#DCDCE4
  • list.focusForeground#373F45
  • list.highlightForeground#373F45
  • list.hoverBackground#DCDCE4
  • list.hoverForeground#373F45
  • list.inactiveFocusBackground#DCDCE4
  • list.inactiveSelectionBackground#009FDC
  • list.inactiveSelectionForeground#F8F8FA
  • list.invalidItemForeground#fff
  • menu.background#DCDCE4
  • menu.foreground#373F45
  • menu.separatorBackground#F9FAFA
  • notificationCenter.border#a0a0a0
  • notificationCenterHeader.foreground#FFF
  • notificationLink.foreground#FFF
  • notifications.background#373F45
  • notifications.border#DCDCE4
  • notifications.foreground#FFF
  • notificationToast.border#a0a0a0
  • panel.border#F3F3F3
  • panelTitle.activeForeground#797D84
  • peekViewEditor.matchHighlightBorder#373F45
  • peekViewTitleDescription.foreground#685C66
  • peekViewTitleLabel.foreground#2D3E4C
  • progressBar.background#4BD064
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#DCDCE47e
  • scrollbarSlider.background#DCDCE47e
  • scrollbarSlider.hoverBackground#DCDCE47e
  • settings.dropdownBorder#373F45
  • settings.dropdownForeground#373F45
  • settings.headerForeground#373F45
  • sideBar.background#F8F8FA
  • sideBar.foreground#373F45
  • sideBarSectionHeader.background#DCDCE4
  • sideBarSectionHeader.foreground#373F45
  • sideBarTitle.foreground#373F45
  • statusBar.background#009FDC
  • statusBar.debuggingBackground#4BD064
  • statusBar.foreground#FFF
  • statusBar.noFolderBackground#DCDCE4
  • tab.activeBackground#FFF
  • tab.activeForeground#000
  • tab.border#F3F3F3
  • tab.inactiveBackground#DCDCE4
  • tab.inactiveForeground#686868
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6182b8
  • terminal.ansiBrightBlack#90a4ae
  • terminal.ansiBrightBlue#6182b8
  • terminal.ansiBrightCyan#39adb5
  • terminal.ansiBrightGreen#91b859
  • terminal.ansiBrightMagenta#7c4dff
  • terminal.ansiBrightRed#e53935
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb62c
  • terminal.ansiCyan#39adb5
  • terminal.ansiGreen#91b859
  • terminal.ansiMagenta#7c4dff
  • terminal.ansiRed#e53935
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffb62c
  • terminal.border#F8F8FA
  • terminal.foreground#797D84
  • textPreformat.foreground#261C25
  • titleBar.activeBackground#B5B5C8
  • titleBar.activeForeground#373F45
  • titleBar.border#F8F8FA
  • titleBar.inactiveBackground#DCDCE4
  • titleBar.inactiveForeground#685C66
  • welcomePage.buttonBackground#F3F3F3
  • welcomePage.buttonHoverBackground#ECECEC
  • widget.shadow#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.paragraph.markdown, string.other.link.description.title.markdown#110000
entity.name.section.markdown, punctuation.definition.heading.markdown#034c7c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#00AC8F
markup.quote.markdown#003494italic
markup.bold.markdown, punctuation.definition.bold.markdown#4e76b5bold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EAitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#0460b1italic
punctuation.definition.metadata.markdown#00AC8F
markup.underline.link.image.markdown, markup.underline.link.markdown#924205
comment#6a737ditalic
string#22863a
constant.numeric#174781
constant#174781
language.method#174781
constant.character, constant.other#174781
variable#1976D2
variable.language.this#000000
keyword#A626A4
storage#da5221
storage.type#A626A4
entity.name.class#1976D2
entity.other.inherited-class#b02767
entity.name.function#1976D2
variable.parameter#b1108e
entity.name.tag#0444ac
text.html.basic#1976D2
entity.name.type#0444ac
entity.other.attribute-name#df8618italic
support.function#b3431a
support.constant#174781
support.type, support.class#D32F2F
support.other.variable#224555
invalid#207bb8 italic bold underline
invalid.deprecated#207bb8 bold italic underline
source.json support#6dbdfa
source.json string, source.json punctuation.definition.string#00820f
markup.list#1976D2
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#87429A
markup.quote#87429A
markup.bold#08134Abold
markup.italic, punctuation.definition.italic#174781italic
meta.link#87429A
ians-theme by ianmcateer - VS Code Theme