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