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#A3C846
  • activityBar.background#0A0C15
  • activityBar.foreground#A3C846
  • activityBarBadge.background#A3C846
  • activityBarBadge.foreground#0B0E21
  • badge.background#A3C846
  • badge.foreground#0B0E21
  • button.background#0E1120
  • button.foreground#FFFFFF
  • button.hoverBackground#151A33
  • dropdown.background#0F111A
  • dropdown.border#0E1120
  • dropdown.foreground#E1E4F0
  • editor.background#0B0E21
  • editor.findMatchBackground#A3C84677
  • editor.findMatchHighlightBackground#A3C84633
  • editor.foreground#E1E4F0
  • editor.lineHighlightBackground#1A1E35AA
  • editor.lineHighlightBorder#1A1E35CC
  • editor.selectionBackground#A3C84655
  • editor.selectionHighlightBackground#A3C84633
  • editorBracketMatch.background#A3C84633
  • editorBracketMatch.border#A3C846
  • editorCursor.foreground#A3C846
  • editorGroupHeader.tabsBackground#0B0E21
  • editorIndentGuide.activeBackground#262C3E88
  • editorIndentGuide.background#262C3E44
  • editorLineNumber.activeForeground#A3C846
  • editorLineNumber.foreground#4A5060
  • editorWhitespace.foreground#262C3E
  • focusBorder#A3C846
  • gitDecoration.conflictingResourceForeground#E5C07B
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#A3C846
  • gitDecoration.untrackedResourceForeground#B8E186
  • input.background#0F111A
  • input.border#0E1120
  • input.foreground#E1E4F0
  • input.placeholderForeground#5A6375
  • inputOption.activeBorder#A3C846
  • list.activeSelectionBackground#0E1120
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0E1120
  • list.highlightForeground#A3C846
  • list.hoverBackground#1A1E35AA
  • minimap.background#0B0E21
  • minimapSlider.activeBackground#A3C84666
  • minimapSlider.background#A3C84622
  • minimapSlider.hoverBackground#A3C84644
  • panel.background#0B0E21
  • panel.border#0E1120
  • panelTitle.activeBorder#A3C846
  • panelTitle.activeForeground#A3C846
  • panelTitle.inactiveForeground#C0C5D0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A3C84688
  • scrollbarSlider.background#4A506044
  • scrollbarSlider.hoverBackground#4A506088
  • sideBar.background#0F111A
  • sideBar.foreground#C0C5D0
  • sideBarSectionHeader.background#0A0C15
  • sideBarSectionHeader.foreground#A3C846
  • sideBarTitle.foreground#A3C846
  • statusBar.background#0E1120
  • statusBar.debuggingBackground#A3C846
  • statusBar.foreground#E1E4F0
  • statusBar.noFolderBackground#0A0C15
  • statusBarItem.hoverBackground#151A33
  • tab.activeBackground#0E1120
  • tab.activeBorder#A3C846
  • tab.activeForeground#FFFFFF
  • tab.border#0B0E21
  • tab.inactiveBackground#0F111A
  • tab.inactiveForeground#C0C5D0
  • terminal.ansiBlue#4AA9D8
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#D19A66
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#5CCED8
  • terminal.ansiGreen#B8E186
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#E5C07B
  • terminal.background#0B0E21
  • terminal.foreground#E1E4F0
  • titleBar.activeBackground#0A0C15
  • titleBar.activeForeground#E1E4F0
  • titleBar.inactiveBackground#0B0E21
  • titleBar.inactiveForeground#C0C5D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6375italic
string, string.quoted, string.template#B8E186
keyword, storage.type, storage.modifier#A3C846bold
keyword.operator, punctuation.accessor#4AA9D8
variable, variable.other#E1E4F0
variable.parameter#FFB74Ditalic
entity.name.function, support.function#61AFEF
meta.function-call#C0C5D0
entity.name.class, entity.name.type.class, support.class#C678DDbold
entity.name.type, support.type#C678DD
entity.name.type.interface#4AA9D8italic
constant.numeric#FFB74D
constant, constant.language, constant.character#FFB74D
constant.language.boolean#FFB74Dbold
variable.other.property, support.variable.property#C0C5D0
meta.object-literal.key#61AFEF
entity.name.tag, punctuation.definition.tag#A3C846
entity.other.attribute-name#D19A66italic
punctuation, meta.brace#4AA9D8
string.regexp#FFB74D
constant.character.escape#D19A66
meta.decorator, punctuation.decorator#E5C07B
invalid, invalid.illegal#E06C75strikethrough
markup.heading, entity.name.section#A3C846bold
markup.bold#FFB74Dbold
markup.italic#D19A66italic
markup.underline.link#4AA9D8
markup.inline.raw, markup.fenced_code#B8E186
support.type.property-name.json#A3C846
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E5C07B
support.type.property-name.css#61AFEF
support.constant.property-value.css#B8E186