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
Fedaykin by FedaykinDev - VS Code Theme