Skip to main content
Coding Theme

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#0D1B2A
  • activityBar.foreground#E0E1DD
  • activityBar.inactiveForeground#CFD1CB
  • activityBarBadge.background#384F7A
  • activityBarBadge.foreground#E0E1DD
  • badge.background#415A77
  • badge.foreground#E0E1DD
  • dropdown.background#0D1B2A
  • dropdown.foreground#E0E1DD
  • dropdown.listBackground#384F7A
  • editor.background#0D1B2A
  • editor.foldBackground#1B263B
  • editor.foreground#E0E1DD
  • editor.lineHighlightBorder#1B263B
  • editor.selectionBackground#415A77
  • editorBracketMatch.background#384F7A
  • editorBracketMatch.border#384F7A
  • editorError.foreground#AD0000
  • editorGroupHeader.tabsBackground#253450
  • editorGutter.addedBackground#A0D2B2
  • editorGutter.deletedBackground#AD0000
  • editorGutter.modifiedBackground#FFDC4F
  • editorHint.foreground#E0E1DD
  • editorHoverWidget.background#384F7A
  • editorHoverWidget.foreground#E0E1DD
  • editorIndentGuide.activeBackground#778DA9
  • editorIndentGuide.background#5E7797
  • editorInfo.background#384F7A
  • editorInfo.foreground#E0E1DD
  • editorInlayHint.background#384F7A
  • editorInlayHint.foreground#E0E1DD
  • editorInlayHint.parameterBackground#384F7A
  • editorInlayHint.parameterForeground#E0E1DD
  • editorInlayHint.typeBackground#384F7A
  • editorInlayHint.typeForeground#E0E1DD
  • editorLightBulb.foreground#E0E1DD
  • editorLightBulbAutoFix.foreground#E0E1DD
  • editorLineNumber.activeForeground#5E7797
  • editorLineNumber.foreground#778DA9
  • editorOverviewRuler.addedForeground#A0D2B2
  • editorOverviewRuler.deletedForeground#AD0000
  • editorOverviewRuler.errorForeground#AD0000
  • editorOverviewRuler.modifiedForeground#FFDC4F
  • editorOverviewRuler.warningForeground#FFDC4F
  • editorWarning.foreground#FFDC4F
  • editorWhitespace.foreground#778DA9
  • focusBorder#1B263B
  • gitDecoration.modifiedResourceForeground#FFDC4F
  • gitDecoration.untrackedResourceForeground#A0D2B2
  • input.background#384F7A
  • input.foreground#E0E1DD
  • input.placeholderForeground#CFD1CB
  • list.activeSelectionBackground#2E4165
  • list.activeSelectionForeground#E0E1DD
  • list.errorForeground#FF5B5B
  • list.focusBackground#2E4165
  • list.focusForeground#E0E1DD
  • list.hoverBackground#2E4165
  • list.hoverForeground#E0E1DD
  • list.inactiveFocusBackground#2E4165
  • list.inactiveSelectionBackground#2E4165
  • list.inactiveSelectionForeground#E0E1DD
  • list.warningForeground#FFDC4F
  • menu.background#0D1B2A
  • menu.selectionBackground#1B263B
  • menu.selectionForeground#778DA9
  • menubar.selectionBackground#1B263B
  • menubar.selectionForeground#778DA9
  • notifications.background#2E4165
  • notifications.foreground#E0E1DD
  • panel.background#1B263B
  • panelTitle.activeBorder#778DA9
  • panelTitle.activeForeground#E0E1DD
  • peekView.border#384F7A
  • peekViewEditor.background#384F7A
  • peekViewEditor.matchHighlightBorder#415A77
  • peekViewResult.background#384F7A
  • peekViewResult.selectionBackground#384F7A
  • peekViewResult.selectionForeground#E0E1DD
  • peekViewTitle.background#384F7A
  • quickInput.background#1B263B
  • quickInput.foreground#E0E1DD
  • quickInputList.focusBackground#384F7A
  • quickInputList.focusForeground#E0E1DD
  • selection.background#415A77
  • sideBar.background#1B263B
  • sideBar.dropBackground#1B263B
  • sideBar.foreground#E0E1DD
  • sideBarSectionHeader.background#415A77
  • sideBarSectionHeader.foreground#E0E1DD
  • sideBarTitle.foreground#E0E1DD
  • statusBar.background#152B44
  • statusBar.debuggingBackground#384F7A
  • statusBar.debuggingForeground#E0E1DD
  • statusBar.foreground#E0E1DD
  • statusBar.noFolderBackground#384F7A
  • statusBar.noFolderForeground#E0E1DD
  • statusBarItem.remoteBackground#415A77
  • statusBarItem.remoteForeground#E0E1DD
  • tab.activeBackground#1B263B
  • tab.activeBorderTop#E0E1DD
  • tab.border#415A77
  • tab.inactiveBackground#415A77
  • tab.inactiveForeground#E0E1DD
  • tab.unfocusedActiveBackground#1B263B
  • textLink.activeForeground#BCC8D6
  • textLink.foreground#D0D8E2
  • titleBar.activeBackground#0D1B2A
  • titleBar.activeForeground#E0E1DD
  • titleBar.inactiveBackground#152B44
  • titleBar.inactiveForeground#E0E1DD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#81B4FFitalic
