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#21252b
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#4D78CC
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#21252b
  • editor.editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#61afef
  • editorError.foreground#c24038
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notification.background#21252b
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#21252B
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2c313a
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#89ca78
  • terminal.ansiBrightMagenta#C586C0
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#f5f5f5
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#89ca78
  • terminal.ansiMagenta#C586C0
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d0d0d0
  • terminal.ansiYellow#e5c07b
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, entity.other.inherited-class#e5c07b
punctuation.definition.string.begin,punctuation.definition.string.end#98c378
comment, punctuation.definition.comment#5c6370italic
comment markup.link#5C6370
markup.inserted.diff#89ca78
markup.deleted.diff#e06c75
meta.function.c#e06c75
keyword.control.cpp#e5c07b
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#abb2bf
support.type.type.flowtype#C586C0
support.type.class.flowtype,support.type.builtin.flowtype#e5c07b
support.type.builtin.primitve.flowtype,support.type.primitive.flowtype,support.type.builtin.primitive.flowtype#e5c07bitalic
keyword.operator.optional.parameter.flowtype,keyword.operator.maybe.flowtype#56B6C2
punctuationi.separator.key-value.js,punctuation.separator.key-value.ts,punctuation.separator.key-value.jsx,punctuation.separator.key-value.tsx#cbccc6
entity.other.attribute-name.js,variable.parameter.js,variable.language.super.js,entity.other.attribute-name.ts,variable.parameter.ts,variable.language.super.ts,entity.other.attribute-name.jsx,variable.parameter.jsx,variable.language.super.jsx,entity.other.attribute-name.tsx,variable.parameter.tsx,variable.language.super.tsx#e06c75italic
support.constant.math.js,support.constant.property.math.js,support.constant.math.ts,support.constant.property.math.ts,support.constant.math.jsx,support.constant.property.math.jsx,support.constant.math.tsx,support.constant.property.math.tsx#e5c07b
variable.other.property.js, variable.other.property.static.js#cbccc6
variable.other.constant.js,variable.other.constant.ts,variable.other.constant.jsx,variable.other.constant.tsx#cbccc6
storage.type.annotation.java#e5c07b
source.java#e06c75
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java#abb2bf
meta.method.java#61afef
storage.modifier.import.java,storage.type.java#e5c07b
punctuation.quasi.element.begin.js, punctuation.quasi.element.end.js#e06c75
meta.definition.variable.name.java#e06c75
keyword.operator.logical.js,keyword.operator.logical.ts,keyword.operator.logical.jsx,keyword.operator.logical.tsx#C586C0
keyword.operator.bitwise.js,keyword.operator.bitwise.ts,keyword.operator.logical.jsx,keyword.operator.logical.tsx#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#e5c07b
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#e5c07b
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#e5c07b
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts,punctuation.definition.template-expression.begin.jsx,punctuation.definition.template-expression.end.jsx,punctuation.definition.template-expression.begin.tsx,punctuation.definition.template-expression.end.tsx#e06c75
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts,support.module.node.jsx,support.type.object.module.jsx,support.module.node.jsx,support.module.node.tsx,support.type.object.module.tsx,support.module.node.tsx#e5c07b
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#cbccc6
support.constant.json.js,support.constant.json.ts,support.constant.json.jsx,support.constant.json.tsx#C586C0
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts,keyword.operator.new.js,keyword.operator.new.ts,keyword.operator.ternary.js,keyword.operator.ternary.ts,keyword.operator.expression.instanceof.jsx,keyword.operator.expression.instanceof.tsx,keyword.operator.new.jsx,keyword.operator.new.tsx,keyword.operator.ternary.jsx,keyword.operator.ternary.tsx#C586C0
support.type.object.console#e5c07b
support.variable.property.process#C586C0
entity.name.function,support.function.console#61afef
keyword.operator.js#56b6c2
keyword.operator.assignment.jsx#cbccc6
keyword.operator.assignment#C586C0
support.type.object.dom#e5c07b
support.variable.dom,support.variable.property.dom#cbccc6
keyword.operator.arithmetic,keyword.operator.comparison#C586C0
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#C586C0
punctuation.separator.delimiter.c#cbccc6
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#C586C0
support.type.python#56b6c2
keyword.operator.logical.python#C586C0
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#abb2bf
meta.function-call.generic.python#61afef
punctuation.definition.comment#5C6370
none#A6B2C0
keyword.operator#abb2bf
keyword#C586C0
variable#cbccc6
token.variable.parameter.java#abb2bf
import.storage.java#e5c07b
token.package.keyword#C586C0
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method#61afef
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#61afef
entity.name.type#e5c07b
keyword.control#C586C0
control.elements, keyword.operator.less#C586C0
keyword.other.special-method#61afef
storage#C586C0
token.storage.js,token.storage.ts,token.storage.jsx,token.storage.tsx#C586C0
keyword.operator.expression.in.ts,keyword.operator.expression.in.js,keyword.operator.expression.in.tsx,keyword.operator.expression.in.jsx#C586C0
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#C586C0
storage.type.function.arrow.js#C586C0
token.storage.type.java#e5c07b
support.function#56b6c2
support.type.property-name#cbccc6
support.constant.property-value#abb2bf
support.constant.font-name#C586C0
meta.tag#abb2bf
variable.parameter.function#A6B2C0
string.quasi.js, string.quoted.single.js, string.quoted.double.js, string.quoted#89ca78
constant.other.symbol#56b6c2
constant.numeric#e5c07b
none#C586C0
none#C586C0
constant#e5c07b
punctuation.definition.constant#e5c07b
entity.name.tag#e06c75
entity.other.attribute-name#C586C0italic
entity.other.attribute-name.id#61afef
entity.other.attribute-name.class.css#C586C0
meta.selector#C586C0
none#D2945D
markup.heading#e06c75bold
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#e5c07b
markup.bold#C586C0bold
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic#C586C0
emphasis md#C586C0
entity.name.section.markdown#e06c75
punctuation.definition.heading.markdown#e06c75
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#C586C0
markup.inline.raw.markdown#89ca78
beginning.punctuation.definition.list.markdown#e06c75
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#C586C0
markup.underline.link.markdown,markup.underline.link.image.markdown#C586C0
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#cbccc6
invalid.illegal#cbccc6
invalid.broken#cbccc6
invalid.deprecated#cbccc6
invalid.unimplemented#cbccc6
source.json meta.structure.dictionary.json > string.quoted.json#e06c75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e06c75
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#89ca78
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#e06c75
support.type.property-name.json punctuation#e06c75
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C586C0
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C586C0
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php#e5c07b
keyword.operator.error-control.php#C586C0
keyword.operator.type.php#C586C0
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php#e5c07b
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php#cbccc6
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#C586C0
entity.name.goto-label.php,support.other.php#61afef
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
keyword.operator.regexp.php#C586C0
keyword.operator.comparison.php#56b6c2
punctuation.definition.variable.php#e06c75
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C586C0
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#C586C0
function.parameter.js,function.parameter.ts#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#56B6C2
inline-color-decoration rgb-value#C586C0
less rgb-value#C586C0
selector.sass#e06c75
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#e06c75italic
support.type.primitive.ts,support.type.builtin.ts#e5c07b
block.scope.end,block.scope.begin#abb2bf
entity.name.variable.local.cs#e06c75
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.accessor.js#C586C0