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—