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.activeBorder#ec775c
  • activityBar.background#22272e
  • activityBar.border#444c56
  • activityBar.foreground#adbac7
  • activityBar.inactiveForeground#768390
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#cdd9e5
  • badge.background#316dca
  • badge.foreground#cdd9e5
  • breadcrumb.activeSelectionForeground#768390
  • breadcrumb.focusForeground#adbac7
  • breadcrumb.foreground#768390
  • breadcrumbPicker.background#2d333b
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#3d444d
  • button.secondaryForeground#adbac7
  • button.secondaryHoverBackground#444c56
  • checkbox.background#2d333b
  • checkbox.border#444c56
  • debugToolBar.background#2d333b
  • descriptionForeground#768390
  • diffEditor.insertedTextBackground#46954a26
  • diffEditor.removedTextBackground#e5534b26
  • dropdown.background#2d333b
  • dropdown.border#444c56
  • dropdown.foreground#adbac7
  • dropdown.listBackground#2d333b
  • editor.background#22272e
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#636e7b1a
  • editor.foreground#adbac7
  • editor.inactiveSelectionBackground#3392ff22
  • editor.lineHighlightBackground#636e7b1a
  • editor.linkedEditingBackground#3392ff22
  • editor.selectionBackground#3392ff44
  • editor.selectionHighlightBackground#17e5e633
  • editor.selectionHighlightBorder#17e5e600
  • editor.stackFrameHighlightBackground#c6902625
  • editor.wordHighlightBackground#17e5e600
  • editor.wordHighlightBorder#17e5e699
  • editor.wordHighlightStrongBackground#17e5e600
  • editor.wordHighlightStrongBorder#17e5e666
  • editorBracketMatch.background#17e5e650
  • editorBracketMatch.border#17e5e600
  • editorCursor.foreground#539bf5
  • editorGroup.border#444c56
  • editorGroupHeader.tabsBackground#1c2128
  • editorGroupHeader.tabsBorder#444c56
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorIndentGuide.activeBackground#444c56
  • editorIndentGuide.background#373e47
  • editorLineNumber.activeForeground#adbac7
  • editorLineNumber.foreground#768390
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#545d68
  • editorWidget.background#2d333b
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#adbac7
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#545d68
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#57ab5a
  • input.background#22272e
  • input.border#444c56
  • input.foreground#adbac7
  • input.placeholderForeground#545d68
  • list.activeSelectionBackground#636e7b66
  • list.activeSelectionForeground#adbac7
  • list.focusBackground#4184e426
  • list.focusForeground#adbac7
  • list.highlightForeground#539bf5
  • list.hoverBackground#636e7b1a
  • list.hoverForeground#adbac7
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#636e7b66
  • list.inactiveSelectionForeground#adbac7
  • notificationCenterHeader.background#2d333b
  • notificationCenterHeader.foreground#768390
  • notifications.background#2d333b
  • notifications.border#444c56
  • notifications.foreground#adbac7
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#1c2128
  • panel.border#444c56
  • panelInput.border#444c56
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#adbac7
  • panelTitle.inactiveForeground#768390
  • peekViewEditor.background#0d111788
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#22272e
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444c56
  • pickerGroup.foreground#768390
  • progressBar.background#316dca
  • quickInput.background#2d333b
  • quickInput.foreground#adbac7
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#484f5888
  • scrollbarSlider.background#484f5833
  • scrollbarSlider.hoverBackground#484f5844
  • settings.headerForeground#768390
  • settings.modifiedItemIndicator#e78a4e
  • sideBar.background#1c2128
  • sideBar.border#444c56
  • sideBar.foreground#adbac7
  • sideBarSectionHeader.background#1c2128
  • sideBarSectionHeader.border#444c56
  • sideBarSectionHeader.foreground#adbac7
  • sideBarTitle.foreground#adbac7
  • statusBar.background#22272e
  • statusBar.border#444c56
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#cdd9e5
  • statusBar.foreground#768390
  • statusBar.noFolderBackground#22272e
  • statusBarItem.prominentBackground#2d333b
  • tab.activeBackground#22272e
  • tab.activeBorder#22272e
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#adbac7
  • tab.border#444c56
  • tab.hoverBackground#22272e
  • tab.inactiveBackground#1c2128
  • tab.inactiveForeground#768390
  • tab.unfocusedActiveBorder#22272e
  • tab.unfocusedActiveBorderTop#444c56
  • tab.unfocusedHoverBackground#636e7b1a
  • terminal.ansiBlack#545d68
  • terminal.ansiBlue#539bf5
  • terminal.ansiBrightBlack#636e7b
  • terminal.ansiBrightBlue#6cb6ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#dcbdfb
  • terminal.ansiBrightRed#ff938a
  • terminal.ansiBrightWhite#cdd9e5
  • terminal.ansiBrightYellow#daaa3f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#57ab5a
  • terminal.ansiMagenta#b083f0
  • terminal.ansiRed#539bf5
  • terminal.ansiWhite#909dab
  • terminal.ansiYellow#c69026
  • terminal.foreground#768390
  • textBlockQuote.background#1c2128
  • textBlockQuote.border#444c56
  • textCodeBlock.background#636e7b66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.foreground#768390
  • textSeparator.foreground#373e47
  • titleBar.activeBackground#22272e
  • titleBar.activeForeground#768390
  • titleBar.border#444c56
  • titleBar.inactiveBackground#1c2128
  • titleBar.inactiveForeground#768390
  • tree.indentGuidesStroke#373e47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#aaaaaaitalic
