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#F0F0F0
  • activityBar.border#008b8b
  • activityBar.foreground#403f53
  • activityBarBadge.background#db0a5b
  • activityBarBadge.foreground#FBFBFB
  • badge.background#1C2833
  • badge.foreground#FBFBFB
  • button.background#2574a9
  • button.foreground#FBFBFB
  • button.hoverBackground#2574a9
  • debugToolBar.background#FBFBFB
  • descriptionForeground#1C2833
  • diffEditor.insertedTextBackground#1C28332d
  • diffEditor.removedTextBackground#e3372d2d
  • dropdown.background#182330
  • dropdown.border#FBFBFB
  • dropdown.foreground#1C2833
  • dropdown.listBackground#FBFBFB
  • editor.background#FBFBFB
  • editor.findMatchBackground#39515D
  • editor.findMatchBorder#39515D
  • editor.findMatchHighlightBackground#243E4C
  • editor.foreground#1C2833
  • editor.hoverHighlightBackground#182330
  • editor.lineHighlightBackground#F0F0F0
  • editor.selectionBackground#243E4C
  • editor.selectionForeground#FBFBFB
  • editor.selectionHighlightBackground#003333
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editorBracketMatch.background#FBFBFB
  • editorBracketMatch.border#FBFBFB
  • editorCursor.background#FBFBFB
  • editorCursor.foreground#2574a9
  • editorError.foreground#2574a9
  • editorGroup.border#F0F0F0
  • editorGroup.dropBackground#182330
  • editorGroup.emptyBackground#FBFBFB
  • editorGroupHeader.noTabsBackground#F0F0F0
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGroupHeader.tabsBorder#F0F0F0
  • editorGutter.addedBackground#1C2833
  • editorGutter.deletedBackground#2574a9
  • editorGutter.modifiedBackground#FBFBFB
  • editorIndentGuide.background#FBFBFB
  • editorLineNumber.activeForeground#FF3366
  • editorLineNumber.foreground#1C2833
  • editorMarkerNavigation.background#FBFBFB
  • editorOverviewRuler.findMatchForeground#2574a9
  • editorOverviewRuler.warningForeground#2574a9
  • editorSuggestWidget.background#182330
  • editorSuggestWidget.border#333537
  • editorSuggestWidget.foreground#1C2833
  • editorSuggestWidget.highlightForeground#2574a9
  • editorSuggestWidget.selectedBackground#333537
  • editorUnnecessaryCode.opacity#00000079
  • editorWarning.foreground#2574a9
  • editorWidget.background#182330
  • editorWidget.border#454545
  • editorWidget.foreground#1C2833
  • errorForeground#2574a9
  • extensionButton.prominentBackground#FF3366
  • extensionButton.prominentForeground#FBFBFB
  • extensionButton.prominentHoverBackground#FF3366
  • focusBorder#2574a9
  • foreground#1C2833
  • gitDecoration.conflictingResourceForeground#F77D59cc
  • gitDecoration.deletedResourceForeground#db0a5b
  • gitDecoration.ignoredResourceForeground#838996
  • gitDecoration.modifiedResourceForeground#fefe22
  • gitDecoration.untrackedResourceForeground#CCFF33
  • input.background#FBFBFB
  • input.border#2574a9
  • input.foreground#1C2833
  • input.placeholderForeground#1C2833
  • inputOption.activeBorder#1C2833
  • inputValidation.errorBackground#FBFBFB
  • inputValidation.errorBorder#2574a9
  • inputValidation.infoBackground#FBFBFB
  • inputValidation.infoBorder#2574a9
  • inputValidation.warningBackground#FBFBFB
  • inputValidation.warningBorder#2574a9
  • list.activeSelectionBackground#008b8b
  • list.activeSelectionForeground#1C2833
  • list.errorForeground#2574a9
  • list.focusBackground#FBFBFB
  • list.focusForeground#1C2833
  • list.highlightForeground#2574a9
  • list.hoverBackground#008b8b
  • list.hoverForeground#FFFF00
  • list.inactiveFocusBackground#FBFBFB
  • list.inactiveSelectionBackground#FBFBFB
  • list.inactiveSelectionForeground#1C2833
  • list.invalidItemForeground#2574a9
  • list.warningForeground#db0a5b
  • minimap.errorHighlight#2574a9
  • minimap.findMatchHighlight#db0a5b
  • minimap.selectionHighlight#db0a5b
  • minimap.warningHighlight#2574a9
  • minimapGutter.addedBackground#1C2833
  • minimapGutter.deletedBackground#182330
  • minimapGutter.modifiedBackground#FBFBFB
  • notificationCenter.border#182330
  • notificationCenterHeader.background#FBFBFB
  • notificationCenterHeader.foreground#1C2833
  • notificationLink.foreground#182330
  • notifications.background#FBFBFB
  • notifications.border#FBFBFB
  • notifications.foreground#1C2833
  • notificationsWarningIcon.foreground#2574a9
  • notificationToast.border#182330
  • panel.background#FBFBFB
  • panel.border#CFB53B
  • panelTitle.activeBorder#db0a5b
  • panelTitle.activeForeground#1C2833
  • panelTitle.inactiveForeground#1C2833
  • peekView.border#182330
  • peekViewEditor.background#FBFBFB
  • pickerGroup.border#182330
  • pickerGroup.foreground#1C2833
  • problemsWarningIcon.foreground#2574a9
  • progressBar.background#1C2833
  • quickInput.background#FBFBFB
  • quickInput.foreground#1C2833
  • quickInputTitle.background#1C2833
  • scrollbar.shadow#FBFBFB
  • scrollbarSlider.activeBackground#1C2833
  • scrollbarSlider.background#182330
  • scrollbarSlider.hoverBackground#1C2833
  • selection.background#008b8b
  • settings.modifiedItemIndicator#2574a9
  • sideBar.background#F0F0F0
  • sideBar.border#F0F0F0
  • sideBar.foreground#403f53
  • sideBarTitle.foreground#403f53
  • statusBar.background#008b8b
  • statusBar.border#008b8b
  • statusBar.debuggingBackground#FBFBFB
  • statusBar.debuggingBorder#182330
  • statusBar.debuggingForeground#1C2833
  • statusBar.foreground#FFFF00
  • statusBar.noFolderBackground#FBFBFB
  • statusBarItem.hoverBackground#FBFBFB
  • tab.activeBackground#F6F6F6
  • tab.activeBorder#008b8b
  • tab.activeForeground#403f53
  • tab.border#F0F0F0
  • tab.hoverBackground#FBFBFB
  • tab.hoverBorder#db0a5b
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#403f53
  • tab.unfocusedHoverBackground#FBFBFB
  • terminal.ansiBlack#FBFBFB
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#db0a5b
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.background#FBFBFB
  • terminal.border#182330
  • terminal.foreground#1C2833
  • terminal.selectionBackground#1C283340
  • textBlockQuote.background#FBFBFB
  • textBlockQuote.border#182330
  • textCodeBlock.background#FBFBFB
  • textLink.activeForeground#2574a9
  • textLink.foreground#1C2833
  • textPreformat.foreground#1C2833
  • textSeparator.foreground#1C2833
  • titleBar.activeBackground#FBFBFB
  • titleBar.activeForeground#1C2833
  • titleBar.border#182330
  • titleBar.inactiveBackground#182330
  • titleBar.inactiveForeground#1C2833
  • walkThrough.embeddedEditorBackground#FBFBFB
  • widget.shadow#FBFBFB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#708090italic
