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#e8f0ff
  • activityBar.background#0a0e14
  • activityBar.foreground#5a6b88
  • activityBar.inactiveForeground#5a6b88
  • activityBarBadge.background#5eb3ff
  • activityBarBadge.foreground#0a0e14
  • badge.background#5eb3ff
  • badge.foreground#0a0e14
  • breadcrumb.activeSelectionForeground#e8f0ff
  • breadcrumb.focusForeground#e8f0ff
  • breadcrumb.foreground#c8d8f0
  • breadcrumbPicker.background#181f2c
  • button.background#5eb3ff
  • button.foreground#0a0e14
  • button.hoverBackground#4a9fee
  • descriptionForeground#c8d8f0
  • diffEditor.insertedLineBackground#48dbfb20
  • diffEditor.insertedTextBackground#48dbfb20
  • diffEditor.removedLineBackground#ff6b9d20
  • diffEditor.removedTextBackground#ff6b9d20
  • dropdown.background#181f2c
  • dropdown.border#3f4e66
  • dropdown.foreground#e8f0ff
  • editor.background#0a0e14
  • editor.findMatchBackground#48dbfb30
  • editor.findMatchHighlightBackground#feca5750
  • editor.findRangeHighlightBackground#9b88d330
  • editor.foreground#e8f0ff
  • editor.lineHighlightBackground#181f2c
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#283345
  • editor.selectionHighlightBackground#28334580
  • editor.wordHighlightBackground#5eb3ff60
  • editor.wordHighlightStrongBackground#5eb3ff60
  • editorBracketHighlight.foreground1#66e0ce
  • editorBracketHighlight.foreground2#7aa2e3
  • editorBracketHighlight.foreground3#9b88d3
  • editorBracketHighlight.foreground4#5eb3ff
  • editorBracketHighlight.foreground5#87ceeb
  • editorBracketHighlight.foreground6#ffd700
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b9d
  • editorBracketMatch.background#303d5240
  • editorBracketMatch.border#8a9bb880
  • editorCursor.foreground#e8f0ff
  • editorError.foreground#ff6b9d
  • editorGroupHeader.tabsBackground#0a0e14
  • editorGutter.addedBackground#48dbfb
  • editorGutter.deletedBackground#ff6b9d
  • editorGutter.modifiedBackground#feca57
  • editorHoverWidget.background#181f2c
  • editorHoverWidget.border#3f4e66
  • editorHoverWidget.foreground#e8f0ff
  • editorInfo.foreground#54a0ff
  • editorLineNumber.activeForeground#e8f0ff
  • editorLineNumber.foreground#5a6b88
  • editorOverviewRuler.errorForeground#ff6b9d
  • editorOverviewRuler.infoForeground#54a0ff
  • editorOverviewRuler.warningForeground#feca57
  • editorRuler.foreground#3f4e66
  • editorSuggestWidget.background#181f2c
  • editorSuggestWidget.border#3f4e66
  • editorSuggestWidget.selectedBackground#303d52
  • editorWarning.foreground#feca57
  • editorWhitespace.foreground#3f4e66
  • editorWidget.background#181f2c
  • editorWidget.border#3f4e66
  • focusBorder#5eb3ff60
  • gitDecoration.addedResourceForeground#48dbfb
  • gitDecoration.conflictingResourceForeground#5eb3ff
  • gitDecoration.deletedResourceForeground#ff6b9d
  • gitDecoration.ignoredResourceForeground#5a6b88
  • gitDecoration.modifiedResourceForeground#feca57
  • gitDecoration.untrackedResourceForeground#8395a7
  • input.background#181f2c
  • input.border#3f4e66
  • input.foreground#e8f0ff
  • input.placeholderForeground#8a9bb8
  • inputOption.activeBorder#5eb3ff
  • inputOption.activeForeground#e8f0ff
  • list.activeSelectionBackground#181f2c
  • list.activeSelectionForeground#e8f0ff
  • list.errorForeground#ff6b9d
  • list.highlightForeground#5eb3ff
  • list.hoverBackground#202938
  • list.inactiveSelectionBackground#202938
  • list.warningForeground#feca57
  • notificationsErrorIcon.foreground#ff6b9d
  • notificationsInfoIcon.foreground#54a0ff
  • notificationsWarningIcon.foreground#feca57
  • panel.background#0a0e14
  • panel.border#00000000
  • panelTitle.activeForeground#e8f0ff
  • panelTitle.inactiveForeground#c8d8f0
  • peekView.border#5eb3ff
  • peekViewEditor.background#111621
  • peekViewResult.background#0a0e14
  • peekViewTitle.background#111621
  • peekViewTitleDescription.foreground#c8d8f0
  • pickerGroup.foreground#e8f0ff
  • problemsErrorIcon.foreground#ff6b9d
  • problemsInfoIcon.foreground#54a0ff
  • problemsWarningIcon.foreground#feca57
  • quickInput.background#181f2c
  • quickInput.foreground#e8f0ff
  • quickInputList.focusBackground#303d52
  • quickInputList.focusForeground#e8f0ff
  • scrollbar.shadow#5eb3ff30
  • scrollbarSlider.activeBackground#20293830
  • scrollbarSlider.background#303d5240
  • scrollbarSlider.hoverBackground#3f4e6660
  • selection.background#283345
  • settings.headerForeground#e8f0ff
  • settings.modifiedItemIndicator#5eb3ff
  • sideBar.background#0a0e14
  • sideBar.border#3f4e6650
  • sideBar.foreground#e8f0ff
  • sideBarSectionHeader.background#0a0e14
  • sideBarSectionHeader.foreground#e8f0ff
  • sideBarTitle.foreground#e8f0ff
  • statusBar.background#111621
  • statusBar.debuggingBackground#181f2c
  • statusBar.debuggingForeground#e8f0ff
  • statusBar.foreground#c8d8f0
  • statusBar.noFolderBackground#111621
  • statusBarItem.remoteBackground#5eb3ff
  • statusBarItem.remoteForeground#0a0e14
  • tab.activeBackground#181f2c
  • tab.activeBorder#e8f0ff40
  • tab.activeForeground#e8f0ff
  • tab.border#00000000
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#c8d8f0
  • terminal.ansiBlack#0a0e14
  • terminal.ansiBlue#9b88d3
  • terminal.ansiBrightBlack#5a6b88
  • terminal.ansiBrightBlue#54a0ff
  • terminal.ansiBrightCyan#80deea
  • terminal.ansiBrightGreen#48dbfb
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff6b9d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#feca57
  • terminal.ansiCyan#66e0ce
  • terminal.ansiGreen#87ceeb
  • terminal.ansiMagenta#7aa2e3
  • terminal.ansiRed#ffd700
  • terminal.ansiWhite#e8f0ff
  • terminal.ansiYellow#5eb3ff
  • terminal.background#0a0e14
  • terminal.foreground#e8f0ff
  • terminalCursor.foreground#e8f0ff
  • textLink.activeForeground#5eb3ff
  • textLink.foreground#5eb3ff
  • titleBar.activeBackground#0a0e14
  • titleBar.activeForeground#e8f0ff
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#c8d8f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a9bb8italic
string, string.quoted, string.template#87ceeb
constant.numeric#ffd700
constant.language.boolean#ffd700
constant.language.null, constant.language.undefined#ffd700
keyword, keyword.control#9b88d3
storage, storage.type, storage.modifier#9b88d3
keyword.operator#9b88d3
entity.name.function, support.function#5eb3ff
entity.name.method#5eb3ff
entity.name.type, entity.name.class, support.type, support.class#7aa2e3
variable, entity.name.variable, variable.other#f0f8ff
variable.parameter#ffd700
variable.other.property, support.type.property-name#66e0ce
constant, variable.other.constant#ffd700
entity.name.tag#ffd700
entity.other.attribute-name#66e0ce
punctuation#e8f0ff
variable.language.special.self.python, variable.parameter.function.language.special.self.python#ffd700normal
support.function.magic.python#5eb3ffnormal
invalid, invalid.illegal#ff6b9d
constant.other.color#e8f0ff
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#9b88d3
entity.name.function, variable.function, support.function, keyword.other.special-method#5eb3ff
meta.block variable.other#e8f0ff
support.other.variable, string.other.link#e8f0ff
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#87ceeb
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#7aa2e3
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#e8f0ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff6b9d
variable.language#c8d8f0
entity.name.method.js#e8f0ff
meta.class-method.js entity.name.function.js, variable.function.constructor#e8f0ff
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#66e0ce
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5eb3ff
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#5eb3ff
source.sass keyword.control, meta.attribute-selector.scss#e8f0ff
markup.inserted#48dbfb
markup.deleted#ff6b9d
markup.changed#feca57
string.regexp#66e0ce
constant.character.escape#c8d8f0
*url*, *link*, *uri*#5eb3ffunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5eb3ff
source.js constant.other.object.key.js string.unquoted.label.js#ff6b9dnormal
support.type.property-name.json#5eb3ff
text.html.markdown, punctuation.definition.list_item.markdown#e8f0ff
text.html.markdown markup.inline.raw.markdown#c8d8f0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8f0ff
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#5eb3ff
markup.italic#e8f0ffnormal
markup.bold, markup.bold string#e8f0ffbold
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#e8f0ffbold
markup.underline#5eb3ffunderline
markup.quote punctuation.definition.blockquote.markdown#e8f0ff
markup.quote#e8f0ff
string.other.link.title.markdown#e8f0ff
string.other.link.description.title.markdown#c8d8f0
constant.other.reference.link.markdown#5eb3ff
markup.raw.block#c8d8f0
markup.raw.block.fenced.markdown#87ceeb30
punctuation.definition.fenced.markdown#87ceeb30
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8f0ff
variable.language.fenced.markdown#e8f0ff
meta.separator#8a9bb8bold
markup.table#e8f0ff
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#5a6b88
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#5eb3ffbold
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#9b88d3
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#7aa2e3bold
variable.parameter.function.language.special.self.python#ffd700
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#7aa2e3
entity.name.function.python, meta.function.python entity.name.function.python#5eb3ff
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#5eb3ff
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#87ceeb
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#87ceeb
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#48dbfb
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#e8f0ff
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#e8f0ff
string.template.js, string.template.ts#87ceeb
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#87ceeb
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#87ceeb
Fedaykin by FedaykinDev - VS Code Theme