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#e8e8f0
  • activityBar.background#0c0c0e
  • activityBar.foreground#6a6a7c
  • activityBar.inactiveForeground#6a6a7c
  • activityBarBadge.background#9d6fcc
  • activityBarBadge.foreground#0c0c0e
  • badge.background#9d6fcc
  • badge.foreground#0c0c0e
  • breadcrumb.activeSelectionForeground#e8e8f0
  • breadcrumb.focusForeground#e8e8f0
  • breadcrumb.foreground#c8c8d8
  • breadcrumbPicker.background#1c1c22
  • button.background#9d6fcc
  • button.foreground#0c0c0e
  • button.hoverBackground#8b5fc0
  • descriptionForeground#c8c8d8
  • diffEditor.insertedLineBackground#6b9e6b20
  • diffEditor.insertedTextBackground#6b9e6b20
  • diffEditor.removedLineBackground#ff383820
  • diffEditor.removedTextBackground#ff383820
  • dropdown.background#1c1c22
  • dropdown.border#4a4a58
  • dropdown.foreground#e8e8f0
  • editor.background#0c0c0e
  • editor.findMatchBackground#6b9e6b30
  • editor.findMatchHighlightBackground#ffaa4050
  • editor.findRangeHighlightBackground#dc143c30
  • editor.foreground#e8e8f0
  • editor.lineHighlightBackground#1c1c22
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#30303a
  • editor.selectionHighlightBackground#30303a80
  • editor.wordHighlightBackground#9d6fcc60
  • editor.wordHighlightStrongBackground#9d6fcc60
  • editorBracketHighlight.foreground1#c0c0c0
  • editorBracketHighlight.foreground2#7c6ca4
  • editorBracketHighlight.foreground3#dc143c
  • editorBracketHighlight.foreground4#8b72c7
  • editorBracketHighlight.foreground5#9d6fcc
  • editorBracketHighlight.foreground6#ffd700
  • editorBracketHighlight.unexpectedBracket.foreground#ff3838
  • editorBracketMatch.background#3a3a4640
  • editorBracketMatch.border#9090a880
  • editorCursor.foreground#e8e8f0
  • editorError.foreground#ff3838
  • editorGroupHeader.tabsBackground#0c0c0e
  • editorGutter.addedBackground#6b9e6b
  • editorGutter.deletedBackground#ff3838
  • editorGutter.modifiedBackground#ffaa40
  • editorHoverWidget.background#1c1c22
  • editorHoverWidget.border#4a4a58
  • editorHoverWidget.foreground#e8e8f0
  • editorInfo.foreground#8b72c7
  • editorLineNumber.activeForeground#e8e8f0
  • editorLineNumber.foreground#6a6a7c
  • editorOverviewRuler.errorForeground#ff3838
  • editorOverviewRuler.infoForeground#8b72c7
  • editorOverviewRuler.warningForeground#ffaa40
  • editorRuler.foreground#4a4a58
  • editorSuggestWidget.background#1c1c22
  • editorSuggestWidget.border#4a4a58
  • editorSuggestWidget.selectedBackground#3a3a46
  • editorWarning.foreground#ffaa40
  • editorWhitespace.foreground#4a4a58
  • editorWidget.background#1c1c22
  • editorWidget.border#4a4a58
  • focusBorder#9d6fcc60
  • gitDecoration.addedResourceForeground#6b9e6b
  • gitDecoration.conflictingResourceForeground#8b72c7
  • gitDecoration.deletedResourceForeground#ff3838
  • gitDecoration.ignoredResourceForeground#6a6a7c
  • gitDecoration.modifiedResourceForeground#ffaa40
  • gitDecoration.untrackedResourceForeground#9090a8
  • input.background#1c1c22
  • input.border#4a4a58
  • input.foreground#e8e8f0
  • input.placeholderForeground#9090a8
  • inputOption.activeBorder#9d6fcc
  • inputOption.activeForeground#e8e8f0
  • list.activeSelectionBackground#1c1c22
  • list.activeSelectionForeground#e8e8f0
  • list.errorForeground#ff3838
  • list.highlightForeground#9d6fcc
  • list.hoverBackground#26262e
  • list.inactiveSelectionBackground#26262e
  • list.warningForeground#ffaa40
  • notificationsErrorIcon.foreground#ff3838
  • notificationsInfoIcon.foreground#8b72c7
  • notificationsWarningIcon.foreground#ffaa40
  • panel.background#0c0c0e
  • panel.border#00000000
  • panelTitle.activeForeground#e8e8f0
  • panelTitle.inactiveForeground#c8c8d8
  • peekView.border#9d6fcc
  • peekViewEditor.background#141418
  • peekViewResult.background#0c0c0e
  • peekViewTitle.background#141418
  • peekViewTitleDescription.foreground#c8c8d8
  • pickerGroup.foreground#e8e8f0
  • problemsErrorIcon.foreground#ff3838
  • problemsInfoIcon.foreground#8b72c7
  • problemsWarningIcon.foreground#ffaa40
  • quickInput.background#1c1c22
  • quickInput.foreground#e8e8f0
  • quickInputList.focusBackground#3a3a46
  • quickInputList.focusForeground#e8e8f0
  • scrollbar.shadow#9d6fcc30
  • scrollbarSlider.activeBackground#26262e30
  • scrollbarSlider.background#3a3a4640
  • scrollbarSlider.hoverBackground#4a4a5860
  • selection.background#30303a
  • settings.headerForeground#e8e8f0
  • settings.modifiedItemIndicator#9d6fcc
  • sideBar.background#0c0c0e
  • sideBar.border#4a4a5850
  • sideBar.foreground#e8e8f0
  • sideBarSectionHeader.background#0c0c0e
  • sideBarSectionHeader.foreground#e8e8f0
  • sideBarTitle.foreground#e8e8f0
  • statusBar.background#141418
  • statusBar.debuggingBackground#1c1c22
  • statusBar.debuggingForeground#e8e8f0
  • statusBar.foreground#c8c8d8
  • statusBar.noFolderBackground#141418
  • statusBarItem.remoteBackground#9d6fcc
  • statusBarItem.remoteForeground#0c0c0e
  • tab.activeBackground#1c1c22
  • tab.activeBorder#e8e8f040
  • tab.activeForeground#e8e8f0
  • tab.border#00000000
  • tab.inactiveBackground#0c0c0e
  • tab.inactiveForeground#c8c8d8
  • terminal.ansiBlack#0c0c0e
  • terminal.ansiBlue#dc143c
  • terminal.ansiBrightBlack#6a6a7c
  • terminal.ansiBrightBlue#8b72c7
  • terminal.ansiBrightCyan#68d4ff
  • terminal.ansiBrightGreen#6b9e6b
  • terminal.ansiBrightMagenta#ff79c6
  • terminal.ansiBrightRed#ff3838
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffaa40
  • terminal.ansiCyan#c0c0c0
  • terminal.ansiGreen#9d6fcc
  • terminal.ansiMagenta#7c6ca4
  • terminal.ansiRed#ffd700
  • terminal.ansiWhite#e8e8f0
  • terminal.ansiYellow#8b72c7
  • terminal.background#0c0c0e
  • terminal.foreground#e8e8f0
  • terminalCursor.foreground#e8e8f0
  • textLink.activeForeground#9d6fcc
  • textLink.foreground#9d6fcc
  • titleBar.activeBackground#0c0c0e
  • titleBar.activeForeground#e8e8f0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0c0c0e
  • titleBar.inactiveForeground#c8c8d8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9090a8italic
