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#3AB4C5
  • activityBar.background#FAFAFA
  • activityBar.foreground#3AB4C5
  • activityBarBadge.background#3AB4C5
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3AB4C5
  • badge.foreground#FFFFFF
  • button.background#3AB4C5
  • button.foreground#FFFFFF
  • button.hoverBackground#3AB4C580
  • dropdown.background#F0F0F0
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#64A12D44
  • editor.findMatchHighlightBackground#64A12D22
  • editor.foreground#212121
  • editor.lineHighlightBackground#3AB4C520
  • editor.lineHighlightBorder#3AB4C540
  • editor.selectionBackground#3AB4C560
  • editor.selectionHighlightBackground#3AB4C530
  • editorBracketMatch.background#3AB4C540
  • editorBracketMatch.border#3AB4C5
  • editorCursor.foreground#3AB4C5
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#CFD8DC
  • editorLineNumber.activeForeground#3AB4C5
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#B0BEC5
  • focusBorder#3AB4C5
  • gitDecoration.conflictingResourceForeground#F4A261
  • gitDecoration.deletedResourceForeground#D72638
  • gitDecoration.modifiedResourceForeground#3AB4C5
  • gitDecoration.untrackedResourceForeground#64A12D
  • input.background#F0F0F0
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#3AB4C5
  • list.activeSelectionBackground#3AB4C540
  • list.activeSelectionForeground#212121
  • list.focusBackground#3AB4C540
  • list.highlightForeground#3AB4C5
  • list.hoverBackground#3AB4C530
  • minimap.background#F0F0F0
  • minimapSlider.activeBackground#3AB4C540
  • minimapSlider.background#9E9E9E22
  • minimapSlider.hoverBackground#9E9E9E44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#3AB4C5
  • panelTitle.activeForeground#3AB4C5
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#3AB4C5CC
  • scrollbarSlider.background#9E9E9EAA
  • scrollbarSlider.hoverBackground#9E9E9ECC
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#EBEBEB
  • sideBarSectionHeader.foreground#3AB4C5
  • sideBarTitle.foreground#3AB4C5
  • statusBar.background#3AB4C5
  • statusBar.debuggingBackground#64A12D
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#EBEBEB
  • statusBarItem.hoverBackground#3AB4C580
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#3AB4C5
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#3AB4C5
  • terminal.ansiBrightBlue#3AB4C5
  • terminal.ansiBrightCyan#3AB4C5
  • terminal.ansiBrightGreen#64A12D
  • terminal.ansiBrightMagenta#E07A5F
  • terminal.ansiBrightRed#D72638
  • terminal.ansiBrightYellow#F4A261
  • terminal.ansiCyan#3AB4C5
  • terminal.ansiGreen#64A12D
  • terminal.ansiMagenta#E07A5F
  • terminal.ansiRed#D72638
  • terminal.ansiYellow#F4A261
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#2A9D8F—
keyword, storage.type, storage.modifier#3AB4C5bold
keyword.operator, punctuation.accessor#3AB4C5—
variable, variable.other#212121—
variable.parameter#64A12Ditalic
entity.name.function, support.function#3AB4C5—
meta.function-call#3AB4C5—
entity.name.class, entity.name.type.class, support.class#3AB4C5bold
entity.name.type, support.type#9E9E9E—
entity.name.type.interface#9E9E9Eitalic
constant.numeric#64A12D—
constant, constant.language, constant.character#64A12D—
constant.language.boolean#3AB4C5bold
variable.other.property, support.variable.property#212121—
meta.object-literal.key#3AB4C5—
entity.name.tag, punctuation.definition.tag#3AB4C5—
entity.other.attribute-name#9E9E9Eitalic
punctuation, meta.brace#9E9E9E—
string.regexp#64A12D—
constant.character.escape#9E9E9E—
meta.decorator, punctuation.decorator#E07A5F—
invalid, invalid.illegal#D72638strikethrough
markup.heading, entity.name.section#3AB4C5bold
markup.bold#3AB4C5bold
markup.italic#9E9E9Eitalic
markup.underline.link#3AB4C5—
markup.inline.raw, markup.fenced_code#2A9D8F—
support.type.property-name.json#3AB4C5—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3AB4C5—
support.type.property-name.css#2A9D8F—
support.constant.property-value.css#3AB4C5—
themesmith by CyberBoost - VS Code Theme