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#f0e8ff
  • activityBar.background#050308
  • activityBar.foreground#5e5468
  • activityBar.inactiveForeground#5e5468
  • activityBarBadge.background#4ca8ff
  • activityBarBadge.foreground#050308
  • badge.background#4ca8ff
  • badge.foreground#050308
  • breadcrumb.activeSelectionForeground#f0e8ff
  • breadcrumb.focusForeground#f0e8ff
  • breadcrumb.foreground#d8cce8
  • breadcrumbPicker.background#15121c
  • button.background#4ca8ff
  • button.foreground#050308
  • button.hoverBackground#3c98ef
  • descriptionForeground#d8cce8
  • diffEditor.insertedLineBackground#69db7c20
  • diffEditor.insertedTextBackground#69db7c20
  • diffEditor.removedLineBackground#ff6b6b20
  • diffEditor.removedTextBackground#ff6b6b20
  • dropdown.background#15121c
  • dropdown.border#3f3848
  • dropdown.foreground#f0e8ff
  • editor.background#050308
  • editor.findMatchBackground#69db7c30
  • editor.findMatchHighlightBackground#ffa94d50
  • editor.findRangeHighlightBackground#9b72d430
  • editor.foreground#f0e8ff
  • editor.lineHighlightBackground#15121c
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#272230
  • editor.selectionHighlightBackground#27223080
  • editor.wordHighlightBackground#4ca8ff60
  • editor.wordHighlightStrongBackground#4ca8ff60
  • editorBracketHighlight.foreground1#ff9d5c
  • editorBracketHighlight.foreground2#7c6ca4
  • editorBracketHighlight.foreground3#9b72d4
  • editorBracketHighlight.foreground4#4ca8ff
  • editorBracketHighlight.foreground5#ff8c42
  • editorBracketHighlight.foreground6#c8884c
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
  • editorBracketMatch.background#302a3a40
  • editorBracketMatch.border#9888b080
  • editorCursor.foreground#f0e8ff
  • editorError.foreground#ff6b6b
  • editorGroupHeader.tabsBackground#050308
  • editorGutter.addedBackground#69db7c
  • editorGutter.deletedBackground#ff6b6b
  • editorGutter.modifiedBackground#ffa94d
  • editorHoverWidget.background#15121c
  • editorHoverWidget.border#3f3848
  • editorHoverWidget.foreground#f0e8ff
  • editorInfo.foreground#5ca7ff
  • editorLineNumber.activeForeground#f0e8ff
  • editorLineNumber.foreground#5e5468
  • editorOverviewRuler.errorForeground#ff6b6b
  • editorOverviewRuler.infoForeground#5ca7ff
  • editorOverviewRuler.warningForeground#ffa94d
  • editorRuler.foreground#3f3848
  • editorSuggestWidget.background#15121c
  • editorSuggestWidget.border#3f3848
  • editorSuggestWidget.selectedBackground#302a3a
  • editorWarning.foreground#ffa94d
  • editorWhitespace.foreground#3f3848
  • editorWidget.background#15121c
  • editorWidget.border#3f3848
  • focusBorder#4ca8ff60
  • gitDecoration.addedResourceForeground#69db7c
  • gitDecoration.conflictingResourceForeground#4ca8ff
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.ignoredResourceForeground#6e5e88
  • gitDecoration.modifiedResourceForeground#ffa94d
  • gitDecoration.untrackedResourceForeground#9c88b0
  • input.background#15121c
  • input.border#3f3848
  • input.foreground#f0e8ff
  • input.placeholderForeground#9888b0
  • inputOption.activeBorder#4ca8ff
  • inputOption.activeForeground#f0e8ff
  • list.activeSelectionBackground#15121c
  • list.activeSelectionForeground#f0e8ff
  • list.errorForeground#ff6b6b
  • list.highlightForeground#4ca8ff
  • list.hoverBackground#1e1a26
  • list.inactiveSelectionBackground#1e1a26
  • list.warningForeground#ffa94d
  • notificationsErrorIcon.foreground#ff6b6b
  • notificationsInfoIcon.foreground#5ca7ff
  • notificationsWarningIcon.foreground#ffa94d
  • panel.background#050308
  • panel.border#00000000
  • panelTitle.activeForeground#f0e8ff
  • panelTitle.inactiveForeground#d8cce8
  • peekView.border#4ca8ff
  • peekViewEditor.background#0d0a14
  • peekViewResult.background#050308
  • peekViewTitle.background#0d0a14
  • peekViewTitleDescription.foreground#d8cce8
  • pickerGroup.foreground#f0e8ff
  • problemsErrorIcon.foreground#ff6b6b
  • problemsInfoIcon.foreground#5ca7ff
  • problemsWarningIcon.foreground#ffa94d
  • quickInput.background#15121c
  • quickInput.foreground#f0e8ff
  • quickInputList.focusBackground#302a3a
  • quickInputList.focusForeground#f0e8ff
  • scrollbar.shadow#4ca8ff30
  • scrollbarSlider.activeBackground#1e1a2630
  • scrollbarSlider.background#302a3a40
  • scrollbarSlider.hoverBackground#3f384860
  • selection.background#272230
  • settings.headerForeground#f0e8ff
  • settings.modifiedItemIndicator#4ca8ff
  • sideBar.background#050308
  • sideBar.border#3f384850
  • sideBar.foreground#f0e8ff
  • sideBarSectionHeader.background#050308
  • sideBarSectionHeader.foreground#f0e8ff
  • sideBarTitle.foreground#f0e8ff
  • statusBar.background#0d0a14
  • statusBar.debuggingBackground#15121c
  • statusBar.debuggingForeground#f0e8ff
  • statusBar.foreground#d8cce8
  • statusBar.noFolderBackground#0d0a14
  • statusBarItem.remoteBackground#4ca8ff
  • statusBarItem.remoteForeground#050308
  • tab.activeBackground#15121c
  • tab.activeBorder#f0e8ff40
  • tab.activeForeground#f0e8ff
  • tab.border#00000000
  • tab.inactiveBackground#050308
  • tab.inactiveForeground#d8cce8
  • terminal.ansiBlack#050308
  • terminal.ansiBlue#9b72d4
  • terminal.ansiBrightBlack#5e5468
  • terminal.ansiBrightBlue#5ca7ff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#69db7c
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffa94d
  • terminal.ansiCyan#ff9d5c
  • terminal.ansiGreen#ff8c42
  • terminal.ansiMagenta#7c6ca4
  • terminal.ansiRed#c8884c
  • terminal.ansiWhite#f0e8ff
  • terminal.ansiYellow#4ca8ff
  • terminal.background#050308
  • terminal.foreground#f0e8ff
  • terminalCursor.foreground#f0e8ff
  • textLink.activeForeground#4ca8ff
  • textLink.foreground#4ca8ff
  • titleBar.activeBackground#050308
  • titleBar.activeForeground#f0e8ff
  • titleBar.border#00000000
  • titleBar.inactiveBackground#050308
  • titleBar.inactiveForeground#d8cce8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9888b0italic
