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#08162A
  • activityBar.border#08162A60
  • activityBar.foreground#CCD6F6
  • activityBarBadge.background#45aa92
  • activityBarBadge.foreground#08162A
  • badge.background#08162A30
  • badge.foreground#35816e
  • breadcrumb.activeSelectionForeground#35816e
  • breadcrumb.background#08162A
  • breadcrumb.focusForeground#CCD6F6
  • breadcrumb.foreground#3f9783
  • breadcrumbPicker.background#08162A
  • button.background#35816e50
  • contrastBorder#35816e40
  • debugToolBar.background#08162A
  • diffEditor.insertedTextBackground#E6486915
  • diffEditor.removedTextBackground#6736DD20
  • dropdown.background#08162A
  • dropdown.border#E3EAFF10
  • editor.background#08162A
  • editor.findMatchBackground#08162A
  • editor.findMatchBorder#35816e
  • editor.findMatchHighlightBackground#35816e93
  • editor.findMatchHighlightBorder#E3EAFF30
  • editor.foreground#CCD6F6
  • editor.lineHighlightBackground#08162A50
  • editor.selectionBackground#45aa9230
  • editor.selectionHighlightBackground#35816e6b
  • editor.selectionHighlightBorder#45aa92f0
  • editorBracketMatch.background#08162A
  • editorBracketMatch.border#FF52777f
  • editorCursor.foreground#FF5277
  • editorError.foreground#6736DD70
  • editorGroup.border#08162A30
  • editorGroupHeader.tabsBackground#08162A
  • editorGutter.addedBackground#E6486960
  • editorGutter.deletedBackground#6736DD60
  • editorGutter.modifiedBackground#45aa9260
  • editorHoverWidget.background#08162A
  • editorHoverWidget.border#E3EAFF10
  • editorIndentGuide.activeBackground#0C203C
  • editorIndentGuide.background#0C203C70
  • editorInfo.foreground#45aa9270
  • editorLineNumber.activeForeground#45aa92
  • editorLineNumber.foreground#35816ec0
  • editorLink.activeForeground#CCD6F6
  • editorMarkerNavigation.background#CCD6F605
  • editorOverviewRuler.border#08162A
  • editorOverviewRuler.errorForeground#6736DD40
  • editorOverviewRuler.findMatchForeground#35816e
  • editorOverviewRuler.infoForeground#45aa9240
  • editorOverviewRuler.warningForeground#FF527770
  • editorRuler.foreground#0C203C
  • editorSuggestWidget.background#08162A
  • editorSuggestWidget.border#E3EAFF10
  • editorSuggestWidget.foreground#CCD6F6
  • editorSuggestWidget.highlightForeground#FF5277
  • editorSuggestWidget.selectedBackground#35816e20
  • editorWarning.foreground#E64869
  • editorWhitespace.foreground#CCD6F640
  • editorWidget.background#08162A
  • editorWidget.border#FF5277
  • editorWidget.resizeBorder#35816e
  • extensionButton.prominentBackground#E6486990
  • extensionButton.prominentHoverBackground#6736DD
  • focusBorder#E3EAFF00
  • gitDecoration.conflictingResourceForeground#FF5277
  • gitDecoration.deletedResourceForeground#6736DD
  • gitDecoration.ignoredResourceForeground#35816e
  • gitDecoration.modifiedResourceForeground#3f9783
  • gitDecoration.untrackedResourceForeground#45aa92DA
  • input.background#0A192F
  • input.border#E3EAFF10
  • input.foreground#CCD6F6
  • input.placeholderForeground#CCD6F660
  • inputOption.activeBackground#CCD6F630
  • inputOption.activeBorder#CCD6F630
  • inputValidation.errorBorder#6736DD50
  • inputValidation.infoBorder#45aa9250
  • inputValidation.warningBorder#FF527750
  • list.activeSelectionBackground#08162A
  • list.activeSelectionForeground#35816e
  • list.focusBackground#0A192F
  • list.focusForeground#45aa92
  • list.highlightForeground#35816e
  • list.hoverBackground#0C203C
  • list.hoverForeground#E3EAFF
  • list.inactiveSelectionBackground#08162A30
  • list.inactiveSelectionForeground#35816e
  • list.warningForeground#FF5277
  • listFilterWidget.background#08162A30
  • listFilterWidget.noMatchesOutline#08162A30
  • listFilterWidget.outline#08162A30
  • menu.background#08162Af8
  • menu.border#35816e50
  • menu.foreground#CCD6F6
  • menu.selectionBackground#0A192F
  • menu.selectionBorder#08162A30
  • menu.selectionForeground#CCD6F6
  • menu.separatorBackground#CCD6F6
  • menubar.selectionBackground#0A192F
  • menubar.selectionBorder#35816e50
  • menubar.selectionForeground#CCD6F6
  • minimap.background#08162A
  • minimapGutter.addedBackground#6736DD
  • minimapGutter.deletedBackground#FF5277
  • minimapGutter.modifiedBackground#E64869
  • minimapSlider.activeBackground#E64869b0
  • minimapSlider.background#E6486980
  • minimapSlider.hoverBackground#E64869a0
  • notificationLink.foreground#35816e
  • notifications.background#08162A
  • notifications.foreground#CCD6F6
  • panel.background#08162A
  • panel.border#08162A60
  • panelTitle.activeBorder#35816e
  • panelTitle.activeForeground#E3EAFF
  • panelTitle.inactiveForeground#CCD6F6
  • peekView.border#08162A30
  • peekViewEditor.background#CCD6F605
  • peekViewEditor.matchHighlightBackground#35816e50
  • peekViewEditorGutter.background#CCD6F605
  • peekViewResult.background#CCD6F605
  • peekViewResult.matchHighlightBackground#35816e50
  • peekViewResult.selectionBackground#35816e70
  • peekViewTitle.background#CCD6F605
  • peekViewTitleDescription.foreground#CCD6F660
  • pickerGroup.foreground#35816e
  • progressBar.background#35816e
  • scrollbar.shadow#08162A00
  • scrollbarSlider.activeBackground#35816ecc
  • scrollbarSlider.background#35816ebb
  • scrollbarSlider.hoverBackground#35816eee
  • selection.background#35816e
  • settings.checkboxBackground#08162A
  • settings.checkboxForeground#CCD6F6
  • settings.dropdownBackground#08162A
  • settings.dropdownForeground#CCD6F6
  • settings.headerForeground#35816e
  • settings.modifiedItemIndicator#35816e
  • settings.numberInputBackground#08162A
  • settings.numberInputForeground#CCD6F6
  • settings.textInputBackground#08162A
  • settings.textInputForeground#CCD6F6
  • sideBar.background#08162A
  • sideBar.border#35816e50
  • sideBar.foreground#45aa92
  • sideBarSectionHeader.background#08162A
  • sideBarSectionHeader.border#08162A60
  • sideBarSectionHeader.foreground#45aa92
  • sideBarTitle.foreground#CCD6F6
  • statusBar.background#0E141B
  • statusBar.border#08162A60
  • statusBar.debuggingBackground#FF5277
  • statusBar.debuggingForeground#E3EAFF
  • statusBar.foreground#F2F5F7
  • statusBar.noFolderBackground#08162A
  • statusBarItem.hoverBackground#35816e20
  • statusBarItem.remoteBackground#35816e
  • statusBarItem.remoteForeground#08162A
  • tab.activeBackground#35816e50
  • tab.activeBorder#35816e
  • tab.activeForeground#E3EAFF
  • tab.activeModifiedBorder#35816e
  • tab.border#08162A
  • tab.inactiveBackground#35816e20
  • tab.inactiveForeground#CCD6F6af
  • tab.unfocusedActiveBackground#35816e40
  • tab.unfocusedActiveBorder#35816e
  • tab.unfocusedActiveForeground#CCD6F6
  • tab.unfocusedInactiveBackground#35816e10
  • tab.unfocusedInactiveForeground#CCD6F67f
  • terminal.ansiBlack#08162A
  • terminal.ansiBlue#45aa92
  • terminal.ansiBrightBlack#35816e
  • terminal.ansiBrightBlue#45aa92
  • terminal.ansiBrightCyan#78FFDF
  • terminal.ansiBrightGreen#E64869
  • terminal.ansiBrightMagenta#FF5277
  • terminal.ansiBrightRed#6736DD
  • terminal.ansiBrightWhite#E3EAFF
  • terminal.ansiBrightYellow#FF5277
  • terminal.ansiCyan#78FFDF
  • terminal.ansiGreen#E64869
  • terminal.ansiMagenta#FF5277
  • terminal.ansiRed#6736DD
  • terminal.ansiWhite#E3EAFF
  • terminal.ansiYellow#FF5277
  • terminalCursor.background#08162A
  • terminalCursor.foreground#FF5277
  • textLink.activeForeground#CCD6F6
  • textLink.foreground#35816e
  • titleBar.activeBackground#08162A
  • titleBar.activeForeground#CCD6F6
  • titleBar.border#08162A60
  • titleBar.inactiveBackground#08162A
  • titleBar.inactiveForeground#35816e
  • tree.indentGuidesStroke#0C203C
  • widget.shadow#08162A30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#ffcc66
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#E64869
constant.other.php#FF5277
constant.other.color#E3EAFF
invalid, invalid.illegal#6736DD
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#5ccfe6
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#3f9783
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#5ccfe6
punctuation.definition, string.quoted.single.scss#c3a6ff
keyword.control
comment.line.scss, comment.line.double-slash.js, comment.line.double-slash.jsx, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.jsx, punctuation.definition.comment.html, comment.block.html, comment.block.js, comment.block.jsx, comment.block.css, comment.block.scss#6D6F7Citalic
text.html.derivative#A7A8AF
comment.line.double-slash.cpp, punctuation.definition.comment.cpp, comment.block.cpp#6D6F7Citalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#5ccfe6
entity.name.tag.html
variable.parameter.js, variable.parameter.keyframe-list.css#FF5277
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#ffcc66
variable.other.object.js, storage.type.js#C3A6FF
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#45aa92
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#78FFDF
support.other.variable, string.other.link, markup.table#CCD6F6
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#FF5277
variable.parameter.function.language.special, variable.parameter#6736DD
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#E64869
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#ffcc66
support.type#ffcc66
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#3f9783
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffcc66
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#45aa92italic
entity.other.attribute-name, support.function#FF5277
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#c3a6ff
source.scss keyword.control#FF5277
markup.inserted#E64869
markup.deleted#ffcc66
markup.changed#FF5277
string.regexp#78FFDF
constant.character.escape#78FFDF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#CCD6F6italic
support.type.property-name.json#CCD6F6
text.html.markdown, punctuation.definition.list_item.markdown#CCD6F6
text.html.markdown markup.inline.raw.markdown#FF5277
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#35816e50
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#3f9783bold
markup.underline#45aa92underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#35816e50
markup.quoteitalic
string.other.link.description.title.markdown#FF5277
constant.other.reference.link.markdown#FF5277
markup.raw.block#FF5277
punctuation.definition.raw.markdown, punctuation.definition.markdown#78FFDF
variable.language.fenced.markdown#35816e
meta.separator#A7A8AFbold
token.info-token#35816e
token.warn-token#FF5277
token.error-token#ebc20f
token.debug-token#78FFDF