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#e8e2d0
  • activityBar.background#0f0e0c
  • activityBar.foreground#6e6858
  • activityBar.inactiveForeground#6e6858
  • activityBarBadge.background#4a9eff
  • activityBarBadge.foreground#0f0e0c
  • badge.background#4a9eff
  • badge.foreground#0f0e0c
  • breadcrumb.activeSelectionForeground#e8e2d0
  • breadcrumb.focusForeground#e8e2d0
  • breadcrumb.foreground#d0c8b0
  • breadcrumbPicker.background#211f1b
  • button.background#4a9eff
  • button.foreground#0f0e0c
  • button.hoverBackground#3a8eef
  • descriptionForeground#d0c8b0
  • diffEditor.insertedLineBackground#7ca66820
  • diffEditor.insertedTextBackground#7ca66820
  • diffEditor.removedLineBackground#d67e6020
  • diffEditor.removedTextBackground#d67e6020
  • dropdown.background#211f1b
  • dropdown.border#4e4a40
  • dropdown.foreground#e8e2d0
  • editor.background#0f0e0c
  • editor.findMatchBackground#7ca66830
  • editor.findMatchHighlightBackground#e8a85c50
  • editor.findRangeHighlightBackground#9b7ac430
  • editor.foreground#e8e2d0
  • editor.lineHighlightBackground#211f1b
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#34312a
  • editor.selectionHighlightBackground#34312a80
  • editor.wordHighlightBackground#4a9eff60
  • editor.wordHighlightStrongBackground#4a9eff60
  • editorBracketHighlight.foreground1#c89c5c
  • editorBracketHighlight.foreground2#a08458
  • editorBracketHighlight.foreground3#9b7ac4
  • editorBracketHighlight.foreground4#4a9eff
  • editorBracketHighlight.foreground5#88b068
  • editorBracketHighlight.foreground6#d4a85c
  • editorBracketHighlight.unexpectedBracket.foreground#d67e60
  • editorBracketMatch.background#3e3a3240
  • editorBracketMatch.border#988e7880
  • editorCursor.foreground#e8e2d0
  • editorError.foreground#d67e60
  • editorGroupHeader.tabsBackground#0f0e0c
  • editorGutter.addedBackground#7ca668
  • editorGutter.deletedBackground#d67e60
  • editorGutter.modifiedBackground#e8a85c
  • editorHoverWidget.background#211f1b
  • editorHoverWidget.border#4e4a40
  • editorHoverWidget.foreground#e8e2d0
  • editorInfo.foreground#5ca8e8
  • editorLineNumber.activeForeground#e8e2d0
  • editorLineNumber.foreground#6e6858
  • editorOverviewRuler.errorForeground#d67e60
  • editorOverviewRuler.infoForeground#5ca8e8
  • editorOverviewRuler.warningForeground#e8a85c
  • editorRuler.foreground#4e4a40
  • editorSuggestWidget.background#211f1b
  • editorSuggestWidget.border#4e4a40
  • editorSuggestWidget.selectedBackground#3e3a32
  • editorWarning.foreground#e8a85c
  • editorWhitespace.foreground#4e4a40
  • editorWidget.background#211f1b
  • editorWidget.border#4e4a40
  • focusBorder#4a9eff60
  • gitDecoration.addedResourceForeground#7ca668
  • gitDecoration.conflictingResourceForeground#4a9eff
  • gitDecoration.deletedResourceForeground#d67e60
  • gitDecoration.ignoredResourceForeground#6e6858
  • gitDecoration.modifiedResourceForeground#e8a85c
  • gitDecoration.untrackedResourceForeground#9b8e7c
  • input.background#211f1b
  • input.border#4e4a40
  • input.foreground#e8e2d0
  • input.placeholderForeground#988e78
  • inputOption.activeBorder#4a9eff
  • inputOption.activeForeground#e8e2d0
  • list.activeSelectionBackground#211f1b
  • list.activeSelectionForeground#e8e2d0
  • list.errorForeground#d67e60
  • list.highlightForeground#4a9eff
  • list.hoverBackground#2a2822
  • list.inactiveSelectionBackground#2a2822
  • list.warningForeground#e8a85c
  • notificationsErrorIcon.foreground#d67e60
  • notificationsInfoIcon.foreground#5ca8e8
  • notificationsWarningIcon.foreground#e8a85c
  • panel.background#0f0e0c
  • panel.border#00000000
  • panelTitle.activeForeground#e8e2d0
  • panelTitle.inactiveForeground#d0c8b0
  • peekView.border#4a9eff
  • peekViewEditor.background#181614
  • peekViewResult.background#0f0e0c
  • peekViewTitle.background#181614
  • peekViewTitleDescription.foreground#d0c8b0
  • pickerGroup.foreground#e8e2d0
  • problemsErrorIcon.foreground#d67e60
  • problemsInfoIcon.foreground#5ca8e8
  • problemsWarningIcon.foreground#e8a85c
  • quickInput.background#211f1b
  • quickInput.foreground#e8e2d0
  • quickInputList.focusBackground#3e3a32
  • quickInputList.focusForeground#e8e2d0
  • scrollbar.shadow#4a9eff30
  • scrollbarSlider.activeBackground#2a282230
  • scrollbarSlider.background#3e3a3240
  • scrollbarSlider.hoverBackground#4e4a4060
  • selection.background#34312a
  • settings.headerForeground#e8e2d0
  • settings.modifiedItemIndicator#4a9eff
  • sideBar.background#0f0e0c
  • sideBar.border#4e4a4050
  • sideBar.foreground#e8e2d0
  • sideBarSectionHeader.background#0f0e0c
  • sideBarSectionHeader.foreground#e8e2d0
  • sideBarTitle.foreground#e8e2d0
  • statusBar.background#181614
  • statusBar.debuggingBackground#211f1b
  • statusBar.debuggingForeground#e8e2d0
  • statusBar.foreground#d0c8b0
  • statusBar.noFolderBackground#181614
  • statusBarItem.remoteBackground#4a9eff
  • statusBarItem.remoteForeground#0f0e0c
  • tab.activeBackground#211f1b
  • tab.activeBorder#e8e2d040
  • tab.activeForeground#e8e2d0
  • tab.border#00000000
  • tab.inactiveBackground#0f0e0c
  • tab.inactiveForeground#d0c8b0
  • terminal.ansiBlack#0f0e0c
  • terminal.ansiBlue#9b7ac4
  • terminal.ansiBrightBlack#6e6858
  • terminal.ansiBrightBlue#5ca8e8
  • terminal.ansiBrightCyan#6cbce8
  • terminal.ansiBrightGreen#7ca668
  • terminal.ansiBrightMagenta#b088d0
  • terminal.ansiBrightRed#d67e60
  • terminal.ansiBrightWhite#f8f4e8
  • terminal.ansiBrightYellow#e8a85c
  • terminal.ansiCyan#c89c5c
  • terminal.ansiGreen#88b068
  • terminal.ansiMagenta#a08458
  • terminal.ansiRed#d4a85c
  • terminal.ansiWhite#e8e2d0
  • terminal.ansiYellow#4a9eff
  • terminal.background#0f0e0c
  • terminal.foreground#e8e2d0
  • terminalCursor.foreground#e8e2d0
  • textLink.activeForeground#4a9eff
  • textLink.foreground#4a9eff
  • titleBar.activeBackground#0f0e0c
  • titleBar.activeForeground#e8e2d0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0f0e0c
  • titleBar.inactiveForeground#d0c8b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#988e78italic
