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#101213
  • activityBar.border#2C3035
  • activityBar.foreground#7FD1C4
  • activityBar.inactiveForeground#5B5E62
  • activityBarBadge.background#7FD1C4
  • activityBarBadge.foreground#101213
  • badge.background#7FD1C4
  • badge.foreground#101213
  • breadcrumb.focusForeground#E4E6E7
  • breadcrumb.foreground#8A9199
  • button.background#7FD1C4
  • button.foreground#101213
  • button.hoverBackground#A5DED5
  • diffEditor.insertedTextBackground#A8BEB41A
  • diffEditor.removedTextBackground#D898901A
  • dropdown.background#101213
  • dropdown.border#2C3035
  • dropdown.foreground#E4E6E7
  • editor.background#151719
  • editor.foreground#E4E6E7
  • editor.lineHighlightBackground#1A1C1F99
  • editor.selectionBackground#2C303599
  • editor.selectionHighlightBackground#2C303566
  • editor.wordHighlightBackground#2C303566
  • editorBracketMatch.background#2C3035
  • editorBracketMatch.border#7FD1C4
  • editorCursor.foreground#7FD1C4
  • editorError.foreground#D89890
  • editorGroupHeader.tabsBackground#1A1C1F
  • editorGroupHeader.tabsBorder#2C3035
  • editorHoverWidget.background#1A1C1F
  • editorHoverWidget.border#2C3035
  • editorIndentGuide.activeBackground1#404245
  • editorIndentGuide.background1#1E2124
  • editorInfo.foreground#B4C4D0
  • editorLineNumber.activeForeground#7FD1C4
  • editorLineNumber.foreground#4C4F52
  • editorRuler.foreground#1E2124
  • editorSuggestWidget.background#1A1C1F
  • editorSuggestWidget.selectedBackground#2C3035
  • editorWarning.foreground#C9C2B8
  • editorWhitespace.foreground#25292C
  • editorWidget.background#1A1C1F
  • editorWidget.border#2C3035
  • focusBorder#4C4F52
  • foreground#C6C9CD
  • gitDecoration.addedResourceForeground#A8BEB4
  • gitDecoration.deletedResourceForeground#D89890
  • gitDecoration.ignoredResourceForeground#5B5E62
  • gitDecoration.modifiedResourceForeground#C9C2B8
  • gitDecoration.untrackedResourceForeground#A8BEB4
  • input.background#101213
  • input.border#2C3035
  • input.foreground#E4E6E7
  • inputOption.activeBorder#7FD1C4
  • list.activeSelectionBackground#2C3035
  • list.activeSelectionForeground#E4E6E7
  • list.highlightForeground#7FD1C4
  • list.hoverBackground#1E2124
  • list.inactiveSelectionBackground#1E2124
  • menu.background#1A1C1F
  • menu.foreground#E4E6E7
  • menubar.selectionBackground#2C3035
  • minimap.background#151719
  • notifications.background#1A1C1F
  • notifications.border#2C3035
  • panel.background#1A1C1F
  • panel.border#2C3035
  • panelTitle.activeForeground#E4E6E7
  • panelTitle.inactiveForeground#8A9199
  • peekView.border#7FD1C4
  • peekViewEditor.background#101213
  • peekViewResult.background#1A1C1F
  • scrollbarSlider.activeBackground#4C4F52CC
  • scrollbarSlider.background#2C303599
  • scrollbarSlider.hoverBackground#404245CC
  • selection.background#2C3035
  • sideBar.background#1A1C1F
  • sideBar.border#2C3035
  • sideBar.foreground#C6C9CD
  • sideBarSectionHeader.background#101213
  • sideBarSectionHeader.foreground#C6C9CD
  • sideBarTitle.foreground#8A9199
  • statusBar.background#101213
  • statusBar.border#2C3035
  • statusBar.debuggingBackground#C9C2B8
  • statusBar.debuggingForeground#101213
  • statusBar.foreground#C6C9CD
  • statusBar.noFolderBackground#101213
  • tab.activeBackground#151719
  • tab.activeBorderTop#7FD1C4
  • tab.activeForeground#E4E6E7
  • tab.border#2C3035
  • tab.inactiveBackground#1A1C1F
  • tab.inactiveForeground#8A9199
  • terminal.ansiBlack#1E2124
  • terminal.ansiBlue#B4C4D0
  • terminal.ansiBrightBlack#5B5E62
  • terminal.ansiBrightBlue#D3DDE4
  • terminal.ansiBrightCyan#BDCFCE
  • terminal.ansiBrightGreen#C5D4CD
  • terminal.ansiBrightMagenta#D8D1DA
  • terminal.ansiBrightRed#E5BBB6
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#A5DED5
  • terminal.ansiCyan#9FBAB8
  • terminal.ansiGreen#A8BEB4
  • terminal.ansiMagenta#C0B4C4
  • terminal.ansiRed#D89890
  • terminal.ansiWhite#E4E6E7
  • terminal.ansiYellow#7FD1C4
  • terminal.background#101213
  • terminal.foreground#C6C9CD
  • titleBar.activeBackground#101213
  • titleBar.activeForeground#E4E6E7
  • titleBar.border#2C3035
  • titleBar.inactiveBackground#101213
  • titleBar.inactiveForeground#8A9199
  • widget.shadow#0000004D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#646B73italic
string, string.quoted, punctuation.definition.string#A8BEB4
string.regexp#9FBAB8
constant.numeric, constant.language, keyword.other.unit#C9C2B8
constant.character.escape#C0B4C4
variable, variable.other.readwrite, meta.definition.variable.name#E4E6E7
variable.parameter#C6C9CD
variable.language, variable.other.constant#C0B4C4
keyword, keyword.control, storage, storage.type, storage.modifier#7FD1C4bold
keyword.operator#B3B8BD
entity.name.function, support.function, meta.function-call#B4C4D0
entity.name.class, entity.name.type, support.class, support.type#B8C4C8
entity.name.tag#7FD1C4
entity.other.attribute-name#A8BEB4
support.constant, support.variable#C0B4C4
punctuation, meta.brace#9AA1A7
markup.heading#7FD1C4bold
markup.bold#E4E6E7bold
markup.italic#E4E6E7italic
markup.inline.raw, markup.raw#A8BEB4
markup.underline.link#B4C4D0underline
invalid, invalid.illegal#D89890
meta.diff.header, meta.diff.range#B4C4D0
markup.inserted#A8BEB4
markup.deleted#D89890
support.type.property-name.json, support.type.property-name#7FD1C4