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#080808
  • activityBar.activeBorder#FFF
  • activityBar.background#080808
  • activityBar.foreground#FFF
  • activityBar.inactiveForeground#333
  • activityBarBadge.background#FFF
  • activityBarBadge.foreground#080808
  • badge.background#161616
  • badge.foreground#FFF
  • breadcrumb.activeSelectionForeground#FFF
  • breadcrumb.background#080808
  • breadcrumb.focusForeground#AAA
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#161616
  • editor.background#080808
  • editor.findMatchBackground#FFFFFF99
  • editor.findMatchHighlightBackground#333
  • editor.foldBackground#101010
  • editor.foreground#FFF
  • editor.lineHighlightBackground#161616
  • editor.selectionBackground#FFFFFF40
  • editorBracketMatch.border#FFF
  • editorCursor.foreground#FFF
  • editorError.background#ff2E2E88
  • editorError.border#FF2E2E
  • editorError.foreground#FFF
  • editorGroupHeader.tabsBackground#080808
  • editorGutter.addedBackground#56D68C
  • editorGutter.background#080808
  • editorGutter.deletedBackground#F35858
  • editorGutter.foldingControlForeground#6B6A6D
  • editorGutter.modifiedBackground#F7F899
  • editorHoverWidget.background#080808
  • editorHoverWidget.border#FFFFFF32
  • editorHoverWidget.foreground#FFF
  • editorIndentGuide.activeBackground#323232
  • editorIndentGuide.background#161616
  • editorLineNumber.activeForeground#EEE
  • editorLineNumber.foreground#323232
  • editorSuggestWidget.background#242424
  • editorSuggestWidget.border#CCC
  • editorSuggestWidget.foreground#DDD
  • editorSuggestWidget.highlightForeground#FFF
  • editorSuggestWidget.selectedBackground#323232
  • editorWidget.background#161616
  • editorWidget.border#FFF
  • editorWidget.foreground#FFF
  • foreground#FFF
  • input.background#080808
  • input.border#AAA
  • input.foreground#FFF
  • input.placeholderForeground#AAA
  • inputOption.activeBackground#323232
  • inputOption.activeForeground#FFF
  • list.activeSelectionBackground#FFF
  • list.activeSelectionForeground#080808
  • list.focusBackground#EEE
  • list.focusForeground#080808
  • list.focusOutline#080808
  • list.hoverBackground#323232
  • list.hoverForeground#DDD
  • menu.background#080808
  • menu.border#FFFFFF24
  • menu.foreground#FFF
  • menu.selectionBackground#FFF
  • menu.selectionForeground#080808
  • menu.separatorBackground#242424
  • menubar.selectionBackground#FFF
  • menubar.selectionForeground#080808
  • minimap.background#080808
  • minimap.selectionHighlight#FFF
  • sash.hoverBorder#FFF
  • scrollbar.shadow#cecece03
  • scrollbarSlider.activeBackground#323232
  • scrollbarSlider.background#161616
  • scrollbarSlider.hoverBackground#242424
  • sideBar.background#080808
  • sideBar.foreground#FFF
  • sideBarSectionHeader.background#080808
  • sideBarSectionHeader.foreground#FFF
  • sideBarTitle.foreground#777
  • statusBar.background#FEFEFE
  • statusBar.debuggingBackground#CCC
  • statusBar.debuggingForeground#080808
  • statusBar.foreground#080808
  • statusBarItem.hoverBackground#DDD
  • tab.activeBackground#080808
  • tab.activeBorderTop#FFF
  • tab.activeForeground#FFF
  • tab.border#080808
  • tab.hoverBackground#EEEEEE24
  • tab.hoverForeground#AAA
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#565656
  • terminal.ansiBlack#404040
  • terminal.ansiBlue#c9c9fc
  • terminal.ansiCyan#B8B8FF
  • terminal.ansiGreen#b7fada
  • terminal.ansiMagenta#FFB8FF
  • terminal.ansiRed#FFB8B8
  • terminal.ansiWhite#FFF
  • terminal.ansiYellow#FFFAA7
  • terminal.background#080808
  • terminal.border#AAA
  • terminal.foreground#FFF
  • terminal.selectionBackground#FFFFFF24
  • terminalCursor.foreground#FFF
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#AAA
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#444
  • widget.shadow#FFFFFF08

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.double-slash.js, comment.line.double-slash.jsx, comment.line.double-slash.ts, comment.line.double-slash.tsx, comment.block, comment.block.documentation, punctuation.definition.comment#323232
entity.name.tag.html#AAA
punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#DDD
entity.other.attribute-name.html, text.html.basic entity.other.attribute-name.html#777777
meta.attribute.content.html, meta.attribute.unrecognized.role.html, string.quoted.double.html, string.quoted.single.html#B7FADA
text.html.derivative#FFF
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html#B7FADA
constant.character#FFFbold
punctuation.definition.entity.html#AAA
punctuation.definition.comment.html#323232
comment.block.html#323232
source.css, source.sass#fff
comment.block.css, comment.block.scss, comment.block.sass, comment.block.documentation.scss, comment.block.documentation.sass, comment.line.scss, comment.line.sass#323232
entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#fffbold
entity.other.attribute-name.id.css#ff8e8e
entity.name.tag.css#fff
entity.other.attribute-name.pseudo-element.css#cccbold
entity.other.attribute-name.class, entity.other.attribute-name.class.css#fffbold
entity.other.attribute-name.pseudo-class.css#cccbold
entity.other.attribute-name.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-selector.sass#437878
punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss#589e9e
meta.attribute-selector.scss#72b97b
keyword.operator.combinator.css#ff8e8e
support.type.property-name.css#ddd
support.constant.property-value.css, support.constant.media.css#356161bold
string.quoted.single.css, string.quoted.single.scss, string.quoted.double.css, string.quoted.double.scss#b7fada
constant.numeric.css#c9c9fc
keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.control.unit.css.sass, keyword.other.unit.percentage.css#fff
variable.css, variable.scss#fffbold
support.function.misc.css, support.function.misc.scss, entity.name.function, support.function.calc.css, support.function.url.css#fffbold
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.scss, entity.name.function.close#fffbold
keyword.control.at-rule#5f6f81bold
keyword.operator.logical.and.media.css#fffbold
meta.at-rule.media.header.css#fffbold
keyword.other.important.css, keyword.other.important.scss, keyword.other.default.scss#fffbold
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css#fffbold
constant.other.color.rgb-value.hex.css#7b80a8bold
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css#ad919abold
comment.punctuation.comma.sass#4f5757
keyword.operator.logical.js, keyword.operator.logical.jsx, keyword.operator.logical.ts, keyword.operator.logical.tsx, keyword.operator.comparison.js, keyword.operator.comparison.jsx, keyword.operator.comparison.ts, keyword.operator.comparison.tsx, keyword.operator.assignment.js, keyword.operator.assignment.jsx, keyword.operator.assignment.ts, keyword.operator.assignment.tsx, keyword.operator.ternary.js, keyword.operator.ternary.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx, storage.type.function.arrow.ts, storage.type.function.arrow.tsx, meta.arrow.js, meta.arrow.jsx, meta.arrow.ts, meta.arrow.tsx, keyword.operator.optional.js, keyword.operator.optional.jsx, keyword.operator.optional.ts, keyword.operator.optional.tsx, punctuation.terminator.statement.js, punctuation.terminator.statement.jsx, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#bbb
punctuation.definition.block.js, punctuation.definition.block.jsx, punctuation.definition.block.ts, punctuation.definition.block.tsx, meta.brace.round.js, meta.brace.round.jsx, meta.brace.round.ts, meta.brace.round.tsx, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.begin.jsx, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.js, punctuation.definition.parameters.end.jsx, punctuation.definition.parameters.end.ts, punctuation.definition.parameters.end.tsx, meta.brace.square.js, meta.brace.square.jsx, meta.brace.square.ts, meta.brace.square.tsx, punctuation.section.embedded.begin.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.begin.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.js, punctuation.section.embedded.end.jsx, punctuation.section.embedded.end.ts, punctuation.section.embedded.end.tsx, punctuation.definition.binding-pattern.array.js, punctuation.definition.binding-pattern.array.jsx, punctuation.definition.binding-pattern.array.ts, punctuation.definition.binding-pattern.array.tsx, punctuation.definition.binding-pattern.object.js, punctuation.definition.binding-pattern.object.jsx, punctuation.definition.binding-pattern.object.ts, punctuation.definition.binding-pattern.object.tsx#ffffff48bold
storage.type, storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.function#727272bold
support.variable.property.js, support.variable.property.jsx, support.variable.property.ts, support.variable.property.tsx#727272bold
constant.language.boolean.true.js, constant.language.boolean.true.jsx, constant.language.boolean.true.ts, constant.language.boolean.true.tsx, constant.language.boolean.false.js, constant.language.boolean.false.jsx, constant.language.boolean.false.ts, constant.language.boolean.false.tsx#eeebold
constant.language.null.js, constant.language.null.jsx, constant.language.null.ts, constant.language.null.tsx, constant.language.undefined.js, constant.language.undefined.jsx, constant.language.undefined.ts, constant.language.undefined.tsx#fffunderline
keyword.operator.expression.void.js, keyword.operator.expression.voidjsx, keyword.operator.expression.void.ts, keyword.operator.expression.void.tsx#fffunderline
storage.modifier.async.js, storage.modifier.async.jsx, storage.modifier.async.ts, storage.modifier.async.tsx#727272bold
keyword.control.conditional.js, keyword.control.conditional.jsx, keyword.control.conditional.ts, keyword.control.conditional.tsx, keyword.control.trycatch.js, keyword.control.trycatch.jsx, keyword.control.trycatch.ts, keyword.control.trycatch.tsx, keyword.control.switch.js, keyword.control.switch.jsx, keyword.control.switch.ts, keyword.control.switch.tsx, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.jsx, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, storage.type.function.js, storage.type.function.jsx, storage.type.function.ts, storage.type.function.tsx#727272bold
keyword.control.loop.js, keyword.control.loop.jsx, keyword.control.loop.ts, keyword.control.loop.tsx, keyword.control.loop.js, keyword.operator.expression.of.js, keyword.operator.expression.of.jsx, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#727272bold
keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx#fffunderline
variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx#727272bold
variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsx#727272bold
keyword.operator.new.js, keyword.operator.new.jsx, keyword.operator.new.ts, keyword.operator.new.tsx#fffunderline
keyword.control.import.js, keyword.control.import.jsx, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.jsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.as.js, keyword.control.as.jsx, keyword.control.as.ts, keyword.control.as.tsx, keyword.control.export.js, keyword.control.export.jsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.default.js, keyword.control.default.jsx, keyword.control.default.ts, keyword.control.default.tsx, storage.modifier.js, storage.modifier.jsx, storage.modifier.ts, storage.modifier.tsx#727272bold
constant.language.import-export-all.js, constant.language.import-export-all.jsx, constant.language.import-export-all.ts, constant.language.import-export-all.tsx#727272bold
variable, string constant.other.placeholder#fafafa
entity.name.function, entity.name.function.js, entity.name.function.jsx, entity.name.function.ts, entity.name.function.tsx, meta.function-call, meta.function-call.js, meta.function-call.jsx, meta.function-call.ts, meta.function-call.tsx#fffbold
storage.type.class.js, storage.type.class.jsx, storage.type.class.ts, storage.type.class.tsx#727272bold
entity.name.type.class.js, entity.name.type.class.jsx, entity.name.type.class.ts, entity.name.type.class.tsx, entity.other.inherited-class.js, entity.other.inherited-class.jsx, entity.other.inherited-class.ts, entity.other.inherited-class.tsx#fffbold
string.quoted.single.js, string.quoted.single.jsx, string.quoted.single.ts, string.quoted.single.tsx, string.quoted.double.js, string.quoted.double.jsx, string.quoted.double.ts, string.quoted.double.tsx, string.template.js, string.template.jsx, string.template.ts, string.template.tsx#b7fada
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.jsx, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.jsx, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.tsx#fffbold
constant.numeric.decimal.js, constant.numeric.decimal.jsx, constant.numeric.decimal.ts, constant.numeric.decimal.tsx#c9c9fc
entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.ts, entity.name.tag.tsx#fffbold
punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx#bbbbold
entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx#777
support.type.primitive.ts, support.type.primitive.tsx#323232bold
storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.type.ts, storage.type.type.tsx#363b3bbold
entity.name.type.module.ts, entity.name.type.module.tsx, entity.name.type.ts, entity.name.type.tsx#FFFbold
entity.name.type.alias.ts, entity.name.type.alias.tsx#ffbfa6
support.type.property-name.json
source.json meta.structure.dictionary.json support.type.property-name.json#FFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AAA
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#565656
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#FFF
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#AAA
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#565656
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFF
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AAA
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 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#565656
string.quoted.double.json#b7fada
constant.numeric.json#c9c9fc
constant.language.json#EEEbold
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#AAA
punctuation.separator.dictionary.key-value.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#444
punctuation.separator.array.json#444
text.html.markdown, punctuation.definition.list_item.markdown#fff
text.html.markdown markup.inline.raw.markdown, markup.inline.raw.string.markdown#b7fada
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#bbb
markdown.heading, entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c9c9fcbold
markup.italic.markdown#aaaitalic
markup.bold, markup.bold string#aaabold
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#aaabold italic
markup.underline#aaaunderline
punctuation.definition.quote.begin.markdown#ffffff32
markup.quote.markdown#626969bold
string.other.link.title.markdown, string.other.link.description.markdown#ccc
string.other.link.description.title.markdown#ccc
constant.other.reference.link.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown#fff
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#a4b7d1
punctuation.definition.list.begin.markdown#646464
markup.list.numbered.markdown, markup.list.unnumbered.markdown#aaa
punctuation.definition.markdown#2b5842bold
fenced_code.block.language.markdown#2b5842bold
meta.separator#ffe1e1bold
string.unquoted.plain.out.yaml#7b7b7b
BiancoNero by Mauro Paternina - VS Code Theme