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#e8ecf4
  • activityBar.background#0a0b0d
  • activityBar.foreground#68707c
  • activityBar.inactiveForeground#68707c
  • activityBarBadge.background#4a90e2
  • activityBarBadge.foreground#0a0b0d
  • badge.background#4a90e2
  • badge.foreground#0a0b0d
  • breadcrumb.activeSelectionForeground#e8ecf4
  • breadcrumb.focusForeground#e8ecf4
  • breadcrumb.foreground#c8d0dc
  • breadcrumbPicker.background#1a1d24
  • button.background#4a90e2
  • button.foreground#0a0b0d
  • button.hoverBackground#3a80d2
  • descriptionForeground#c8d0dc
  • diffEditor.insertedLineBackground#6bc46d20
  • diffEditor.insertedTextBackground#6bc46d20
  • diffEditor.removedLineBackground#e8585520
  • diffEditor.removedTextBackground#e8585520
  • dropdown.background#1a1d24
  • dropdown.border#484e58
  • dropdown.foreground#e8ecf4
  • editor.background#0a0b0d
  • editor.findMatchBackground#6bc46d30
  • editor.findMatchHighlightBackground#ffaa4050
  • editor.findRangeHighlightBackground#ff994030
  • editor.foreground#e8ecf4
  • editor.lineHighlightBackground#1a1d24
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#2e3238
  • editor.selectionHighlightBackground#2e323880
  • editor.wordHighlightBackground#4a90e260
  • editor.wordHighlightStrongBackground#4a90e260
  • editorBracketHighlight.foreground1#a8b8d0
  • editorBracketHighlight.foreground2#8899b4
  • editorBracketHighlight.foreground3#ff9940
  • editorBracketHighlight.foreground4#6bb6ff
  • editorBracketHighlight.foreground5#4a90e2
  • editorBracketHighlight.foreground6#ffd700
  • editorBracketHighlight.unexpectedBracket.foreground#e85855
  • editorBracketMatch.background#383d4440
  • editorBracketMatch.border#909aa880
  • editorCursor.foreground#e8ecf4
  • editorError.foreground#e85855
  • editorGroupHeader.tabsBackground#0a0b0d
  • editorGutter.addedBackground#6bc46d
  • editorGutter.deletedBackground#e85855
  • editorGutter.modifiedBackground#ffaa40
  • editorHoverWidget.background#1a1d24
  • editorHoverWidget.border#484e58
  • editorHoverWidget.foreground#e8ecf4
  • editorInfo.foreground#5ca7ff
  • editorLineNumber.activeForeground#e8ecf4
  • editorLineNumber.foreground#68707c
  • editorOverviewRuler.errorForeground#e85855
  • editorOverviewRuler.infoForeground#5ca7ff
  • editorOverviewRuler.warningForeground#ffaa40
  • editorRuler.foreground#484e58
  • editorSuggestWidget.background#1a1d24
  • editorSuggestWidget.border#484e58
  • editorSuggestWidget.selectedBackground#383d44
  • editorWarning.foreground#ffaa40
  • editorWhitespace.foreground#484e58
  • editorWidget.background#1a1d24
  • editorWidget.border#484e58
  • focusBorder#4a90e260
  • gitDecoration.addedResourceForeground#6bc46d
  • gitDecoration.conflictingResourceForeground#6bb6ff
  • gitDecoration.deletedResourceForeground#e85855
  • gitDecoration.ignoredResourceForeground#68707c
  • gitDecoration.modifiedResourceForeground#ffaa40
  • gitDecoration.untrackedResourceForeground#909aa8
  • input.background#1a1d24
  • input.border#484e58
  • input.foreground#e8ecf4
  • input.placeholderForeground#909aa8
  • inputOption.activeBorder#4a90e2
  • inputOption.activeForeground#e8ecf4
  • list.activeSelectionBackground#1a1d24
  • list.activeSelectionForeground#e8ecf4
  • list.errorForeground#e85855
  • list.highlightForeground#4a90e2
  • list.hoverBackground#24272e
  • list.inactiveSelectionBackground#24272e
  • list.warningForeground#ffaa40
  • notificationsErrorIcon.foreground#e85855
  • notificationsInfoIcon.foreground#5ca7ff
  • notificationsWarningIcon.foreground#ffaa40
  • panel.background#0a0b0d
  • panel.border#00000000
  • panelTitle.activeForeground#e8ecf4
  • panelTitle.inactiveForeground#c8d0dc
  • peekView.border#4a90e2
  • peekViewEditor.background#12141a
  • peekViewResult.background#0a0b0d
  • peekViewTitle.background#12141a
  • peekViewTitleDescription.foreground#c8d0dc
  • pickerGroup.foreground#e8ecf4
  • problemsErrorIcon.foreground#e85855
  • problemsInfoIcon.foreground#5ca7ff
  • problemsWarningIcon.foreground#ffaa40
  • quickInput.background#1a1d24
  • quickInput.foreground#e8ecf4
  • quickInputList.focusBackground#383d44
  • quickInputList.focusForeground#e8ecf4
  • scrollbar.shadow#4a90e230
  • scrollbarSlider.activeBackground#24272e30
  • scrollbarSlider.background#383d4440
  • scrollbarSlider.hoverBackground#484e5860
  • selection.background#2e3238
  • settings.headerForeground#e8ecf4
  • settings.modifiedItemIndicator#4a90e2
  • sideBar.background#0a0b0d
  • sideBar.border#484e5850
  • sideBar.foreground#e8ecf4
  • sideBarSectionHeader.background#0a0b0d
  • sideBarSectionHeader.foreground#e8ecf4
  • sideBarTitle.foreground#e8ecf4
  • statusBar.background#12141a
  • statusBar.debuggingBackground#1a1d24
  • statusBar.debuggingForeground#e8ecf4
  • statusBar.foreground#c8d0dc
  • statusBar.noFolderBackground#12141a
  • statusBarItem.remoteBackground#4a90e2
  • statusBarItem.remoteForeground#0a0b0d
  • tab.activeBackground#1a1d24
  • tab.activeBorder#e8ecf440
  • tab.activeForeground#e8ecf4
  • tab.border#00000000
  • tab.inactiveBackground#0a0b0d
  • tab.inactiveForeground#c8d0dc
  • terminal.ansiBlack#0a0b0d
  • terminal.ansiBlue#ff9940
  • terminal.ansiBrightBlack#68707c
  • terminal.ansiBrightBlue#5ca7ff
  • terminal.ansiBrightCyan#68d4ff
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#b794f6
  • terminal.ansiBrightRed#e85855
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffaa40
  • terminal.ansiCyan#a8b8d0
  • terminal.ansiGreen#4a90e2
  • terminal.ansiMagenta#8899b4
  • terminal.ansiRed#ffd700
  • terminal.ansiWhite#e8ecf4
  • terminal.ansiYellow#6bb6ff
  • terminal.background#0a0b0d
  • terminal.foreground#e8ecf4
  • terminalCursor.foreground#e8ecf4
  • textLink.activeForeground#4a90e2
  • textLink.foreground#4a90e2
  • titleBar.activeBackground#0a0b0d
  • titleBar.activeForeground#e8ecf4
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0a0b0d
  • titleBar.inactiveForeground#c8d0dc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#909aa8italic
