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#FF4136
  • activityBar.background#080A0D
  • activityBar.foreground#FF4136
  • activityBarBadge.background#FF4136
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF4136
  • badge.foreground#0B0C10
  • button.background#14181F
  • button.foreground#D0D0D0
  • button.hoverBackground#1A1E27
  • dropdown.background#0E1118
  • dropdown.border#14181F
  • dropdown.foreground#D0D0D0
  • editor.background#0B0C10
  • editor.findMatchBackground#FF413666
  • editor.findMatchHighlightBackground#FF413622
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#1A1D24AA
  • editor.lineHighlightBorder#1A1D24FF
  • editor.selectionBackground#283046AA
  • editor.selectionHighlightBackground#28304655
  • editorBracketMatch.background#FF413633
  • editorBracketMatch.border#FF4136
  • editorCursor.foreground#FF4136
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#28304688
  • editorIndentGuide.background#28304644
  • editorLineNumber.activeForeground#FF4136
  • editorLineNumber.foreground#283046
  • editorWhitespace.foreground#28304644
  • focusBorder#FF4136
  • gitDecoration.conflictingResourceForeground#FFC107
  • gitDecoration.deletedResourceForeground#FF4136
  • gitDecoration.modifiedResourceForeground#FF4136
  • gitDecoration.untrackedResourceForeground#FFC107
  • input.background#0E1118
  • input.border#14181F
  • input.foreground#D0D0D0
  • input.placeholderForeground#A0A9B4
  • inputOption.activeBorder#FF4136
  • list.activeSelectionBackground#14181F
  • list.activeSelectionForeground#FF4136
  • list.focusBackground#14181F
  • list.highlightForeground#FF4136
  • list.hoverBackground#14181F66
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF413666
  • minimapSlider.background#FF413622
  • minimapSlider.hoverBackground#FF413644
  • panel.background#0B0C10
  • panel.border#14181F
  • panelTitle.activeBorder#FF4136
  • panelTitle.activeForeground#FF4136
  • panelTitle.inactiveForeground#A0A9B4
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF413888
  • scrollbarSlider.background#28304644
  • scrollbarSlider.hoverBackground#28304688
  • sideBar.background#0E1118
  • sideBar.foreground#A0A9B4
  • sideBarSectionHeader.background#080A0D
  • sideBarSectionHeader.foreground#FF4136
  • sideBarTitle.foreground#FF4136
  • statusBar.background#14181F
  • statusBar.debuggingBackground#FF4136
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0E1118
  • statusBarItem.hoverBackground#1A1E27
  • tab.activeBackground#14181F
  • tab.activeBorder#FF4136
  • tab.activeForeground#FF4136
  • tab.border#0B0C10
  • tab.inactiveBackground#0E1118
  • tab.inactiveForeground#A0A9B4
  • terminal.ansiBlue#5F9EA0
  • terminal.ansiBrightBlue#87CEFA
  • terminal.ansiBrightCyan#7FFFD4
  • terminal.ansiBrightGreen#ADFF2F
  • terminal.ansiBrightMagenta#EE82EE
  • terminal.ansiBrightRed#FF725C
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#66CDAA
  • terminal.ansiGreen#9ACD32
  • terminal.ansiMagenta#DDA0DD
  • terminal.ansiRed#FF4136
  • terminal.ansiYellow#FFC107
  • terminal.background#0B0C10
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#080A0D
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0B0C10
  • titleBar.inactiveForeground#A0A9B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5F73italic
string, string.quoted, string.template#FFC107—
keyword, storage.type, storage.modifier#FF4136bold
keyword.operator, punctuation.accessor#D0D0D0—
variable, variable.other#D0D0D0—
variable.parameter#FFC107italic
entity.name.function, support.function#FF4136—
meta.function-call#D0D0D0—
entity.name.class, entity.name.type.class, support.class#5F9EA0bold
entity.name.type, support.type#5F9EA0—
entity.name.type.interface#66CDAAitalic
constant.numeric#FFC107—
constant, constant.language, constant.character#FFC107—
constant.language.boolean#FF4136bold
variable.other.property, support.variable.property#D0D0D0—
meta.object-literal.key#FF4136—
entity.name.tag, punctuation.definition.tag#FF4136—
entity.other.attribute-name#66CDAAitalic
punctuation, meta.brace#5A5F73—
string.regexp#FFC107—
constant.character.escape#66CDAA—
meta.decorator, punctuation.decorator#FFC107—
invalid, invalid.illegal#FF4136strikethrough
markup.heading, entity.name.section#FF4136bold
markup.bold#FFC107bold
markup.italic#66CDAAitalic
markup.underline.link#5F9EA0—
markup.inline.raw, markup.fenced_code#FFC107—
support.type.property-name.json#FF4136—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC107—
support.type.property-name.css#FF4136—
support.constant.property-value.css#66CDAA—