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#4FFFD5
  • activityBar.background#0A0D12
  • activityBar.foreground#4FFFD5
  • activityBarBadge.background#4FFFD5
  • activityBarBadge.foreground#0A0D12
  • badge.background#4FFFD5
  • badge.foreground#0A0D12
  • button.background#131720
  • button.foreground#E1E4EB
  • button.hoverBackground#FF5FD766
  • dropdown.background#0D1118
  • dropdown.border#131720
  • dropdown.foreground#E1E4EB
  • editor.background#0A0D12
  • editor.findMatchBackground#4FFFD544
  • editor.findMatchHighlightBackground#4FFFD522
  • editor.foreground#E1E4EB
  • editor.lineHighlightBackground#4FFFD520
  • editor.lineHighlightBorder#4FFFD580
  • editor.selectionBackground#FF5FD744
  • editor.selectionHighlightBackground#FF5FD722
  • editorBracketMatch.background#FF5FD744
  • editorBracketMatch.border#FF5FD7
  • editorCursor.foreground#4FFFD5
  • editorGroupHeader.tabsBackground#0A0D12
  • editorIndentGuide.activeBackground#6A7285AA
  • editorIndentGuide.background#6A728544
  • editorLineNumber.activeForeground#4FFFD5
  • editorLineNumber.foreground#6A7285
  • editorWhitespace.foreground#6A7285
  • focusBorder#4FFFD5
  • gitDecoration.conflictingResourceForeground#FFE66A
  • gitDecoration.deletedResourceForeground#FF6A6A
  • gitDecoration.modifiedResourceForeground#4FFFD5
  • gitDecoration.untrackedResourceForeground#70FFF8
  • input.background#0D1118
  • input.border#131720
  • input.foreground#E1E4EB
  • input.placeholderForeground#6A7285
  • inputOption.activeBorder#4FFFD5
  • list.activeSelectionBackground#131720
  • list.activeSelectionForeground#E1E4EB
  • list.focusBackground#131720
  • list.highlightForeground#4FFFD5
  • list.hoverBackground#13172066
  • minimap.background#0A0D12
  • minimapSlider.activeBackground#4FFFD566
  • minimapSlider.background#4FFFD522
  • minimapSlider.hoverBackground#4FFFD544
  • panel.background#0A0D12
  • panel.border#131720
  • panelTitle.activeBorder#4FFFD5
  • panelTitle.activeForeground#4FFFD5
  • panelTitle.inactiveForeground#6A7285
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6A7285AA
  • scrollbarSlider.background#6A728544
  • scrollbarSlider.hoverBackground#6A728588
  • sideBar.background#0D1118
  • sideBar.foreground#C2C7D4
  • sideBarSectionHeader.background#0A0D12
  • sideBarSectionHeader.foreground#FF5FD7
  • sideBarTitle.foreground#FF5FD7
  • statusBar.background#131720
  • statusBar.debuggingBackground#4FFFD5
  • statusBar.foreground#E1E4EB
  • statusBar.noFolderBackground#0D1118
  • statusBarItem.hoverBackground#FF5FD744
  • tab.activeBackground#131720
  • tab.activeBorder#4FFFD5
  • tab.activeForeground#E1E4EB
  • tab.border#0A0D12
  • tab.inactiveBackground#0A0D12
  • tab.inactiveForeground#6A7285
  • terminal.ansiBlue#5A9DFF
  • terminal.ansiBrightBlue#7AB8FF
  • terminal.ansiBrightCyan#91FFF0
  • terminal.ansiBrightGreen#A0FFF0
  • terminal.ansiBrightMagenta#FF9ADD
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFF5A0
  • terminal.ansiCyan#4FFFD5
  • terminal.ansiGreen#70FFF8
  • terminal.ansiMagenta#FF5FD7
  • terminal.ansiRed#FF6A6A
  • terminal.ansiYellow#FFE66A
  • terminal.background#0A0D12
  • terminal.foreground#E1E4EB
  • titleBar.activeBackground#0A0D12
  • titleBar.activeForeground#E1E4EB
  • titleBar.inactiveBackground#090C10
  • titleBar.inactiveForeground#A5A9B2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A7285italic
string, string.quoted, string.template#70FFF8
keyword, storage.type, storage.modifier#4FFFD5bold
keyword.operator, punctuation.accessor#FF5FD7
variable, variable.other#E1E4EB
variable.parameter#70FFF8italic
entity.name.function, support.function#4FFFD5
meta.function-call#FF5FD7
entity.name.class, entity.name.type.class, support.class#4FFFD5bold
entity.name.type, support.type#FF5FD7
entity.name.type.interface#70FFF8italic
constant.numeric#4FFFD5
constant, constant.language, constant.character#FF5FD7
constant.language.boolean#4FFFD5bold
variable.other.property, support.variable.property#70FFF8
meta.object-literal.key#FF5FD7
entity.name.tag, punctuation.definition.tag#4FFFD5
entity.other.attribute-name#FF5FD7italic
punctuation, meta.brace#E1E4EB
string.regexp#70FFF8
constant.character.escape#FF5FD7
meta.decorator, punctuation.decorator#FF5FD7
invalid, invalid.illegal#FF6A6Astrikethrough
markup.heading, entity.name.section#4FFFD5bold
markup.bold#4FFFD5bold
markup.italic#70FFF8italic
markup.underline.link#FF5FD7
markup.inline.raw, markup.fenced_code#70FFF8
support.type.property-name.json#FF5FD7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4FFFD5
support.type.property-name.css#70FFF8
support.constant.property-value.css#FF5FD7