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#FFC75F
  • activityBar.background#15161F
  • activityBar.foreground#FFC75F
  • activityBarBadge.background#FFC75F
  • activityBarBadge.foreground#0A0B12
  • badge.background#FFC75F
  • badge.foreground#0A0B12
  • button.background#1E1F2A
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2B38
  • dropdown.background#15161F
  • dropdown.border#1E1F2A
  • dropdown.foreground#C0C9FF
  • editor.background#0A0B12
  • editor.findMatchBackground#FFC75F44
  • editor.findMatchHighlightBackground#FFC75F22
  • editor.foreground#C0C9FF
  • editor.lineHighlightBackground#2A2B3840
  • editor.lineHighlightBorder#2A2B3880
  • editor.selectionBackground#5A77E080
  • editor.selectionHighlightBackground#5A77E033
  • editorBracketMatch.background#5A77E033
  • editorBracketMatch.border#5A77E0
  • editorCursor.foreground#FFC75F
  • editorGroupHeader.tabsBackground#0A0B12
  • editorIndentGuide.activeBackground#2A2B3888
  • editorIndentGuide.background#2A2B3844
  • editorLineNumber.activeForeground#FFC75F
  • editorLineNumber.foreground#5E5A51
  • editorWhitespace.foreground#2A2B38
  • focusBorder#5A77E0
  • gitDecoration.conflictingResourceForeground#FFC75F
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#5A77E0
  • gitDecoration.untrackedResourceForeground#A1E887
  • input.background#15161F
  • input.border#1E1F2A
  • input.foreground#C0C9FF
  • input.placeholderForeground#5E5A51
  • inputOption.activeBorder#5A77E0
  • list.activeSelectionBackground#1E1F2A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1E1F2A
  • list.highlightForeground#5A77E0
  • list.hoverBackground#2A2B3866
  • minimap.background#0A0B12
  • minimapSlider.activeBackground#5A77E066
  • minimapSlider.background#5A77E022
  • minimapSlider.hoverBackground#5A77E044
  • panel.background#0A0B12
  • panel.border#1E1F2A
  • panelTitle.activeBorder#FFC75F
  • panelTitle.activeForeground#5A77E0
  • panelTitle.inactiveForeground#C0C9FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A77E088
  • scrollbarSlider.background#5E5A5144
  • scrollbarSlider.hoverBackground#5E5A5188
  • sideBar.background#15161F
  • sideBar.foreground#C0C9FF
  • sideBarSectionHeader.background#15161F
  • sideBarSectionHeader.foreground#FFC75F
  • sideBarTitle.foreground#FFC75F
  • statusBar.background#1E1F2A
  • statusBar.debuggingBackground#5A77E0
  • statusBar.foreground#C0C9FF
  • statusBar.noFolderBackground#15161F
  • statusBarItem.hoverBackground#2A2B38
  • tab.activeBackground#1E1F2A
  • tab.activeBorder#FFC75F
  • tab.activeForeground#FFFFFF
  • tab.border#0A0B12
  • tab.inactiveBackground#15161F
  • tab.inactiveForeground#C0C9FF
  • terminal.ansiBlue#5A77E0
  • terminal.ansiBrightBlue#7AB0FF
  • terminal.ansiBrightCyan#9EFFFF
  • terminal.ansiBrightGreen#B5FFB5
  • terminal.ansiBrightMagenta#E2B3FF
  • terminal.ansiBrightRed#FF9F80
  • terminal.ansiBrightYellow#FFD27F
  • terminal.ansiCyan#7BDFF2
  • terminal.ansiGreen#A1E887
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB75E
  • terminal.background#0A0B12
  • terminal.foreground#C0C9FF
  • titleBar.activeBackground#15161F
  • titleBar.activeForeground#C0C9FF
  • titleBar.inactiveBackground#0A0B12
  • titleBar.inactiveForeground#C0C9FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5E5A51italic
string, string.quoted, string.template#FFEE93
keyword, storage.type, storage.modifier#5A77E0bold
keyword.operator, punctuation.accessor#C0C9FF
variable, variable.other#C0C9FF
variable.parameter#FFEE93italic
entity.name.function, support.function#7BDFF2
meta.function-call#C0C9FF
entity.name.class, entity.name.type.class, support.class#FFEE93bold
entity.name.type, support.type#A1E887
entity.name.type.interface#7BDFF2italic
constant.numeric#FF9F1C
constant, constant.language, constant.character#FFB75E
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#C0C9FF
meta.object-literal.key#A1E887
entity.name.tag, punctuation.definition.tag#5A77E0
entity.other.attribute-name#C792EAitalic
punctuation, meta.brace#C0C9FF
string.regexp#FF9F1C
constant.character.escape#C792EA
meta.decorator, punctuation.decorator#FFEE93
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#5A77E0bold
markup.bold#FFEE93bold
markup.italic#C792EAitalic
markup.underline.link#7BDFF2
markup.inline.raw, markup.fenced_code#A1E887
support.type.property-name.json#A1E887
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEE93
support.type.property-name.css#A1E887
support.constant.property-value.css#7BDFF2