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#EFF0F1
  • activityBar.border#DCDEE0
  • activityBar.foreground#0A4A9A
  • activityBar.inactiveForeground#A0A3A7
  • activityBarBadge.background#0A4A9A
  • activityBarBadge.foreground#EFF0F1
  • badge.background#0A4A9A
  • badge.foreground#EFF0F1
  • breadcrumb.focusForeground#22262A
  • breadcrumb.foreground#67737E
  • button.background#0A4A9A
  • button.foreground#EFF0F1
  • button.hoverBackground#07336A
  • diffEditor.insertedTextBackground#0A62381A
  • diffEditor.removedTextBackground#A810181A
  • dropdown.background#EFF0F1
  • dropdown.border#DCDEE0
  • dropdown.foreground#22262A
  • editor.background#FFFFFF
  • editor.foreground#22262A
  • editor.lineHighlightBackground#F7F7F899
  • editor.selectionBackground#DCDEE099
  • editor.selectionHighlightBackground#DCDEE066
  • editor.wordHighlightBackground#DCDEE066
  • editorBracketMatch.background#DCDEE0
  • editorBracketMatch.border#0A4A9A
  • editorCursor.foreground#0A4A9A
  • editorError.foreground#A81018
  • editorGroupHeader.tabsBackground#F7F7F8
  • editorGroupHeader.tabsBorder#DCDEE0
  • editorHoverWidget.background#F7F7F8
  • editorHoverWidget.border#DCDEE0
  • editorIndentGuide.activeBackground1#CACCCE
  • editorIndentGuide.background1#F1F2F3
  • editorInfo.foreground#08409A
  • editorLineNumber.activeForeground#0A4A9A
  • editorLineNumber.foreground#B5B8BA
  • editorRuler.foreground#F1F2F3
  • editorSuggestWidget.background#F7F7F8
  • editorSuggestWidget.selectedBackground#DCDEE0
  • editorWarning.foreground#8A3A08
  • editorWhitespace.foreground#E9EBEC
  • editorWidget.background#F7F7F8
  • editorWidget.border#DCDEE0
  • focusBorder#B5B8BA
  • foreground#3E454C
  • gitDecoration.addedResourceForeground#0A6238
  • gitDecoration.deletedResourceForeground#A81018
  • gitDecoration.ignoredResourceForeground#A0A3A7
  • gitDecoration.modifiedResourceForeground#8A3A08
  • gitDecoration.untrackedResourceForeground#0A6238
  • input.background#EFF0F1
  • input.border#DCDEE0
  • input.foreground#22262A
  • inputOption.activeBorder#0A4A9A
  • list.activeSelectionBackground#DCDEE0
  • list.activeSelectionForeground#22262A
  • list.highlightForeground#0A4A9A
  • list.hoverBackground#F1F2F3
  • list.inactiveSelectionBackground#F1F2F3
  • menu.background#F7F7F8
  • menu.foreground#22262A
  • menubar.selectionBackground#DCDEE0
  • minimap.background#FFFFFF
  • notifications.background#F7F7F8
  • notifications.border#DCDEE0
  • panel.background#F7F7F8
  • panel.border#DCDEE0
  • panelTitle.activeForeground#22262A
  • panelTitle.inactiveForeground#67737E
  • peekView.border#0A4A9A
  • peekViewEditor.background#EFF0F1
  • peekViewResult.background#F7F7F8
  • scrollbarSlider.activeBackground#B5B8BACC
  • scrollbarSlider.background#DCDEE099
  • scrollbarSlider.hoverBackground#CACCCECC
  • selection.background#DCDEE0
  • sideBar.background#F7F7F8
  • sideBar.border#DCDEE0
  • sideBar.foreground#3E454C
  • sideBarSectionHeader.background#EFF0F1
  • sideBarSectionHeader.foreground#3E454C
  • sideBarTitle.foreground#67737E
  • statusBar.background#EFF0F1
  • statusBar.border#DCDEE0
  • statusBar.debuggingBackground#8A3A08
  • statusBar.debuggingForeground#EFF0F1
  • statusBar.foreground#3E454C
  • statusBar.noFolderBackground#EFF0F1
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#0A4A9A
  • tab.activeForeground#22262A
  • tab.border#DCDEE0
  • tab.inactiveBackground#F7F7F8
  • tab.inactiveForeground#67737E
  • terminal.ansiBlack#F1F2F3
  • terminal.ansiBlue#08409A
  • terminal.ansiBrightBlack#A0A3A7
  • terminal.ansiBrightBlue#052C6A
  • terminal.ansiBrightCyan#052E30
  • terminal.ansiBrightGreen#05341E
  • terminal.ansiBrightMagenta#44134A
  • terminal.ansiBrightRed#790C11
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#07336A
  • terminal.ansiCyan#0A5A5E
  • terminal.ansiGreen#0A6238
  • terminal.ansiMagenta#6A1E72
  • terminal.ansiRed#A81018
  • terminal.ansiWhite#22262A
  • terminal.ansiYellow#0A4A9A
  • terminal.background#EFF0F1
  • terminal.foreground#3E454C
  • titleBar.activeBackground#EFF0F1
  • titleBar.activeForeground#22262A
  • titleBar.border#DCDEE0
  • titleBar.inactiveBackground#EFF0F1
  • titleBar.inactiveForeground#67737E
  • widget.shadow#FFFFFF4D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#788591italic
string, string.quoted, punctuation.definition.string#0A6238
string.regexp#0A5A5E
constant.numeric, constant.language, keyword.other.unit#8A3A08
constant.character.escape#6A1E72
variable, variable.other.readwrite, meta.definition.variable.name#22262A
variable.parameter#3E454C
variable.language, variable.other.constant#6A1E72
keyword, keyword.control, storage, storage.type, storage.modifier#0A4A9Abold
keyword.operator#4C545D
entity.name.function, support.function, meta.function-call#08409A
entity.name.class, entity.name.type, support.class, support.type#28506E
entity.name.tag#0A4A9A
entity.other.attribute-name#0A6238
support.constant, support.variable#6A1E72
punctuation, meta.brace#5C6670
markup.heading#0A4A9Abold
markup.bold#22262Abold
markup.italic#22262Aitalic
markup.inline.raw, markup.raw#0A6238
markup.underline.link#08409Aunderline
invalid, invalid.illegal#A81018
meta.diff.header, meta.diff.range#08409A
markup.inserted#0A6238
markup.deleted#A81018
support.type.property-name.json, support.type.property-name#0A4A9A