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
themesmith by CyberBoost - VS Code Theme