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#F0F0F0
  • activityBar.foreground#C0392B
  • activityBarBadge.background#C0392B
  • activityBarBadge.foreground#FAFAFA
  • badge.background#C0392B
  • badge.foreground#FAFAFA
  • button.background#C0392B
  • button.foreground#FAFAFA
  • button.hoverBackground#C0392B80
  • dropdown.background#F0F0F0
  • dropdown.border#C0392B
  • dropdown.foreground#2C2C3A
  • editor.background#FAFAFA
  • editor.findMatchBackground#C0392B44
  • editor.findMatchHighlightBackground#C0392B22
  • editor.foreground#2C2C3A
  • editor.lineHighlightBackground#E0E0E0
  • editor.lineHighlightBorder#C0392B40
  • editor.selectionBackground#C0392B30
  • editor.selectionHighlightBackground#C0392B20
  • editorBracketMatch.background#C0392B33
  • editorBracketMatch.border#C0392B
  • editorCursor.foreground#C0392B
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#7F8C8D88
  • editorIndentGuide.background#7F8C8D44
  • editorLineNumber.activeForeground#C0392B
  • editorLineNumber.foreground#7F8C8D
  • editorWhitespace.foreground#7F8C8D66
  • focusBorder#C0392B
  • gitDecoration.conflictingResourceForeground#F1C40F
  • gitDecoration.deletedResourceForeground#E74C3C
  • gitDecoration.modifiedResourceForeground#C0392B
  • gitDecoration.untrackedResourceForeground#1ABC9C
  • input.background#F0F0F0
  • input.border#C0392B
  • input.foreground#2C2C3A
  • input.placeholderForeground#7F8C8D
  • inputOption.activeBorder#C0392B
  • list.activeSelectionBackground#C0392B
  • list.activeSelectionForeground#FAFAFA
  • list.focusBackground#C0392B
  • list.highlightForeground#C0392B
  • list.hoverBackground#C0392B66
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#C0392B66
  • minimapSlider.background#C0392B22
  • minimapSlider.hoverBackground#C0392B44
  • panel.background#FAFAFA
  • panel.border#C0392B
  • panelTitle.activeBorder#C0392B
  • panelTitle.activeForeground#2C2C3A
  • panelTitle.inactiveForeground#7F8C8D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C0392B88
  • scrollbarSlider.background#7F8C8D44
  • scrollbarSlider.hoverBackground#7F8C8D88
  • sideBar.background#F0F0F0
  • sideBar.foreground#2C2C3A
  • sideBarSectionHeader.background#FAFAFA
  • sideBarSectionHeader.foreground#C0392B
  • sideBarTitle.foreground#C0392B
  • statusBar.background#C0392B
  • statusBar.debuggingBackground#FF5E4A
  • statusBar.foreground#FAFAFA
  • statusBar.noFolderBackground#C0392B
  • statusBarItem.hoverBackground#C0392B80
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#C0392B
  • tab.activeForeground#C0392B
  • tab.border#E0E0E0
  • tab.inactiveBackground#E5E5E5
  • tab.inactiveForeground#7F8C8D
  • terminal.ansiBlue#3498DB
  • terminal.ansiBrightBlue#5DADE2
  • terminal.ansiBrightCyan#48C9B0
  • terminal.ansiBrightGreen#58D68D
  • terminal.ansiBrightMagenta#AF7AC5
  • terminal.ansiBrightRed#EC7063
  • terminal.ansiBrightYellow#F7DC6F
  • terminal.ansiCyan#1ABC9C
  • terminal.ansiGreen#2ECC71
  • terminal.ansiMagenta#9B59B6
  • terminal.ansiRed#E74C3C
  • terminal.ansiYellow#F1C40F
  • terminal.background#FAFAFA
  • terminal.foreground#2C2C3A
  • titleBar.activeBackground#F5F5F5
  • titleBar.activeForeground#2C2C3A
  • titleBar.inactiveBackground#E5E5E5
  • titleBar.inactiveForeground#7F8C8D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#95A5A6italic
string, string.quoted, string.template#D35400
keyword, storage.type, storage.modifier#C0392Bbold
keyword.operator, punctuation.accessor#7F8C8D
variable, variable.other#2C2C3A
variable.parameter#7F8C8Ditalic
entity.name.function, support.function#E74C3C
meta.function-call#FF7F50
entity.name.class, entity.name.type.class, support.class#ECF0F1bold
entity.name.type, support.type#BDC3C7
entity.name.type.interface#95A5A6italic
constant.numeric#F39C12
constant, constant.language, constant.character#F1C40F
constant.language.boolean#F1C40Fbold
variable.other.property, support.variable.property#2C2C3A
meta.object-literal.key#ECF0F1
entity.name.tag, punctuation.definition.tag#C0392B
entity.other.attribute-name#7F8C8Ditalic
punctuation, meta.brace#7F8C8D
string.regexp#E74C3C
constant.character.escape#E74C3C
meta.decorator, punctuation.decorator#F39C12
invalid, invalid.illegal#E74C3Cstrikethrough
markup.heading, entity.name.section#C0392Bbold
markup.bold#F1C40Fbold
markup.italic#7F8C8Ditalic
markup.underline.link#3498DB
markup.inline.raw, markup.fenced_code#D35400
support.type.property-name.json#ECF0F1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F39C12
support.type.property-name.css#ECF0F1
support.constant.property-value.css#D35400