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#FF6F00
  • activityBar.background#F0E9DC
  • activityBar.foreground#333333
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FAF5E6
  • badge.background#D32F2F
  • badge.foreground#FAF5E6
  • button.background#FF6F00
  • button.foreground#FAF5E6
  • button.hoverBackground#FF8F33
  • dropdown.background#F0E9DC
  • dropdown.border#E0D9CC
  • dropdown.foreground#333333
  • editor.background#FAF5E6
  • editor.findMatchBackground#D32F2FAA
  • editor.findMatchHighlightBackground#D32F2F88
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFEED0
  • editor.lineHighlightBorder#FFCC80
  • editor.selectionBackground#FFCC80AA
  • editor.selectionHighlightBackground#FFD8A0
  • editorBracketMatch.background#FFE0B2
  • editorBracketMatch.border#FF6F00
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#FAF5E6
  • editorIndentGuide.activeBackground#B0A89F
  • editorIndentGuide.background#D8D2C8
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#B0A89F
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FF6F00
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#00BCD4
  • input.background#F0E9DC
  • input.border#E0D9CC
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#FFCC80
  • list.activeSelectionForeground#212121
  • list.focusBackground#FFEED0
  • list.highlightForeground#FF6F00
  • list.hoverBackground#FFEED0AA
  • minimap.background#FAF5E6
  • minimapSlider.activeBackground#FF6F00EE
  • minimapSlider.background#FF6F0088
  • minimapSlider.hoverBackground#FF6F00BB
  • panel.background#FAF5E6
  • panel.border#E0D9CC
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF6F00
  • scrollbarSlider.background#C1B7A8
  • scrollbarSlider.hoverBackground#B0A89F
  • sideBar.background#F5EFE2
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#EFE8DC
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#FF6F00
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#FAF5E6
  • statusBar.noFolderBackground#F0E9DC
  • statusBarItem.hoverBackground#FF8F33
  • tab.activeBackground#FAF5E6
  • tab.activeBorder#FF6F00
  • tab.activeForeground#212121
  • tab.border#E0D9CC
  • tab.inactiveBackground#F5EFE2
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#42A5F5
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFA000
  • terminal.background#FAF5E6
  • terminal.foreground#333333
  • titleBar.activeBackground#FAF5E6
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#F5EFE2
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00BCD4
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#FF6F00
variable, variable.other#333333
variable.parameter#FF9800italic
entity.name.function, support.function#0097A7
meta.function-call#FF6F00
entity.name.class, entity.name.type.class, support.class#D32F2Fbold
entity.name.type, support.type#0097A7
entity.name.type.interface#D32F2Fitalic
constant.numeric#FF9800
constant, constant.language, constant.character#FFB300
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#00BCD4
meta.object-literal.key#FF9800
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#FF6F00italic
punctuation, meta.brace#777777
string.regexp#FF6F00
constant.character.escape#FF6F00
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#FFB300bold
markup.italic#FF6F00italic
markup.underline.link#00BCD4
markup.inline.raw, markup.fenced_code#FF9800
support.type.property-name.json#D32F2F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#FF9800
support.constant.property-value.css#00BCD4