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