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#1d1c1a
  • activityBar.border#1d1c1a60
  • activityBar.foreground#ececec
  • activityBarBadge.background#005eb8
  • activityBarBadge.foreground#ececec
  • badge.background#00000030
  • badge.foreground#4A4A4A
  • button.background#61616150
  • debugToolBar.background#1d1c1a
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#ff535320
  • dropdown.background#1d1c1a
  • dropdown.border#ececec10
  • editor.background#1d1c1a
  • editor.foreground#ececec
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#61616150
  • editor.selectionHighlightBackground#ececec6e
  • editorBracketMatch.background#1d1c1a
  • editorBracketMatch.border#ececec6e
  • editorCursor.foreground#ececec
  • editorError.foreground#ff535370
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#1d1c1a
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#1d1c1a
  • editorHoverWidget.border#ececec10
  • editorIndentGuide.background#41414170
  • editorLineNumber.foreground#414141
  • editorLink.activeForeground#ececec
  • editorMarkerNavigation.background#ececec05
  • editorSuggestWidget.background#1d1c1a
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#ececec
  • editorSuggestWidget.highlightForeground#ececec
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#C3E88D70
  • editorWhitespace.foreground#3f3f3f
  • editorWidget.background#1d1c1a
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#a7e18c
  • focusBorder#414141cb
  • input.background#ececec05
  • input.border#ececec10
  • input.foreground#ececec
  • input.placeholderForeground#ececec60
  • inputValidation.errorBorder#f37373
  • inputValidation.infoBorder#9dbbf8
  • inputValidation.warningBorder#fdc56b
  • list.activeSelectionBackground#1d1c1a
  • list.activeSelectionForeground#ececec
  • list.focusBackground#ececec20
  • list.focusForeground#ececec
  • list.highlightForeground#80CBC4
  • list.hoverBackground#1d1c1a
  • list.hoverForeground#ececec
  • list.inactiveSelectionBackground#1d1c1a
  • list.inactiveSelectionForeground#d7d7d7
  • notification.background#1d1c1a
  • notification.buttonBackground#EEFFFF50
  • notification.foreground#ececec
  • notification.infoBackground#82AAFF
  • notification.infoForeground#ececec
  • notification.warningBackground#ff5353
  • notification.warningForeground#ffffff
  • panel.background#1d1c1a
  • panel.border#1d1c1a60
  • panelTitle.activeForeground#ececec
  • peekView.border#00000030
  • peekViewEditor.background#ececec05
  • peekViewEditorGutter.background#ececec06
  • peekViewResult.background#ececec05
  • peekViewTitle.background#ececec05
  • peekViewTitleDescription.foreground#ececec06
  • pickerGroup.foreground#ececec
  • progressBar.background#6f6f6f
  • scrollbar.shadow#1d1c1a00
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#00000050
  • scrollbarSlider.hoverBackground#00000030
  • selection.background#ececec
  • sideBar.background#1d1c1a
  • sideBar.border#1d1c1a60
  • sideBar.foreground#616161
  • sideBarSectionHeader.background#1d1c1a
  • sideBarTitle.foreground#ececec
  • statusBar.background#1d1c1a
  • statusBar.border#1d1c1a60
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#6f6e67
  • statusBar.noFolderBackground#1d1c1a
  • tab.activeBorder#1d1c1a
  • tab.activeForeground#ececec
  • tab.border#1d1c1a
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#6f6e67
  • tab.unfocusedActiveBorder#414141
  • tab.unfocusedActiveForeground#ececec
  • terminal.ansiBlack#414141
  • terminal.ansiBlue#81becb
  • terminal.ansiBrightBlack#414141
  • terminal.ansiBrightBlue#99c2ca
  • terminal.ansiBrightCyan#a9ffff
  • terminal.ansiBrightGreen#c1e0a2
  • terminal.ansiBrightMagenta#cbb9ff
  • terminal.ansiBrightRed#ffc1c1
  • terminal.ansiBrightWhite#ececec
  • terminal.ansiBrightYellow#ffff93
  • terminal.ansiCyan#8ae1fc
  • terminal.ansiGreen#a7e18c
  • terminal.ansiMagenta#b497ff
  • terminal.ansiRed#ff7f7f
  • terminal.ansiWhite#ececec
  • terminal.ansiYellow#ffd166
  • textLink.activeForeground#ececec
  • textLink.foreground#6f6f6f
  • titleBar.activeBackground#1d1c1a
  • titleBar.activeForeground#414141
  • titleBar.border#1d1c1a60
  • titleBar.inactiveBackground#1d1c1a
  • titleBar.inactiveForeground#414141
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ecececff
comment, punctuation.definition.comment#4e4e4eitalic
variable, string constant.other.placeholder#ececec
constant.other.color#ececec
invalid, invalid.illegal#ff5858
keyword, storage.type, storage.modifier#6AADE4
keyword.control, constant.other.color, punctuation, meta.tag, 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#92dce5
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#8ae1fc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#c6fffc
meta.block variable.other#b9d9eb
support.other.variable, string.other.link#b9d9eb
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e3e696
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d7ba7d
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#93ff96
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#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#6AADE4
variable.language#6AADE4italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#6AADE4
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e3e696italic
entity.other.attribute-name.class#6AADE4
source.sass keyword.control#6AADE4
markup.inserted#C3E88D
markup.deleted#ff5353
markup.changed#dfb1fd
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8cb3ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5353italic
source.json meta.structure.dictionary.json support.type.property-name.json#6AADE4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#76c1ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#76c1ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff5353
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c17070
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#76c1ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07171
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d79aff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#ececec
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#76c1ffitalic
markup.bold, markup.bold string#76c1ffbold
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#76c1ffbold italic
markup.underline#f9efe9underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6