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#ff6b6b
  • activityBar.background#25253f
  • activityBar.foreground#d0d0ff
  • activityBarBadge.background#ff6b6b
  • activityBarBadge.foreground#ffffff
  • badge.background#ff6b6b
  • badge.foreground#ffffff
  • button.background#ff6b6b
  • button.foreground#ffffff
  • button.hoverBackground#ff8c8c
  • dropdown.background#25253f
  • dropdown.border#3a3a66
  • dropdown.foreground#e0e0ff
  • editor.background#1e1e2f
  • editor.findMatchBackground#ff6b6b55
  • editor.findMatchHighlightBackground#ff6b6b33
  • editor.foreground#c0c0d0
  • editor.lineHighlightBackground#2a2a45
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#403f5e
  • editor.selectionHighlightBackground#504f70
  • editorBracketMatch.background#ff6b6b33
  • editorBracketMatch.border#ff6b6b88
  • editorCursor.foreground#ff6b6b
  • editorGroupHeader.tabsBackground#1e1e2f
  • editorIndentGuide.activeBackground#777799
  • editorIndentGuide.background#444466
  • editorLineNumber.activeForeground#c0c0ff
  • editorLineNumber.foreground#777799
  • editorWhitespace.foreground#555577
  • focusBorder#ff6b6b
  • gitDecoration.conflictingResourceForeground#ff8c8c
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.modifiedResourceForeground#8acb88
  • gitDecoration.untrackedResourceForeground#6a9fb5
  • input.background#25253f
  • input.border#3a3a66
  • input.foreground#e0e0ff
  • input.placeholderForeground#777799
  • inputOption.activeBorder#ff6b6b
  • list.activeSelectionBackground#403f5e
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#403f5e
  • list.highlightForeground#ff6b6b
  • list.hoverBackground#2a2a45
  • minimap.background#1e1e2f
  • minimapSlider.activeBackground#777799aa
  • minimapSlider.background#44446666
  • minimapSlider.hoverBackground#55557788
  • panel.background#1e1e2f
  • panel.border#2a2a45
  • panelTitle.activeBorder#ff6b6b
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#aaaaaa
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777799aa
  • scrollbarSlider.background#44446666
  • scrollbarSlider.hoverBackground#55557788
  • sideBar.background#21213c
  • sideBar.foreground#b0b0c5
  • sideBarSectionHeader.background#2a2a45
  • sideBarSectionHeader.foreground#c0c0ff
  • sideBarTitle.foreground#e0e0ff
  • statusBar.background#2b2b4d
  • statusBar.debuggingBackground#ff6b6b
  • statusBar.foreground#e0e0ff
  • statusBar.noFolderBackground#2b2b4d
  • statusBarItem.hoverBackground#3a3a66
  • tab.activeBackground#25253f
  • tab.activeBorder#ff6b6b
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.inactiveBackground#1e1e2f
  • tab.inactiveForeground#a0a0c0
  • terminal.ansiBlue#6a9fb5
  • terminal.ansiBrightBlue#8abfdc
  • terminal.ansiBrightCyan#9ed9d9
  • terminal.ansiBrightGreen#a9d9a9
  • terminal.ansiBrightMagenta#c8a4e0
  • terminal.ansiBrightRed#ff8c8c
  • terminal.ansiBrightYellow#e0c080
  • terminal.ansiCyan#7fbfbf
  • terminal.ansiGreen#8acb88
  • terminal.ansiMagenta#b291c9
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#d3b974
  • terminal.background#1e1e2f
  • terminal.foreground#c0c0d0
  • titleBar.activeBackground#181828
  • titleBar.activeForeground#c0c0ff
  • titleBar.inactiveBackground#141424
  • titleBar.inactiveForeground#9090a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777799italic
string, string.quoted, string.template#8acb88—
keyword, storage.type, storage.modifier#ff6b6bbold
keyword.operator, punctuation.accessor#c0c0ff—
variable, variable.other#d0d0ff—
variable.parameter#c0c0ffitalic
entity.name.function, support.function#6a9fb5—
meta.function-call#6a9fb5—
entity.name.class, entity.name.type.class, support.class#d0b0ffbold
entity.name.type, support.type#b291c9—
entity.name.type.interface#b291c9italic
constant.numeric#d3b974—
constant, constant.language, constant.character#b291c9—
constant.language.boolean#ff6b6bbold
variable.other.property, support.variable.property#c0c0ff—
meta.object-literal.key#c0c0ff—
entity.name.tag, punctuation.definition.tag#ff6b6b—
entity.other.attribute-name#c0c0ffitalic
punctuation, meta.brace#c0c0d0—
string.regexp#d3b974—
constant.character.escape#ff8c8c—
meta.decorator, punctuation.decorator#6a9fb5—
invalid, invalid.illegal#ff6b6bstrikethrough
markup.heading, entity.name.section#d0d0ffbold
markup.bold#d0d0ffbold
markup.italic#d0d0ffitalic
markup.underline.link#6a9fb5—
markup.inline.raw, markup.fenced_code#8acb88—
support.type.property-name.json#d0b0ff—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6a9fb5—
support.type.property-name.css#8acb88—
support.constant.property-value.css#d3b974—