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#E4002B
  • activityBar.background#f5f5f5
  • activityBar.foreground#333333
  • activityBarBadge.background#E4002B
  • activityBarBadge.foreground#ffffff
  • badge.background#E4002B
  • badge.foreground#ffffff
  • button.background#E4002B
  • button.foreground#ffffff
  • button.hoverBackground#FF3333
  • dropdown.background#ffffff
  • dropdown.border#cccccc
  • dropdown.foreground#333333
  • editor.background#ffffff
  • editor.findMatchBackground#FFCC00
  • editor.findMatchHighlightBackground#FFE066
  • editor.foreground#333333
  • editor.lineHighlightBackground#fff7cc
  • editor.lineHighlightBorder#ffe680
  • editor.selectionBackground#FFEB99
  • editor.selectionHighlightBackground#FFF2CC
  • editorBracketMatch.background#FFE60033
  • editorBracketMatch.border#FFE600
  • editorCursor.foreground#E4002B
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorIndentGuide.activeBackground#b0b0b0
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#333333
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FFE600
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#E4002B
  • gitDecoration.modifiedResourceForeground#007ACC
  • gitDecoration.untrackedResourceForeground#008000
  • input.background#ffffff
  • input.border#cccccc
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#E4002B
  • list.activeSelectionBackground#FFE600
  • list.activeSelectionForeground#000000
  • list.focusBackground#FFE60033
  • list.highlightForeground#E4002B
  • list.hoverBackground#FFFAE6
  • minimap.background#ffffff
  • minimapSlider.activeBackground#888888
  • minimapSlider.background#cccccc80
  • minimapSlider.hoverBackground#aaaaaa
  • panel.background#f5f5f5
  • panel.border#d0d0d0
  • panelTitle.activeBorder#E4002B
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#888888
  • scrollbarSlider.background#cccccc80
  • scrollbarSlider.hoverBackground#aaaaaa
  • sideBar.background#f9f9f9
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#f0f0f0
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#E4002B
  • statusBar.debuggingBackground#FF8C00
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#CCCCCC
  • statusBarItem.hoverBackground#FFCC00
  • tab.activeBackground#ffffff
  • tab.activeBorder#FFE600
  • tab.activeForeground#E4002B
  • tab.border#d0d0d0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#666666
  • terminal.ansiBlue#007ACC
  • terminal.ansiBrightBlue#0099FF
  • terminal.ansiBrightCyan#5FD7FF
  • terminal.ansiBrightGreen#00FF00
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF3333
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#3A96DD
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#C71585
  • terminal.ansiRed#E4002B
  • terminal.ansiYellow#FFE600
  • terminal.background#ffffff
  • terminal.foreground#333333
  • titleBar.activeBackground#FFE600
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#fff8b3
  • titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#FFE600
keyword, storage.type, storage.modifier#E4002Bbold
keyword.operator, punctuation.accessor#E4002B
variable, variable.other#007ACC
variable.parameter#FF8C00italic
entity.name.function, support.function#008000
meta.function-call#008000
entity.name.class, entity.name.type.class, support.class#C71585bold
entity.name.type, support.type#20B2AA
entity.name.type.interface#20B2AAitalic
constant.numeric#FF8C00
constant, constant.language, constant.character#20B2AA
constant.language.boolean#E4002Bbold
variable.other.property, support.variable.property#007ACC
meta.object-literal.key#20B2AA
entity.name.tag, punctuation.definition.tag#E4002B
entity.other.attribute-name#FF8C00italic
punctuation, meta.brace#666666
string.regexp#C71585
constant.character.escape#FF8C00
meta.decorator, punctuation.decorator#3A96DD
invalid, invalid.illegal#FF3333strikethrough
markup.heading, entity.name.section#E4002Bbold
markup.bold#E4002Bbold
markup.italic#666666italic
markup.underline.link#007ACC
markup.inline.raw, markup.fenced_code#008000
support.type.property-name.json#20B2AA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C71585
support.type.property-name.css#007ACC
support.constant.property-value.css#008000
themesmith by CyberBoost - VS Code Theme