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.background#071C2E
  • activityBar.border#071C2E60
  • activityBar.foreground#8AC8FF
  • activityBarBadge.background#BCEDFF
  • activityBarBadge.foreground#071C2E
  • badge.background#071C2E30
  • badge.foreground#267F9F
  • breadcrumb.activeSelectionForeground#267F9F
  • breadcrumb.background#071C2E
  • breadcrumb.focusForeground#8AC8FF
  • breadcrumb.foreground#5BB9DB
  • breadcrumbPicker.background#071C2E
  • button.background#267F9F50
  • contrastBorder#267F9F40
  • debugToolBar.background#071C2E
  • diffEditor.insertedTextBackground#39389915
  • diffEditor.removedTextBackground#6DA5FF20
  • dropdown.background#071C2E
  • dropdown.border#49FFF810
  • editor.background#071C2E
  • editor.findMatchBackground#071C2E
  • editor.findMatchBorder#267F9F
  • editor.findMatchHighlightBackground#267F9F93
  • editor.findMatchHighlightBorder#49FFF830
  • editor.foreground#8AC8FF
  • editor.lineHighlightBackground#071C2E50
  • editor.selectionBackground#BCEDFF30
  • editor.selectionHighlightBackground#267F9F6b
  • editor.selectionHighlightBorder#BCEDFFf0
  • editorBracketMatch.background#071C2E
  • editorBracketMatch.border#5F5DFF7f
  • editorCursor.foreground#5F5DFF
  • editorError.foreground#6DA5FF70
  • editorGroup.border#071C2E30
  • editorGroupHeader.tabsBackground#071C2E
  • editorGutter.addedBackground#39389960
  • editorGutter.deletedBackground#6DA5FF60
  • editorGutter.modifiedBackground#BCEDFF60
  • editorHoverWidget.background#071C2E
  • editorHoverWidget.border#49FFF810
  • editorIndentGuide.activeBackground#45AEB6
  • editorIndentGuide.background#45AEB670
  • editorInfo.foreground#BCEDFF70
  • editorLineNumber.activeForeground#BCEDFF
  • editorLineNumber.foreground#267F9Fc0
  • editorLink.activeForeground#8AC8FF
  • editorMarkerNavigation.background#8AC8FF05
  • editorOverviewRuler.border#071C2E
  • editorOverviewRuler.errorForeground#6DA5FF40
  • editorOverviewRuler.findMatchForeground#267F9F
  • editorOverviewRuler.infoForeground#BCEDFF40
  • editorOverviewRuler.warningForeground#5F5DFF70
  • editorRuler.foreground#45AEB6
  • editorSuggestWidget.background#071C2E
  • editorSuggestWidget.border#49FFF810
  • editorSuggestWidget.foreground#8AC8FF
  • editorSuggestWidget.highlightForeground#5F5DFF
  • editorSuggestWidget.selectedBackground#267F9F20
  • editorWarning.foreground#393899
  • editorWhitespace.foreground#8AC8FF40
  • editorWidget.background#071C2E
  • editorWidget.border#5F5DFF
  • editorWidget.resizeBorder#267F9F
  • extensionButton.prominentBackground#39389990
  • extensionButton.prominentHoverBackground#6DA5FF
  • focusBorder#49FFF800
  • gitDecoration.conflictingResourceForeground#5F5DFF
  • gitDecoration.deletedResourceForeground#6DA5FF
  • gitDecoration.ignoredResourceForeground#267F9F
  • gitDecoration.modifiedResourceForeground#5BB9DB
  • gitDecoration.untrackedResourceForeground#BCEDFF
  • input.background#123350
  • input.border#49FFF810
  • input.foreground#8AC8FF
  • input.placeholderForeground#8AC8FF60
  • inputOption.activeBackground#8AC8FF30
  • inputOption.activeBorder#8AC8FF30
  • inputValidation.errorBorder#6DA5FF50
  • inputValidation.infoBorder#BCEDFF50
  • inputValidation.warningBorder#5F5DFF50
  • list.activeSelectionBackground#071C2E
  • list.activeSelectionForeground#267F9F
  • list.focusBackground#123350
  • list.focusForeground#BCEDFF
  • list.highlightForeground#267F9F
  • list.hoverBackground#45AEB6
  • list.hoverForeground#49FFF8
  • list.inactiveSelectionBackground#071C2E30
  • list.inactiveSelectionForeground#267F9F
  • list.warningForeground#5F5DFF
  • listFilterWidget.background#071C2E30
  • listFilterWidget.noMatchesOutline#071C2E30
  • listFilterWidget.outline#071C2E30
  • menu.background#071C2Ef8
  • menu.border#267F9F50
  • menu.foreground#8AC8FF
  • menu.selectionBackground#123350
  • menu.selectionBorder#071C2E30
  • menu.selectionForeground#8AC8FF
  • menu.separatorBackground#8AC8FF
  • menubar.selectionBackground#123350
  • menubar.selectionBorder#267F9F50
  • menubar.selectionForeground#8AC8FF
  • minimap.background#071C2E
  • minimapGutter.addedBackground#6DA5FF
  • minimapGutter.deletedBackground#5F5DFF
  • minimapGutter.modifiedBackground#393899
  • minimapSlider.activeBackground#393899b0
  • minimapSlider.background#39389980
  • minimapSlider.hoverBackground#393899a0
  • notificationLink.foreground#267F9F
  • notifications.background#071C2E
  • notifications.foreground#8AC8FF
  • panel.background#071C2E
  • panel.border#071C2E60
  • panelTitle.activeBorder#267F9F
  • panelTitle.activeForeground#49FFF8
  • panelTitle.inactiveForeground#8AC8FF
  • peekView.border#071C2E30
  • peekViewEditor.background#8AC8FF05
  • peekViewEditor.matchHighlightBackground#267F9F50
  • peekViewEditorGutter.background#8AC8FF05
  • peekViewResult.background#8AC8FF05
  • peekViewResult.matchHighlightBackground#267F9F50
  • peekViewResult.selectionBackground#267F9F70
  • peekViewTitle.background#8AC8FF05
  • peekViewTitleDescription.foreground#8AC8FF60
  • pickerGroup.foreground#267F9F
  • progressBar.background#267F9F
  • scrollbar.shadow#071C2E00
  • scrollbarSlider.activeBackground#267F9Fcc
  • scrollbarSlider.background#267F9Fbb
  • scrollbarSlider.hoverBackground#267F9Fee
  • selection.background#267F9F
  • settings.checkboxBackground#071C2E
  • settings.checkboxForeground#8AC8FF
  • settings.dropdownBackground#071C2E
  • settings.dropdownForeground#8AC8FF
  • settings.headerForeground#267F9F
  • settings.modifiedItemIndicator#267F9F
  • settings.numberInputBackground#071C2E
  • settings.numberInputForeground#8AC8FF
  • settings.textInputBackground#071C2E
  • settings.textInputForeground#8AC8FF
  • sideBar.background#071C2E
  • sideBar.border#267F9F50
  • sideBar.foreground#BCEDFF
  • sideBarSectionHeader.background#071C2E
  • sideBarSectionHeader.border#071C2E60
  • sideBarSectionHeader.foreground#BCEDFF
  • sideBarTitle.foreground#8AC8FF
  • statusBar.background#448CFF
  • statusBar.border#071C2E60
  • statusBar.debuggingBackground#5F5DFF
  • statusBar.debuggingForeground#49FFF8
  • statusBar.foreground#ABCBFF
  • statusBar.noFolderBackground#071C2E
  • statusBarItem.hoverBackground#267F9F20
  • statusBarItem.remoteBackground#267F9F
  • statusBarItem.remoteForeground#071C2E
  • tab.activeBackground#267F9F50
  • tab.activeBorder#267F9F
  • tab.activeForeground#49FFF8
  • tab.activeModifiedBorder#267F9F
  • tab.border#071C2E
  • tab.inactiveBackground#267F9F20
  • tab.inactiveForeground#8AC8FFaf
  • tab.unfocusedActiveBackground#267F9F40
  • tab.unfocusedActiveBorder#267F9F
  • tab.unfocusedActiveForeground#8AC8FF
  • tab.unfocusedInactiveBackground#267F9F10
  • tab.unfocusedInactiveForeground#8AC8FF7f
  • terminal.ansiBlack#071C2E
  • terminal.ansiBlue#BCEDFF
  • terminal.ansiBrightBlack#267F9F
  • terminal.ansiBrightBlue#BCEDFF
  • terminal.ansiBrightCyan#EAF9FF
  • terminal.ansiBrightGreen#393899
  • terminal.ansiBrightMagenta#5F5DFF
  • terminal.ansiBrightRed#6DA5FF
  • terminal.ansiBrightWhite#49FFF8
  • terminal.ansiBrightYellow#5F5DFF
  • terminal.ansiCyan#EAF9FF
  • terminal.ansiGreen#393899
  • terminal.ansiMagenta#5F5DFF
  • terminal.ansiRed#6DA5FF
  • terminal.ansiWhite#49FFF8
  • terminal.ansiYellow#5F5DFF
  • terminalCursor.background#071C2E
  • terminalCursor.foreground#5F5DFF
  • textLink.activeForeground#8AC8FF
  • textLink.foreground#267F9F
  • titleBar.activeBackground#071C2E
  • titleBar.activeForeground#8AC8FF
  • titleBar.border#071C2E60
  • titleBar.inactiveBackground#071C2E
  • titleBar.inactiveForeground#267F9F
  • tree.indentGuidesStroke#45AEB6
  • widget.shadow#071C2E30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#5F5DFF
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#393899
constant.other.php#5F5DFF
constant.other.color#49FFF8
invalid, invalid.illegal#6DA5FF
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#e1e2e8
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#5BB9DB
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#8AC8FF
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#e3e7ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#8AC8FF
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#5F5DFF
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#5BB9DB
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#BCEDFF
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#EAF9FF
support.other.variable, string.other.link, markup.table#8AC8FF
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#5F5DFF
variable.parameter.function.language.special, variable.parameter#6DA5FF
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#393899
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#5F5DFF
support.type#B2CCD6
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#5BB9DB
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#6DA5FF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#BCEDFFitalic
entity.other.attribute-name, support.function#5F5DFF
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#8AC8FF
source.scss keyword.control#5F5DFF
markup.inserted#393899
markup.deleted#6DA5FF
markup.changed#5F5DFF
string.regexp#EAF9FF
constant.character.escape#EAF9FF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#8AC8FFitalic
support.type.property-name.json#8AC8FF
text.html.markdown, punctuation.definition.list_item.markdown#8AC8FF
text.html.markdown markup.inline.raw.markdown#5F5DFF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#267F9F50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#5BB9DBbold
markup.underline#BCEDFFunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#267F9F50
markup.quoteitalic
string.other.link.description.title.markdown#5F5DFF
constant.other.reference.link.markdown#5F5DFF
markup.raw.block#5F5DFF
punctuation.definition.raw.markdown, punctuation.definition.markdown#EAF9FF
variable.language.fenced.markdown#267F9F
meta.separator#A7A8AFbold
token.info-token#4248bb
token.warn-token#fff7bb
token.error-token#ff4352
token.debug-token#e39869
Mana Lord's Theme by Mana Lord - VS Code Theme