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#C0392B
  • activityBar.background#E5E3E0
  • activityBar.foreground#3A3837
  • activityBarBadge.background#C0392B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C0392B
  • badge.foreground#FFFFFF
  • button.background#C0392B
  • button.foreground#FFFFFF
  • button.hoverBackground#E74C3C
  • dropdown.background#FFFFFF
  • dropdown.border#DAD8D6
  • dropdown.foreground#2E2B2A
  • editor.background#FAF8F5
  • editor.findMatchBackground#FFC300
  • editor.findMatchHighlightBackground#FFE066
  • editor.foreground#2E2B2A
  • editor.lineHighlightBackground#FFF9E6
  • editor.lineHighlightBorder#F0E68C
  • editor.selectionBackground#B0C4DE
  • editor.selectionHighlightBackground#D6EAF8
  • editorBracketMatch.background#D5F5E3
  • editorBracketMatch.border#76D7C4
  • editorCursor.foreground#3A3837
  • editorGroupHeader.tabsBackground#F5F4F2
  • editorIndentGuide.activeBackground#A9A7A5
  • editorIndentGuide.background#DAD8D6
  • editorLineNumber.activeForeground#3A3837
  • editorLineNumber.foreground#A9A7A5
  • editorWhitespace.foreground#C0BEBB
  • focusBorder#C0392B
  • gitDecoration.conflictingResourceForeground#9B59B6
  • gitDecoration.deletedResourceForeground#E74C3C
  • gitDecoration.modifiedResourceForeground#F1C40F
  • gitDecoration.untrackedResourceForeground#27AE60
  • input.background#FFFFFF
  • input.border#DAD8D6
  • input.foreground#2E2B2A
  • input.placeholderForeground#A9A7A5
  • inputOption.activeBorder#C0392B
  • list.activeSelectionBackground#D6EAF8
  • list.activeSelectionForeground#2E2B2A
  • list.focusBackground#D6EAF8
  • list.highlightForeground#C0392B
  • list.hoverBackground#EAE8E5
  • minimap.background#FAF8F5
  • minimapSlider.activeBackground#A9A7A5
  • minimapSlider.background#DAD8D6
  • minimapSlider.hoverBackground#C0BEBB
  • panel.background#F5F4F2
  • panel.border#DAD8D6
  • panelTitle.activeBorder#C0392B
  • panelTitle.activeForeground#2E2B2A
  • panelTitle.inactiveForeground#6E6B68
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#8F8D8B
  • scrollbarSlider.background#C0BEBB
  • scrollbarSlider.hoverBackground#A9A7A5
  • sideBar.background#F5F4F2
  • sideBar.foreground#3A3837
  • sideBarSectionHeader.background#EAE8E5
  • sideBarSectionHeader.foreground#3A3837
  • sideBarTitle.foreground#2E2B2A
  • statusBar.background#C0392B
  • statusBar.debuggingBackground#D35400
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#7F8C8D
  • statusBarItem.hoverBackground#B03A2E
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#C0392B
  • tab.activeForeground#2E2B2A
  • tab.border#DAD8D6
  • tab.inactiveBackground#F0EEEC
  • tab.inactiveForeground#6E6B68
  • terminal.ansiBlue#3498DB
  • terminal.ansiBrightBlue#5DADE2
  • terminal.ansiBrightCyan#48C9B0
  • terminal.ansiBrightGreen#58D68D
  • terminal.ansiBrightMagenta#AF7AC5
  • terminal.ansiBrightRed#E74C3C
  • terminal.ansiBrightYellow#F7DC6F
  • terminal.ansiCyan#1ABC9C
  • terminal.ansiGreen#27AE60
  • terminal.ansiMagenta#9B59B6
  • terminal.ansiRed#C0392B
  • terminal.ansiYellow#F1C40F
  • terminal.background#FAF8F5
  • terminal.foreground#2E2B2A
  • titleBar.activeBackground#D5CFC9
  • titleBar.activeForeground#2E2B2A
  • titleBar.inactiveBackground#E5E3E0
  • titleBar.inactiveForeground#6E6B68

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E6B68italic
string, string.quoted, string.template#27AE60
keyword, storage.type, storage.modifier#C0392Bbold
keyword.operator, punctuation.accessor#3498DB
variable, variable.other#2E2B2A
variable.parameter#9B59B6italic
entity.name.function, support.function#2980B9
meta.function-call#2980B9
entity.name.class, entity.name.type.class, support.class#D35400bold
entity.name.type, support.type#8E44AD
entity.name.type.interface#8E44ADitalic
constant.numeric#F1C40F
constant, constant.language, constant.character#E67E22
constant.language.boolean#C0392Bbold
variable.other.property, support.variable.property#1ABC9C
meta.object-literal.key#3498DB
entity.name.tag, punctuation.definition.tag#C0392B
entity.other.attribute-name#9B59B6italic
punctuation, meta.brace#2E2B2A
string.regexp#E74C3C
constant.character.escape#E67E22
meta.decorator, punctuation.decorator#9B59B6
invalid, invalid.illegal#E74C3Cstrikethrough
markup.heading, entity.name.section#C0392Bbold
markup.bold#C0392Bbold
markup.italic#6E6B68italic
markup.underline.link#2980B9
markup.inline.raw, markup.fenced_code#27AE60
support.type.property-name.json#3498DB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9B59B6
support.type.property-name.css#27AE60
support.constant.property-value.css#C0392B