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#e6edf3
  • activityBar.background#0d1117
  • activityBar.foreground#6e7681
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#58a6ff
  • activityBarBadge.foreground#0d1117
  • badge.background#58a6ff
  • badge.foreground#0d1117
  • breadcrumb.activeSelectionForeground#e6edf3
  • breadcrumb.focusForeground#e6edf3
  • breadcrumb.foreground#c9d1d9
  • breadcrumbPicker.background#1e252e
  • button.background#58a6ff
  • button.foreground#0d1117
  • button.hoverBackground#4493e6
  • descriptionForeground#c9d1d9
  • diffEditor.insertedLineBackground#7ee78720
  • diffEditor.insertedTextBackground#7ee78720
  • diffEditor.removedLineBackground#ff7b7220
  • diffEditor.removedTextBackground#ff7b7220
  • dropdown.background#1e252e
  • dropdown.border#484f5b
  • dropdown.foreground#e6edf3
  • editor.background#0d1117
  • editor.findMatchBackground#7ee78730
  • editor.findMatchHighlightBackground#ffa65750
  • editor.findRangeHighlightBackground#ff9b5430
  • editor.foreground#e6edf3
  • editor.lineHighlightBackground#1e252e
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#303843
  • editor.selectionHighlightBackground#30384380
  • editor.wordHighlightBackground#58a6ff60
  • editor.wordHighlightStrongBackground#58a6ff60
  • editorBracketHighlight.foreground1#58a6ff
  • editorBracketHighlight.foreground2#2f5d8a
  • editorBracketHighlight.foreground3#ff9b54
  • editorBracketHighlight.foreground4#a5d6ff
  • editorBracketHighlight.foreground5#7ee787
  • editorBracketHighlight.foreground6#79c0ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff7b72
  • editorBracketMatch.background#3a424e40
  • editorBracketMatch.border#8b949e80
  • editorCursor.foreground#e6edf3
  • editorError.foreground#ff7b72
  • editorGroupHeader.tabsBackground#0d1117
  • editorGutter.addedBackground#7ee787
  • editorGutter.deletedBackground#ff7b72
  • editorGutter.modifiedBackground#ffa657
  • editorHoverWidget.background#1e252e
  • editorHoverWidget.border#484f5b
  • editorHoverWidget.foreground#e6edf3
  • editorInfo.foreground#79c0ff
  • editorLineNumber.activeForeground#e6edf3
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.errorForeground#ff7b72
  • editorOverviewRuler.infoForeground#79c0ff
  • editorOverviewRuler.warningForeground#ffa657
  • editorRuler.foreground#484f5b
  • editorSuggestWidget.background#1e252e
  • editorSuggestWidget.border#484f5b
  • editorSuggestWidget.selectedBackground#3a424e
  • editorWarning.foreground#ffa657
  • editorWhitespace.foreground#484f5b
  • editorWidget.background#1e252e
  • editorWidget.border#484f5b
  • focusBorder#58a6ff60
  • gitDecoration.addedResourceForeground#7ee787
  • gitDecoration.conflictingResourceForeground#a5d6ff
  • gitDecoration.deletedResourceForeground#ff7b72
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#ffa657
  • gitDecoration.untrackedResourceForeground#8b949e
  • input.background#1e252e
  • input.border#484f5b
  • input.foreground#e6edf3
  • input.placeholderForeground#8b949e
  • inputOption.activeBorder#58a6ff
  • inputOption.activeForeground#e6edf3
  • list.activeSelectionBackground#1e252e
  • list.activeSelectionForeground#e6edf3
  • list.errorForeground#ff7b72
  • list.highlightForeground#58a6ff
  • list.hoverBackground#272e38
  • list.inactiveSelectionBackground#272e38
  • list.warningForeground#ffa657
  • notificationsErrorIcon.foreground#ff7b72
  • notificationsInfoIcon.foreground#79c0ff
  • notificationsWarningIcon.foreground#ffa657
  • panel.background#0d1117
  • panel.border#00000000
  • panelTitle.activeForeground#e6edf3
  • panelTitle.inactiveForeground#c9d1d9
  • peekView.border#58a6ff
  • peekViewEditor.background#161b22
  • peekViewResult.background#0d1117
  • peekViewTitle.background#161b22
  • peekViewTitleDescription.foreground#c9d1d9
  • pickerGroup.foreground#e6edf3
  • problemsErrorIcon.foreground#ff7b72
  • problemsInfoIcon.foreground#79c0ff
  • problemsWarningIcon.foreground#ffa657
  • quickInput.background#1e252e
  • quickInput.foreground#e6edf3
  • quickInputList.focusBackground#3a424e
  • quickInputList.focusForeground#e6edf3
  • scrollbar.shadow#58a6ff30
  • scrollbarSlider.activeBackground#272e3830
  • scrollbarSlider.background#3a424e40
  • scrollbarSlider.hoverBackground#484f5b60
  • selection.background#303843
  • settings.headerForeground#e6edf3
  • settings.modifiedItemIndicator#58a6ff
  • sideBar.background#0d1117
  • sideBar.border#484f5b50
  • sideBar.foreground#e6edf3
  • sideBarSectionHeader.background#0d1117
  • sideBarSectionHeader.foreground#e6edf3
  • sideBarTitle.foreground#e6edf3
  • statusBar.background#161b22
  • statusBar.debuggingBackground#1e252e
  • statusBar.debuggingForeground#e6edf3
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#161b22
  • statusBarItem.remoteBackground#58a6ff
  • statusBarItem.remoteForeground#0d1117
  • tab.activeBackground#1e252e
  • tab.activeBorder#e6edf340
  • tab.activeForeground#e6edf3
  • tab.border#00000000
  • tab.inactiveBackground#0d1117
  • tab.inactiveForeground#c9d1d9
  • terminal.ansiBlack#0d1117
  • terminal.ansiBlue#ff9b54
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#7ee787
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#ff7b72
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#ffa657
  • terminal.ansiCyan#58a6ff
  • terminal.ansiGreen#7ee787
  • terminal.ansiMagenta#2f5d8a
  • terminal.ansiRed#79c0ff
  • terminal.ansiWhite#e6edf3
  • terminal.ansiYellow#a5d6ff
  • terminal.background#0d1117
  • terminal.foreground#e6edf3
  • terminalCursor.foreground#e6edf3
  • textLink.activeForeground#58a6ff
  • textLink.foreground#58a6ff
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#e6edf3
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0d1117
  • titleBar.inactiveForeground#c9d1d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b949eitalic
