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#00BFA6
  • activityBar.background#F2E9DE
  • activityBar.foreground#00BFA6
  • activityBarBadge.background#00BFA6
  • activityBarBadge.foreground#FAF4E6
  • badge.background#00BFA6
  • badge.foreground#FAF4E6
  • button.background#00BFA6
  • button.foreground#FAF4E6
  • button.hoverBackground#00BFA666
  • dropdown.background#F2E9DE
  • dropdown.border#E0D5C5
  • dropdown.foreground#3B3A39
  • editor.background#FAF4E6
  • editor.findMatchBackground#FFB40044
  • editor.findMatchHighlightBackground#FFB40022
  • editor.foreground#3B3A39
  • editor.lineHighlightBackground#00BFA620
  • editor.lineHighlightBorder#00BFA640
  • editor.selectionBackground#00BFA640
  • editor.selectionHighlightBackground#00BFA620
  • editorBracketMatch.background#FFB40033
  • editorBracketMatch.border#FFB400
  • editorCursor.foreground#00BFA6
  • editorGroupHeader.tabsBackground#F2E9DE
  • editorIndentGuide.activeBackground#00BFA680
  • editorIndentGuide.background#00BFA622
  • editorLineNumber.activeForeground#00BFA6
  • editorLineNumber.foreground#7A8894
  • editorWhitespace.foreground#00BFA640
  • focusBorder#00BFA6
  • gitDecoration.conflictingResourceForeground#FFB400
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#00BFA6
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#F2E9DE
  • input.border#E0D5C5
  • input.foreground#3B3A39
  • input.placeholderForeground#A380B2
  • inputOption.activeBorder#00BFA6
  • list.activeSelectionBackground#00BFA633
  • list.activeSelectionForeground#FAF4E6
  • list.focusBackground#00BFA644
  • list.highlightForeground#00BFA6
  • list.hoverBackground#00BFA622
  • minimap.background#FAF4E6
  • minimapSlider.activeBackground#00BFA666
  • minimapSlider.background#00BFA622
  • minimapSlider.hoverBackground#00BFA644
  • panel.background#FAF4E6
  • panel.border#E0D5C5
  • panelTitle.activeBorder#00BFA6
  • panelTitle.activeForeground#3B3A39
  • panelTitle.inactiveForeground#A380B2
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00BFA688
  • scrollbarSlider.background#00BFA644
  • scrollbarSlider.hoverBackground#00BFA666
  • sideBar.background#F2E9DE
  • sideBar.foreground#3B3A39
  • sideBarSectionHeader.background#E8DDCC
  • sideBarSectionHeader.foreground#A380B2
  • sideBarTitle.foreground#00BFA6
  • statusBar.background#E8DDCC
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#3B3A39
  • statusBar.noFolderBackground#F2E9DE
  • statusBarItem.hoverBackground#00BFA640
  • tab.activeBackground#FAF4E6
  • tab.activeBorder#00BFA6
  • tab.activeForeground#3B3A39
  • tab.border#E0D5C5
  • tab.inactiveBackground#F2E9DE
  • tab.inactiveForeground#A380B2
  • terminal.ansiBlue#3A78C2
  • terminal.ansiBrightBlue#5C9DD9
  • terminal.ansiBrightCyan#5AE4D0
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#C094D9
  • terminal.ansiBrightRed#FF8A75
  • terminal.ansiBrightYellow#FFD75F
  • terminal.ansiCyan#00BFA6
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#A380B2
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB400
  • terminal.background#FAF4E6
  • terminal.foreground#3B3A39
  • titleBar.activeBackground#F2E9DE
  • titleBar.activeForeground#3B3A39
  • titleBar.inactiveBackground#FAF4E6
  • titleBar.inactiveForeground#A380B2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8894italic
string, string.quoted, string.template#FFB400
keyword, storage.type, storage.modifier#00BFA6bold
keyword.operator, punctuation.accessor#00BFA6
variable, variable.other#3B3A39
variable.parameter#A380B2italic
entity.name.function, support.function#FF6F61
meta.function-call#FF6F61
entity.name.class, entity.name.type.class, support.class#A380B2bold
entity.name.type, support.type#3A78C2
entity.name.type.interface#3A78C2italic
constant.numeric#8BC34A
constant, constant.language, constant.character#A380B2
constant.language.boolean#8BC34Abold
variable.other.property, support.variable.property#3B3A39
meta.object-literal.key#A380B2
entity.name.tag, punctuation.definition.tag#00BFA6
entity.other.attribute-name#A380B2italic
punctuation, meta.brace#3B3A39
string.regexp#FFB400
constant.character.escape#A380B2
meta.decorator, punctuation.decorator#FFB400
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#00BFA6bold
markup.bold#FF6F61bold
markup.italic#A380B2italic
markup.underline.link#8BC34A
markup.inline.raw, markup.fenced_code#3A78C2
support.type.property-name.json#00BFA6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A380B2
support.type.property-name.css#3A78C2
support.constant.property-value.css#FFB400