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.activeBackground#252837
  • activityBar.background#1c1f2b
  • activityBar.border#252837
  • activityBarBadge.background#007acc
  • breadcrumb.activeSelectionForeground#d4d7e3
  • breadcrumb.background#1c1f2b
  • breadcrumb.focusForeground#d4d7e3
  • breadcrumb.foreground#94a3b8
  • breadcrumbPicker.background#1c1f2b
  • contrastBorder#252837
  • dropdown.background#1c1f2b
  • dropdown.border#252837
  • dropdown.foreground#94a3b8
  • editor.background#1c1f2b
  • editor.foldBackground#252837
  • editor.foreground#d4d7e3
  • editor.selectionBackground#252837
  • editorBracketMatch.background#252837
  • editorBracketMatch.border#252837
  • editorCursor.foreground#db2777
  • editorGroupHeader.tabsBackground#1c1f2b
  • editorHoverWidget.background#1e293b
  • editorHoverWidget.border#252837
  • editorLineNumber.activeForeground#ec4899
  • editorLineNumber.foreground#3c435d
  • editorWidget.background#1c1f2b
  • editorWidget.border#252837
  • extensionButton.background#db2777
  • extensionButton.hoverBackground#ec4899
  • focusBorder#252837
  • foreground#d4d7e3
  • input.background#1e293b
  • input.border#252837
  • input.foreground#94a3b8
  • input.placeholderForeground#94a3b8
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#b91c1c
  • inputValidation.errorBorder#f87171
  • inputValidation.infoBackground#1d4ed8
  • inputValidation.infoBorder#60a5fa
  • inputValidation.warningBackground#a16207
  • inputValidation.warningBorder#facc15
  • list.activeSelectionBackground#252938
  • list.activeSelectionForeground#d4d7e3
  • list.dropBackground#1c1f2b
  • list.focusBackground#010d18
  • list.focusForeground#d4d7e3
  • list.highlightForeground#d4d7e3
  • list.hoverBackground#1c1f2b
  • list.hoverForeground#f472b6
  • list.inactiveSelectionBackground#1c1f2b
  • list.inactiveSelectionForeground#f472b6
  • list.invalidItemForeground#975f94
  • minimap.errorHighlight#dc2626
  • minimap.selectionHighlight#db2777
  • notifications.background#1c1f2b
  • notifications.border#252837
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#252837
  • scrollbarSlider.background#252837
  • scrollbarSlider.hoverBackground#252837
  • sideBar.background#1c1f2b
  • sideBar.border#252837
  • sideBarSectionHeader.background#1c1f2b
  • sideBarSectionHeader.border#252837
  • sideBarTitle.foreground#d4d7e3
  • statusBar.background#1c1f2b
  • statusBar.border#252837
  • statusBar.debuggingBackground#1e293b
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#5f7e97
  • statusBar.noFolderBackground#1c1f2b
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#1e293b
  • statusBarItem.hoverBackground#1e293b
  • statusBarItem.prominentBackground#1e293b
  • statusBarItem.prominentHoverBackground#1e293b
  • tab.activeBackground#1e293b
  • tab.activeBorder#252837
  • tab.activeBorderTop#f472b6
  • tab.activeForeground#d2dee7
  • tab.border#252837
  • tab.inactiveBackground#1c1f2b
  • tab.inactiveForeground#94a3b8
  • tab.unfocusedActiveBorder#252837
  • tab.unfocusedActiveForeground#94a3b8
  • tab.unfocusedInactiveForeground#94a3b8
  • titleBar.activeBackground#1c1f2b
  • titleBar.activeForeground#f9f9fb
  • titleBar.border#252837
  • titleBar.inactiveBackground#1c1f2b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#d4d7e3—
