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#455A64
  • activityBar.background#F5F0DE
  • activityBar.foreground#363636
  • activityBarBadge.background#455A64
  • activityBarBadge.foreground#FFF8E1
  • badge.background#455A64
  • badge.foreground#FFF8E1
  • button.background#455A64
  • button.foreground#FFF8E1
  • button.hoverBackground#455A66CC
  • dropdown.background#FAF7F0
  • dropdown.border#CCCCCC
  • dropdown.foreground#363636
  • editor.background#FFF8E1
  • editor.findMatchBackground#FFAB91AA
  • editor.findMatchHighlightBackground#FFAB9188
  • editor.foreground#363636
  • editor.lineHighlightBackground#E0E0C0
  • editor.lineHighlightBorder#D0D0B0
  • editor.selectionBackground#A5D6A7AA
  • editor.selectionHighlightBackground#A5D6A750
  • editorBracketMatch.background#FFCC80AA
  • editorBracketMatch.border#FFCC80
  • editorCursor.foreground#455A64
  • editorGroupHeader.tabsBackground#FFF8E1
  • editorIndentGuide.activeBackground#A89F8F
  • editorIndentGuide.background#C8C2B5
  • editorLineNumber.activeForeground#363636
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#C0B9A8
  • focusBorder#455A64
  • gitDecoration.conflictingResourceForeground#FFCA28
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.modifiedResourceForeground#5C6BC0
  • gitDecoration.untrackedResourceForeground#66BB6A
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#363636
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#455A64
  • list.activeSelectionBackground#455A6499
  • list.activeSelectionForeground#FFF8E1
  • list.focusBackground#455A6444
  • list.highlightForeground#455A64
  • list.hoverBackground#455A6433
  • minimap.background#FFF8E1
  • minimapSlider.activeBackground#455A6466
  • minimapSlider.background#455A6422
  • minimapSlider.hoverBackground#455A6444
  • panel.background#FFF8E1
  • panel.border#DAD5C5
  • panelTitle.activeBorder#455A64
  • panelTitle.activeForeground#363636
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B0A090CC
  • scrollbarSlider.background#B0A09044
  • scrollbarSlider.hoverBackground#B0A09088
  • sideBar.background#F7F3E8
  • sideBar.foreground#363636
  • sideBarSectionHeader.background#EDE8DC
  • sideBarSectionHeader.foreground#363636
  • sideBarTitle.foreground#363636
  • statusBar.background#455A64
  • statusBar.debuggingBackground#FF7043
  • statusBar.foreground#FFF8E1
  • statusBar.noFolderBackground#C0A090
  • statusBarItem.hoverBackground#455A6480
  • tab.activeBackground#FFF8E1
  • tab.activeBorder#455A64
  • tab.activeForeground#363636
  • tab.border#DAD5C5
  • tab.inactiveBackground#F5F5ED
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#5C6BC0
  • terminal.ansiBrightBlue#7986CB
  • terminal.ansiBrightCyan#4DB6AC
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#26A69A
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#EF5350
  • terminal.ansiYellow#FFCA28
  • terminal.background#FFF8E1
  • terminal.foreground#363636
  • titleBar.activeBackground#F0EADA
  • titleBar.activeForeground#363636
  • titleBar.inactiveBackground#E5DED0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#708090italic
string, string.quoted, string.template#009688—
keyword, storage.type, storage.modifier#455A64bold
keyword.operator, punctuation.accessor#6B8E23—
variable, variable.other#363636—
variable.parameter#6B8E23italic
entity.name.function, support.function#5C6BC0—
meta.function-call#5C6BC0—
entity.name.class, entity.name.type.class, support.class#455A64bold
entity.name.type, support.type#6B8E23—
entity.name.type.interface#6B8E23italic
constant.numeric#FF9800—
constant, constant.language, constant.character#455A64—
constant.language.boolean#455A64bold
variable.other.property, support.variable.property#5C6BC0—
meta.object-literal.key#5C6BC0—
entity.name.tag, punctuation.definition.tag#455A64—
entity.other.attribute-name#6B8E23italic
punctuation, meta.brace#363636—
string.regexp#FF9800—
constant.character.escape#AB47BC—
meta.decorator, punctuation.decorator#FFCA28—
invalid, invalid.illegal#F44336strikethrough
markup.heading, entity.name.section#455A64bold
markup.bold#455A64bold
markup.italic#6B8E23italic
markup.underline.link#5C6BC0—
markup.inline.raw, markup.fenced_code#009688—
support.type.property-name.json#5C6BC0—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCA28—
support.type.property-name.css#5C6BC0—
support.constant.property-value.css#009688—