support.function.powershellr#2574a9—
variable, string constant.other.placeholder#fefe22—
source.shell#2574a9—
constant.other.color#db0a5b—
invalid, invalid.illegal#2574a9—
storage.type, storage.type.class, storage.modifier#CCFF33—
keyword#2574a9—
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#2574a9—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#1C2833—
punctuation.definition, punctuation.curlybrace.close, punctuation.curlybrace.open#2574a9—
punctuation.definition.parameters, meta.brace.round#db0a5b—
punctuation.definition.string#2574a9—
support.function.builtin.python, meta.function-call.generic.python#fefe22—
meta.block variable.other#fefe22—
support.other.variable, string.other.link#fefe22—
string.quoted, string.template#db0a5b—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fefe22—
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#1C2833—
entity.name, support.type, support.class, support.constant.math, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#db0a5b—
support.type#1C2833—
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#1C2833—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml#9d8319—
entity.name.tag.yaml, string.unquoted.block.yaml#22313f—
string.unquoted.block.yaml, constant.language.boolean.yaml#db0a5b—
entity.name.module.js, entity.name.type, entity.name.type.class, variable.import.parameter.js, variable.other.class.js#fefe22—
entity.name.type.module#db0a5b—
variable.language#fefe22italic
entity.name.method.js#1C2833italic
meta.class-method.js entity.name.function.js, variable.function.constructor#fefe22—
entity.other.attribute-name#db0a5b—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#db0a5bitalic
entity.other.attribute-name.class#db0a5b—
source.sass keyword.control#db0a5b—
markup.inserted#2574a9—
markup.deleted#2574a9—
markup.changed#2574a9—
string.regexp#2574a9—
constant.character.escape#1C2833—
*url*, *link*, *uri*#db0a5bunderline
entity.name.tag, support.class.component#1C2833italic
source.js constant.other.object.key.js string.unquoted.label.js#1C2833italic
source.json meta.structure.dictionary.json support.type.property-name.json#1C2833—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1C2833—
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#1C2833—
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#1C2833—
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#1C2833—
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#1C2833—
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#1C2833—
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#1C2833—
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#1C2833—
text.html.markdown, punctuation.definition.list_item.markdown#1C2833—
text.html.markdown markup.inline.raw.markdown#1C2833—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#1C2833—
text.html.markdown meta.dummy.line-break#1C2833—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#1C2833—
markup.italic#1C2833italic
markup.bold, markup.bold string#1C2833bold
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#1C2833bold
markup.underline#1C2833underline
markup.strike#1C2833underline
markup.quote punctuation.definition.blockquote.markdown#1C2833—
markup.quote#1C2833italic
string.other.link.title.markdown#1C2833—
string.other.link.description.title.markdown#1C2833—
constant.other.reference.link.markdown#1C2833—
markup.raw.block#1C2833—
markup.raw.block.fenced.markdown#1C2833—
punctuation.definition.fenced.markdown#1C2833—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fefe22—
variable.language.fenced.markdown#fefe22—
meta.separator#1C2833bold
markup.table#1C2833—
token.info-token#2574a9—
token.warn-token#2574a9—
token.error-token#2574a9—
token.debug-token#2574a9—