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#000000
  • activityBar.foreground#eeeeee
  • activityBarBadge.background#0070f3
  • badge.background#0070f3
  • badge.foreground#ffffff
  • button.background#0070f3
  • button.foreground#ffffff
  • button.hoverBackground#0761d1
  • dropdown.background#000000
  • dropdown.border#3a3a3a
  • editor.background#000000
  • editor.foreground#eeeeee
  • editor.lineHighlightBackground#1a1a1a
  • editor.selectionBackground#1f3e70
  • editor.selectionHighlightBackground#1f3e7080
  • editorBracketHighlight.foreground1#eeeeee
  • editorBracketHighlight.foreground2#eeeeee
  • editorBracketHighlight.foreground3#eeeeee
  • editorBracketHighlight.foreground4#eeeeee
  • editorBracketHighlight.foreground5#eeeeee
  • editorBracketHighlight.foreground6#eeeeee
  • editorBracketHighlight.unexpectedBracket.foreground#eeeeee
  • editorBracketMatch.background#1f3e7080
  • editorBracketMatch.border#1f3e70
  • editorCursor.foreground#eeeeee
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.background#000000
  • editorGutter.modifiedBackground#00cb50
  • editorIndentGuide.activeBackground#505050
  • editorIndentGuide.background#3a3a3a
  • editorLineNumber.activeForeground#eeeeee
  • editorLineNumber.foreground#a0a0a0
  • editorWhitespace.foreground#3a3a3a
  • gitDecoration.addedResourceForeground#00cb50
  • gitDecoration.modifiedResourceForeground#00cb50
  • gitDecoration.stageDeletedResourceForeground#ff4d8d
  • gitDecoration.stageModifiedResourceForeground#00cb50
  • gitDecoration.untrackedResourceForeground#00cb50
  • input.background#1a1a1a
  • input.border#3a3a3a
  • input.foreground#eeeeee
  • list.activeSelectionBackground#1f3e70
  • list.activeSelectionForeground#eeeeee
  • list.errorForeground#ff4d8d
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#2a2a2a
  • list.warningForeground#ffcc47
  • panel.background#000000
  • panel.border#1a1a1a
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#3a3a3a80
  • scrollbarSlider.hoverBackground#505050
  • sideBar.background#000000
  • sideBar.border#1a1a1a
  • sideBar.foreground#eeeeee
  • sideBarSectionHeader.background#000000
  • sideBarTitle.foreground#eeeeee
  • statusBar.background#000000
  • statusBar.debuggingBackground#000000
  • statusBar.foreground#eeeeee
  • statusBar.noFolderBackground#000000
  • statusBarItem.remoteBackground#0070f3
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#000000
  • tab.activeForeground#eeeeee
  • tab.activeModifiedBorder#00cb50
  • tab.border#1a1a1a
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#a0a0a0
  • tab.inactiveModifiedBorder#00cb50
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#47A8FF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#47A8FF
  • terminal.ansiBrightCyan#47A8FF
  • terminal.ansiBrightGreen#00CB50
  • terminal.ansiBrightMagenta#C473FC
  • terminal.ansiBrightRed#FF4D8D
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCC47
  • terminal.ansiCyan#0070f3
  • terminal.ansiGreen#00CB50
  • terminal.ansiMagenta#C473FC
  • terminal.ansiRed#FF4D8D
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#FFCC47
  • terminal.background#000000
  • terminal.foreground#eeeeee
  • terminal.selectionBackground#1f3e70
  • terminalCursor.background#000000
  • terminalCursor.foreground#eeeeee
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#eeeeee
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a0a0a0
keyword, storage.modifier, storage.type, keyword.control#ff4d8d
keyword.operator#ff4d8d
string, string.quoted, punctuation.definition.string.begin, punctuation.definition.string.end#00cb50
constant.character, variable.language.this#A6B5FF
constant.language#ffffff
variable.other.constant#47a8ff
variable.other.readwrite#eeeeee
variable.other.object#47a8ff
variable.other.readwrite.alias#eeeeee
entity.name.function, support.function, meta.function-call#c473fc
variable.parameter#eeeeee
entity.name.tag#00cb50
support.class.component#47a8ff
entity.other.attribute-name#c473fc
string.regexp, string.interpolated#00cb50
punctuation, meta.brace, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag#eeeeee
constant.numeric, constant.numeric.decimal#ffffff
support.variable.property, variable.other.property#eeeeee
support.type.primitive, support.type#47a8ff
entity.name.type.tsx, meta.type.annotation.tsx, meta.var-single-variable.expr.tsx, entity.name#C473FC
punctuation.separator.key-value.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.var.expr.tsx, source.tsx#FF4D8D
meta.object-literal.key.tsx#eeeeee
punctuation.definition.string.template.begin.tsx, punctuation.definition.string.template.end.tsx, string.template.tsx, meta.embedded.expression.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.jsx.children.tsx, meta.block.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx#00CB50
punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx, meta.template.expression.tsx, string.template.tsx, meta.embedded.expression.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.jsx.children.tsx, meta.block.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx#FF4D8D
string.template.tsx, meta.embedded.expression.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.jsx.children.tsx, meta.block.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx#00CB50
markup.underline.link, string.other.link#00cb50
markup.bold#ff4d8dbold
markup.italicitalic
markup.heading, entity.name.section#c473fcbold
markup.deleted#ff8c85
markup.inserted#70d9a8
invalid, invalid.illegal#ff0000
meta.tag.sgml.doctype, meta.tag.metadata#a0a0a0
support.type.property-name.json#FF4D8D