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#26547C
  • activityBar.background#F9F7F1
  • activityBar.foreground#2E3A5C
  • activityBarBadge.background#26547C
  • activityBarBadge.foreground#FDFBF6
  • badge.background#26547C
  • badge.foreground#FDFBF6
  • button.background#26547C
  • button.foreground#FDFBF6
  • button.hoverBackground#1F4475
  • dropdown.background#F9F7F1
  • dropdown.border#D2B48C
  • dropdown.foreground#2E3A5C
  • editor.background#FDFBF6
  • editor.findMatchBackground#26547C40
  • editor.findMatchHighlightBackground#26547C30
  • editor.foreground#2E3A5C
  • editor.lineHighlightBackground#26547C15
  • editor.lineHighlightBorder#26547C15
  • editor.selectionBackground#26547C30
  • editor.selectionHighlightBackground#26547C20
  • editorBracketMatch.background#26547C25
  • editorBracketMatch.border#26547C
  • editorCursor.foreground#26547C
  • editorGroupHeader.tabsBackground#FDFBF6
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#26547C
  • editorLineNumber.foreground#8A92A6
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#26547C
  • gitDecoration.conflictingResourceForeground#F0AD4E
  • gitDecoration.deletedResourceForeground#D9534F
  • gitDecoration.modifiedResourceForeground#26547C
  • gitDecoration.untrackedResourceForeground#5CB85C
  • input.background#F9F7F1
  • input.border#D2B48C
  • input.foreground#2E3A5C
  • input.placeholderForeground#A8A8A8
  • inputOption.activeBorder#26547C
  • list.activeSelectionBackground#26547C30
  • list.activeSelectionForeground#FDFBF6
  • list.focusBackground#26547C30
  • list.highlightForeground#26547C
  • list.hoverBackground#26547C20
  • minimap.background#F9F7F1
  • minimapSlider.activeBackground#26547C60
  • minimapSlider.background#26547C20
  • minimapSlider.hoverBackground#26547C40
  • panel.background#FDFBF6
  • panel.border#BFA57A
  • panelTitle.activeBorder#26547C
  • panelTitle.activeForeground#2E3A5C
  • panelTitle.inactiveForeground#6B7A99
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00000070
  • scrollbarSlider.background#00000030
  • scrollbarSlider.hoverBackground#00000050
  • sideBar.background#F9F7F1
  • sideBar.foreground#2E3A5C
  • sideBarSectionHeader.background#F9F7F1
  • sideBarSectionHeader.foreground#26547C
  • sideBarTitle.foreground#2E3A5C
  • statusBar.background#26547C
  • statusBar.debuggingBackground#C7448B
  • statusBar.foreground#FDFBF6
  • statusBar.noFolderBackground#D2B48C
  • statusBarItem.hoverBackground#1F4475
  • tab.activeBackground#FDFBF6
  • tab.activeBorder#26547C
  • tab.activeForeground#2E3A5C
  • tab.border#EAE7DB
  • tab.inactiveBackground#F9F7F1
  • tab.inactiveForeground#6B7A99
  • terminal.ansiBlue#26547C
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#70D970
  • terminal.ansiBrightMagenta#E066E0
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFDA70
  • terminal.ansiCyan#3EB7A3
  • terminal.ansiGreen#5CB85C
  • terminal.ansiMagenta#C7448B
  • terminal.ansiRed#D9534F
  • terminal.ansiYellow#F0AD4E
  • terminal.background#FDFBF6
  • terminal.foreground#2E3A5C
  • titleBar.activeBackground#FDFBF6
  • titleBar.activeForeground#2E3A5C
  • titleBar.inactiveBackground#F9F7F1
  • titleBar.inactiveForeground#6B7A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#3EB7A3—
keyword, storage.type, storage.modifier#26547Cbold
keyword.operator, punctuation.accessor#26547C—
variable, variable.other#2E3A5C—
variable.parameter#6B7A99italic
entity.name.function, support.function#26547C—
meta.function-call#7A9E9F—
entity.name.class, entity.name.type.class, support.class#5C8D7Abold
entity.name.type, support.type#6B7A99—
entity.name.type.interface#6B7A99italic
constant.numeric#D96C75—
constant, constant.language, constant.character#D96C75—
constant.language.boolean#D96C75bold
variable.other.property, support.variable.property#2E3A5C—
meta.object-literal.key#26547C—
entity.name.tag, punctuation.definition.tag#26547C—
entity.other.attribute-name#7A9E9Fitalic
punctuation, meta.brace#8A92A6—
string.regexp#D96C75—
constant.character.escape#C7448B—
meta.decorator, punctuation.decorator#CFA26D—
invalid, invalid.illegal#D9534Fstrikethrough
markup.heading, entity.name.section#26547Cbold
markup.bold#D96C75bold
markup.italic#C7448Bitalic
markup.underline.link#26547C—
markup.inline.raw, markup.fenced_code#3EB7A3—
support.type.property-name.json#26547C—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CFA26D—
support.type.property-name.css#D96C75—
support.constant.property-value.css#3EB7A3—