string, string.quoted, string.template#9d6fcc
constant.numeric#ffd700
constant.language.boolean#ffd700
constant.language.null, constant.language.undefined#ffd700
keyword, keyword.control#dc143c
storage, storage.type, storage.modifier#dc143c
keyword.operator#dc143c
entity.name.function, support.function#8b72c7
entity.name.method#8b72c7
entity.name.type, entity.name.class, support.type, support.class#7c6ca4
variable, entity.name.variable, variable.other#f0f0f8
variable.parameter#ffd700
variable.other.property, support.type.property-name#c0c0c0
constant, variable.other.constant#ffd700
entity.name.tag#ffd700
entity.other.attribute-name#c0c0c0
punctuation#e8e8f0
variable.language.special.self.python, variable.parameter.function.language.special.self.python#ffd700normal
support.function.magic.python#8b72c7normal
invalid, invalid.illegal#ff3838
constant.other.color#e8e8f0
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#dc143c
entity.name.function, variable.function, support.function, keyword.other.special-method#8b72c7
meta.block variable.other#e8e8f0
support.other.variable, string.other.link#e8e8f0
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#ffd700
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#9d6fcc
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#e8e8f0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff3838
variable.language#c8c8d8
entity.name.method.js#e8e8f0
meta.class-method.js entity.name.function.js, variable.function.constructor#e8e8f0
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#c0c0c0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8b72c7
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#8b72c7
source.sass keyword.control, meta.attribute-selector.scss#e8e8f0
markup.inserted#6b9e6b
markup.deleted#ff3838
markup.changed#ffaa40
string.regexp#c0c0c0
constant.character.escape#c8c8d8
*url*, *link*, *uri*#9d6fccunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8b72c7
source.js constant.other.object.key.js string.unquoted.label.js#ff3838normal
support.type.property-name.json#8b72c7
text.html.markdown, punctuation.definition.list_item.markdown#e8e8f0
text.html.markdown markup.inline.raw.markdown#c8c8d8
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8e8f0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#8b72c7
markup.italic#e8e8f0normal
markup.bold, markup.bold string#e8e8f0bold
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#e8e8f0bold
markup.underline#8b72c7underline
markup.quote punctuation.definition.blockquote.markdown#e8e8f0
markup.quote#e8e8f0
string.other.link.title.markdown#e8e8f0
string.other.link.description.title.markdown#c8c8d8
constant.other.reference.link.markdown#8b72c7
markup.raw.block#c8c8d8
markup.raw.block.fenced.markdown#9d6fcc30
punctuation.definition.fenced.markdown#9d6fcc30
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8e8f0
variable.language.fenced.markdown#e8e8f0
meta.separator#9090a8bold
markup.table#e8e8f0
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#6a6a7c
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#ffd700
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#8b72c7bold
variable.parameter.function.python#ffd700normal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#dc143c
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#ffd700
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#ffd700
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#8b72c7
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#8b72c7
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#ffd700
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#9d6fcc
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#9d6fcc
constant.language.python#ffd700normal
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#6b9e6b
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#e8e8f0
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#e8e8f0
string.template.js, string.template.ts#9d6fcc
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#9d6fcc
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#9d6fcc
Fedaykin by FedaykinDev - VS Code Theme