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.activeBorder#d4d4d4
  • activityBar.background#0a0a0a
  • activityBar.foreground#7c7c7c
  • activityBar.inactiveForeground#7c7c7c
  • activityBarBadge.background#969696
  • activityBarBadge.foreground#0a0a0a
  • badge.background#969696
  • badge.foreground#0a0a0a
  • breadcrumb.activeSelectionForeground#d4d4d4
  • breadcrumb.focusForeground#d4d4d4
  • breadcrumb.foreground#bebebe
  • breadcrumbPicker.background#1a1a1a
  • button.background#969696
  • button.foreground#0a0a0a
  • button.hoverBackground#7c7c7c
  • descriptionForeground#bebebe
  • diffEditor.insertedLineBackground#52764d20
  • diffEditor.insertedTextBackground#52764d20
  • diffEditor.removedLineBackground#8b525220
  • diffEditor.removedTextBackground#8b525220
  • dropdown.background#1a1a1a
  • dropdown.border#2a2a2a
  • dropdown.foreground#d4d4d4
  • editor.background#0a0a0a
  • editor.findMatchBackground#8b7d5260
  • editor.findMatchHighlightBackground#8b7d5240
  • editor.findRangeHighlightBackground#3d3d3d40
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#1a1a1a
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#303030
  • editor.selectionHighlightBackground#30303080
  • editor.wordHighlightBackground#3d3d3d60
  • editor.wordHighlightStrongBackground#3d3d3d60
  • editorBracketHighlight.foreground1#c0dcc0ff
  • editorBracketHighlight.foreground2#edcbb8ff
  • editorBracketHighlight.foreground3#dccdbeff
  • editorBracketHighlight.foreground4#a2bee8
  • editorBracketHighlight.foreground5#b6d8e6ff
  • editorBracketHighlight.foreground6#e3bdadff
  • editorBracketHighlight.unexpectedBracket.foreground#9e6a6a
  • editorBracketMatch.background#30303040
  • editorBracketMatch.border#7c7c7c80
  • editorCursor.foreground#d4d4d4
  • editorError.foreground#9e6a6a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.addedBackground#6a8e6a
  • editorGutter.deletedBackground#9e6a6a
  • editorGutter.modifiedBackground#9e8a6a
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#2a2a2a
  • editorHoverWidget.foreground#d4d4d4
  • editorInfo.foreground#6a7e9e
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#7c7c7c
  • editorOverviewRuler.errorForeground#9e6a6a
  • editorOverviewRuler.infoForeground#6a7e9e
  • editorOverviewRuler.warningForeground#9e8a6a
  • editorRuler.foreground#2a2a2a
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.selectedBackground#3d3d3d
  • editorWarning.foreground#9e8a6a
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#1a1a1a
  • editorWidget.border#2a2a2a
  • focusBorder#3d3d3d60
  • gitDecoration.addedResourceForeground#6a8e6a
  • gitDecoration.conflictingResourceForeground#a2bee8
  • gitDecoration.deletedResourceForeground#9e6a6a
  • gitDecoration.ignoredResourceForeground#5a5a5a
  • gitDecoration.modifiedResourceForeground#9e8a6a
  • gitDecoration.untrackedResourceForeground#8ea4b8
  • input.background#1a1a1a
  • input.border#2a2a2a
  • input.foreground#d4d4d4
  • input.placeholderForeground#8c8c8c
  • inputOption.activeBorder#969696
  • inputOption.activeForeground#d4d4d4
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#d4d4d4
  • list.errorForeground#9e6a6a
  • list.highlightForeground#969696
  • list.hoverBackground#252525
  • list.inactiveSelectionBackground#252525
  • list.warningForeground#9e8a6a
  • notificationsErrorIcon.foreground#9e6a6a
  • notificationsInfoIcon.foreground#6a7e9e
  • notificationsWarningIcon.foreground#9e8a6a
  • panel.background#0a0a0a
  • panel.border#00000000
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#bebebe
  • peekView.border#969696
  • peekViewEditor.background#121212
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#121212
  • peekViewTitleDescription.foreground#bebebe
  • pickerGroup.foreground#d4d4d4
  • problemsErrorIcon.foreground#9e6a6a
  • problemsInfoIcon.foreground#6a7e9e
  • problemsWarningIcon.foreground#9e8a6a
  • quickInput.background#1a1a1a
  • quickInput.foreground#d4d4d4
  • quickInputList.focusBackground#3d3d3d
  • quickInputList.focusForeground#d4d4d4
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#3d3d3d80
  • scrollbarSlider.background#30303040
  • scrollbarSlider.hoverBackground#3d3d3d60
  • selection.background#303030
  • settings.headerForeground#d4d4d4
  • settings.modifiedItemIndicator#969696
  • sideBar.background#0a0a0a
  • sideBar.border#2a2a2a50
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#121212
  • statusBar.debuggingBackground#1a1a1a
  • statusBar.debuggingForeground#d4d4d4
  • statusBar.foreground#bebebe
  • statusBar.noFolderBackground#121212
  • statusBarItem.remoteBackground#969696
  • statusBarItem.remoteForeground#0a0a0a
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#2a2a2a
  • tab.activeForeground#d4d4d4
  • tab.border#00000000
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#bebebe
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#dccdbeff
  • terminal.ansiBrightBlack#7c7c7c
  • terminal.ansiBrightBlue#6a7e9e
  • terminal.ansiBrightCyan#adadad
  • terminal.ansiBrightGreen#6a8e6a
  • terminal.ansiBrightMagenta#a5a5a5
  • terminal.ansiBrightRed#9e6a6a
  • terminal.ansiBrightWhite#f6f6f6
  • terminal.ansiBrightYellow#9e8a6a
  • terminal.ansiCyan#c0dcc0ff
  • terminal.ansiGreen#b6d8e6ff
  • terminal.ansiMagenta#edcbb8ff
  • terminal.ansiRed#e3bdadff
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#a2bee8
  • terminal.background#0a0a0a
  • terminal.foreground#d4d4d4
  • terminalCursor.foreground#d4d4d4
  • textLink.activeForeground#969696
  • textLink.foreground#969696
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#d4d4d4
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#bebebe

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8c8c8citalic
string, string.quoted, string.template#b6d8e6ff—
constant.numeric#e3bdadff—
constant.language.boolean#e3bdadff—
constant.language.null, constant.language.undefined#e3bdadff—
keyword, keyword.control#dccdbeff—
storage, storage.type, storage.modifier#dccdbeff—
keyword.operator#dccdbeff—
entity.name.function, support.function#a2bee8—
entity.name.method#a2bee8—
entity.name.type, entity.name.class, support.type, support.class#edcbb8ff—
variable, entity.name.variable, variable.other#f4f5ee—
variable.parameter#e3bdadff—
variable.other.property, support.type.property-name#c0dcc0ff—
constant, variable.other.constant#e3bdadff—
entity.name.tag#e3bdadff—
entity.other.attribute-name#c0dcc0ff—
punctuation#d4d4d4—
variable.language.special.self.python, variable.parameter.function.language.special.self.python#e3bdadffnormal
support.function.magic.python#a2bee8normal
invalid, invalid.illegal#9e6a6a—
constant.other.color#d4d4d4—
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#dccdbeff—
entity.name.function, variable.function, support.function, keyword.other.special-method#a2bee8—
meta.block variable.other#d4d4d4—
support.other.variable, string.other.link#d4d4d4—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#e3bdadff—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#b6d8e6ff—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#edcbb8ff—
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, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#d4d4d4—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#9e6a6a—
variable.language#bebebe—
entity.name.method.js#d4d4d4—
meta.class-method.js entity.name.function.js, variable.function.constructor#d4d4d4—
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#c0dcc0ff—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a2bee8—
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#a2bee8—
source.sass keyword.control, meta.attribute-selector.scss#d4d4d4—
markup.inserted#6a8e6a—
markup.deleted#9e6a6a—
markup.changed#9e8a6a—
string.regexp#c0dcc0ff—
constant.character.escape#bebebe—
*url*, *link*, *uri*#969696underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a2bee8—
source.js constant.other.object.key.js string.unquoted.label.js#9e6a6anormal
support.type.property-name.json#a2bee8—
text.html.markdown, punctuation.definition.list_item.markdown#d4d4d4—
text.html.markdown markup.inline.raw.markdown#bebebe—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#d4d4d4—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#a2bee8—
markup.italic#d4d4d4normal
markup.bold, markup.bold string#d4d4d4bold
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#d4d4d4bold
markup.underline#a2bee8underline
markup.quote punctuation.definition.blockquote.markdown#d4d4d4—
markup.quote#d4d4d4—
string.other.link.title.markdown#d4d4d4—
string.other.link.description.title.markdown#bebebe—
constant.other.reference.link.markdown#a2bee8—
markup.raw.block#bebebe—
markup.raw.block.fenced.markdown#121212—
punctuation.definition.fenced.markdown#121212—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d4d4d4—
variable.language.fenced.markdown#d4d4d4—
meta.separator#8c8c8cbold
markup.table#d4d4d4—
meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function, meta.brackets, punctuation.definition.brackets, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section, punctuation.section.block, punctuation.section.braces, punctuation.section.group, punctuation.section.parameters#7c7c7c—
meta.function string.quoted.double.ts, meta.function string.quoted.single.ts, meta.function string.quoted.double.js, meta.function string.quoted.single.js, meta.function string.quoted.double.tsx, meta.function string.quoted.single.tsx#e3bdadff—
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#a2bee8bold
variable.parameter.function.python#e3bdadffnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#dccdbeff—
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#e3bdadff—
storage.type.python, storage.type.annotation.python, storage.type.function.python, storage.type.class.python, storage.type.union.python, storage.type.intersection.python, storage.type.optional.python, storage.type.any.python, storage.type.unknown.python, storage.type.none.python#edcbb8ffbold
variable.parameter.function.language.special.self.python#e3bdadff—
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#edcbb8ff—
entity.name.function.python, meta.function.python entity.name.function.python#a2bee8—
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#a2bee8—
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#e3bdadff—
string.quoted.single.python, string.quoted.double.python, string.quoted.triple.single.python, string.quoted.triple.double.python, string.regexp.python, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, string.quoted.double.python punctuation.definition.string.begin.python, string.quoted.double.python punctuation.definition.string.end.python, string.quoted.triple.single.python punctuation.definition.string.begin.python, string.quoted.triple.single.python punctuation.definition.string.end.python, string.quoted.triple.double.python punctuation.definition.string.begin.python, string.quoted.triple.double.python punctuation.definition.string.end.python#b6d8e6ff—
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#b6d8e6ff—
constant.language.python#e3bdadffnormal
meta.object-literal.key string.quoted.single.ts, meta.object-literal.key string.quoted.double.ts, meta.object-literal.key string.quoted.single.js, meta.object-literal.key string.quoted.double.js, meta.object-literal.key string.quoted.single.tsx, meta.object-literal.key string.quoted.double.tsx, meta.object.member string.quoted.single.ts, meta.object.member string.quoted.double.ts, meta.object.member string.quoted.single.js, meta.object.member string.quoted.double.js, meta.object.member string.quoted.single.tsx, meta.object.member string.quoted.double.tsx, meta.array.literal string.quoted.single.ts, meta.array.literal string.quoted.double.ts, meta.array.literal string.quoted.single.js, meta.array.literal string.quoted.double.js, meta.array.literal string.quoted.single.tsx, meta.array.literal string.quoted.double.tsx, meta.enum.declaration string.quoted.single.ts, meta.enum.declaration string.quoted.double.ts, meta.enum.declaration string.quoted.single.js, meta.enum.declaration string.quoted.double.js, meta.enum.declaration string.quoted.single.tsx, meta.enum.declaration string.quoted.double.tsx#6a8e6a—
meta.tag string.quoted.single.ts, meta.tag string.quoted.double.ts, meta.tag string.quoted.single.js, meta.tag string.quoted.double.js, meta.tag string.quoted.single.tsx, meta.tag string.quoted.double.tsx, meta.attribute string.quoted.single.ts, meta.attribute string.quoted.double.ts, meta.attribute string.quoted.single.js, meta.attribute string.quoted.double.js, meta.attribute string.quoted.single.tsx, meta.attribute string.quoted.double.tsx#d4d4d4—
meta.import string.quoted.single.ts, meta.import string.quoted.double.ts, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.tsx, meta.import string.quoted.double.tsx#d4d4d4—
string.template.js, string.template.ts#b6d8e6ff—
string.quoted.single.ansible, string.quoted.double.ansible, string.quoted.single.yaml.ansible, string.quoted.double.yaml.ansible, punctuation.definition.string.begin.ansible, punctuation.definition.string.end.ansible, punctuation.definition.string.begin.yaml.ansible, punctuation.definition.string.end.yaml.ansible#b6d8e6ff—
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json punctuation.definition.string.begin, string.quoted.double.json punctuation.definition.string.end, punctuation.support.type.property-name.begin.json.lines, punctuation.support.type.property-name.end.json.lines#b6d8e6ff—