comment#697098italic
string#f472b6—
string.quoted#f472b6—
string.unquoted#d4d7e3—
support.constant.math#c084fc—
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#c084fc—
punctuation.accessor, keyword#c792ea—
storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea—
entity.name.class, meta.class entity.name.type.class#c084fc—
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#2dd4bf—
entity.other.attribute-name#c084fc—
entity.name.tag.custom#c084fc—
support.function, support.constant#82AAFF—
support.constant.meta.property-value#89DDFF—
support.type, support.class#c084fc—
support.variable.dom#c084fc—
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.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#2dd4bf—
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#2dd4bf—
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#2dd4bf—
support.variable.property#89DDFF—
variable.function#82AAFF—
variable.interpolation#ec5f67—
meta.function-call#82AAFF—
punctuation.section.embedded#82AAFF—
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#d4d7e3—
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd—
string.template meta.template.expression#82AAFF—
string.template punctuation.definition.string#d4d7e3—
italic#c792eaitalic
bold#c084fcbold
quote#697098italic
raw#80CBC4—
variable.assignment.coffee#89DDFF—
variable.parameter.function.coffee#d4d7e3—
variable.assignment.coffee#89DDFF—
variable.other.readwrite.cs#d4d7e3—
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#2dd4bf—
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#2dd4bf—
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass#FFEB95—
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C—
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma#d4d7e3—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF—
source.elixir entity.name.function#c084fc—
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#c084fc—
source.elixir .punctuation.binary.elixir#c792ea—
source.go meta.function-call.go#DDDDDD—
variable.qraphql#d4d7e3—
entity.other.attribute-name.id.html#c084fc—
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#d4d7e3—
meta.js punctuation.definition.js#d4d7e3—
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#d4d7e3—
variable.parameter.function.js#7986E7—
variable.other.readwrite.js#d4d7e3—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d4d7e3—
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx#d4d7e3—
variable.js, variable.other.js#d4d7e3—
entity.name.type.js, entity.name.type.module.js#ffcb8b—
support.class.js#d4d7e3—
support.type.property-name.json#f472b6normal
support.constant.json#c084fc—
meta.structure.dictionary.value.json string.quoted.double#80CBC4normal
string.quoted.double.json punctuation.definition.string.json#80CBC4normal
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874—
variable.other.ruby#d4d7e3—
constant.language.symbol.hashkey.ruby#89DDFF—
entity.name.tag.less#2dd4bf—
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C—
markup.heading#60a5fa—
markup.italic#c792eaitalic
markup.bold#c084fcbold
markup.quote#697098italic
markup.inline.raw#80CBC4—
markup.underline.link, markup.underline.link.image#ff869a—
markup.meta.attribute-list#a9c77d—
markup.admonition—bold
markup.list.bullet#D9F5DD—
markup.superscript, markup.subscript—italic
string.other.link.title.markdown, string.other.link.description.markdown#d4d7e3—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#60a5fa—
punctuation.definition.metadata.markdown#2dd4bf—
beginning.punctuation.definition.list.markdown#60a5fa—
entity.name.function.asciidoc#F78C6C—
variable.other.php#bec5d4—
support.class.php#ffcb8b—
meta.function-call.php punctuation#d4d7e3—
variable.other.global.php#c084fc—
variable.other.global.php punctuation.definition.variable#c084fc—
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#d4d7e3—
entity.name.function.decorator.python#c084fc—
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#2dd4bf—
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#d4d7e3—
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#d4d7e3—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF—
meta.tag.js meta.jsx.children.tsx#82AAFF—
entity.name.tag.yaml#89DDFF—
variable.parameter.handlebars#bec5d4—
entity.other.attribute-name.handlebars variable.parameter.handlebars#c084fc—
entity.other.attribute-name.handlebars#89DDFF—
entity.other.attribute-value.handlebars variable.parameter.handlebars#7986E7—
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, 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.section.embedded.js, punctuation.definintion.string, punctuation—
keyword.other.unit, support.type.property-name.css, support.type.vendored.property-name.css, support.constant.vendored.property-value.css, meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, meta.export.ts meta.block.ts variable.other.readwrite.alias.ts, meta.export.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.export.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, entity.other.attribute-name, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, punctuation.section.embedded, keyword.operator.type.annotation, variable.object.property.ts, variable.object.property.js, variable.object.property.jsx, variable.object.property.tsx, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, variable.scss, variable.sass, variable.other.less, variable.parameter.url.scss, variable.parameter.url.sass, parameter, string, italic, quote, keyword, storage, language, constant.language, variable.language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, comment—italic