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#0f0f0f
  • activityBar.foreground#ff637e
  • activityBar.inactiveForeground#606060
  • activityBarBadge.background#ff637e
  • activityBarBadge.foreground#ffffff
  • badge.background#ff637e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff637e
  • breadcrumb.focusForeground#ff637e
  • breadcrumb.foreground#b0b0b0
  • button.background#ff637e
  • button.foreground#ffffff
  • button.hoverBackground#ff4d67
  • dropdown.background#242424
  • dropdown.border#2a2a2a
  • dropdown.foreground#e8e8e8
  • editor.background#1a1a1a
  • editor.findMatchBackground#ff637e45
  • editor.findMatchHighlightBackground#ff637e25
  • editor.foreground#e8e8e8
  • editor.inactiveSelectionBackground#ff637e18
  • editor.lineHighlightBackground#242424
  • editor.selectionBackground#ff637e35
  • editor.wordHighlightBackground#ff637e25
  • editor.wordHighlightStrongBackground#ff637e35
  • editorBracketMatch.background#8fd46025
  • editorBracketMatch.border#8fd460
  • editorCursor.foreground#ff637e
  • editorHoverWidget.background#242424
  • editorHoverWidget.border#2a2a2a
  • editorIndentGuide.activeBackground1#8fd46040
  • editorIndentGuide.background1#2d2d2d
  • editorLineNumber.activeForeground#ff637e
  • editorLineNumber.foreground#606060
  • editorSuggestWidget.background#242424
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.highlightForeground#ff637e
  • editorSuggestWidget.selectedBackground#ff637e20
  • editorWhitespace.foreground#2d2d2d
  • editorWidget.background#242424
  • editorWidget.border#2a2a2a
  • gitDecoration.conflictingResourceForeground#ffaa33
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#606060
  • gitDecoration.modifiedResourceForeground#ff637e
  • gitDecoration.untrackedResourceForeground#50fa7b
  • input.background#242424
  • input.border#2a2a2a
  • input.foreground#e8e8e8
  • input.placeholderForeground#606060
  • inputOption.activeBorder#ff637e
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBorder#4d9fff
  • inputValidation.warningBorder#ffaa33
  • list.activeSelectionBackground#ff637e20
  • list.activeSelectionForeground#ff637e
  • list.focusBackground#ff637e20
  • list.highlightForeground#ff637e
  • list.hoverBackground#242424
  • list.inactiveSelectionBackground#ff637e15
  • notificationCenter.border#2a2a2a
  • notificationCenterHeader.background#242424
  • notificationLink.foreground#ff637e
  • notifications.background#242424
  • notifications.border#2a2a2a
  • panel.background#0f0f0f
  • panel.border#2a2a2a
  • panelTitle.activeBorder#ff637e
  • panelTitle.activeForeground#ff637e
  • panelTitle.inactiveForeground#b0b0b0
  • peekView.border#ff637e
  • peekViewEditor.background#1a1a1a
  • peekViewResult.background#0f0f0f
  • peekViewTitle.background#0f0f0f
  • peekViewTitleLabel.foreground#ff637e
  • progressBar.background#ff637e
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#60606080
  • scrollbarSlider.background#40404050
  • scrollbarSlider.hoverBackground#50505070
  • sideBar.background#0f0f0f
  • sideBar.foreground#b0b0b0
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#ff637e
  • sideBarTitle.foreground#ff637e
  • statusBar.background#0f0f0f
  • statusBar.debuggingBackground#ff637e
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#b0b0b0
  • statusBar.noFolderBackground#0f0f0f
  • statusBarItem.prominentBackground#ff637e
  • statusBarItem.prominentHoverBackground#ff4d67
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#ff637e
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ff637e
  • tab.border#0f0f0f
  • tab.inactiveBackground#0f0f0f
  • tab.inactiveForeground#b0b0b0
  • tab.unfocusedActiveBorder#ff637e
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#4d9fff
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#4d9fff
  • terminal.ansiBrightCyan#8be9fd
  • terminal.ansiBrightGreen#8fd460
  • terminal.ansiBrightMagenta#ff79c6
  • terminal.ansiBrightRed#ff637e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#8fd460
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff637e
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#ffcc66
  • terminal.foreground#e8e8e8
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#e8e8e8
  • titleBar.inactiveBackground#0f0f0f
  • titleBar.inactiveForeground#606060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#707070italic
