Skip to main content
Coding Theme

Color themes

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.activeBorder#81C784
  • activityBar.background#1E2025
  • activityBar.foreground#4CAF50
  • activityBarBadge.background#81C784
  • activityBarBadge.foreground#0D1117
  • badge.background#81C784
  • badge.foreground#0D1117
  • button.background#4CAF50
  • button.foreground#FFFFFF
  • button.hoverBackground#81C784
  • dropdown.background#1E2228
  • dropdown.border#3B4048
  • dropdown.foreground#D1D5DA
  • editor.background#0D1117
  • editor.findMatchBackground#FFB74D
  • editor.findMatchHighlightBackground#FFD180
  • editor.foreground#D1D5DA
  • editor.lineHighlightBackground#2C313A
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#3E4C5A
  • editor.selectionHighlightBackground#3A506B
  • editorBracketMatch.background#3E4C5A
  • editorBracketMatch.border#81C784
  • editorCursor.foreground#81C784
  • editorGroupHeader.tabsBackground#21252B
  • editorIndentGuide.activeBackground#81C784
  • editorIndentGuide.background#3B4048
  • editorLineNumber.activeForeground#D1D5DA
  • editorLineNumber.foreground#5C6370
  • editorWhitespace.foreground#5C6370
  • focusBorder#81C784
  • gitDecoration.conflictingResourceForeground#C678DD
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#E5C07B
  • gitDecoration.untrackedResourceForeground#98C379
  • input.background#1E2228
  • input.border#3B4048
  • input.foreground#D1D5DA
  • input.placeholderForeground#5C6370
  • inputOption.activeBorder#81C784
  • list.activeSelectionBackground#3E5871
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2C3E50
  • list.highlightForeground#81C784
  • list.hoverBackground#2C3E50
  • minimap.background#0D1117
  • minimapSlider.activeBackground#5C6370
  • minimapSlider.background#3B4048
  • minimapSlider.hoverBackground#4F5666
  • panel.background#21252B
  • panel.border#282C34
  • panelTitle.activeBorder#81C784
  • panelTitle.activeForeground#D1D5DA
  • panelTitle.inactiveForeground#8A9199
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5C6370
  • scrollbarSlider.background#3B4048
  • scrollbarSlider.hoverBackground#4F5666
  • sideBar.background#1A1D23
  • sideBar.foreground#C0C5CE
  • sideBarSectionHeader.background#1E2228
  • sideBarSectionHeader.foreground#D1D5DA
  • sideBarTitle.foreground#D1D5DA
  • statusBar.background#2C3E50
  • statusBar.debuggingBackground#C0392B
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#34495E
  • statusBarItem.hoverBackground#3E5871
  • tab.activeBackground#21252B
  • tab.activeBorder#81C784
  • tab.activeForeground#D1D5DA
  • tab.border#282C34
  • tab.inactiveBackground#1E2228
  • tab.inactiveForeground#8A9199
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlue#79C0FF
  • terminal.ansiBrightCyan#8BE9FD
  • terminal.ansiBrightGreen#B4F9C8
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#E5C07B
  • terminal.background#0D1117
  • terminal.foreground#D1D5DA
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#D1D5DA
  • titleBar.inactiveBackground#1E2228
  • titleBar.inactiveForeground#8A9199

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
string, string.quoted, string.template#98C379
keyword, storage.type, storage.modifier#61AFEFbold
keyword.operator, punctuation.accessor#E5C07B
variable, variable.other#D1D5DA
variable.parameter#56B6C2italic
entity.name.function, support.function#56B6C2
meta.function-call#8BE9FD
entity.name.class, entity.name.type.class, support.class#E5C07Bbold
entity.name.type, support.type#56B6C2
entity.name.type.interface#C678DDitalic
constant.numeric#E5C07B
constant, constant.language, constant.character#C678DD
constant.language.boolean#E06C75bold
variable.other.property, support.variable.property#81C784
meta.object-literal.key#56B6C2
entity.name.tag, punctuation.definition.tag#E06C75
entity.other.attribute-name#56B6C2italic
punctuation, meta.brace#5C6370
string.regexp#98C379
constant.character.escape#C678DD
meta.decorator, punctuation.decorator#FF79C6
invalid, invalid.illegal#FF6E6Estrikethrough
markup.heading, entity.name.section#61AFEFbold
markup.bold#FFFFFFbold
markup.italic#D1D5DAitalic
markup.underline.link#8BE9FD
markup.inline.raw, markup.fenced_code#98C379
support.type.property-name.json#E5C07B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF79C6
support.type.property-name.css#56B6C2
support.constant.property-value.css#E5C07B