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#e8d6d6
  • activityBar.background#0f0d0d
  • activityBar.foreground#726565
  • activityBar.inactiveForeground#726565
  • activityBarBadge.background#ff6b6b
  • activityBarBadge.foreground#0f0d0d
  • badge.background#ff6b6b
  • badge.foreground#0f0d0d
  • breadcrumb.activeSelectionForeground#e8d6d6
  • breadcrumb.focusForeground#e8d6d6
  • breadcrumb.foreground#d4c0c0
  • breadcrumbPicker.background#241f1f
  • button.background#ff6b6b
  • button.foreground#0f0d0d
  • button.hoverBackground#e85555
  • descriptionForeground#d4c0c0
  • diffEditor.insertedLineBackground#c7886020
  • diffEditor.insertedTextBackground#c7886020
  • diffEditor.removedLineBackground#ff383820
  • diffEditor.removedTextBackground#ff383820
  • dropdown.background#241f1f
  • dropdown.border#524848
  • dropdown.foreground#e8d6d6
  • editor.background#0f0d0d
  • editor.findMatchBackground#c7886030
  • editor.findMatchHighlightBackground#ffa50050
  • editor.findRangeHighlightBackground#ff555530
  • editor.foreground#e8d6d6
  • editor.lineHighlightBackground#241f1f
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#383131
  • editor.selectionHighlightBackground#38313180
  • editor.wordHighlightBackground#ff6b6b60
  • editor.wordHighlightStrongBackground#ff6b6b60
  • editorBracketHighlight.foreground1#cc6666
  • editorBracketHighlight.foreground2#8b4a4a
  • editorBracketHighlight.foreground3#ff5555
  • editorBracketHighlight.foreground4#ff7979
  • editorBracketHighlight.foreground5#ff9d5c
  • editorBracketHighlight.foreground6#ffb86c
  • editorBracketHighlight.unexpectedBracket.foreground#ff3838
  • editorBracketMatch.background#423a3a40
  • editorBracketMatch.border#9b7c7c80
  • editorCursor.foreground#e8d6d6
  • editorError.foreground#ff3838
  • editorGroupHeader.tabsBackground#0f0d0d
  • editorGutter.addedBackground#c78860
  • editorGutter.deletedBackground#ff3838
  • editorGutter.modifiedBackground#ffa500
  • editorHoverWidget.background#241f1f
  • editorHoverWidget.border#524848
  • editorHoverWidget.foreground#e8d6d6
  • editorInfo.foreground#ff8c42
  • editorLineNumber.activeForeground#e8d6d6
  • editorLineNumber.foreground#726565
  • editorOverviewRuler.errorForeground#ff3838
  • editorOverviewRuler.infoForeground#ff8c42
  • editorOverviewRuler.warningForeground#ffa500
  • editorRuler.foreground#524848
  • editorSuggestWidget.background#241f1f
  • editorSuggestWidget.border#524848
  • editorSuggestWidget.selectedBackground#423a3a
  • editorWarning.foreground#ffa500
  • editorWhitespace.foreground#524848
  • editorWidget.background#241f1f
  • editorWidget.border#524848
  • focusBorder#ff6b6b60
  • gitDecoration.addedResourceForeground#c78860
  • gitDecoration.conflictingResourceForeground#ff7979
  • gitDecoration.deletedResourceForeground#ff3838
  • gitDecoration.ignoredResourceForeground#6b5858
  • gitDecoration.modifiedResourceForeground#ffa500
  • gitDecoration.untrackedResourceForeground#9b7c7c
  • input.background#241f1f
  • input.border#524848
  • input.foreground#e8d6d6
  • input.placeholderForeground#9e8585
  • inputOption.activeBorder#ff6b6b
  • inputOption.activeForeground#e8d6d6
  • list.activeSelectionBackground#241f1f
  • list.activeSelectionForeground#e8d6d6
  • list.errorForeground#ff3838
  • list.highlightForeground#ff6b6b
  • list.hoverBackground#2e2828
  • list.inactiveSelectionBackground#2e2828
  • list.warningForeground#ffa500
  • notificationsErrorIcon.foreground#ff3838
  • notificationsInfoIcon.foreground#ff8c42
  • notificationsWarningIcon.foreground#ffa500
  • panel.background#0f0d0d
  • panel.border#00000000
  • panelTitle.activeForeground#e8d6d6
  • panelTitle.inactiveForeground#d4c0c0
  • peekView.border#ff6b6b
  • peekViewEditor.background#1a1616
  • peekViewResult.background#0f0d0d
  • peekViewTitle.background#1a1616
  • peekViewTitleDescription.foreground#d4c0c0
  • pickerGroup.foreground#e8d6d6
  • problemsErrorIcon.foreground#ff3838
  • problemsInfoIcon.foreground#ff8c42
  • problemsWarningIcon.foreground#ffa500
  • quickInput.background#241f1f
  • quickInput.foreground#e8d6d6
  • quickInputList.focusBackground#423a3a
  • quickInputList.focusForeground#e8d6d6
  • scrollbar.shadow#ff6b6b30
  • scrollbarSlider.activeBackground#2e282830
  • scrollbarSlider.background#423a3a40
  • scrollbarSlider.hoverBackground#52484860
  • selection.background#383131
  • settings.headerForeground#e8d6d6
  • settings.modifiedItemIndicator#ff6b6b
  • sideBar.background#0f0d0d
  • sideBar.border#52484850
  • sideBar.foreground#e8d6d6
  • sideBarSectionHeader.background#0f0d0d
  • sideBarSectionHeader.foreground#e8d6d6
  • sideBarTitle.foreground#e8d6d6
  • statusBar.background#1a1616
  • statusBar.debuggingBackground#241f1f
  • statusBar.debuggingForeground#e8d6d6
  • statusBar.foreground#d4c0c0
  • statusBar.noFolderBackground#1a1616
  • statusBarItem.remoteBackground#ff6b6b
  • statusBarItem.remoteForeground#0f0d0d
  • tab.activeBackground#241f1f
  • tab.activeBorder#e8d6d640
  • tab.activeForeground#e8d6d6
  • tab.border#00000000
  • tab.inactiveBackground#0f0d0d
  • tab.inactiveForeground#d4c0c0
  • terminal.ansiBlack#0f0d0d
  • terminal.ansiBlue#ff5555
  • terminal.ansiBrightBlack#726565
  • terminal.ansiBrightBlue#ff8c42
  • terminal.ansiBrightCyan#ffb86c
  • terminal.ansiBrightGreen#c78860
  • terminal.ansiBrightMagenta#ff79c6
  • terminal.ansiBrightRed#ff3838
  • terminal.ansiBrightWhite#f4e8e8
  • terminal.ansiBrightYellow#ffa500
  • terminal.ansiCyan#cc6666
  • terminal.ansiGreen#ff9d5c
  • terminal.ansiMagenta#8b4a4a
  • terminal.ansiRed#ffb86c
  • terminal.ansiWhite#e8d6d6
  • terminal.ansiYellow#ff7979
  • terminal.background#0f0d0d
  • terminal.foreground#e8d6d6
  • terminalCursor.foreground#e8d6d6
  • textLink.activeForeground#ff6b6b
  • textLink.foreground#ff6b6b
  • titleBar.activeBackground#0f0d0d
  • titleBar.activeForeground#e8d6d6
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0f0d0d
  • titleBar.inactiveForeground#d4c0c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e8585italic