string, string.quoted, string.template#88b068
constant.numeric#d4a85c
constant.language.boolean#d4a85c
constant.language.null, constant.language.undefined#d4a85c
keyword, keyword.control#9b7ac4
storage, storage.type, storage.modifier#9b7ac4
keyword.operator#9b7ac4
entity.name.function, support.function#4a9eff
entity.name.method#4a9eff
entity.name.type, entity.name.class, support.type, support.class#a08458
variable, entity.name.variable, variable.other#f0ead8
variable.parameter#d4a85c
variable.other.property, support.type.property-name#c89c5c
constant, variable.other.constant#d4a85c
entity.name.tag#d4a85c
entity.other.attribute-name#c89c5c
punctuation#e8e2d0
variable.language.special.self.python, variable.parameter.function.language.special.self.python#d4a85cnormal
support.function.magic.python#4a9effnormal
invalid, invalid.illegal#d67e60
constant.other.color#e8e2d0
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#9b7ac4
entity.name.function, variable.function, support.function, keyword.other.special-method#4a9eff
meta.block variable.other#e8e2d0
support.other.variable, string.other.link#e8e2d0
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#d4a85c
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#88b068
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#a08458
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#e8e2d0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d67e60
variable.language#d0c8b0
entity.name.method.js#e8e2d0
meta.class-method.js entity.name.function.js, variable.function.constructor#e8e2d0
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#c89c5c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#4a9eff
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#4a9eff
source.sass keyword.control, meta.attribute-selector.scss#e8e2d0
markup.inserted#7ca668
markup.deleted#d67e60
markup.changed#e8a85c
string.regexp#c89c5c
constant.character.escape#d0c8b0
*url*, *link*, *uri*#4a9effunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4a9eff
source.js constant.other.object.key.js string.unquoted.label.js#d67e60normal
support.type.property-name.json#4a9eff
text.html.markdown, punctuation.definition.list_item.markdown#e8e2d0
text.html.markdown markup.inline.raw.markdown#d0c8b0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8e2d0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#4a9eff
markup.italic#e8e2d0normal
markup.bold, markup.bold string#e8e2d0bold
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#e8e2d0bold
markup.underline#4a9effunderline
markup.quote punctuation.definition.blockquote.markdown#e8e2d0
markup.quote#e8e2d0
string.other.link.title.markdown#e8e2d0
string.other.link.description.title.markdown#d0c8b0
constant.other.reference.link.markdown#4a9eff
markup.raw.block#d0c8b0
markup.raw.block.fenced.markdown#88b06830
punctuation.definition.fenced.markdown#88b06830
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8e2d0
variable.language.fenced.markdown#e8e2d0
meta.separator#988e78bold
markup.table#e8e2d0
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#6e6858
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#d4a85c
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#4a9effbold
variable.parameter.function.python#d4a85cnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#9b7ac4
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#d4a85c
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#a08458bold
variable.parameter.function.language.special.self.python#d4a85c
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#a08458
entity.name.function.python, meta.function.python entity.name.function.python#4a9eff
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#4a9eff
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#d4a85c
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#88b068
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#88b068
constant.language.python#d4a85cnormal
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#7ca668
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#e8e2d0
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#e8e2d0
string.template.js, string.template.ts#88b068
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#88b068
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#88b068