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