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#e0e4e8
  • activityBar.background#08090d
  • activityBar.foreground#606878
  • activityBar.inactiveForeground#606878
  • activityBarBadge.background#2c5f8d
  • activityBarBadge.foreground#08090d
  • badge.background#2c5f8d
  • badge.foreground#08090d
  • breadcrumb.activeSelectionForeground#e0e4e8
  • breadcrumb.focusForeground#e0e4e8
  • breadcrumb.foreground#c0c8d0
  • breadcrumbPicker.background#181c24
  • button.background#2c5f8d
  • button.foreground#08090d
  • button.hoverBackground#1e4f7d
  • descriptionForeground#c0c8d0
  • diffEditor.insertedLineBackground#6b8c5f20
  • diffEditor.insertedTextBackground#6b8c5f20
  • diffEditor.removedLineBackground#a6535320
  • diffEditor.removedTextBackground#a6535320
  • dropdown.background#181c24
  • dropdown.border#404854
  • dropdown.foreground#e0e4e8
  • editor.background#08090d
  • editor.findMatchBackground#6b8c5f30
  • editor.findMatchHighlightBackground#c9934e50
  • editor.findRangeHighlightBackground#6b5b8c30
  • editor.foreground#e0e4e8
  • editor.lineHighlightBackground#181c24
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#282e38
  • editor.selectionHighlightBackground#282e3880
  • editor.wordHighlightBackground#2c5f8d60
  • editor.wordHighlightStrongBackground#2c5f8d60
  • editorBracketHighlight.foreground1#7a8c6e
  • editorBracketHighlight.foreground2#4e5d7a
  • editorBracketHighlight.foreground3#6b5b8c
  • editorBracketHighlight.foreground4#2c5f8d
  • editorBracketHighlight.foreground5#4a7c9e
  • editorBracketHighlight.foreground6#c9934e
  • editorBracketHighlight.unexpectedBracket.foreground#a65353
  • editorBracketMatch.background#30374240
  • editorBracketMatch.border#8890a080
  • editorCursor.foreground#e0e4e8
  • editorError.foreground#a65353
  • editorGroupHeader.tabsBackground#08090d
  • editorGutter.addedBackground#6b8c5f
  • editorGutter.deletedBackground#a65353
  • editorGutter.modifiedBackground#c9934e
  • editorHoverWidget.background#181c24
  • editorHoverWidget.border#404854
  • editorHoverWidget.foreground#e0e4e8
  • editorInfo.foreground#4a7c9e
  • editorLineNumber.activeForeground#e0e4e8
  • editorLineNumber.foreground#606878
  • editorOverviewRuler.errorForeground#a65353
  • editorOverviewRuler.infoForeground#4a7c9e
  • editorOverviewRuler.warningForeground#c9934e
  • editorRuler.foreground#404854
  • editorSuggestWidget.background#181c24
  • editorSuggestWidget.border#404854
  • editorSuggestWidget.selectedBackground#303742
  • editorWarning.foreground#c9934e
  • editorWhitespace.foreground#404854
  • editorWidget.background#181c24
  • editorWidget.border#404854
  • focusBorder#2c5f8d60
  • gitDecoration.addedResourceForeground#6b8c5f
  • gitDecoration.conflictingResourceForeground#2c5f8d
  • gitDecoration.deletedResourceForeground#a65353
  • gitDecoration.ignoredResourceForeground#606878
  • gitDecoration.modifiedResourceForeground#c9934e
  • gitDecoration.untrackedResourceForeground#8890a0
  • input.background#181c24
  • input.border#404854
  • input.foreground#e0e4e8
  • input.placeholderForeground#8890a0
  • inputOption.activeBorder#2c5f8d
  • inputOption.activeForeground#e0e4e8
  • list.activeSelectionBackground#181c24
  • list.activeSelectionForeground#e0e4e8
  • list.errorForeground#a65353
  • list.highlightForeground#2c5f8d
  • list.hoverBackground#20252e
  • list.inactiveSelectionBackground#20252e
  • list.warningForeground#c9934e
  • notificationsErrorIcon.foreground#a65353
  • notificationsInfoIcon.foreground#4a7c9e
  • notificationsWarningIcon.foreground#c9934e
  • panel.background#08090d
  • panel.border#00000000
  • panelTitle.activeForeground#e0e4e8
  • panelTitle.inactiveForeground#c0c8d0
  • peekView.border#2c5f8d
  • peekViewEditor.background#101318
  • peekViewResult.background#08090d
  • peekViewTitle.background#101318
  • peekViewTitleDescription.foreground#c0c8d0
  • pickerGroup.foreground#e0e4e8
  • problemsErrorIcon.foreground#a65353
  • problemsInfoIcon.foreground#4a7c9e
  • problemsWarningIcon.foreground#c9934e
  • quickInput.background#181c24
  • quickInput.foreground#e0e4e8
  • quickInputList.focusBackground#303742
  • quickInputList.focusForeground#e0e4e8
  • scrollbar.shadow#2c5f8d30
  • scrollbarSlider.activeBackground#20252e30
  • scrollbarSlider.background#30374240
  • scrollbarSlider.hoverBackground#40485460
  • selection.background#282e38
  • settings.headerForeground#e0e4e8
  • settings.modifiedItemIndicator#2c5f8d
  • sideBar.background#08090d
  • sideBar.border#40485450
  • sideBar.foreground#e0e4e8
  • sideBarSectionHeader.background#08090d
  • sideBarSectionHeader.foreground#e0e4e8
  • sideBarTitle.foreground#e0e4e8
  • statusBar.background#101318
  • statusBar.debuggingBackground#181c24
  • statusBar.debuggingForeground#e0e4e8
  • statusBar.foreground#c0c8d0
  • statusBar.noFolderBackground#101318
  • statusBarItem.remoteBackground#2c5f8d
  • statusBarItem.remoteForeground#08090d
  • tab.activeBackground#181c24
  • tab.activeBorder#e0e4e840
  • tab.activeForeground#e0e4e8
  • tab.border#00000000
  • tab.inactiveBackground#08090d
  • tab.inactiveForeground#c0c8d0
  • terminal.ansiBlack#08090d
  • terminal.ansiBlue#6b5b8c
  • terminal.ansiBrightBlack#606878
  • terminal.ansiBrightBlue#4a7c9e
  • terminal.ansiBrightCyan#5ca8ce
  • terminal.ansiBrightGreen#6b8c5f
  • terminal.ansiBrightMagenta#8c6bae
  • terminal.ansiBrightRed#a65353
  • terminal.ansiBrightWhite#f0f4f8
  • terminal.ansiBrightYellow#c9934e
  • terminal.ansiCyan#7a8c6e
  • terminal.ansiGreen#4a7c9e
  • terminal.ansiMagenta#4e5d7a
  • terminal.ansiRed#c9934e
  • terminal.ansiWhite#e0e4e8
  • terminal.ansiYellow#2c5f8d
  • terminal.background#08090d
  • terminal.foreground#e0e4e8
  • terminalCursor.foreground#e0e4e8
  • textLink.activeForeground#2c5f8d
  • textLink.foreground#2c5f8d
  • titleBar.activeBackground#08090d
  • titleBar.activeForeground#e0e4e8
  • titleBar.border#00000000
  • titleBar.inactiveBackground#08090d
  • titleBar.inactiveForeground#c0c8d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8890a0italic
