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#ff4c4c
  • activityBar.background#212121
  • activityBar.foreground#ff4c4c
  • activityBarBadge.background#ff4c4c
  • activityBarBadge.foreground#ffffff
  • badge.background#ff4c4c
  • badge.foreground#ffffff
  • button.background#ff4c4c
  • button.foreground#ffffff
  • button.hoverBackground#e04343
  • dropdown.background#2c2c2c
  • dropdown.border#444444
  • dropdown.foreground#e0e0e0
  • editor.background#1b1b1b
  • editor.findMatchBackground#ff4c4c80
  • editor.findMatchHighlightBackground#ff4c4c55
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2c2c2c
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#ff4c4c55
  • editor.selectionHighlightBackground#ff4c4c22
  • editorBracketMatch.background#ff4c4c30
  • editorBracketMatch.border#ff4c4c
  • editorCursor.foreground#ff4c4c
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorIndentGuide.activeBackground#666666
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#ff4c4c
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#ff4c4c
  • gitDecoration.conflictingResourceForeground#ff9800
  • gitDecoration.deletedResourceForeground#c62828
  • gitDecoration.modifiedResourceForeground#ff4c4c
  • gitDecoration.untrackedResourceForeground#4caf50
  • input.background#2c2c2c
  • input.border#444444
  • input.foreground#e0e0e0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff4c4c
  • list.activeSelectionBackground#ff4c4c33
  • list.activeSelectionForeground#ff4c4c
  • list.focusBackground#444444
  • list.highlightForeground#ff4c4c
  • list.hoverBackground#333333
  • minimap.background#1b1b1b
  • minimapSlider.activeBackground#ff4c4c
  • minimapSlider.background#444444
  • minimapSlider.hoverBackground#555555
  • panel.background#212121
  • panel.border#333333
  • panelTitle.activeBorder#ff4c4c
  • panelTitle.activeForeground#ff4c4c
  • panelTitle.inactiveForeground#a0a0a0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ff4c4c
  • scrollbarSlider.background#444444
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#212121
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#1b1b1b
  • sideBarSectionHeader.foreground#ff4c4c
  • sideBarTitle.foreground#ff4c4c
  • statusBar.background#212121
  • statusBar.debuggingBackground#b71c1c
  • statusBar.foreground#ff4c4c
  • statusBar.noFolderBackground#424242
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#1b1b1b
  • tab.activeBorder#ff4c4c
  • tab.activeForeground#ff4c4c
  • tab.border#333333
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#a0a0a0
  • terminal.ansiBlue#4c8cff
  • terminal.ansiBrightBlue#6ba8ff
  • terminal.ansiBrightCyan#6be5ff
  • terminal.ansiBrightGreen#6bff9a
  • terminal.ansiBrightMagenta#ff6bd9
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightYellow#fff56b
  • terminal.ansiCyan#4cd9ff
  • terminal.ansiGreen#4cff8a
  • terminal.ansiMagenta#ff4cbb
  • terminal.ansiRed#ff4c4c
  • terminal.ansiYellow#ffeb4c
  • terminal.background#1b1b1b
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ff4c4c
  • titleBar.inactiveBackground#1b1b1b
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#ffeb4c
keyword, storage.type, storage.modifier#ff4c4cbold
keyword.operator, punctuation.accessor#ff4c4c
variable, variable.other#4c8cff
variable.parameter#4c8cffitalic
entity.name.function, support.function#4cd9ff
meta.function-call#4cd9ff
entity.name.class, entity.name.type.class, support.class#4cff8abold
entity.name.type, support.type#ff4cbb
entity.name.type.interface#ff4cbbitalic
constant.numeric#ffeb4c
constant, constant.language, constant.character#ff4c4c
constant.language.boolean#ff4c4cbold
variable.other.property, support.variable.property#4c8cff
meta.object-literal.key#ff4c4c
entity.name.tag, punctuation.definition.tag#ff4c4c
entity.other.attribute-name#4c8cffitalic
punctuation, meta.brace#e0e0e0
string.regexp#ffeb4c
constant.character.escape#ff4cbb
meta.decorator, punctuation.decorator#4cd9ff
invalid, invalid.illegal#c62828strikethrough
markup.heading, entity.name.section#ff4c4cbold
markup.bold#ff4c4cbold
markup.italic#ff4c4citalic
markup.underline.link#4c8cff
markup.inline.raw, markup.fenced_code#4cd9ff
support.type.property-name.json#ff4c4c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4c8cff
support.type.property-name.css#ff4c4c
support.constant.property-value.css#ffeb4c