string, string.quoted, string.template#7ee787
constant.numeric#79c0ff
constant.language.boolean#79c0ff
constant.language.null, constant.language.undefined#79c0ff
keyword, keyword.control#ff9b54
storage, storage.type, storage.modifier#ff9b54
keyword.operator#ff9b54
entity.name.function, support.function#a5d6ff
entity.name.method#a5d6ff
entity.name.type, entity.name.class, support.type, support.class#2f5d8a
variable, entity.name.variable, variable.other#f0f6fc
variable.parameter#79c0ff
variable.other.property, support.type.property-name#58a6ff
constant, variable.other.constant#79c0ff
entity.name.tag#79c0ff
entity.other.attribute-name#58a6ff
punctuation#e6edf3
variable.language.special.self.python, variable.parameter.function.language.special.self.python#79c0ffnormal
support.function.magic.python#a5d6ffnormal
invalid, invalid.illegal#ff7b72
constant.other.color#e6edf3
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#ff9b54
entity.name.function, variable.function, support.function, keyword.other.special-method#a5d6ff
meta.block variable.other#e6edf3
support.other.variable, string.other.link#e6edf3
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#79c0ff
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#7ee787
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#2f5d8a
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#e6edf3
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff7b72
variable.language#c9d1d9
entity.name.method.js#e6edf3
meta.class-method.js entity.name.function.js, variable.function.constructor#e6edf3
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#58a6ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a5d6ff
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#a5d6ff
source.sass keyword.control, meta.attribute-selector.scss#e6edf3
markup.inserted#7ee787
markup.deleted#ff7b72
markup.changed#ffa657
string.regexp#58a6ff
constant.character.escape#c9d1d9
*url*, *link*, *uri*#58a6ffunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a5d6ff
source.js constant.other.object.key.js string.unquoted.label.js#ff7b72normal
support.type.property-name.json#a5d6ff
text.html.markdown, punctuation.definition.list_item.markdown#e6edf3
text.html.markdown markup.inline.raw.markdown#c9d1d9
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e6edf3
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#a5d6ff
markup.italic#e6edf3normal
markup.bold, markup.bold string#e6edf3bold
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#e6edf3bold
markup.underline#a5d6ffunderline
markup.quote punctuation.definition.blockquote.markdown#e6edf3
markup.quote#e6edf3
string.other.link.title.markdown#e6edf3
string.other.link.description.title.markdown#c9d1d9
constant.other.reference.link.markdown#a5d6ff
markup.raw.block#c9d1d9
markup.raw.block.fenced.markdown#7ee78730
punctuation.definition.fenced.markdown#7ee78730
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e6edf3
variable.language.fenced.markdown#e6edf3
meta.separator#8b949ebold
markup.table#e6edf3
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#6e7681
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#79c0ff
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#a5d6ffbold
variable.parameter.function.python#79c0ffnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#ff9b54
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#79c0ff
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#2f5d8abold
variable.parameter.function.language.special.self.python#79c0ff
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#2f5d8a
entity.name.function.python, meta.function.python entity.name.function.python#a5d6ff
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#a5d6ff
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#79c0ff
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#7ee787
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#7ee787
constant.language.python#79c0ffnormal
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#7ee787
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#e6edf3
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#e6edf3
string.template.js, string.template.ts#7ee787
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#7ee787
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#7ee787
Fedaykin by FedaykinDev - VS Code Theme