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#e8ecf0
  • activityBar.background#0a0c0f
  • activityBar.foreground#6b7585
  • activityBar.inactiveForeground#6b7585
  • activityBarBadge.background#6272a4
  • activityBarBadge.foreground#0a0c0f
  • badge.background#6272a4
  • badge.foreground#0a0c0f
  • breadcrumb.activeSelectionForeground#e8ecf0
  • breadcrumb.focusForeground#e8ecf0
  • breadcrumb.foreground#c8d0da
  • breadcrumbPicker.background#1a1e22
  • button.background#6272a4
  • button.foreground#0a0c0f
  • button.hoverBackground#526394
  • descriptionForeground#c8d0da
  • diffEditor.insertedLineBackground#50fa7b20
  • diffEditor.insertedTextBackground#50fa7b20
  • diffEditor.removedLineBackground#ff555520
  • diffEditor.removedTextBackground#ff555520
  • dropdown.background#1a1e22
  • dropdown.border#4a5361
  • dropdown.foreground#e8ecf0
  • editor.background#0a0c0f
  • editor.findMatchBackground#50fa7b30
  • editor.findMatchHighlightBackground#f1b64450
  • editor.findRangeHighlightBackground#bd93f930
  • editor.foreground#e8ecf0
  • editor.lineHighlightBackground#1a1e22
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#2e343c
  • editor.selectionHighlightBackground#2e343c80
  • editor.wordHighlightBackground#6272a460
  • editor.wordHighlightStrongBackground#6272a460
  • editorBracketHighlight.foreground1#66d9ef
  • editorBracketHighlight.foreground2#8897b4
  • editorBracketHighlight.foreground3#bd93f9
  • editorBracketHighlight.foreground4#6272a4
  • editorBracketHighlight.foreground5#50fa7b
  • editorBracketHighlight.foreground6#ffb86c
  • editorBracketHighlight.unexpectedBracket.foreground#ff5555
  • editorBracketMatch.background#383f4840
  • editorBracketMatch.border#9099a880
  • editorCursor.foreground#e8ecf0
  • editorError.foreground#ff5555
  • editorGroupHeader.tabsBackground#0a0c0f
  • editorGutter.addedBackground#50fa7b
  • editorGutter.deletedBackground#ff5555
  • editorGutter.modifiedBackground#f1b644
  • editorHoverWidget.background#1a1e22
  • editorHoverWidget.border#4a5361
  • editorHoverWidget.foreground#e8ecf0
  • editorInfo.foreground#6272a4
  • editorLineNumber.activeForeground#e8ecf0
  • editorLineNumber.foreground#6b7585
  • editorOverviewRuler.errorForeground#ff5555
  • editorOverviewRuler.infoForeground#6272a4
  • editorOverviewRuler.warningForeground#f1b644
  • editorRuler.foreground#4a5361
  • editorSuggestWidget.background#1a1e22
  • editorSuggestWidget.border#4a5361
  • editorSuggestWidget.selectedBackground#383f48
  • editorWarning.foreground#f1b644
  • editorWhitespace.foreground#4a5361
  • editorWidget.background#1a1e22
  • editorWidget.border#4a5361
  • focusBorder#6272a460
  • gitDecoration.addedResourceForeground#50fa7b
  • gitDecoration.conflictingResourceForeground#6272a4
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.ignoredResourceForeground#6b7585
  • gitDecoration.modifiedResourceForeground#f1b644
  • gitDecoration.untrackedResourceForeground#9099a8
  • input.background#1a1e22
  • input.border#4a5361
  • input.foreground#e8ecf0
  • input.placeholderForeground#9099a8
  • inputOption.activeBorder#6272a4
  • inputOption.activeForeground#e8ecf0
  • list.activeSelectionBackground#1a1e22
  • list.activeSelectionForeground#e8ecf0
  • list.errorForeground#ff5555
  • list.highlightForeground#6272a4
  • list.hoverBackground#242930
  • list.inactiveSelectionBackground#242930
  • list.warningForeground#f1b644
  • notificationsErrorIcon.foreground#ff5555
  • notificationsInfoIcon.foreground#6272a4
  • notificationsWarningIcon.foreground#f1b644
  • panel.background#0a0c0f
  • panel.border#00000000
  • panelTitle.activeForeground#e8ecf0
  • panelTitle.inactiveForeground#c8d0da
  • peekView.border#6272a4
  • peekViewEditor.background#121517
  • peekViewResult.background#0a0c0f
  • peekViewTitle.background#121517
  • peekViewTitleDescription.foreground#c8d0da
  • pickerGroup.foreground#e8ecf0
  • problemsErrorIcon.foreground#ff5555
  • problemsInfoIcon.foreground#6272a4
  • problemsWarningIcon.foreground#f1b644
  • quickInput.background#1a1e22
  • quickInput.foreground#e8ecf0
  • quickInputList.focusBackground#383f48
  • quickInputList.focusForeground#e8ecf0
  • scrollbar.shadow#627aa430
  • scrollbarSlider.activeBackground#24293030
  • scrollbarSlider.background#383f4840
  • scrollbarSlider.hoverBackground#4a536160
  • selection.background#2e343c
  • settings.headerForeground#e8ecf0
  • settings.modifiedItemIndicator#6272a4
  • sideBar.background#0a0c0f
  • sideBar.border#4a536150
  • sideBar.foreground#e8ecf0
  • sideBarSectionHeader.background#0a0c0f
  • sideBarSectionHeader.foreground#e8ecf0
  • sideBarTitle.foreground#e8ecf0
  • statusBar.background#121517
  • statusBar.debuggingBackground#1a1e22
  • statusBar.debuggingForeground#e8ecf0
  • statusBar.foreground#c8d0da
  • statusBar.noFolderBackground#121517
  • statusBarItem.remoteBackground#6272a4
  • statusBarItem.remoteForeground#0a0c0f
  • tab.activeBackground#1a1e22
  • tab.activeBorder#e8ecf040
  • tab.activeForeground#e8ecf0
  • tab.border#00000000
  • tab.inactiveBackground#0a0c0f
  • tab.inactiveForeground#c8d0da
  • terminal.ansiBlack#0a0c0f
  • terminal.ansiBlue#bd93f9
  • terminal.ansiBrightBlack#6b7585
  • terminal.ansiBrightBlue#6272a4
  • terminal.ansiBrightCyan#8be9fd
  • terminal.ansiBrightGreen#50fa7b
  • terminal.ansiBrightMagenta#ff79c6
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#f1b644
  • terminal.ansiCyan#66d9ef
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#8897b4
  • terminal.ansiRed#ffb86c
  • terminal.ansiWhite#e8ecf0
  • terminal.ansiYellow#6272a4
  • terminal.background#0a0c0f
  • terminal.foreground#e8ecf0
  • terminalCursor.foreground#e8ecf0
  • textLink.activeForeground#6272a4
  • textLink.foreground#6272a4
  • titleBar.activeBackground#0a0c0f
  • titleBar.activeForeground#e8ecf0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0a0c0f
  • titleBar.inactiveForeground#c8d0da

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9099a8italic
string, string.quoted, string.template#50fa7b
constant.numeric#ffb86c
constant.language.boolean#ffb86c
constant.language.null, constant.language.undefined#ffb86c
keyword, keyword.control#bd93f9
storage, storage.type, storage.modifier#bd93f9
keyword.operator#bd93f9
entity.name.function, support.function#6272a4
entity.name.method#6272a4
entity.name.type, entity.name.class, support.type, support.class#8897b4
variable, entity.name.variable, variable.other#f0f4f8
variable.parameter#ffb86c
variable.other.property, support.type.property-name#66d9ef
constant, variable.other.constant#ffb86c
entity.name.tag#ffb86c
entity.other.attribute-name#66d9ef
punctuation#e8ecf0
variable.language.special.self.python, variable.parameter.function.language.special.self.python#ffb86cnormal
support.function.magic.python#6272a4normal
invalid, invalid.illegal#ff5555
constant.other.color#e8ecf0
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#bd93f9
entity.name.function, variable.function, support.function, keyword.other.special-method#6272a4
meta.block variable.other#e8ecf0
support.other.variable, string.other.link#e8ecf0
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#ffb86c
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#50fa7b
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#8897b4
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#e8ecf0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5555
variable.language#c8d0da
entity.name.method.js#e8ecf0
meta.class-method.js entity.name.function.js, variable.function.constructor#e8ecf0
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#66d9ef
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6272a4
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#6272a4
source.sass keyword.control, meta.attribute-selector.scss#e8ecf0
markup.inserted#50fa7b
markup.deleted#ff5555
markup.changed#f1b644
string.regexp#66d9ef
constant.character.escape#c8d0da
*url*, *link*, *uri*#6272a4underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6272a4
source.js constant.other.object.key.js string.unquoted.label.js#ff5555normal
support.type.property-name.json#6272a4
text.html.markdown, punctuation.definition.list_item.markdown#e8ecf0
text.html.markdown markup.inline.raw.markdown#c8d0da
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8ecf0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#6272a4
markup.italic#e8ecf0normal
markup.bold, markup.bold string#e8ecf0bold
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#e8ecf0bold
markup.underline#6272a4underline
markup.quote punctuation.definition.blockquote.markdown#e8ecf0
markup.quote#e8ecf0
string.other.link.title.markdown#e8ecf0
string.other.link.description.title.markdown#c8d0da
constant.other.reference.link.markdown#6272a4
markup.raw.block#c8d0da
markup.raw.block.fenced.markdown#50fa7b30
punctuation.definition.fenced.markdown#50fa7b30
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8ecf0
variable.language.fenced.markdown#e8ecf0
meta.separator#9099a8bold
markup.table#e8ecf0
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#6b7585
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#ffb86c
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#6272a4bold
variable.parameter.function.python#ffb86cnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#bd93f9
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#ffb86c
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#8897b4bold
variable.parameter.function.language.special.self.python#ffb86c
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#8897b4
entity.name.function.python, meta.function.python entity.name.function.python#6272a4
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#6272a4
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#ffb86c
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#50fa7b
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#50fa7b
constant.language.python#ffb86cnormal
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#50fa7b
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#e8ecf0
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#e8ecf0
string.template.js, string.template.ts#50fa7b
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#50fa7b
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#50fa7b
Fedaykin by FedaykinDev - VS Code Theme