string, string.quoted, string.template#ff9d5c
constant.numeric#ffb86c
constant.language.boolean#ffb86c
constant.language.null, constant.language.undefined#ffb86c
keyword, keyword.control#ff5555
storage, storage.type, storage.modifier#ff5555
keyword.operator#ff5555
entity.name.function, support.function#ff7979
entity.name.method#ff7979
entity.name.type, entity.name.class, support.type, support.class#8b4a4a
variable, entity.name.variable, variable.other#f0e0e0
variable.parameter#ffb86c
variable.other.property, support.type.property-name#cc6666
constant, variable.other.constant#ffb86c
entity.name.tag#ffb86c
entity.other.attribute-name#cc6666
punctuation#e8d6d6
variable.language.special.self.python, variable.parameter.function.language.special.self.python#ffb86cnormal
support.function.magic.python#ff7979normal
invalid, invalid.illegal#ff3838
constant.other.color#e8d6d6
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#ff5555
entity.name.function, variable.function, support.function, keyword.other.special-method#ff7979
meta.block variable.other#e8d6d6
support.other.variable, string.other.link#e8d6d6
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#ff9d5c
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#8b4a4a
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#e8d6d6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff3838
variable.language#d4c0c0
entity.name.method.js#e8d6d6
meta.class-method.js entity.name.function.js, variable.function.constructor#e8d6d6
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#cc6666
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff7979
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#ff7979
source.sass keyword.control, meta.attribute-selector.scss#e8d6d6
markup.inserted#c78860
markup.deleted#ff3838
markup.changed#ffa500
string.regexp#cc6666
constant.character.escape#d4c0c0
*url*, *link*, *uri*#ff6b6bunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff7979
source.js constant.other.object.key.js string.unquoted.label.js#ff3838normal
support.type.property-name.json#ff7979
text.html.markdown, punctuation.definition.list_item.markdown#e8d6d6
text.html.markdown markup.inline.raw.markdown#d4c0c0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8d6d6
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#ff7979
markup.italic#e8d6d6normal
markup.bold, markup.bold string#e8d6d6bold
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#e8d6d6bold
markup.underline#ff7979underline
markup.quote punctuation.definition.blockquote.markdown#e8d6d6
markup.quote#e8d6d6
string.other.link.title.markdown#e8d6d6
string.other.link.description.title.markdown#d4c0c0
constant.other.reference.link.markdown#ff7979
markup.raw.block#d4c0c0
markup.raw.block.fenced.markdown#ff9d5c30
punctuation.definition.fenced.markdown#ff9d5c30
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8d6d6
variable.language.fenced.markdown#e8d6d6
meta.separator#9e8585bold
markup.table#e8d6d6
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#726565
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#ff7979bold
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#ff5555
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#8b4a4abold
variable.parameter.function.language.special.self.python#ffb86c
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#8b4a4a
entity.name.function.python, meta.function.python entity.name.function.python#ff7979
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#ff7979
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#ff9d5c
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#ff9d5c
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#c78860
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#e8d6d6
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#e8d6d6
string.template.js, string.template.ts#ff9d5c
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#ff9d5c
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#ff9d5c
Fedaykin by FedaykinDev - VS Code Theme