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