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#3A86FF
  • activityBar.background#E3F2FD
  • activityBar.foreground#3A86FF
  • activityBarBadge.background#FF006E
  • activityBarBadge.foreground#F5FCFF
  • badge.background#FF006E
  • badge.foreground#F5FCFF
  • button.background#3A86FF
  • button.foreground#F5FCFF
  • button.hoverBackground#3A86FF88
  • dropdown.background#E3F2FD
  • dropdown.border#3A86FF
  • dropdown.foreground#1A1A2E
  • editor.background#F5FCFF
  • editor.findMatchBackground#FF006E66
  • editor.findMatchHighlightBackground#FF006E33
  • editor.foreground#1A1A2E
  • editor.lineHighlightBackground#3A86FF15
  • editor.lineHighlightBorder#3A86FF30
  • editor.selectionBackground#FFB80055
  • editor.selectionHighlightBackground#FFB80033
  • editorBracketMatch.background#FFB80033
  • editorBracketMatch.border#FFB800
  • editorCursor.foreground#FF006E
  • editorGroupHeader.tabsBackground#F5FCFF
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#3A86FF
  • editorLineNumber.foreground#CCCCCC
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#3A86FF
  • gitDecoration.conflictingResourceForeground#FFB800
  • gitDecoration.deletedResourceForeground#FF3740
  • gitDecoration.modifiedResourceForeground#00BFA5
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#E3F2FD
  • input.border#3A86FF
  • input.foreground#1A1A2E
  • input.placeholderForeground#CCCCCC
  • inputOption.activeBorder#3A86FF
  • list.activeSelectionBackground#3A86FF33
  • list.activeSelectionForeground#1A1A2E
  • list.focusBackground#3A86FF44
  • list.highlightForeground#FF006E
  • list.hoverBackground#3A86FF22
  • minimap.background#F5FCFF
  • minimapSlider.activeBackground#3A86FF66
  • minimapSlider.background#3A86FF22
  • minimapSlider.hoverBackground#3A86FF44
  • panel.background#F5FCFF
  • panel.border#E3F2FD
  • panelTitle.activeBorder#3A86FF
  • panelTitle.activeForeground#1A1A2E
  • panelTitle.inactiveForeground#6C757D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A86FF88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#E3F2FD
  • sideBar.foreground#1A1A2E
  • sideBarSectionHeader.background#E3F2FD
  • sideBarSectionHeader.foreground#FFB800
  • sideBarTitle.foreground#3A86FF
  • statusBar.background#F5FCFF
  • statusBar.debuggingBackground#FF006E
  • statusBar.foreground#1A1A2E
  • statusBar.noFolderBackground#E3F2FD
  • statusBarItem.hoverBackground#3A86FF33
  • tab.activeBackground#F5FCFF
  • tab.activeBorder#3A86FF
  • tab.activeForeground#1A1A2E
  • tab.border#E3F2FD
  • tab.inactiveBackground#E3F2FD
  • tab.inactiveForeground#6C757D
  • terminal.ansiBlue#3A86FF
  • terminal.ansiBrightBlue#5E97F6
  • terminal.ansiBrightCyan#33CCCC
  • terminal.ansiBrightGreen#33FF66
  • terminal.ansiBrightMagenta#FF33FF
  • terminal.ansiBrightRed#FF8844
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#FF006E
  • terminal.ansiRed#FF3740
  • terminal.ansiYellow#FFB800
  • terminal.background#F5FCFF
  • terminal.foreground#1A1A2E
  • titleBar.activeBackground#E3F2FD
  • titleBar.activeForeground#1A1A2E
  • titleBar.inactiveBackground#F5FCFF
  • titleBar.inactiveForeground#6C757D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C757Ditalic
string, string.quoted, string.template#00C853
keyword, storage.type, storage.modifier#3A86FFbold
keyword.operator, punctuation.accessor#00BFA5
variable, variable.other#1A1A2E
variable.parameter#00BFA5italic
entity.name.function, support.function#FF006E
meta.function-call#FFB800
entity.name.class, entity.name.type.class, support.class#D500F9bold
entity.name.type, support.type#FFB800
entity.name.type.interface#00BFA5italic
constant.numeric#FFB800
constant, constant.language, constant.character#FF3740
constant.language.boolean#00C853bold
variable.other.property, support.variable.property#00BFA5
meta.object-literal.key#3399FF
entity.name.tag, punctuation.definition.tag#3A86FF
entity.other.attribute-name#D500F9italic
punctuation, meta.brace#A0A0A0
string.regexp#FF3740
constant.character.escape#D500F9
meta.decorator, punctuation.decorator#FFB800
invalid, invalid.illegal#FF3740strikethrough
markup.heading, entity.name.section#3A86FFbold
markup.bold#FFB800bold
markup.italic#00BFA5italic
markup.underline.link#D500F9
markup.inline.raw, markup.fenced_code#00C853
support.type.property-name.json#3399FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF006E
support.type.property-name.css#00C853
support.constant.property-value.css#FFB800
themesmith by CyberBoost - VS Code Theme