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#D9530F
  • activityBar.background#E0E0E0
  • activityBar.foreground#D9530F
  • activityBarBadge.background#D9530F
  • activityBarBadge.foreground#F4F4F4
  • badge.background#D9530F
  • badge.foreground#F4F4F4
  • button.background#D9530F
  • button.foreground#FFFFFF
  • button.hoverBackground#E06920
  • dropdown.background#EDEDED
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#F4F4F4
  • editor.findMatchBackground#FFD580AA
  • editor.findMatchHighlightBackground#FFE0B3AA
  • editor.foreground#212121
  • editor.lineHighlightBackground#D0EBFF40
  • editor.lineHighlightBorder#D0EBFF80
  • editor.selectionBackground#FFD580AA
  • editor.selectionHighlightBackground#FFE0B355
  • editorBracketMatch.background#FFD58033
  • editorBracketMatch.border#D9530F
  • editorCursor.foreground#D9530F
  • editorGroupHeader.tabsBackground#F4F4F4
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#D9530F
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#D9530F
  • gitDecoration.conflictingResourceForeground#F5A623
  • gitDecoration.deletedResourceForeground#E74C3C
  • gitDecoration.modifiedResourceForeground#D9530F
  • gitDecoration.untrackedResourceForeground#39FF14
  • input.background#EDEDED
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#999999
  • inputOption.activeBorder#D9530F
  • list.activeSelectionBackground#D0EBFF
  • list.activeSelectionForeground#212121
  • list.focusBackground#D0EBFF
  • list.highlightForeground#D9530F
  • list.hoverBackground#D0EBFF66
  • minimap.background#F4F4F4
  • minimapSlider.activeBackground#B0B0B066
  • minimapSlider.background#B0B0B022
  • minimapSlider.hoverBackground#B0B0B044
  • panel.background#F4F4F4
  • panel.border#CCCCCC
  • panelTitle.activeBorder#D9530F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#B0B0B0CC
  • scrollbarSlider.background#B0B0B044
  • scrollbarSlider.hoverBackground#B0B0B088
  • sideBar.background#E8E8E8
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#D9530F
  • sideBarTitle.foreground#D9530F
  • statusBar.background#CCCCCC
  • statusBar.debuggingBackground#D9530F
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#BEBEBE
  • statusBarItem.hoverBackground#AAAAAA
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#D9530F
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#EAEAEA
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#6EB5FF
  • terminal.ansiBrightCyan#71FFE0
  • terminal.ansiBrightGreen#94FF66
  • terminal.ansiBrightMagenta#E68AFF
  • terminal.ansiBrightRed#FF9966
  • terminal.ansiBrightYellow#FFEE66
  • terminal.ansiCyan#50E3C2
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#C158DC
  • terminal.ansiRed#D9530F
  • terminal.ansiYellow#F5A623
  • terminal.background#F4F4F4
  • terminal.foreground#212121
  • titleBar.activeBackground#D0D0D0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#C0C0C0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#39FF14
keyword, storage.type, storage.modifier#D9530Fbold
keyword.operator, punctuation.accessor#FF8C00
variable, variable.other#212121
variable.parameter#FF9966italic
entity.name.function, support.function#4A90E2
meta.function-call#71FFE0
entity.name.class, entity.name.type.class, support.class#D9530Fbold
entity.name.type, support.type#FF8C00
entity.name.type.interface#4A90E2italic
constant.numeric#F5A623
constant, constant.language, constant.character#FF8C00
constant.language.boolean#D9530Fbold
variable.other.property, support.variable.property#4A90E2
meta.object-literal.key#D9530F
entity.name.tag, punctuation.definition.tag#D9530F
entity.other.attribute-name#FF8C00italic
punctuation, meta.brace#FF8C00
string.regexp#F5A623
constant.character.escape#FF8C00
meta.decorator, punctuation.decorator#F5A623
invalid, invalid.illegal#E74C3Cstrikethrough
markup.heading, entity.name.section#D9530Fbold
markup.bold#FF8C00bold
markup.italic#4A90E2italic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#39FF14
support.type.property-name.json#D9530F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F5A623
support.type.property-name.css#4A90E2
support.constant.property-value.css#F5A623