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#C66900
  • activityBar.background#E5E5E5
  • activityBar.foreground#212121
  • activityBarBadge.background#C66900
  • activityBarBadge.foreground#FAFAFA
  • badge.background#C66900
  • badge.foreground#FAFAFA
  • button.background#C66900
  • button.foreground#FAFAFA
  • button.hoverBackground#C66908
  • dropdown.background#F2F2F2
  • dropdown.border#B0B0B0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#C6690044
  • editor.findMatchHighlightBackground#C6690022
  • editor.foreground#212121
  • editor.lineHighlightBackground#E8E8E8
  • editor.lineHighlightBorder#B0B0B0
  • editor.selectionBackground#C3E6CB33
  • editor.selectionHighlightBackground#C3E6CB22
  • editorBracketMatch.background#C3E6CB33
  • editorBracketMatch.border#2E7D32
  • editorCursor.foreground#212121
  • editorGroupHeader.tabsBackground#F2F2F2
  • editorIndentGuide.activeBackground#2E7D32A0
  • editorIndentGuide.background#B0B0B070
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#B0B0B0
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#C66900
  • gitDecoration.conflictingResourceForeground#C66900
  • gitDecoration.deletedResourceForeground#C66900
  • gitDecoration.modifiedResourceForeground#2E7D32
  • gitDecoration.untrackedResourceForeground#2E7D32
  • input.background#F2F2F2
  • input.border#B0B0B0
  • input.foreground#212121
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#C66900
  • list.activeSelectionBackground#C66900
  • list.activeSelectionForeground#FAFAFA
  • list.focusBackground#C6690040
  • list.highlightForeground#2E7D32
  • list.hoverBackground#C6690040
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#C6690080
  • minimapSlider.background#C6690040
  • minimapSlider.hoverBackground#C6690060
  • panel.background#FAFAFA
  • panel.border#B0B0B0
  • panelTitle.activeBorder#C66900
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#B0B0B0FF
  • scrollbarSlider.background#B0B0B060
  • scrollbarSlider.hoverBackground#B0B0B0AA
  • sideBar.background#F2F2F2
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E5E5E5
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#C66900
  • statusBar.debuggingBackground#2E7D32
  • statusBar.foreground#FAFAFA
  • statusBar.noFolderBackground#B0B0B0
  • statusBarItem.hoverBackground#C66900AA
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#C66900
  • tab.activeForeground#212121
  • tab.border#CCCCCC
  • tab.inactiveBackground#F2F2F2
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#3A6EA5
  • terminal.ansiBrightBlue#3A6EA5
  • terminal.ansiBrightCyan#2E7D32
  • terminal.ansiBrightGreen#2E7D32
  • terminal.ansiBrightMagenta#C66900
  • terminal.ansiBrightRed#C66900
  • terminal.ansiBrightYellow#C66900
  • terminal.ansiCyan#2E7D32
  • terminal.ansiGreen#2E7D32
  • terminal.ansiMagenta#C66900
  • terminal.ansiRed#C66900
  • terminal.ansiYellow#C66900
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#EDEDED
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#D9D9D9
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#2E7D32—
keyword, storage.type, storage.modifier#C66900bold
keyword.operator, punctuation.accessor#B0B0B0—
variable, variable.other#212121—
variable.parameter#2E7D32italic
entity.name.function, support.function#2E7D32—
meta.function-call#2E7D32—
entity.name.class, entity.name.type.class, support.class#C66900bold
entity.name.type, support.type#2E7D32—
entity.name.type.interface#2E7D32italic
constant.numeric#2E7D32—
constant, constant.language, constant.character#C66900—
constant.language.boolean#C66900bold
variable.other.property, support.variable.property#2E7D32—
meta.object-literal.key#2E7D32—
entity.name.tag, punctuation.definition.tag#C66900—
entity.other.attribute-name#2E7D32italic
punctuation, meta.brace#212121—
string.regexp#2E7D32—
constant.character.escape#C66900—
meta.decorator, punctuation.decorator#2E7D32—
invalid, invalid.illegal#C66900strikethrough
markup.heading, entity.name.section#C66900bold
markup.bold#C66900bold
markup.italic#2E7D32italic
markup.underline.link#2E7D32—
markup.inline.raw, markup.fenced_code#2E7D32—
support.type.property-name.json#2E7D32—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C66900—
support.type.property-name.css#2E7D32—
support.constant.property-value.css#2E7D32—