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.

  • activityBarBadge.background#282c34
  • diffEditor.insertedTextBackground#2b3c3d
  • diffEditor.removedTextBackground#3a3037
  • editor.background#282c34
  • editor.findMatchBackground#3e4452
  • editor.findMatchHighlightBackground#3e4452
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c323c
  • editor.renderLineHighlight#2c323c
  • editor.selectionBackground#3e4452
  • editor.selectionHighlightBackground#3e4452
  • editor.wordHighlightBackground#3e4452
  • editor.wordHighlightStrongBackground#3e4452
  • editorBracketMatch.background#3e4452
  • editorCodeLens.foreground#636d83
  • editorCursor.foreground#abb2bf
  • editorGroup.border#1e2127
  • editorGroup.dropBackground#ffffff00
  • editorGroup.emptyBackground#1e2127
  • editorGroupHeader.tabsBackground#14161a
  • editorGroupHeader.tabsBorder#282c34
  • editorIndentGuide.activeBackground#0a0b0d
  • editorIndentGuide.background#0a0b0d
  • editorLineNumber.activeForeground#636d83
  • editorLineNumber.foreground#636d83
  • editorRuler.foreground#636d83
  • editorWhitespace.foreground#636d83
  • gitDecoration.addedResourceForeground#43d08a
  • gitDecoration.deletedResourceForeground#e05252
  • gitDecoration.modifiedResourceForeground#e0c285
  • gitDecoration.untrackedResourceForeground#43d08a
  • panel.background#1e2127
  • panel.border#1e2127
  • panelTitle.activeBorder#56b6c2
  • panelTitle.activeForeground#abb2bf
  • panelTitle.inactiveForeground#636d83
  • prompt.background#1e2127
  • prompt.border#0a0b0d
  • prompt.foreground#abb2bf
  • prompt.inputBackground#282c34
  • prompt.inputBorder#0a0b0d
  • prompt.inputForeground#abb2bf
  • scollbar.shadow#ffffff00
  • selection.background#3e4452
  • sideBar.background#14161a
  • sidebar.border#14161a
  • sideBar.foreground#abb2bf
  • sidebar.selectionBackground#3e4452
  • sidebar.selectionForeground#abb2bf
  • sideBarSectionHeader.background#14161a
  • sideBarSectionHeader.foreground#abb2bf
  • sideBarTitle.foreground#abb2bf
  • statusBar.background#1e2127
  • statusBar.foreground#abb2bf
  • tab.activeBackground#14161a
  • tab.activeForeground#abb2bf
  • tab.border#282c34
  • tab.inactiveBackground#14161a
  • tab.inactiveForeground#abb2bf
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#282c34
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#dcdfe4
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#dcdfe4
  • terminal.ansiYellow#e5c07b
  • terminal.background#1e2127
  • terminal.foreground#abb2bf
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, expression#55606d
comment, punctuation.definition.comment#55606ditalic
variable, string constant.other.placeholder#e06c75
constant.other.color#abb2bf
invalid, invalid.illegal#abb2bf
keyword, storage.type.js, storage.type.function.js, variable.other.flowtype.js, storage.type.extends.js, storage.type.function.js, storage.type.class.js, meta.class.tsx#55606d
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.brace.square.tsx, meta.type.tuple.tsx, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#55606d
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#abb2bf
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#abb2bf
meta.block variable.other#e06c75
support.other.variable, string.other.link#e06c75
variable.parameter, keyword.other.unit, keyword.other, meta.object-literal.key.tsx, meta.object.member.tsx#abb2bf
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, constant.numeric, constant.language, support.constant, constant.character, constant.escape#c8ae9d
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#c8ae9d
support.type#c8ae9d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d6e9ff
variable.language#55606ditalic
entity.name.method.js#d6e9ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#d6e9ff
entity.other.attribute-name#d6e9ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d6e9ffitalic
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c8ae9ditalic
source.js constant.other.object.key.js string.unquoted.label.js#c8ae9ditalic
meta.jsx.children.tsx, entity.name.tag.tsx#d6e9ff
entity.other.attribute-name.tsx#abb2bf
meta.brace.round.ts#55606d
storage.type.tsx, meta.var.expr.tsx, keyword.control, keyword.control.import.tsx, keyword.control.from.tsx, storage.type.type.tsx, meta.type.declaration.tsx, meta.import.tsx#6e88a6
keyword.other.debugger#56b6c2bold
variable, variable.parameter.tsx, variable.object.property.tsx, variable.other.constant.tsx, variable.other.object.tsx, variable.other#e06c75
two-firewatch by hehk - VS Code Theme