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#1D1D1D
  • activityBar.border#1D1D1D60
  • activityBar.foreground#17A9CE
  • activityBarBadge.background#FFF
  • activityBarBadge.foreground#1D1D1D
  • badge.background#1D1D1D30
  • badge.foreground#17a9ce
  • breadcrumb.activeSelectionForeground#17A9CE
  • breadcrumb.background#1D1D1D
  • breadcrumb.focusForeground#17A9CE
  • breadcrumb.foreground#FFF
  • breadcrumbPicker.background#1D1D1D
  • button.background#17A9CE50
  • contrastBorder#17A9CE40
  • debugToolBar.background#1D1D1D
  • diffEditor.insertedTextBackground#17A9CE15
  • diffEditor.removedTextBackground#30A81820
  • dropdown.background#1D1D1D
  • dropdown.border#A3997710
  • editor.background#1D1D1D
  • editor.findMatchBackground#1D1D1D
  • editor.findMatchBorder#17A9CE
  • editor.findMatchHighlightBackground#17A9CE93
  • editor.findMatchHighlightBorder#A3997730
  • editor.foreground#17A9CE
  • editor.lineHighlightBackground#1D1D1D50
  • editor.selectionBackground#17A9CE20
  • editor.selectionHighlightBackground#17A9CE6b
  • editor.selectionHighlightBorder#17A9CE
  • editorBracketMatch.background#1D1D1D
  • editorBracketMatch.border#17A9CE7f
  • editorCursor.foreground#17A9CE
  • editorError.foreground#30A81870
  • editorGroup.border#1D1D1D30
  • editorGroupHeader.tabsBackground#1D1D1D
  • editorGutter.addedBackground#17A9CE60
  • editorGutter.deletedBackground#30A81860
  • editorGutter.modifiedBackground#17A9CE
  • editorHoverWidget.background#1D1D1D
  • editorHoverWidget.border#A3997710
  • editorIndentGuide.activeBackground#FFF
  • editorIndentGuide.background#17ADCE50
  • editorInfo.foreground#17A9CE
  • editorLineNumber.activeForeground#FFF
  • editorLineNumber.foreground#17A9CEc0
  • editorLink.activeForeground#17A9CE
  • editorMarkerNavigation.background#17A9CE05
  • editorOverviewRuler.border#1D1D1D
  • editorOverviewRuler.errorForeground#30A81840
  • editorOverviewRuler.findMatchForeground#17A9CE
  • editorOverviewRuler.infoForeground#17A9CE10
  • editorOverviewRuler.warningForeground#17A9CE70
  • editorRuler.foreground#FFF
  • editorSuggestWidget.background#1D1D1D
  • editorSuggestWidget.border#A3997710
  • editorSuggestWidget.foreground#17A9CE
  • editorSuggestWidget.highlightForeground#17A9CE
  • editorSuggestWidget.selectedBackground#17A9CE20
  • editorWarning.foreground#17A9CE
  • editorWhitespace.foreground#17A9CE40
  • editorWidget.background#1D1D1D
  • editorWidget.border#17A9CE
  • editorWidget.resizeBorder#17A9CE
  • extensionButton.prominentBackground#17A9CE90
  • extensionButton.prominentHoverBackground#30A818
  • focusBorder#A3997700
  • gitDecoration.conflictingResourceForeground#17A9CE
  • gitDecoration.deletedResourceForeground#30A818
  • gitDecoration.ignoredResourceForeground#17A9CE
  • gitDecoration.modifiedResourceForeground#FFF
  • gitDecoration.untrackedResourceForeground#FFF
  • input.background#292020
  • input.border#A3997710
  • input.foreground#17A9CE
  • input.placeholderForeground#17A9CE60
  • inputOption.activeBackground#17A9CE30
  • inputOption.activeBorder#17A9CE30
  • inputValidation.errorBorder#30A81850
  • inputValidation.infoBorder#17A9CE
  • inputValidation.warningBorder#17A9CE50
  • list.activeSelectionBackground#1D1D1D
  • list.activeSelectionForeground#17A9CE
  • list.focusBackground#292020
  • list.focusForeground#FFF
  • list.highlightForeground#17A9CE
  • list.hoverBackground#17A9CE30
  • list.hoverForeground#17A9CE
  • list.inactiveSelectionBackground#1D1D1D30
  • list.inactiveSelectionForeground#17A9CE
  • list.warningForeground#17A9CE
  • listFilterWidget.background#1D1D1D30
  • listFilterWidget.noMatchesOutline#1D1D1D30
  • listFilterWidget.outline#1D1D1D30
  • menu.background#1D1D1Df8
  • menu.border#17A9CE50
  • menu.foreground#17A9CE
  • menu.selectionBackground#292020
  • menu.selectionBorder#1D1D1D30
  • menu.selectionForeground#17A9CE
  • menu.separatorBackground#17A9CE
  • menubar.selectionBackground#292020
  • menubar.selectionBorder#17A9CE50
  • menubar.selectionForeground#17A9CE
  • minimap.background#1D1D1D
  • minimapGutter.addedBackground#17A9CE
  • minimapGutter.deletedBackground#17A9CE
  • minimapGutter.modifiedBackground#17A9CE
  • minimapSlider.activeBackground#17A9CEb0
  • minimapSlider.background#17A9CE80
  • minimapSlider.hoverBackground#17A9CEa0
  • notificationLink.foreground#17A9CE
  • notifications.background#1D1D1D
  • notifications.foreground#17A9CE
  • panel.background#1D1D1D
  • panel.border#1D1D1D60
  • panelTitle.activeBorder#17A9CE
  • panelTitle.activeForeground#A39977
  • panelTitle.inactiveForeground#17A9CE
  • peekView.border#1D1D1D30
  • peekViewEditor.background#17A9CE05
  • peekViewEditor.matchHighlightBackground#17A9CE50
  • peekViewEditorGutter.background#17A9CE05
  • peekViewResult.background#17A9CE05
  • peekViewResult.matchHighlightBackground#17A9CE50
  • peekViewResult.selectionBackground#17A9CE70
  • peekViewTitle.background#17A9CE05
  • peekViewTitleDescription.foreground#17A9CE60
  • pickerGroup.foreground#17A9CE
  • progressBar.background#17A9CE
  • scrollbar.shadow#1D1D1D00
  • scrollbarSlider.activeBackground#17A9CEcc
  • scrollbarSlider.background#17A9CEbb
  • scrollbarSlider.hoverBackground#17A9CEee
  • selection.background#17A9CE
  • settings.checkboxBackground#1D1D1D
  • settings.checkboxForeground#17A9CE
  • settings.dropdownBackground#1D1D1D
  • settings.dropdownForeground#17A9CE
  • settings.headerForeground#17A9CE
  • settings.modifiedItemIndicator#17A9CE
  • settings.numberInputBackground#1D1D1D
  • settings.numberInputForeground#17A9CE
  • settings.textInputBackground#1D1D1D
  • settings.textInputForeground#17A9CE
  • sideBar.background#1D1D1D
  • sideBar.border#17A9CE50
  • sideBar.foreground#17A9CE
  • sideBarSectionHeader.background#1D1D1D
  • sideBarSectionHeader.border#1D1D1D60
  • sideBarSectionHeader.foreground#17A9CE
  • sideBarTitle.foreground#17A9CE
  • statusBar.background#1D1D1D
  • statusBar.border#1D1D1D60
  • statusBar.debuggingBackground#17A9CE
  • statusBar.debuggingForeground#A39977
  • statusBar.foreground#17A9CE
  • statusBar.noFolderBackground#1D1D1D
  • statusBarItem.hoverBackground#17A9CE20
  • statusBarItem.remoteBackground#17A9CE
  • statusBarItem.remoteForeground#1D1D1D
  • tab.activeBackground#17A9CE50
  • tab.activeBorder#17A9CE
  • tab.activeForeground#A39977
  • tab.activeModifiedBorder#17A9CE
  • tab.border#1D1D1D
  • tab.inactiveBackground#17A9CE20
  • tab.inactiveForeground#17A9CEaf
  • tab.unfocusedActiveBackground#17A9CE10
  • tab.unfocusedActiveBorder#17A9CE
  • tab.unfocusedActiveForeground#17A9CE
  • tab.unfocusedInactiveBackground#17A9CE
  • tab.unfocusedInactiveForeground#17A9CE7f
  • terminal.ansiBlack#1D1D1D
  • terminal.ansiBlue#FFF
  • terminal.ansiBrightBlack#17A9CE
  • terminal.ansiBrightBlue#FFF
  • terminal.ansiBrightCyan#FFF
  • terminal.ansiBrightGreen#17A9CE
  • terminal.ansiBrightMagenta#17A9CE
  • terminal.ansiBrightRed#17A9CE
  • terminal.ansiBrightWhite#A39977
  • terminal.ansiBrightYellow#17A9CE
  • terminal.ansiCyan#FFF
  • terminal.ansiGreen#17A9CE
  • terminal.ansiMagenta#17A9CE
  • terminal.ansiRed#17A9CE
  • terminal.ansiWhite#A39977
  • terminal.ansiYellow#17A9CE
  • terminalCursor.background#1D1D1D
  • terminalCursor.foreground#17A9CE
  • textLink.activeForeground#17A9CE
  • textLink.foreground#17A9CE
  • titleBar.activeBackground#1D1D1D
  • titleBar.activeForeground#17A9CE
  • titleBar.border#1D1D1D60
  • titleBar.inactiveBackground#1D1D1D
  • titleBar.inactiveForeground#17A9CE
  • tree.indentGuidesStroke#FFF
  • widget.shadow#1D1D1D30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#17A9CE
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#17A9CE
constant.other.php#17A9CE
constant.other.color#A39977
invalid, invalid.illegal#17A9CE
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#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#FFF
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#17A9CE
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#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#17A9CE
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#17A9CE
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#FFF
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#FFF
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFF
support.other.variable, string.other.link, markup.table#17A9CE
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#17A9CE
variable.parameter.function.language.special, variable.parameter#17A9CE
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#17A9CE
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#17A9CE
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#FFF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#17A9CE
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFFitalic
entity.other.attribute-name, support.function#17A9CE
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#17A9CE
source.scss keyword.control#17A9CE
markup.inserted#17A9CE
markup.deleted#17A9CE
markup.changed#17A9CE
string.regexp#FFF
constant.character.escape#FFF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#17A9CEitalic
support.type.property-name.json#17A9CE
text.html.markdown, punctuation.definition.list_item.markdown#17A9CE
text.html.markdown markup.inline.raw.markdown#17A9CE
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#17A9CE50
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#FFFbold
markup.underline#FFFunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#17A9CE50
markup.quoteitalic
string.other.link.description.title.markdown#17A9CE
constant.other.reference.link.markdown#17A9CE
markup.raw.block#17A9CE
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFF
variable.language.fenced.markdown#17A9CE
meta.separator#A7A8AFbold
token.info-token#17A9CE
token.warn-token#17A9CE
token.error-token#17A9CE
token.debug-token#FFF