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#0066AA
  • activityBar.background#F4F4F4
  • activityBar.foreground#2C2C2C
  • activityBarBadge.background#0066AA
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0066AA
  • badge.foreground#FFFFFF
  • button.background#0066AA
  • button.foreground#FFFFFF
  • button.hoverBackground#005A99
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2C2C2C
  • editor.background#FAFAFA
  • editor.findMatchBackground#B0D5EB
  • editor.findMatchHighlightBackground#9AC0D9
  • editor.foreground#2C2C2C
  • editor.lineHighlightBackground#F0F8FF
  • editor.lineHighlightBorder#E0E0E0
  • editor.selectionBackground#CDE6F5
  • editor.selectionHighlightBackground#B0D5EB
  • editorBracketMatch.background#D0EFFF
  • editorBracketMatch.border#0066AA
  • editorCursor.foreground#0066AA
  • editorGroupHeader.tabsBackground#F4F4F4
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#0066AA
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#0066AA
  • gitDecoration.conflictingResourceForeground#C68F00
  • gitDecoration.deletedResourceForeground#D11212
  • gitDecoration.modifiedResourceForeground#0066AA
  • gitDecoration.untrackedResourceForeground#2E7D32
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2C2C2C
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#0066AA
  • list.activeSelectionBackground#CDE6F5
  • list.activeSelectionForeground#0066AA
  • list.focusBackground#D0E8F5
  • list.highlightForeground#0099CC
  • list.hoverBackground#E0F2FF
  • minimap.background#F9F9F9
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#CCCCCC
  • minimapSlider.hoverBackground#B0B0B0
  • panel.background#F9F9F9
  • panel.border#E0E0E0
  • panelTitle.activeBorder#0066AA
  • panelTitle.activeForeground#0066AA
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#999999
  • scrollbarSlider.background#CCCCCC
  • scrollbarSlider.hoverBackground#B0B0B0
  • sideBar.background#F9F9F9
  • sideBar.foreground#2C2C2C
  • sideBarSectionHeader.background#F4F4F4
  • sideBarSectionHeader.foreground#0066AA
  • sideBarTitle.foreground#2C2C2C
  • statusBar.background#EEEEEE
  • statusBar.debuggingBackground#0099CC
  • statusBar.foreground#2C2C2C
  • statusBar.noFolderBackground#EDEDED
  • statusBarItem.hoverBackground#D0E8F5
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#0066AA
  • tab.activeForeground#0066AA
  • tab.border#D0D0D0
  • tab.inactiveBackground#F4F4F4
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#0066AA
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#66CCFF
  • terminal.ansiBrightGreen#66FF66
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#0099CC
  • terminal.ansiGreen#2E7D32
  • terminal.ansiMagenta#B200B2
  • terminal.ansiRed#D11212
  • terminal.ansiYellow#C68F00
  • terminal.background#FAFAFA
  • terminal.foreground#2C2C2C
  • titleBar.activeBackground#EDEDED
  • titleBar.activeForeground#2C2C2C
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#2E7D32
keyword, storage.type, storage.modifier#0066AAbold
keyword.operator, punctuation.accessor#0099CC
variable, variable.other#2C2C2C
variable.parameter#0066AAitalic
entity.name.function, support.function#0099CC
meta.function-call#0066AA
entity.name.class, entity.name.type.class, support.class#0066AAbold
entity.name.type, support.type#0099CC
entity.name.type.interface#0066AAitalic
constant.numeric#0066AA
constant, constant.language, constant.character#0099CC
constant.language.boolean#0066AAbold
variable.other.property, support.variable.property#0066AA
meta.object-literal.key#0099CC
entity.name.tag, punctuation.definition.tag#0066AA
entity.other.attribute-name#0099CCitalic
punctuation, meta.brace#2C2C2C
string.regexp#0099CC
constant.character.escape#0066AA
meta.decorator, punctuation.decorator#0099CC
invalid, invalid.illegal#D11212strikethrough
markup.heading, entity.name.section#0066AAbold
markup.bold#0066AAbold
markup.italic#0099CCitalic
markup.underline.link#0099CC
markup.inline.raw, markup.fenced_code#2E7D32
support.type.property-name.json#0066AA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0066AA
support.type.property-name.css#0099CC
support.constant.property-value.css#0099CC
themesmith by CyberBoost - VS Code Theme