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#0096C7
  • activityBar.background#F2F6FA
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#0096C7
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0096C7
  • badge.foreground#FFFFFF
  • button.background#0096C7
  • button.foreground#FFFFFF
  • button.hoverBackground#33C1FF
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0C0
  • dropdown.foreground#2B2B2B
  • editor.background#FCFCFF
  • editor.findMatchBackground#0096C760
  • editor.findMatchHighlightBackground#0096C640
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#0096C730
  • editor.lineHighlightBorder#0096C740
  • editor.selectionBackground#0096C740
  • editor.selectionHighlightBackground#0096C720
  • editorBracketMatch.background#0096C720
  • editorBracketMatch.border#0096C7
  • editorCursor.foreground#0096C7
  • editorGroupHeader.tabsBackground#F0F4F7
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#0096C7
  • gitDecoration.conflictingResourceForeground#E5B73C
  • gitDecoration.deletedResourceForeground#D9443F
  • gitDecoration.modifiedResourceForeground#0096C7
  • gitDecoration.untrackedResourceForeground#3FAF71
  • input.background#FFFFFF
  • input.border#C0C0C0
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#0096C7
  • list.activeSelectionBackground#0096C760
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0096C760
  • list.highlightForeground#0096C7
  • list.hoverBackground#0096C730
  • minimap.background#FCFCFF
  • minimapSlider.activeBackground#0096C760
  • minimapSlider.background#0096C720
  • minimapSlider.hoverBackground#0096C740
  • panel.background#F7FAFC
  • panel.border#C0C0C0
  • panelTitle.activeBorder#0096C7
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#808080AA
  • scrollbarSlider.background#C0C0C0AA
  • scrollbarSlider.hoverBackground#A0A0A0AA
  • sideBar.background#F7FAFC
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#F2F6FA
  • sideBarSectionHeader.foreground#2B2B2B
  • sideBarTitle.foreground#0096C7
  • statusBar.background#E5EEF3
  • statusBar.debuggingBackground#0096C7
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#D3DCE0
  • statusBarItem.hoverBackground#CADCE5
  • tab.activeBackground#FCFCFF
  • tab.activeBorder#0096C7
  • tab.activeForeground#2B2B2B
  • tab.border#C0C0C0
  • tab.inactiveBackground#F0F4F7
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0096C7
  • terminal.ansiBrightBlue#33C1FF
  • terminal.ansiBrightCyan#33E5C1
  • terminal.ansiBrightGreen#66FF99
  • terminal.ansiBrightMagenta#D18FFF
  • terminal.ansiBrightRed#FF5E57
  • terminal.ansiBrightYellow#FFEB33
  • terminal.ansiCyan#00BFA6
  • terminal.ansiGreen#3FAF71
  • terminal.ansiMagenta#B77DCB
  • terminal.ansiRed#D9443F
  • terminal.ansiYellow#E5B73C
  • terminal.background#FCFCFF
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E5EEF3
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F0F4F7
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#00BFA6—
keyword, storage.type, storage.modifier#0096C7bold
keyword.operator, punctuation.accessor#5F7A8A—
variable, variable.other#2B2B2B—
variable.parameter#5F7A8Aitalic
entity.name.function, support.function#0096C7—
meta.function-call#0096C7—
entity.name.class, entity.name.type.class, support.class#2B2B2Bbold
entity.name.type, support.type#2B2B2B—
entity.name.type.interface#5F7A8Aitalic
constant.numeric#D9443F—
constant, constant.language, constant.character#0096C7—
constant.language.boolean#0096C7bold
variable.other.property, support.variable.property#2B2B2B—
meta.object-literal.key#0096C7—
entity.name.tag, punctuation.definition.tag#0096C7—
entity.other.attribute-name#5F7A8Aitalic
punctuation, meta.brace#5F7A8A—
string.regexp#D9443F—
constant.character.escape#5F7A8A—
meta.decorator, punctuation.decorator#0096C7—
invalid, invalid.illegal#D9443Fstrikethrough
markup.heading, entity.name.section#0096C7bold
markup.bold#2B2B2Bbold
markup.italic#5F7A8Aitalic
markup.underline.link#0096C7—
markup.inline.raw, markup.fenced_code#00BFA6—
support.type.property-name.json#0096C7—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0096C7—
support.type.property-name.css#5F7A8A—
support.constant.property-value.css#2B2B2B—