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#FFB400
  • activityBar.background#1E3A5F
  • activityBar.foreground#FDF6E3
  • activityBarBadge.background#FFB400
  • activityBarBadge.foreground#1E3A5F
  • badge.background#FFB400
  • badge.foreground#1E3A5F
  • button.background#FFB400
  • button.foreground#1E3A5F
  • button.hoverBackground#FFB40080
  • dropdown.background#FFFFFF
  • dropdown.border#C2BFB5
  • dropdown.foreground#2E3440
  • editor.background#FDF6E3
  • editor.findMatchBackground#FFB40080
  • editor.findMatchHighlightBackground#FFB40030
  • editor.foreground#2E3440
  • editor.lineHighlightBackground#FFB40010
  • editor.lineHighlightBorder#FFB40033
  • editor.selectionBackground#FFB40040
  • editor.selectionHighlightBackground#FFB40020
  • editorBracketMatch.background#FFB40020
  • editorBracketMatch.border#FFB40080
  • editorCursor.foreground#FFB400
  • editorGroupHeader.tabsBackground#F0E8D5
  • editorIndentGuide.activeBackground#FFB400
  • editorIndentGuide.background#D3D3D3
  • editorLineNumber.activeForeground#1E3A5F
  • editorLineNumber.foreground#A5A5A5
  • editorWhitespace.foreground#C2C2C2
  • focusBorder#FFB400
  • gitDecoration.conflictingResourceForeground#D33682
  • gitDecoration.deletedResourceForeground#DC322F
  • gitDecoration.modifiedResourceForeground#268BD2
  • gitDecoration.untrackedResourceForeground#859900
  • input.background#FFFFFF
  • input.border#C2BFB5
  • input.foreground#2E3440
  • input.placeholderForeground#A5A5A5
  • inputOption.activeBorder#FFB400
  • list.activeSelectionBackground#FFB40040
  • list.activeSelectionForeground#1E3A5F
  • list.focusBackground#FFB40030
  • list.highlightForeground#FFB400
  • list.hoverBackground#FFB40020
  • minimap.background#F0E8D5
  • minimapSlider.activeBackground#7A7A7A
  • minimapSlider.background#C2BFB5
  • minimapSlider.hoverBackground#A5A5A5
  • panel.background#F0E8D5
  • panel.border#C2BFB5
  • panelTitle.activeBorder#FFB400
  • panelTitle.activeForeground#1E3A5F
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#7A7A7A
  • scrollbarSlider.background#C2BFB5
  • scrollbarSlider.hoverBackground#A5A5A5
  • sideBar.background#F0E8D5
  • sideBar.foreground#2E3440
  • sideBarSectionHeader.background#E0D5C3
  • sideBarSectionHeader.foreground#1E3A5F
  • sideBarTitle.foreground#1E3A5F
  • statusBar.background#1E3A5F
  • statusBar.debuggingBackground#C44D58
  • statusBar.foreground#FDF6E3
  • statusBar.noFolderBackground#5A7D9A
  • statusBarItem.hoverBackground#FFB40033
  • tab.activeBackground#FDF6E3
  • tab.activeBorder#FFB400
  • tab.activeForeground#1E3A5F
  • tab.border#C2BFB5
  • tab.inactiveBackground#EAE2D0
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#1E3A5F
  • terminal.ansiBrightBlue#268B D2
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#D33682
  • terminal.ansiBrightRed#CB4B16
  • terminal.ansiBrightYellow#B58900
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#6C71C4
  • terminal.ansiRed#DC322F
  • terminal.ansiYellow#B58900
  • terminal.background#FDF6E3
  • terminal.foreground#2E3440
  • titleBar.activeBackground#1E3A5F
  • titleBar.activeForeground#FDF6E3
  • titleBar.inactiveBackground#3B5D84
  • titleBar.inactiveForeground#C2C2C2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C757Ditalic
string, string.quoted, string.template#B58900
keyword, storage.type, storage.modifier#1E3A5Fbold
keyword.operator, punctuation.accessor#2AA198
variable, variable.other#2E3440
variable.parameter#5A7D9Aitalic
entity.name.function, support.function#6C71C4
meta.function-call#6C71C4
entity.name.class, entity.name.type.class, support.class#268BD2bold
entity.name.type, support.type#D33682
entity.name.type.interface#D33682italic
constant.numeric#CB4B16
constant, constant.language, constant.character#859900
constant.language.boolean#DC322Fbold
variable.other.property, support.variable.property#2AA198
meta.object-literal.key#6C71C4
entity.name.tag, punctuation.definition.tag#DC322F
entity.other.attribute-name#CB4B16italic
punctuation, meta.brace#6C757D
string.regexp#859900
constant.character.escape#D33682
meta.decorator, punctuation.decorator#2AA198
invalid, invalid.illegal#DC322Fstrikethrough
markup.heading, entity.name.section#1E3A5Fbold
markup.bold#1E3A5Fbold
markup.italic#6C757Ditalic
markup.underline.link#6C71C4
markup.inline.raw, markup.fenced_code#859900
support.type.property-name.json#6C71C4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#268BD2
support.type.property-name.css#2AA198
support.constant.property-value.css#CB4B16