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#080b10
  • activityBar.foreground#4ade80
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#4ade80
  • activityBarBadge.foreground#0d1117
  • badge.background#4ade80
  • badge.foreground#0d1117
  • button.background#4ade80
  • button.foreground#0d1117
  • button.hoverBackground#6ee7a0
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#e6edf3
  • editor.background#0d1117
  • editor.findMatchBackground#4ade8044
  • editor.findMatchHighlightBackground#4ade8022
  • editor.foreground#e6edf3
  • editor.inactiveSelectionBackground#1a3d5c44
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#1a3d5c88
  • editor.wordHighlightBackground#1a3d5c55
  • editor.wordHighlightStrongBackground#1a3d5c88
  • editorBracketMatch.background#4ade8022
  • editorBracketMatch.border#4ade8088
  • editorCursor.foreground#4ade80
  • editorGroupHeader.tabsBackground#080b10
  • editorGutter.addedBackground#4ade80
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#58a6ff
  • editorIndentGuide.activeBackground#4ade8066
  • editorIndentGuide.background#30363d
  • editorLineNumber.activeForeground#4ade80
  • editorLineNumber.foreground#6e7681
  • editorWhitespace.foreground#30363d
  • focusBorder#4ade8088
  • gitDecoration.addedResourceForeground#4ade80
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#58a6ff
  • gitDecoration.untrackedResourceForeground#56d4dd
  • input.background#161b22
  • input.border#30363d
  • input.foreground#e6edf3
  • input.placeholderForeground#6e7681
  • inputOption.activeBorder#4ade80
  • list.activeSelectionBackground#1a3d5c
  • list.activeSelectionForeground#4ade80
  • list.focusBackground#1a3d5c
  • list.highlightForeground#4ade80
  • list.hoverBackground#161b22
  • minimap.findMatchHighlight#4ade8088
  • minimap.selectionHighlight#1a3d5c88
  • notification.background#161b22
  • notification.foreground#e6edf3
  • panel.background#0a0e14
  • panel.border#30363d
  • panelTitle.activeBorder#4ade80
  • panelTitle.activeForeground#e6edf3
  • panelTitle.inactiveForeground#8b949e
  • peekView.border#4ade80
  • peekViewEditor.background#161b22
  • peekViewResult.background#0a0e14
  • peekViewTitle.background#0d1117
  • progressBar.background#4ade80
  • scrollbarSlider.activeBackground#30363dcc
  • scrollbarSlider.background#30363d44
  • scrollbarSlider.hoverBackground#30363d88
  • sideBar.background#0a0e14
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#0d1117
  • sideBarSectionHeader.foreground#e6edf3
  • sideBarTitle.foreground#4ade80
  • statusBar.background#080b10
  • statusBar.debuggingBackground#4ade80
  • statusBar.debuggingForeground#0d1117
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#0d1117
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#4ade80
  • tab.activeForeground#4ade80
  • tab.border#06090e
  • tab.inactiveBackground#080b10
  • tab.inactiveForeground#8b949e
  • terminal.ansiBlack#0d1117
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#a5f3fc
  • terminal.ansiBrightGreen#86efac
  • terminal.ansiBrightMagenta#e2cbff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#fde68a
  • terminal.ansiCyan#56d4dd
  • terminal.ansiGreen#4ade80
  • terminal.ansiMagenta#d2a8ff
  • terminal.ansiRed#f85149
  • terminal.ansiWhite#e6edf3
  • terminal.ansiYellow#fbbf24
  • terminal.background#0a0e14
  • terminal.foreground#e6edf3
  • titleBar.activeBackground#080b10
  • titleBar.activeForeground#e6edf3
  • titleBar.inactiveBackground#080b10
  • titleBar.inactiveForeground#8b949e
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b949eitalic
string, string.quoted#a5d6ff
constant.numeric#fbbf24
constant.language#f85149
constant.character, constant.other#fbbf24
keyword, storage.type, storage.modifier#f85149
keyword.operator#4ade80
entity.name.function, meta.function-call, support.function#d2a8ff
entity.name.type, entity.name.class, support.class#fbbf24
variable, variable.other#e6edf3
variable.parameter#fde68aitalic
variable.other.property, support.type.property-name#79c0ff
entity.name.tag#4ade80
entity.other.attribute-name#fbbf24italic
punctuation.definition.tag#8b949e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4ade80
support.type.property-name.css#79c0ff
support.constant.property-value.css#a5d6ff
string.regexp#56d4dd
constant.character.escape#fbbf24
meta.embedded#e6edf3
markup.heading, entity.name.section#4ade80bold
markup.bold#fbbf24bold
markup.italic#d2a8ffitalic
markup.underline.link#58a6ff
markup.inline.raw, markup.fenced_code.block#a5d6ff
support.type.property-name.json#79c0ff
meta.decorator#d2a8ff
meta.type.annotation, support.type#56d4dd
invalid#f85149underline
FacilGuide Accessible by PackDataAnalyst - VS Code Theme