string, string.quoted, string.template#4a90e2
constant.numeric#ffd700
constant.language.boolean#ffd700
constant.language.null, constant.language.undefined#ffd700
keyword, keyword.control#ff9940
storage, storage.type, storage.modifier#ff9940
keyword.operator#ff9940
entity.name.function, support.function#6bb6ff
entity.name.method#6bb6ff
entity.name.type, entity.name.class, support.type, support.class#8899b4
variable, entity.name.variable, variable.other#f0f4fc
variable.parameter#ffd700
variable.other.property, support.type.property-name#a8b8d0
constant, variable.other.constant#ffd700
entity.name.tag#ffd700
entity.other.attribute-name#a8b8d0
punctuation#e8ecf4
variable.language.special.self.python, variable.parameter.function.language.special.self.python#ffd700normal
support.function.magic.python#6bb6ffnormal
invalid, invalid.illegal#e85855
constant.other.color#e8ecf4
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#ff9940
entity.name.function, variable.function, support.function, keyword.other.special-method#6bb6ff
meta.block variable.other#e8ecf4
support.other.variable, string.other.link#e8ecf4
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#4a90e2
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#8899b4
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#e8ecf4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e85855
variable.language#c8d0dc
entity.name.method.js#e8ecf4
meta.class-method.js entity.name.function.js, variable.function.constructor#e8ecf4
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#a8b8d0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6bb6ff
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#6bb6ff
source.sass keyword.control, meta.attribute-selector.scss#e8ecf4
markup.inserted#6bc46d
markup.deleted#e85855
markup.changed#ffaa40
string.regexp#a8b8d0
constant.character.escape#c8d0dc
*url*, *link*, *uri*#4a90e2underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6bb6ff
source.js constant.other.object.key.js string.unquoted.label.js#e85855normal
support.type.property-name.json#6bb6ff
text.html.markdown, punctuation.definition.list_item.markdown#e8ecf4
text.html.markdown markup.inline.raw.markdown#c8d0dc
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8ecf4
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#6bb6ff
markup.italic#e8ecf4normal
markup.bold, markup.bold string#e8ecf4bold
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#e8ecf4bold
markup.underline#6bb6ffunderline
markup.quote punctuation.definition.blockquote.markdown#e8ecf4
markup.quote#e8ecf4
string.other.link.title.markdown#e8ecf4
string.other.link.description.title.markdown#c8d0dc
constant.other.reference.link.markdown#6bb6ff
markup.raw.block#c8d0dc
markup.raw.block.fenced.markdown#4a90e230
punctuation.definition.fenced.markdown#4a90e230
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8ecf4
variable.language.fenced.markdown#e8ecf4
meta.separator#909aa8bold
markup.table#e8ecf4
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#68707c
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#6bb6ffbold
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#ff9940
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#8899b4bold
variable.parameter.function.language.special.self.python#ffd700
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#8899b4
entity.name.function.python, meta.function.python entity.name.function.python#6bb6ff
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#6bb6ff
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#4a90e2
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#4a90e2
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#6bc46d
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#e8ecf4
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#e8ecf4
string.template.js, string.template.ts#4a90e2
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#4a90e2
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#4a90e2
Fedaykin by FedaykinDev - VS Code Theme