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.background#020202
  • activityBar.foreground#4EC9B0
  • activityBar.inactiveForeground#6FCFB080
  • activityBarBadge.background#C586C0
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4EC9B0
  • badge.foreground#FFFFFF
  • button.background#4EC9B0
  • button.foreground#FFFFFF
  • button.hoverBackground#6FCFB0
  • dropdown.background#020202
  • dropdown.border#0A0A0A
  • dropdown.foreground#D4D4D4
  • editor.background#020202
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#4EC9B019
  • editor.lineHighlightBackground#0A0A0A
  • editor.selectionBackground#4EC9B033
  • editorCursor.foreground#C586C0
  • editorIndentGuide.activeBackground1#4EC9B0
  • editorIndentGuide.background1#0A0A0A
  • input.background#0A0A0A
  • input.border#0A0A0A
  • input.foreground#D4D4D4
  • inputOption.activeBorder#4EC9B0
  • list.activeSelectionBackground#4EC9B033
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#4EC9B0
  • list.hoverBackground#0A0A0A
  • list.inactiveSelectionBackground#0A0A0A
  • panel.background#020202
  • panel.border#0A0A0A
  • panelTitle.activeForeground#4EC9B0
  • panelTitle.inactiveForeground#D4D4D4
  • sideBar.background#020202
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#D4D4D4
  • sideBarTitle.foreground#4EC9B0
  • statusBar.background#020202
  • statusBar.debuggingBackground#C586C0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#4EC9B0
  • statusBar.noFolderBackground#020202
  • tab.activeBackground#020202
  • tab.activeBorderTop#4EC9B0
  • tab.activeForeground#D4D4D4
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#569CD6
  • terminal.ansiBrightBlack#0A0A0A
  • terminal.ansiBrightBlue#6FB9FF
  • terminal.ansiBrightCyan#B5DCFE
  • terminal.ansiBrightGreen#6FCFB0
  • terminal.ansiBrightMagenta#D7BAFF
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#DCDCAA
  • terminal.ansiCyan#9CDCFE
  • terminal.ansiGreen#4EC9B0
  • terminal.ansiMagenta#C586C0
  • terminal.ansiRed#F44747
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#CE9178
  • terminal.background#020202
  • terminal.foreground#D4D4D4
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#D4D4D4
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#D4D4D480

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A9955
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#C586C0
variable, string constant.other.placeholder, variable.other.object#9CDCFE
constant.other.color#CE9178
invalid, invalid.illegal#F44747
string, constant.other.symbol#CE9178
constant.numeric#DCDCAA
entity.name.function, meta.function-call, support.function, variable.function#DCDCAA
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.class#4EC9B0
meta.method.declaration, meta.method-call#DCDCAA
variable.other.property, variable.other.object.property#9CDCFE
variable.other.constant#4FC1FF
entity.name.import, entity.name.package, keyword.control.import, keyword.control.export#C586C0
variable.language#569CD6
variable.parameter#9CDCFE
keyword.operator#D4D4D4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#569CD6
entity.other.attribute-name, meta.tag.inline.any.html#9CDCFE
entity.other.attribute-name.class#DCDCAA
source.sass keyword.control#4EC9B0
markup.heading#569CD6
markup.underline.link#4EC9B0
markup.bold#CE9178bold
markup.italic#C586C0italic
Grank by Emmanuel Akala - VS Code Theme