variable, string constant.other.placeholder#e8e8e8
meta.block variable.other#e8e8e8
variable.language#ff637eitalic
constant, constant.numeric, constant.language, constant.character, constant.other#ffb3cc
constant.other.color#e8e8e8
invalid, invalid.illegal#ff3333
keyword, keyword.control, keyword.control.conditional, keyword.control.flow, keyword.control.return, keyword.control.loop, storage.type, storage.modifier#ff637e
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, punctuation.separator, punctuation.terminator#c5c5c5
keyword.other.substitution, meta.brace.round, meta.brace.square, punctuation.definition.parameters, punctuation.definition.array#c5c5c5
entity.name.function, meta.function-call, support.function, keyword.other.special-method#8fd460
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class#ff637e
support.type, entity.name.type, entity.name.type.interface, entity.name.type.alias#b8e986
string, string.quoted, string.template, punctuation.definition.string#ffcc66
string.other.link#4d9fff
string.regexp#ffb3cc
constant.character.escape#ff637e
entity.name.tag, punctuation.definition.tag#ff637e
entity.other.attribute-name#b8e986italic
meta.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff637eitalic
markup.underline.link, meta.linkunderline
markup.inserted#50fa7b
markup.deleted#ff3333
markup.changed#ffaa33
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#8fd460
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#ff637e
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less#b8e986
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less#ffcc66
entity.other.attribute-name.attribute.css, meta.attribute-selector.css#ffcc66
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.scss#ff79c6
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#ffb3cc
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css#ffb3cc
support.function.css, support.function.scss, support.function.less, support.function.calc.css, support.function.var.css#8fd460
variable.css, variable.scss, variable.argument.css, variable.parameter.css#4d9fff
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.less, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.import.css, keyword.control.at-rule.fontface.css, keyword.control.at-rule.font-face.css, keyword.control.at-rule.supports.css, keyword.control.at-rule.container.css, keyword.control.at-rule.charset.css, keyword.control.at-rule.namespace.css, keyword.control.at-rule.page.css, keyword.control.at-rule.layer.css#ff637eitalic
keyword.other.important.css, keyword.other.important.scss#ff637ebold
keyword.operator.combinator.css#c5c5c5
support.class.component.tsx, support.class.component.jsx, entity.name.tag.tsx, entity.name.tag.jsx#ff637ebold
entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#b8e986
entity.name.type.parameter.ts, entity.name.type.parameter.tsx#8fd460
storage.type.ts, storage.type.tsx, keyword.control.as.ts, keyword.control.as.tsx#ff637e
keyword.control.import.ts, keyword.control.import.tsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.from.ts, keyword.control.from.tsx#ff637eitalic
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#b8e986italic
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#8fd460
punctuation.definition.tag.end.tsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.begin.jsx#c5c5c5
string.template.ts, string.template.tsx, string.template.js, string.template.jsx#ffcc66
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8fd460
storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx#ff637e
meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx#e8e8e8
entity.name.method.js, entity.name.method.ts, meta.class-method.js entity.name.function.js, variable.function.constructor#8fd460italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff637e
source.js constant.other.object.key.js string.unquoted.label.js#ff637eitalic
entity.name.function.python, meta.function.python entity.name.function, support.function.python#8fd460
meta.function-call.python, meta.function-call.generic.python#8fd460
support.function.magic.python, entity.name.function.magic.python#ff79c6italic
support.function.builtin.python, meta.function-call.python support.function.builtin#8fd460
entity.name.type.class.python, meta.class.python entity.name.type.class#ff637ebold
entity.other.inherited-class.python#b8e986italic
keyword.control.python, keyword.control.flow.python, keyword.control.conditional.python, keyword.control.loop.python, keyword.control.exception.python#ff637ebold
keyword.control.import.python, keyword.control.import.from.python#ff79c6italic
storage.type.function.python, storage.modifier.declaration.python, storage.type.class.python#ff637ebold
keyword.operator.python, keyword.operator.logical.python, keyword.operator.comparison.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python#c5c5c5
keyword.operator.wordlike.python#ff637eitalic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#ff79c6italic
string.quoted.single.python, string.quoted.double.python#ffcc66
string.quoted.docstring.multi.python, string.quoted.docstring.raw.python#707070italic
meta.fstring.python, string.interpolated.python, string.quoted.single.python.fstring, string.quoted.double.python.fstring#ffcc66
meta.embedded.line.python, meta.fstring.python source.python.embedded, meta.interpolation.python#e8e8e8
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#ff637e
string.quoted.raw.python, storage.type.string.python#ffcc66
meta.function.parameters.python support.type.python, meta.function.return-type.python support.type.python, meta.type.annotation.python#b8e986
support.type.python, support.type.metaclass.python#b8e986
keyword.operator.type.python, punctuation.separator.annotation.python, punctuation.separator.parameters.python#c5c5c5
variable.parameter.function.python, variable.parameter.function.language.python, meta.function.parameters.python variable.parameter#ffb3ccitalic
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python#ff637eitalic
variable.other.python, meta.indexed-name.python#e8e8e8
constant.language.boolean.python#ffb3ccbold
constant.language.python#ffb3ccitalic
constant.numeric.python, constant.numeric.integer.python, constant.numeric.float.python, constant.numeric.complex.python, constant.numeric.bin.python, constant.numeric.oct.python, constant.numeric.hex.python#ffb3cc
constant.character.escape.python, constant.character.escape.newline.python#ff79c6
meta.import.python entity.name.namespace, meta.import-from.python entity.name.namespace, meta.qualified-name.python#8fd460
meta.import.python variable.other, meta.import-from.python variable.other, meta.import-name.python, meta.generic-name.python#b8e986
meta.import.python meta.generic-name.python, meta.import-from.python meta.generic-name.python, variable.other.readwrite.alias.python#e8e8e8italic
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python#c5c5c5
punctuation.separator.colon.python, punctuation.separator.element.python, punctuation.separator.arguments.python#c5c5c5
keyword.declaration.function.lambda.python, storage.type.function.lambda.python#ff637eitalic
keyword.control.flow.python.comprehension#ff637eitalic
storage.type.format.python, constant.character.format.placeholder.other.python#ff79c6
text.html.markdown, punctuation.definition.list_item.markdown#e8e8e8
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#ff637e
markup.bold, markup.bold string#ffcc66bold
markup.italic#ff79c6italic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ffcc66bold italic
markup.underline#ffcc66underline
markup.strikethrough#b0b0b0strikethrough
markup.quote punctuation.definition.blockquote.markdown#707070
markup.quoteitalic
string.other.link.title.markdown#4d9fff
string.other.link.description.title.markdown#4d9fff
constant.other.reference.link.markdown#ffcc66
text.html.markdown markup.inline.raw.markdown#8fd460
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#707070
markup.fenced_code.block.markdown, punctuation.definition.markdown#ffcc66
fenced_code.block.language.markdown#8fd460
meta.separator#707070bold
source.json meta.structure.dictionary.json support.type.property-name.json#ff637e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffb3cc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b0b0b0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff637e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffb3cc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b0b0b0