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#FF4D4D
  • activityBar.background#001A33
  • activityBar.foreground#FF4D4D
  • activityBarBadge.background#FF4D4D
  • activityBarBadge.foreground#001021
  • badge.background#FF4D4D
  • badge.foreground#001021
  • button.background#3B0A0A
  • button.foreground#E0E0E0
  • button.hoverBackground#3B0A0AAA
  • dropdown.background#001A33
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#001021
  • editor.findMatchBackground#3B0A0AAA
  • editor.findMatchHighlightBackground#3B0A0A55
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#11224080
  • editor.lineHighlightBorder#112240C0
  • editor.selectionBackground#FF4D4D80
  • editor.selectionHighlightBackground#FF4D4D40
  • editorBracketMatch.background#3B0A0A33
  • editorBracketMatch.border#FF4D4D
  • editorCursor.foreground#FF4D4D
  • editorGroupHeader.tabsBackground#001021
  • editorIndentGuide.activeBackground#77777788
  • editorIndentGuide.background#44444444
  • editorLineNumber.activeForeground#FF4D4D
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#FF4D4D
  • gitDecoration.conflictingResourceForeground#FFEA00
  • gitDecoration.deletedResourceForeground#FF0000
  • gitDecoration.modifiedResourceForeground#FF4D4D
  • gitDecoration.untrackedResourceForeground#00FF7F
  • input.background#001A33
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF4D4D
  • list.activeSelectionBackground#FF4D4D80
  • list.activeSelectionForeground#001021
  • list.focusBackground#FF4D4D60
  • list.highlightForeground#FF4D4D
  • list.hoverBackground#FF4D4D40
  • minimap.background#001021
  • minimapSlider.activeBackground#FF4D4D66
  • minimapSlider.background#55555522
  • minimapSlider.hoverBackground#55555544
  • panel.background#001021
  • panel.border#001A33
  • panelTitle.activeBorder#FF4D4D
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF4D4D88
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#001A33
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#001A33
  • sideBarSectionHeader.foreground#FF4D4D
  • sideBarTitle.foreground#FF4D4D
  • statusBar.background#3B0A0A
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#001A33
  • statusBarItem.hoverBackground#FF4D4D80
  • tab.activeBackground#001A33
  • tab.activeBorder#FF4D4D
  • tab.activeForeground#FF4D4D
  • tab.border#000000
  • tab.inactiveBackground#001021
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00A2FF
  • terminal.ansiBrightBlue#5FBFFF
  • terminal.ansiBrightCyan#5FFFFF
  • terminal.ansiBrightGreen#5FFF7F
  • terminal.ansiBrightMagenta#FF5FFF
  • terminal.ansiBrightRed#FF6F6F
  • terminal.ansiBrightYellow#FFFF5F
  • terminal.ansiCyan#00FFF5
  • terminal.ansiGreen#00FF7F
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF4D4D
  • terminal.ansiYellow#FFEA00
  • terminal.background#001021
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#001A33
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#001021
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#00FF7F—
keyword, storage.type, storage.modifier#FF4500bold
keyword.operator, punctuation.accessor#8B0000—
variable, variable.other#E0E0E0—
variable.parameter#FF4500italic
entity.name.function, support.function#5FBFFF—
meta.function-call#5FCFFF—
entity.name.class, entity.name.type.class, support.class#FFB84Dbold
entity.name.type, support.type#FFAA00—
entity.name.type.interface#FFAAFFitalic
constant.numeric#FFEA00—
constant, constant.language, constant.character#FF00FF—
constant.language.boolean#FF4500bold
variable.other.property, support.variable.property#FFAA00—
meta.object-literal.key#5FCFFF—
entity.name.tag, punctuation.definition.tag#FF4500—
entity.other.attribute-name#FFAAFFitalic
punctuation, meta.brace#E0E0E0—
string.regexp#FF00FF—
constant.character.escape#FF4500—
meta.decorator, punctuation.decorator#FFEA00—
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FF4500bold
markup.bold#FFB84Dbold
markup.italic#FFAAFFitalic
markup.underline.link#5FBFFF—
markup.inline.raw, markup.fenced_code#00FF7F—
support.type.property-name.json#5FBFFF—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFAAFF—
support.type.property-name.css#FFB84D—
support.constant.property-value.css#00FF7F—