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#4677B5
  • activityBar.background#EDEDED
  • activityBar.foreground#424242
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F00
  • badge.foreground#FFFFFF
  • button.background#4677B5
  • button.foreground#FFFFFF
  • button.hoverBackground#5C9EEB
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF59D
  • editor.foreground#212121
  • editor.lineHighlightBackground#DDEFFF
  • editor.lineHighlightBorder#C0DEFF
  • editor.selectionBackground#B3D7FF
  • editor.selectionHighlightBackground#CBE5FF
  • editorBracketMatch.background#FFD54F
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#F9F9F9
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#5C9EEB
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#4677B5
  • list.activeSelectionBackground#B3D7FF
  • list.activeSelectionForeground#212121
  • list.focusBackground#D0E8FF
  • list.highlightForeground#FF6F00
  • list.hoverBackground#E3F2FD
  • minimap.background#F0F0F0
  • minimapSlider.activeBackground#AAAAAA
  • minimapSlider.background#CCCCCC
  • minimapSlider.hoverBackground#BBBBBB
  • panel.background#F9F9F9
  • panel.border#E0E0E0
  • panelTitle.activeBorder#4677B5
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#AAAAAA
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB
  • sideBar.background#F4F4F4
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#EDEDED
  • sideBarSectionHeader.foreground#424242
  • sideBarTitle.foreground#424242
  • statusBar.background#4677B5
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#6DB5A5
  • statusBarItem.hoverBackground#5C9EEB
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#4677B5
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4677B5
  • terminal.ansiBrightBlue#5C9EEB
  • terminal.ansiBrightCyan#80CBC4
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#CE93D8
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFEE58
  • terminal.ansiCyan#6DB5A5
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFC107
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F9F9F9
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#8BC34A
keyword, storage.type, storage.modifier#4677B5bold
keyword.operator, punctuation.accessor#FF6F00
variable, variable.other#6DB5A5
variable.parameter#6DB5A5italic
entity.name.function, support.function#9C27B0
meta.function-call#5C9EEB
entity.name.class, entity.name.type.class, support.class#FF8C00bold
entity.name.type, support.type#009688
entity.name.type.interface#009688italic
constant.numeric#FF5722
constant, constant.language, constant.character#E91E63
constant.language.boolean#FF6F00bold
variable.other.property, support.variable.property#795548
meta.object-literal.key#4677B5
entity.name.tag, punctuation.definition.tag#E53935
entity.other.attribute-name#FF8C00italic
punctuation, meta.brace#BDBDBD
string.regexp#8BC34A
constant.character.escape#E91E63
meta.decorator, punctuation.decorator#009688
invalid, invalid.illegal#D50000strikethrough
markup.heading, entity.name.section#4677B5bold
markup.bold#FF6F00bold
markup.italic#6DB5A5italic
markup.underline.link#5C9EEB
markup.inline.raw, markup.fenced_code#9C27B0
support.type.property-name.json#4677B5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9C27B0
support.type.property-name.css#009688
support.constant.property-value.css#FF8C00
themesmith by CyberBoost - VS Code Theme