variable, string constant.other.placeholder#E0E1DD
constant.other.color#E0E1DD
invalid, invalid.illegal#FF3737
keyword, storage.type, storage.modifier#D29DF5
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#81B4FF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#B60000
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#81B4FF
meta.block variable.other#CAD1E4
support.other.variable, string.other.link#FF3737
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF8B8B
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#A9B8D8
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFDC4F
support.type#81B4FF
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#8090BE
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#6A7DB2
variable.language#6A7DB2italic
entity.name.method.js#81B4FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#81B4FF
entity.other.attribute-name#D29DF5
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFDC4Fitalic
entity.other.attribute-name.class#FFDC4F
source.sass keyword.control#81B4FF
markup.inserted#FFE68C
markup.deleted#FF3737
markup.changed#D29DF5
string.regexp#5D7BB4
constant.character.escape#5D7BB4
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#778DA9italic
source.js constant.other.object.key.js string.unquoted.label.js#7587B8italic
source.json meta.structure.dictionary.json support.type.property-name.json#FF5B5B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF8080
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#FF5B5B
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#FF8080
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#FF5B5B
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#FF8080
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#FF5B5B
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#FF8080
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#FF5B5B
text.html.markdown, punctuation.definition.list_item.markdown#E0E1DD
text.html.markdown markup.inline.raw.markdown#D29DF5
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#939393
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#51D451
markup.italic#FF3737italic
markup.bold, markup.bold string#FF7171bold
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#FF7171bold
markup.underline#FF6E6Eunderline
markup.quote punctuation.definition.blockquote.markdown#939393
markup.quoteitalic
string.other.link.title.markdown#81B4FF
string.other.link.description.title.markdown#D29DF5
constant.other.reference.link.markdown#FFDC4F
markup.raw.block#D29DF5
markup.raw.block.fenced.markdown#939393
punctuation.definition.fenced.markdown#818181
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#8a8a8a
variable.language.fenced.markdown#8a8a8a
meta.separator#939393bold
markup.table#afafaf
meta.tag.metadata.doctype.html entity.name.tag, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#A4A89D
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E0E1DD
entity.name.tag#42C47E
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#489C9F
constant.character.entity, punctuation.definition.entity#FF5B5B
string#E0E1DDitalic
meta.selector, meta.selector entity, meta.selector entity punctuation, source.css entity.name.tag#42C47E
source.css variable#A0D2B2italic
punctuation.definition.entity.css#42C47E
source.css meta.property-name, source.css support.type.property-name#CFD1CB
source.css support.type.vendored.property-name#688E8F
meta.property-value, support.constant.property-value#42C47E
source.css support.constant#688E8Fitalic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FFDC4F
source.css support.function#688E8Fitalic
keyword.other.important#42C47E
constant.other.color#688E8F
Darken World by deth - VS Code Theme