string, string.quoted, string.template#4a7c9e
constant.numeric#c9934e
constant.language.boolean#c9934e
constant.language.null, constant.language.undefined#c9934e
keyword, keyword.control#6b5b8c
storage, storage.type, storage.modifier#6b5b8c
keyword.operator#6b5b8c
entity.name.function, support.function#2c5f8d
entity.name.method#2c5f8d
entity.name.type, entity.name.class, support.type, support.class#4e5d7a
variable, entity.name.variable, variable.other#e8ecf0
variable.parameter#c9934e
variable.other.property, support.type.property-name#7a8c6e
constant, variable.other.constant#c9934e
entity.name.tag#c9934e
entity.other.attribute-name#7a8c6e
punctuation#e0e4e8
variable.language.special.self.python, variable.parameter.function.language.special.self.python#c9934enormal
support.function.magic.python#2c5f8dnormal
invalid, invalid.illegal#a65353
constant.other.color#e0e4e8
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#6b5b8c
entity.name.function, variable.function, support.function, keyword.other.special-method#2c5f8d
meta.block variable.other#e0e4e8
support.other.variable, string.other.link#e0e4e8
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#c9934e
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#4a7c9e
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#4e5d7a
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#e0e4e8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a65353
variable.language#c0c8d0
entity.name.method.js#e0e4e8
meta.class-method.js entity.name.function.js, variable.function.constructor#e0e4e8
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#7a8c6e
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#2c5f8d
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#2c5f8d
source.sass keyword.control, meta.attribute-selector.scss#e0e4e8
markup.inserted#6b8c5f
markup.deleted#a65353
markup.changed#c9934e
string.regexp#7a8c6e
constant.character.escape#c0c8d0
*url*, *link*, *uri*#2c5f8dunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2c5f8d
source.js constant.other.object.key.js string.unquoted.label.js#a65353normal
support.type.property-name.json#2c5f8d
text.html.markdown, punctuation.definition.list_item.markdown#e0e4e8
text.html.markdown markup.inline.raw.markdown#c0c8d0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e0e4e8
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#2c5f8d
markup.italic#e0e4e8normal
markup.bold, markup.bold string#e0e4e8bold
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#e0e4e8bold
markup.underline#2c5f8dunderline
markup.quote punctuation.definition.blockquote.markdown#e0e4e8
markup.quote#e0e4e8
string.other.link.title.markdown#e0e4e8
string.other.link.description.title.markdown#c0c8d0
constant.other.reference.link.markdown#2c5f8d
markup.raw.block#c0c8d0
markup.raw.block.fenced.markdown#4a7c9e30
punctuation.definition.fenced.markdown#4a7c9e30
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e4e8
variable.language.fenced.markdown#e0e4e8
meta.separator#8890a0bold
markup.table#e0e4e8
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#606878
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#c9934e
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#2c5f8dbold
variable.parameter.function.python#c9934enormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#6b5b8c
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#c9934e
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#4e5d7abold
variable.parameter.function.language.special.self.python#c9934e
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#4e5d7a
entity.name.function.python, meta.function.python entity.name.function.python#2c5f8d
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#2c5f8d
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#c9934e
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#4a7c9e
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#4a7c9e
constant.language.python#c9934enormal
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#6b8c5f
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#e0e4e8
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#e0e4e8
string.template.js, string.template.ts#4a7c9e
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#4a7c9e
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#4a7c9e
Fedaykin by FedaykinDev - VS Code Theme