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#1c2538
  • activityBar.foreground#dededf
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • button.foreground#dededf
  • button.hoverBackground#1c2538
  • debugToolBar.background#292D3E
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1c2538
  • dropdown.border#1c2538
  • dropdown.listBackground#1c2538
  • editor.background#1c2538
  • editor.findMatchHighlightBackground#2a3f66
  • editor.lineHighlightBackground#313b4e
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#1c2538
  • editorGroupHeader.tabsBackground#141c31
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#1c2538
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#7a7a7a
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#1c2538
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#484a50
  • editorWidget.background#1c2538
  • gitDecoration.conflictingResourceForeground#FFEB95CC
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#e2c08de6
  • gitDecoration.untrackedResourceForeground#a9c77dff
  • input.background#1c2538
  • input.border#141c31
  • input.foreground#dededf
  • input.placeholderForeground#707070
  • list.activeSelectionBackground#141c31
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#141c31
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#141c31
  • list.inactiveSelectionBackground#1c2538
  • list.inactiveSelectionForeground#d7dae0
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#1c2538
  • sideBarSectionHeader.background#141c31
  • statusBar.background#d06534
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#FFF
  • statusBar.noFolderBackground#d06534
  • statusBarItem.hoverBackground#d09934
  • tab.activeBackground#1c2538
  • tab.border#1c2538
  • tab.inactiveBackground#141c31
  • titleBar.activeBackground#1e283f
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1c2538
  • titleBar.inactiveForeground#6B717D
  • walkThrough.embeddedEditorBackground#232635

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
global#bfc7d5—
comment#697098italic
string#C3E88D—
string.quoted#C3E88D—
support.constant.math#ffcb6b—
constant.numeric, constant.character.numeric#F78C6C—
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF—
constant.character, constant.other#82AAFF—
constant.character.escape#F78C6C—
string.regexp, string.regexp keyword.other#80CBC4—
meta.function punctuation.separator.comma#eeffff—
variable#ffcb6b—
punctuation.accessor, keyword#c792ea—
storage#c792ea—
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea—
entity.name.class, meta.class entity.name.type.class#ffcb6b—
entity.other.inherited-class#a9c77d—
entity.name.function#82AAFF—
variable.parameter#7986E7—
punctuation.definition.tag, meta.tag#89DDFF—
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#ff5572—
entity.other.attribute-name#ffcb6b—
entity.name.tag.custom#ffcb6b—
support.function, support.constant#82AAFF—
support.constant.meta.property-value#89DDFF—
support.type, support.class#ffcb6b—
support.variable.dom#ffcb6b—
invalid#ffffff—
invalid.deprecated#ffffff—
keyword.operator#89DDFF—
keyword.operator.relational#c792ea—
keyword.operator.assignment#c792ea—
comment.line.double-slash#697098—
object#cdebf7—
constant.language.null#ff5874—
meta.brace#bfc7d5—
meta.delimiter.period#c792ea—
punctuation.definition.string#d9f5dd—
constant.language.boolean#ff5874—
object.comma#ffffff—
variable.parameter.function#89DDFF—
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4—
meta.property-list entity.name.tag.reference#ff5572—
constant.other.color.rgb-value punctuation.definition.constant#F78C6C—
constant.other.color#FFEB95—
keyword.other.unit#FFEB95—
meta.selector#c792ea—
entity.other.attribute-name.id#FAD430—
meta.property-name#80CBC4—
entity.name.tag.doctype, meta.tag.sgml.doctype#c792eaitalic
punctuation.definition.parameters#d9f5dd—
keyword.control.operator#89DDFF—
keyword.operator.logical#c792ea—
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#ff5572—
variable.other.property, variable.other.object.property#89DDFF—
entity.name.function#82AAFF—
keyword.operator.comparison#c792ea—
support.constant, keyword.other.special-method, keyword.other.new#89DDFF—
support.function#89DDFF—
invalid.broken#020e14—
invalid.unimplemented#ffffff—
invalid.illegal#ffffff—
variable.language#ff5572—
support.variable.property#89DDFF—
variable.function#82AAFF—
variable.interpolation#ec5f67—
meta.function-call#82AAFF—
punctuation.section.embedded#d3423e—
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#bfc7d5—
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd—
string.template meta.template.expression#d3423e—
string.template punctuation.definition.string#bfc7d5—
italic#c792eaitalic
bold#ffcb6bbold
quote#697098italic
raw#80CBC4—
variable.assignment.coffee#89DDFF—
variable.parameter.function.coffee#bfc7d5—
variable.assignment.coffee#89DDFF—
variable.other.readwrite.cs#bfc7d5—
entity.name.type.class.cs, storage.type.cs#82AAFF—
entity.name.type.namespace.cs#B2CCD6—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ff5572—
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ff5572—
keyword.other.unit.css#FFEB95—
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF—
source.elixir entity.name.function#ffcb6b—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF—
source.elixir punctuation.definition.string#a9c77d—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#ffcb6b—
source.elixir .punctuation.binary.elixir#c792ea—
source.go meta.function-call.go#DDDDDD—
entity.other.attribute-name.id.html#ffcb6b—
punctuation.definition.tag.html#89DDFF—
meta.tag.sgml.doctype.html#c792eaitalic
meta.class entity.name.type.class.js#ffcb8b—
meta.method.declaration storage.type.js#82AAFFnormal
terminator.js#bfc7d5—
meta.js punctuation.definition.js#bfc7d5—
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#eeffff—
variable.other.jsdoc, variable.other.phpdoc#78ccf0—
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#bfc7d5—
variable.parameter.function.js#7986E7—
variable.other.readwrite.js#bfc7d5—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#bfc7d5—
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#bfc7d5—
variable.js, variable.other.js#bfc7d5—
entity.name.type.js, entity.name.type.module.js#ffcb8b—
support.class.js#bfc7d5—
support.type.property-name.json#C3E88D—
support.constant.json#ffcb6b—
meta.structure.dictionary.value.json string.quoted.double#80CBC4—
string.quoted.double.json punctuation.definition.string.json#80CBC4—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874—
variable.other.ruby#bfc7d5—
constant.language.symbol.hashkey.ruby#89DDFF—
entity.name.tag.less#ff5572—
keyword.other.unit.css#FFEB95—
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C—
markup.heading.markdown#82b1ff—
markup.italic.markdown#c792eaitalic
markup.bold.markdown#ffcb6bbold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#80CBC4—
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a—
string.other.link.title.markdown, string.other.link.description.markdown#bfc7d5—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff—
punctuation.definition.metadata.markdown#ff5572—
beginning.punctuation.definition.list.markdown#82b1ff—
variable.other.php#bec5d4—
support.class.php#ffcb8b—
meta.function-call.php punctuation#bfc7d5—
variable.other.global.php#ffcb6b—
variable.other.global.php punctuation.definition.variable#ffcb6b—
constant.language.python#ff5874—
variable.parameter.function.python, meta.function-call.arguments.python#7986E7—
meta.function-call.python, meta.function-call.generic.python#B2CCD6—
punctuation.python#bfc7d5—
entity.name.function.decorator.python#ffcb6b—
source.python variable.language.special#8EACE3—
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#DDDDDD—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4—
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C—
entity.name.tag.scss, entity.name.tag.sass#ff5572—
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#bfc7d5—
entity.name.type.ts, entity.name.type.tsx#78ccf0—
support.class.node.ts, support.class.node.tsx#82AAFF—
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#eeffff—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#bfc7d5—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF—
meta.tag.js meta.jsx.children.tsx#82AAFF—
entity.name.tag.yaml#89DDFF—
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.definintion.string, punctuation—normal