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#263238
  • activityBar.foreground#97a7c8ff
  • activityBarBadge.background#4AB3E4
  • activityBarBadge.foreground#000000
  • button.hoverBackground#4AB3E4
  • debugToolBar.background#263238
  • dropdown.background#263238
  • dropdown.border#97a7c8ff
  • editor.background#263238
  • editor.findMatchBackground#4B5D66ff
  • editor.foreground#f5f5f5
  • editor.lineHighlightBackground#14344B
  • editor.lineHighlightBorder#14344B
  • editor.selectionBackground#4B5D66ff
  • editorBracketMatch.border#97a7c8ff
  • editorCursor.foreground#4AB3E4
  • editorError.border#FB467B
  • editorGroup.background#263238
  • editorGroup.border#263238
  • editorGroupHeader.noTabsBackground#263238
  • editorGroupHeader.tabsBackground#263238
  • editorGutter.addedBackground#56D6D6
  • editorGutter.deletedBackground#FB467B
  • editorGutter.modifiedBackground#FFCC00
  • editorHoverWidget.background#263238
  • editorIndentGuide.background#4B5D66ff
  • editorLineNumber.foreground#5C6370
  • editorOverviewRuler.border#263238
  • editorRuler.foreground#4B5D66ff
  • editorSuggestWidget.background#263238
  • editorSuggestWidget.selectedBackground#4B5D66ff
  • editorWarning.border#FFCC00
  • editorWhitespace.foreground#4B5D66ff
  • editorWidget.background#263238
  • focusBorder#97a7c8ff
  • input.background#263238
  • input.border#4AB3E4
  • list.activeSelectionBackground#263238
  • list.activeSelectionForeground#4AB3E4
  • list.focusBackground#4B5D66ff
  • list.focusForeground#4AB3E4
  • list.foreground#97a7c8ff
  • list.highlightForeground#4AB3E4
  • list.hoverBackground#4B5D66ff
  • list.inactiveSelectionBackground#263238
  • list.inactiveSelectionForeground#4AB3E4
  • notification.background#263238
  • panel.background#263238
  • panel.border#263238
  • panelTitle.activeForeground#4AB3E4
  • panelTitle.inactiveForeground#97a7c8ff
  • scrollbar.shadow#263238
  • scrollbarSlider.background#4B5D66ff
  • scrollbarSlider.hoverBackground#22303Eff
  • sideBar.background#263238
  • sideBarSectionHeader.background#263238
  • statusBar.background#263238
  • statusBar.debuggingBackground#263238
  • statusBar.foreground#97a7c8ff
  • tab.activeBackground#263238
  • tab.activeBorder#4AB3E4
  • tab.activeForeground#4AB3E4
  • tab.border#263238
  • tab.inactiveBackground#263238
  • tab.inactiveForeground#97a7c8ff
  • tab.unfocusedActiveBorder#97a7c8ff
  • titleBar.activeBackground#263238
  • titleBar.inactiveForeground#263238
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#f5f5f5—
comment, punctuation.definition.comment#5C6370italic
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python#5C6370italic
meta.brace.round.begin, meta.brace.round.end, meta.brace.square.begin, meta.brace.square.end, meta.brace.curly.begin, meta.brace.curly.end, meta.group.braces.round.function.arguments#97a7c8ff—
string#C3E88Ditalic
Boolean#CB6CFEitalic
string.regexp#C3E88D—
string.detected-link#CB6CFE—
constant.numeric, constant.language, markdown.python.constant.numeric#F78C6C—
constant.character#56D6D6—
constant.character.escape.backslash.regexp#C3E88D—
constant.character.format.placeholder.other.python#F78C6C—
constant.other.key, meta.group.braces.curly constant.other.object.key string.unquoted.label#56D6D6—
variable.other.object#FB467B—
meta.property.object#F78C6C—
variable.other.class, meta.class.property variable.other.property#FB467B—
variable.other, meta.class.object.property, meta.property.class variable.other.property.static#F78C6C—
variable.other.readwrite#FB467B—
meta.group.braces variable.other.readwrite#FB467B—
variable.language, meta.class variable.other.readwrite#97a7c8ff—
variable.language.prototype#f5f5f5—
python.support.magic.variable#FB467B—
meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#61AFEF—
entity.name.function#FFCC00—
meta.function-call.generic.python#61AFEF—
meta.function.decorator.python#56D6D6—
variable.function.constructor#FFCC00—
keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super#CB6CFE—
meta.preprocessor, entity.name.function.preprocessor#CB6CFE—
entity.name.function.preprocessor#FFCC00—
meta.namespace.identifier entity.name.type, entity.name.variable#FFCC00—
cs.meta.namespace.function.identifier.body.class.method#61AFEF—
storage.type.cs, storage.type.variable.cs#56D6D6—
keyword, keyword.other.namespace, storage.modifier#CB6CFE—
keyword.operator.logical.python#CB6CFE—
keyword.other.substitution.begin, keyword.other.substitution.end#56D6D6—
keyword.operator.accessor#97a7c8ff—
keyword.operator, constant.other.color, punctuation.separator.key-value#56D6D6—
keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#C3E88D—
python.keyword.operator#56D6D6—
entity.name.class, meta.class.extends variable.other.readwrite#FFCC00
entity.other.inherited-class#FFCC00italic underline
variable.parameter,token.variable.parameter,variable.other.jsdoc,variable.language.arguments,function.parameter#FB467Bitalic
variable.parameter.function.language.python#FB467B
entity.name.tag#FB467B—
entity.other.attribute-name#AE81FF—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
selector.css.entity.other.attribute-name#FFCC00—
source.sass keyword.control#61AFEF—
entity.other.attribute-name.class#FFCB6B—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#56D6D6—
support.function, support.class support.function#56D6D6—
python.builtin.support.function#CB6CFE
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin#FFCC00
meta.type.support.inheritance.python#56D6D6
entity.name.type.class.python#FFCC00—
support.constant#F78C6C
support.type, support.class#FFCC00
support.other.variable—
css.property-list.property-name#56D6D6
invalid#FFFFFF—
invalid.deprecated#523D14—
meta.structure.dictionaryon support.type.property-name#FB467B—
meta.structure.dictionaryon string.quoted.doubleon#C3E88D—
meta.structure.dictionaryon string.quoted.double.detected-link#CB6CFE—
markup.heading#FB467B—
string.other.link.title.markdown, string.other.link.description.markdown, meta.paragraph.markdown entity.name.tag.inline.any#61AFEF—
markup.underline.link.markdown, markup.underline.link.image.markdown#CB6CFE—
markup.bold.markdown—bold
markup.fenced_code.block.markdown, markup.fenced.code.block.markdown, markup.raw.inline.markdown, markdown.block.raw#56D6D6—
markup.fenced_code.block.markdown fenced_code.block.language, markup.fenced.code.block.markdown fenced.code.block.language#F78C6C—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.raw.markdown, meta.paragraph.markdown punctuation.definition.tag#56D6D6—
markdown.fenced_code.block.markdown constant.numeric, markdown.fenced.code.block.markdown constant.numeric, markdown.fenced_code.block.markdown constant.language, markdown.fenced.code.block.markdown constant.language#F78C6C—
markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote#C3E88D—
markup.fenced_code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.operator.logical.python, markup.fenced.code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.control, markup.fenced.code.block.markdown keyword.control, markup.fenced_code.block.markdown storage.type, markup.fenced_code.block.markdown storage.type.function.lambda, markdown.block.fenced.code.lambda.storage.type#61AFEF—
markdown.block.fenced.code.operator.assignment#97a7c8ff—
markdown.block.variable.parameter#F78C6C—
meta.diff, meta.diff.header#f5f5f5—
markup.deleted#FB467B—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
keyword, storage.type, storage.modifier#AE81FF—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—