string, string.quoted, string.template#ff8c42—
constant.numeric#c8884c—
constant.language.boolean#c8884c—
constant.language.null, constant.language.undefined#c8884c—
keyword, keyword.control#9b72d4—
storage, storage.type, storage.modifier#9b72d4—
keyword.operator#9b72d4—
entity.name.function, support.function#4ca8ff—
entity.name.method#4ca8ff—
entity.name.type, entity.name.class, support.type, support.class#7c6ca4—
variable, entity.name.variable, variable.other#fff8f0—
variable.parameter#c8884c—
variable.other.property, support.type.property-name#ff9d5c—
constant, variable.other.constant#c8884c—
entity.name.tag#c8884c—
entity.other.attribute-name#ff9d5c—
punctuation#f0e8ff—
variable.language.special.self.python, variable.parameter.function.language.special.self.python#c8884cnormal
support.function.magic.python#4ca8ffnormal
invalid, invalid.illegal#ff6b6b—
constant.other.color#f0e8ff—
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#9b72d4—
entity.name.function, variable.function, support.function, keyword.other.special-method#4ca8ff—
meta.block variable.other#f0e8ff—
support.other.variable, string.other.link#f0e8ff—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#c8884c—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ff8c42—
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#7c6ca4—
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#f0e8ff—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff6b6b—
variable.language#d8cce8—
entity.name.method.js#f0e8ff—
meta.class-method.js entity.name.function.js, variable.function.constructor#f0e8ff—
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#ff9d5c—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#4ca8ff—
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#4ca8ff—
source.sass keyword.control, meta.attribute-selector.scss#f0e8ff—
markup.inserted#69db7c—
markup.deleted#ff6b6b—
markup.changed#ffa94d—
string.regexp#ff9d5c—
constant.character.escape#d8cce8—
*url*, *link*, *uri*#4ca8ffunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4ca8ff—
source.js constant.other.object.key.js string.unquoted.label.js#ff6b6bnormal
support.type.property-name.json#4ca8ff—
text.html.markdown, punctuation.definition.list_item.markdown#f0e8ff—
text.html.markdown markup.inline.raw.markdown#d8cce8—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#f0e8ff—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#4ca8ff—
markup.italic#f0e8ffnormal
markup.bold, markup.bold string#f0e8ffbold
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#f0e8ffbold
markup.underline#4ca8ffunderline
markup.quote punctuation.definition.blockquote.markdown#f0e8ff—
markup.quote#f0e8ff—
string.other.link.title.markdown#f0e8ff—
string.other.link.description.title.markdown#d8cce8—
constant.other.reference.link.markdown#4ca8ff—
markup.raw.block#d8cce8—
markup.raw.block.fenced.markdown#ff8c4230—
punctuation.definition.fenced.markdown#ff8c4230—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f0e8ff—
variable.language.fenced.markdown#f0e8ff—
meta.separator#9888b0bold
markup.table#f0e8ff—
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#5e5468—
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#c8884c—
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#4ca8ffbold
variable.parameter.function.python#c8884cnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#9b72d4—
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#c8884c—
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#7c6ca4bold
variable.parameter.function.language.special.self.python#c8884c—
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#7c6ca4—
entity.name.function.python, meta.function.python entity.name.function.python#4ca8ff—
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#4ca8ff—
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#c8884c—
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#ff8c42—
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#ff8c42—
constant.language.python#c8884cnormal
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#69db7c—
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#f0e8ff—
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#f0e8ff—
string.template.js, string.template.ts#ff8c42—
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#ff8c42—
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#ff8c42—