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#ff4d6d
  • activityBar.background#151720
  • activityBar.foreground#ff4d6d
  • activityBarBadge.background#ff4d6d
  • activityBarBadge.foreground#0b0c1c
  • badge.background#ff4d6d
  • badge.foreground#0b0c1c
  • button.background#1a1b2c
  • button.foreground#ffffff
  • button.hoverBackground#2a2b3c
  • dropdown.background#111224
  • dropdown.border#1a1b2c
  • dropdown.foreground#c0c8e0
  • editor.background#0b0c1c
  • editor.findMatchBackground#ff4d6d44
  • editor.findMatchHighlightBackground#ff4d6d22
  • editor.foreground#c0c8e0
  • editor.lineHighlightBackground#24263f80
  • editor.lineHighlightBorder#ff4d6d20
  • editor.selectionBackground#ff4d6d33
  • editor.selectionHighlightBackground#ff4d6d1a
  • editorBracketMatch.background#ff4d6d33
  • editorBracketMatch.border#ff4d6d
  • editorCursor.foreground#ff4d6d
  • editorGroupHeader.tabsBackground#0b0c1c
  • editorIndentGuide.activeBackground#ff4d6d44
  • editorIndentGuide.background#33384844
  • editorLineNumber.activeForeground#ff4d6d
  • editorLineNumber.foreground#555d71
  • editorWhitespace.foreground#333848
  • focusBorder#ff4d6d
  • gitDecoration.conflictingResourceForeground#ffb84d
  • gitDecoration.deletedResourceForeground#ff4d6d
  • gitDecoration.modifiedResourceForeground#00e5ff
  • gitDecoration.untrackedResourceForeground#6bff6b
  • input.background#111224
  • input.border#1a1b2c
  • input.foreground#c0c8e0
  • input.placeholderForeground#555d71
  • inputOption.activeBorder#ff4d6d
  • list.activeSelectionBackground#1a1b2c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1a1b2c
  • list.highlightForeground#ff4d6d
  • list.hoverBackground#1a1b2c66
  • minimap.background#0b0c1c
  • minimapSlider.activeBackground#ff4d6d66
  • minimapSlider.background#ff4d6d22
  • minimapSlider.hoverBackground#ff4d6d44
  • panel.background#0b0c1c
  • panel.border#1a1b2c
  • panelTitle.activeBorder#ff4d6d
  • panelTitle.activeForeground#ff4d6d
  • panelTitle.inactiveForeground#a0a8c0
  • scrollbar.shadow#0b0c1c44
  • scrollbarSlider.activeBackground#ff4d6d88
  • scrollbarSlider.background#555d7144
  • scrollbarSlider.hoverBackground#555d7188
  • sideBar.background#111224
  • sideBar.foreground#a0a8c0
  • sideBarSectionHeader.background#151720
  • sideBarSectionHeader.foreground#ff4d6d
  • sideBarTitle.foreground#ff4d6d
  • statusBar.background#1a1b2c
  • statusBar.debuggingBackground#ff4d6d
  • statusBar.foreground#c0c8e0
  • statusBar.noFolderBackground#151720
  • statusBarItem.hoverBackground#2a2b3c
  • tab.activeBackground#1a1b2c
  • tab.activeBorder#ff4d6d
  • tab.activeForeground#ffffff
  • tab.border#0b0c1c
  • tab.inactiveBackground#111224
  • tab.inactiveForeground#7a82a0
  • terminal.ansiBlue#4d79ff
  • terminal.ansiBrightBlue#6a9aff
  • terminal.ansiBrightCyan#33eaff
  • terminal.ansiBrightGreen#85ff85
  • terminal.ansiBrightMagenta#ff7aa0
  • terminal.ansiBrightRed#ff7aa0
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#6bff6b
  • terminal.ansiMagenta#ff4d6d
  • terminal.ansiRed#ff4d6d
  • terminal.ansiYellow#ffb84d
  • terminal.background#0b0c1c
  • terminal.foreground#c0c8e0
  • titleBar.activeBackground#151720
  • titleBar.activeForeground#c0c8e0
  • titleBar.inactiveBackground#0b0c1c
  • titleBar.inactiveForeground#7a82a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555d71italic
string, string.quoted, string.template#00e5ff
keyword, storage.type, storage.modifier#ff4d6dbold
keyword.operator, punctuation.accessor#ff7a95
variable, variable.other#c0c8e0
variable.parameter#ff9e4ditalic
entity.name.function, support.function#a0d6ff
meta.function-call#b0e0ff
entity.name.class, entity.name.type.class, support.class#ff4d6dbold
entity.name.type, support.type#a0d6ff
entity.name.type.interface#ff9e4ditalic
constant.numeric#ff9e4d
constant, constant.language, constant.character#ff9e4d
constant.language.boolean#ff4d6dbold
variable.other.property, support.variable.property#b0e0ff
meta.object-literal.key#a0d6ff
entity.name.tag, punctuation.definition.tag#ff4d6d
entity.other.attribute-name#ff9e4ditalic
punctuation, meta.brace#ff7a95
string.regexp#ff9e4d
constant.character.escape#ff9e4d
meta.decorator, punctuation.decorator#ff9e4d
invalid, invalid.illegal#ff4d6dstrikethrough
markup.heading, entity.name.section#ff4d6dbold
markup.bold#ff9e4dbold
markup.italic#ff9e4ditalic
markup.underline.link#00e5ff
markup.inline.raw, markup.fenced_code#a0d6ff
support.type.property-name.json#a0d6ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff9e4d
support.type.property-name.css#a0d6ff
support.constant.property-value.css#ff9e4d