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#141414
  • activityBar.border#3e3f3f60
  • activityBar.foreground#01e1ff
  • activityBarBadge.background#00f7ff
  • activityBarBadge.foreground#000000
  • badge.background#00f7ff
  • badge.foreground#057975
  • breadcrumb.activeSelectionForeground#041616
  • breadcrumb.background#141414
  • breadcrumb.focusForeground#08dddd
  • breadcrumb.foreground#066e6b
  • breadcrumbPicker.background#141414
  • button.background#05797550
  • contrastBorder#05797540
  • debugToolBar.background#141414
  • diffEditor.insertedTextBackground#237A9515
  • diffEditor.removedTextBackground#073CCD20
  • dropdown.background#141414
  • dropdown.border#ff480010
  • editor.background#111111
  • editor.findMatchBackground#141414
  • editor.findMatchBorder#057975
  • editor.findMatchHighlightBackground#05797593
  • editor.findMatchHighlightBorder#00FFF830
  • editor.foreground#00696d
  • editor.lineHighlightBackground#37757550
  • editor.selectionBackground#94a7a593
  • editor.selectionHighlightBackground#0579756b
  • editor.selectionHighlightBorder#09D5CEf0
  • editorBracketMatch.background#576072
  • editorBracketMatch.border#cecece
  • editorCursor.foreground#b4ffef
  • editorError.foreground#0639c770
  • editorGroup.border#14141430
  • editorGroupHeader.tabsBackground#141414
  • editorGutter.addedBackground#237A9560
  • editorGutter.deletedBackground#073CCD60
  • editorGutter.modifiedBackground#09D5CE60
  • editorHoverWidget.background#2c2e2e
  • editorHoverWidget.border#00fff710
  • editorIndentGuide.activeBackground#757575
  • editorIndentGuide.background#36363670
  • editorInfo.foreground#2e2e2e70
  • editorLineNumber.activeForeground#00fff2
  • editorLineNumber.foreground#057975c0
  • editorLink.activeForeground#0CE0E0
  • editorMarkerNavigation.background#0CE0E005
  • editorOverviewRuler.border#141414
  • editorOverviewRuler.errorForeground#073CCD40
  • editorOverviewRuler.findMatchForeground#057975
  • editorOverviewRuler.infoForeground#09D5CE40
  • editorOverviewRuler.warningForeground#35B9E270
  • editorRuler.foreground#616161
  • editorSuggestWidget.background#141414
  • editorSuggestWidget.border#00FFF810
  • editorSuggestWidget.foreground#0CE0E0
  • editorSuggestWidget.highlightForeground#35B9E2
  • editorSuggestWidget.selectedBackground#05797520
  • editorWarning.foreground#237A95
  • editorWhitespace.foreground#0CE0E040
  • editorWidget.background#141414
  • editorWidget.border#35B9E2
  • editorWidget.resizeBorder#057975
  • extensionButton.prominentBackground#237A9590
  • extensionButton.prominentHoverBackground#073CCD
  • focusBorder#00FFF800
  • gitDecoration.conflictingResourceForeground#35B9E2
  • gitDecoration.deletedResourceForeground#073CCD
  • gitDecoration.ignoredResourceForeground#057975
  • gitDecoration.modifiedResourceForeground#07AAA4
  • gitDecoration.untrackedResourceForeground#09D5CE
  • input.background#3a3a3a
  • input.border#00FFF810
  • input.foreground#00fff2
  • input.placeholderForeground#ffffff59
  • inputOption.activeBackground#0CE0E030
  • inputOption.activeBorder#0CE0E030
  • inputValidation.errorBorder#073CCD50
  • inputValidation.infoBorder#09D5CE50
  • inputValidation.warningBorder#35B9E250
  • list.activeSelectionBackground#045c5f
  • list.activeSelectionForeground#00fff7
  • list.focusBackground#3B3B3B
  • list.focusForeground#09D5CE
  • list.highlightForeground#057975
  • list.hoverBackground#00cebd
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#0e0e0e30
  • list.inactiveSelectionForeground#057975
  • list.warningForeground#35B9E2
  • listFilterWidget.background#14141430
  • listFilterWidget.noMatchesOutline#14141430
  • listFilterWidget.outline#14141430
  • menu.background#313131
  • menu.border#07c9c200
  • menu.foreground#00c4c4
  • menu.selectionBackground#44d4cd
  • menu.selectionBorder#06ffea00
  • menu.selectionForeground#000000
  • menu.separatorBackground#777777
  • menubar.selectionBackground#3b3b3b
  • menubar.selectionBorder#05797550
  • menubar.selectionForeground#0CE0E0
  • minimap.background#141414
  • minimapGutter.addedBackground#073CCD
  • minimapGutter.deletedBackground#35B9E2
  • minimapGutter.modifiedBackground#237A95
  • minimapSlider.activeBackground#237A95b0
  • minimapSlider.background#237A9580
  • minimapSlider.hoverBackground#237A95a0
  • notificationLink.foreground#057975
  • notifications.background#141414
  • notifications.foreground#0CE0E0
  • panel.background#000000
  • panel.border#91919160
  • panelTitle.activeBorder#00fff7
  • panelTitle.activeForeground#00FFF8
  • panelTitle.inactiveForeground#08acac
  • peekView.border#14141430
  • peekViewEditor.background#cc540405
  • peekViewEditor.matchHighlightBackground#05797550
  • peekViewEditorGutter.background#0CE0E005
  • peekViewResult.background#0CE0E005
  • peekViewResult.matchHighlightBackground#05797550
  • peekViewResult.selectionBackground#05797570
  • peekViewTitle.background#0CE0E005
  • peekViewTitleDescription.foreground#0CE0E060
  • pickerGroup.foreground#057975
  • progressBar.background#057975
  • scrollbar.shadow#14141400
  • scrollbarSlider.activeBackground#06a7a1cc
  • scrollbarSlider.background#057975bb
  • scrollbarSlider.hoverBackground#078f8aee
  • selection.background#057975
  • settings.checkboxBackground#141414
  • settings.checkboxForeground#0CE0E0
  • settings.dropdownBackground#141414
  • settings.dropdownForeground#0CE0E0
  • settings.headerForeground#057975
  • settings.modifiedItemIndicator#057975
  • settings.numberInputBackground#141414
  • settings.numberInputForeground#0CE0E0
  • settings.textInputBackground#141414
  • settings.textInputForeground#0CE0E0
  • sideBar.background#141414
  • sideBar.border#5e5e5e50
  • sideBar.foreground#0ad6cf
  • sideBarSectionHeader.background#272727
  • sideBarSectionHeader.border#14141460
  • sideBarSectionHeader.foreground#09D5CE
  • sideBarTitle.foreground#04f5f5
  • statusBar.background#181818
  • statusBar.border#14141460
  • statusBar.debuggingBackground#568fa0
  • statusBar.debuggingForeground#00FFF8
  • statusBar.foreground#686868
  • statusBar.noFolderBackground#141414
  • statusBarItem.hoverBackground#08dad320
  • statusBarItem.remoteBackground#057975
  • statusBarItem.remoteForeground#141414
  • tab.activeBackground#06a5a050
  • tab.activeBorder#057975
  • tab.activeForeground#00FFF8
  • tab.activeModifiedBorder#057975
  • tab.border#141414
  • tab.inactiveBackground#054d4a20
  • tab.inactiveForeground#00c9c9af
  • tab.unfocusedActiveBackground#05797540
  • tab.unfocusedActiveBorder#057975
  • tab.unfocusedActiveForeground#0CE0E0
  • tab.unfocusedInactiveBackground#05797510
  • tab.unfocusedInactiveForeground#0CE0E07f
  • terminal.ansiBlack#141414
  • terminal.ansiBlue#09D5CE
  • terminal.ansiBrightBlack#057975
  • terminal.ansiBrightBlue#09D5CE
  • terminal.ansiBrightCyan#0BFFF7
  • terminal.ansiBrightGreen#237A95
  • terminal.ansiBrightMagenta#35B9E2
  • terminal.ansiBrightRed#073CCD
  • terminal.ansiBrightWhite#00FFF8
  • terminal.ansiBrightYellow#35B9E2
  • terminal.ansiCyan#0BFFF7
  • terminal.ansiGreen#237A95
  • terminal.ansiMagenta#35B9E2
  • terminal.ansiRed#073CCD
  • terminal.ansiWhite#00FFF8
  • terminal.ansiYellow#35B9E2
  • terminalCursor.background#141414
  • terminalCursor.foreground#07ced4
  • textLink.activeForeground#00f7ff
  • textLink.foreground#019e99
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#0CE0E0
  • titleBar.border#14141460
  • titleBar.inactiveBackground#141414
  • titleBar.inactiveForeground#057975
  • tree.indentGuidesStroke#616161
  • widget.shadow#14141430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#08ffff
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#237A95
constant.other.php#35B9E2
constant.other.color#00FFF8
invalid, invalid.illegal#cd0774
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#4d5ce6
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#07AAA4
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#0CE0E0
punctuation.definition, string.quoted.single.scss#00d841
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#0CE0E0
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#35B9E2
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#07AAA4
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#bab8bb
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#0BFFF7
support.other.variable, string.other.link, markup.table#0CE0E0
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#c2c468
variable.parameter.function.language.special, variable.parameter#073CCD
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#008cff
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#35B9E2
support.type#d6c3b2
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#07AAA4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#073CCD
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#09D5CEitalic
entity.other.attribute-name, support.function#c064bb
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#0CE0E0
source.scss keyword.control#35B9E2
markup.inserted#00c2fd
markup.deleted#073CCD
markup.changed#35B9E2
string.regexp#b211c7
constant.character.escape#ced125
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#0CE0E0italic
support.type.property-name.json#0CE0E0
text.html.markdown, punctuation.definition.list_item.markdown#0CE0E0
text.html.markdown markup.inline.raw.markdown#35B9E2
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#05797550
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#07AAA4bold
markup.underline#09D5CEunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#05797550
markup.quoteitalic
string.other.link.description.title.markdown#35B9E2
constant.other.reference.link.markdown#35B9E2
markup.raw.block#35B9E2
punctuation.definition.raw.markdown, punctuation.definition.markdown#0BFFF7
variable.language.fenced.markdown#057975
meta.separator#A7A8AFbold
token.info-token#057975
token.warn-token#35B9E2
token.error-token#FF293B
token.debug-token#0BFFF7