variable, string constant.other.placeholder#D4BE98
constant.other.color#cecbcb
invalid, invalid.illegal#FF5370
keyword, storage.modifier#EA6962italic
storage.type#7DAEA3
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution#EA6962
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#ffffff
punctuation.definition.directive.cpp, keyword.control.directive.include.cpp, string.quoted.double.include.cpp#EA6962
storage.type.namespace.definition.cpp, storage.type.class.cpp, storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.protected.cpp#EA6962italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
entity.name.function, variable.function, support.function, keyword.other.special-method#A9B665
meta.function-call#7DAEA3
meta.block variable.other#f07178
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F78C6C
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#c3ae8d
string#D8A657
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#7DAEA3
support.type#7DAEA3
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#FF5370
variable.language#F78C6Citalic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#C792EA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
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#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#F78C6C
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#FF5370
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#C17E70
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#82AAFF
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#f07178
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#C792EA
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#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#EA6962
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#F78C6Cunderline
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
entity.name.section.markdown, .definition.heading.markdown#EA6962bold
entity.name.type.class.python#7DAEA3italic bold
storage.modifier.specifier.const.cpp, storage.modifier.specifier.functional.post-parameters.const.cpp, storage.modifier.specifier.functional.post-parameters.override.cpp#E78A4Eitalic
source.cpp, meta.block, variable.other, variable.other.object.access.cpp#D4BE98
meta.body.class.cpp, meta.block.class.cpp, meta.body.namespace.cpp, meta.block.namespace.cpp#7DAEA3
keyword.other.namespace.directive.cpp, storage.type.namespace.directive.cpp#EA6962italic
string.quoted.double.cpp, string.quoted.double.include.cpp, punctuation.definition.string.begin.cpp, punctuation.definition.string.end.cpp, meta.preprocessor.include.cpp#D8A657
constant.numeric.decimal.cpp#D3869B
storage.modifier.reference.cpp, keyword.operator.arithmetic.cpp, keyword.operator.assignment.cpp, keyword.operator.increment.cpp, keyword.operator.comparison.cpp, keyword.operator.bitwise.shift.cpp, entity.name.function.operator.cpp#E78A4E
punctuation.terminator.statement.cpp#ffffff
source.python#ffffff
keyword.operator.comparison.python, keyword.operator.logical.python#E78A4E
punctuation.definition.string.begin.python, punctuation.definition.string.end.python#D8A657
storage.type.class.python, meta.class.python, storage.type.function.python, storage.type.function.lambda.python, storage.type.function.async.python#EA6962italic
meta.function.decorator.python, punctuation.definition.decorator.python#E78A4Eitalic
meta.function-call.arguments.python#D4BE98
variable.other.readwrite, variable.other.property#dbd8d8
constant.other.caps.python, variable.other.constant#cecbcbbold
constant.language.python, support.type.exception.python#7DAEA3bold
meta.function-call.python, entity.name.function.member#A9B665
constant.numeric.dec.python, constant.numeric.float.python#D3869B
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#D3869Bitalic
variable.parameter#da7b5citalic
keyword.operator.unpacking.parameter.python, keyword.operator.unpacking.arguments.python, keyword.operator.assignment.python, keyword.operator.arithmetic.python#E78A4Eitalic
punctuation.section.class.begin.python, punctuation.separator.colon, punctuation.separator.parameters.python, punctuation.section.function.begin.python#ffffff
storage.type.rust, storage.modifier.mut.rust#F78C6C
keyword.other.fn.rust#EA6962
constant.numeric.math.tex#D3869B
cocktail-dark by AndreasHartl - VS Code Theme