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