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#292929
  • activityBar.border#292929
  • activityBar.foreground#A7BEB1
  • activityBarBadge.background#A7BEB1
  • activityBarBadge.foreground#292929
  • badge.background#292929
  • badge.foreground#A7BEB1
  • breadcrumb.activeSelectionForeground#A7BEB1
  • breadcrumb.background#292929
  • breadcrumb.focusForeground#A7BEB1
  • breadcrumb.foreground#A7BEB1
  • breadcrumbPicker.background#292929
  • button.background#8BC191
  • button.border#292929
  • button.foreground#292929
  • button.hoverBackground#8BC191DD
  • button.secondaryBackground#A7BEB1
  • button.secondaryForeground#292929
  • button.secondaryHoverBackground#A7BEB1DD
  • checkbox.border#A7BEB1
  • contrastBorder#A7BEB130
  • debugToolBar.background#292929
  • diffEditor.insertedTextBackground#A7BEB115
  • diffEditor.removedTextBackground#A7BEB130
  • dropdown.background#292929
  • dropdown.border#A7BEB160
  • dropdown.foreground#A7BEB1
  • dropdown.listBackground#292929
  • editor.background#292929
  • editor.findMatchBackground#6D857130
  • editor.findMatchBorder#6D857100
  • editor.findMatchHighlightBackground#6D857130
  • editor.findMatchHighlightBorder#6D857130
  • editor.foreground#A7BEB1
  • editor.lineHighlightBackground#A7BEB115
  • editor.selectionBackground#6D857130
  • editor.selectionHighlightBackground#6D857130
  • editor.selectionHighlightBorder#6D857130
  • editor.wordHighlightBackground#6D857130
  • editor.wordHighlightStrongBackground#6D857130
  • editor.wordHighlightStrongBorder#6D857130
  • editorBracketMatch.background#6D857130
  • editorBracketMatch.border#6D857130
  • editorCodeLens.foreground#A7BEB160
  • editorCursor.foreground#A7BEB1
  • editorError.foreground#C1918B
  • editorGroup.border#292929
  • editorGroupHeader.tabsBackground#292929
  • editorGutter.addedBackground#A7BEB160
  • editorGutter.deletedBackground#A7BEB160
  • editorGutter.modifiedBackground#A7BEB160
  • editorHoverWidget.background#292929
  • editorHoverWidget.border#A7BEB130
  • editorIndentGuide.activeBackground#A7BEB130
  • editorIndentGuide.background#A7BEB115
  • editorInfo.foreground#A7BEB160
  • editorLineNumber.activeForeground#6D8571
  • editorLineNumber.foreground#6D8571
  • editorLink.activeForeground#A7BEB1
  • editorMarkerNavigation.background#A7BEB115
  • editorOverviewRuler.border#292929
  • editorOverviewRuler.errorForeground#A7BEB130
  • editorOverviewRuler.findMatchForeground#A7BEB1
  • editorOverviewRuler.infoForeground#A7BEB130
  • editorOverviewRuler.warningForeground#A7BEB160
  • editorRuler.foreground#A7BEB115
  • editorSuggestWidget.background#292929
  • editorSuggestWidget.border#A7BEB115
  • editorSuggestWidget.foreground#A7BEB1
  • editorSuggestWidget.highlightForeground#A7BEB1
  • editorSuggestWidget.selectedBackground#A7BEB130
  • editorWarning.foreground#A7BEB1
  • editorWhitespace.foreground#A7BEB130
  • editorWidget.background#292929
  • editorWidget.border#A7BEB1
  • editorWidget.resizeBorder#A7BEB1
  • extensionButton.prominentBackground#A7BEB190
  • extensionButton.prominentHoverBackground#A7BEB1
  • focusBorder#292929
  • foreground#A7BEB1
  • gitDecoration.conflictingResourceForeground#A7BEB1
  • gitDecoration.deletedResourceForeground#A7BEB1
  • gitDecoration.ignoredResourceForeground#A7BEB1
  • gitDecoration.modifiedResourceForeground#A7BEB1
  • gitDecoration.untrackedResourceForeground#A7BEB1
  • icon.foreground#A7BEB1
  • input.background#292929
  • input.border#A7BEB190
  • input.foreground#A7BEB1
  • input.placeholderForeground#A7BEB1
  • inputOption.activeBackground#292929
  • inputOption.activeBorder#A7BEB160
  • inputValidation.errorBorder#C1918B
  • inputValidation.infoBorder#A7BEB1
  • inputValidation.warningBorder#A59F5D
  • list.activeSelectionBackground#A7BEB115
  • list.activeSelectionForeground#A7BEB1
  • list.focusBackground#292929
  • list.focusForeground#A7BEB1
  • list.focusHighlightForeground#8BC191
  • list.highlightForeground#98B077
  • list.hoverBackground#A7BEB115
  • list.hoverForeground#A7BEB1
  • list.inactiveSelectionBackground#A7BEB115
  • list.inactiveSelectionForeground#A7BEB1
  • list.warningForeground#C1918B
  • listFilterWidget.background#292929
  • listFilterWidget.noMatchesOutline#292929
  • listFilterWidget.outline#292929
  • menu.background#292929
  • menu.border#A7BEB160
  • menu.foreground#A7BEB1
  • menu.selectionBackground#292929
  • menu.selectionBorder#292929
  • menu.selectionForeground#A7BEB1
  • menu.separatorBackground#A7BEB1
  • menubar.selectionBackground#292929
  • menubar.selectionBorder#A7BEB160
  • menubar.selectionForeground#A7BEB1
  • minimap.background#292929
  • minimap.errorHighlight#C1918B
  • minimapGutter.addedBackground#A7BEB1
  • minimapGutter.deletedBackground#A7BEB1
  • minimapGutter.modifiedBackground#A7BEB1
  • minimapSlider.activeBackground#A7BEB190
  • minimapSlider.background#A7BEB190
  • minimapSlider.hoverBackground#A7BEB190
  • notificationCenter.border#A7BEB130
  • notificationCenterHeader.background#292929
  • notificationCenterHeader.foreground#A7BEB1
  • notificationLink.foreground#A7BEB1
  • notifications.background#292929
  • notifications.border#A7BEB130
  • notifications.foreground#A7BEB1
  • notificationsErrorIcon.foreground#A7BEB1
  • notificationsInfoIcon.foreground#A7BEB1
  • notificationsWarningIcon.foreground#A7BEB1
  • notificationToast.border#A7BEB130
  • panel.background#292929
  • panel.border#A7BEB130
  • panelTitle.activeBorder#A7BEB1
  • panelTitle.activeForeground#A7BEB1
  • panelTitle.inactiveForeground#A7BEB1
  • peekView.border#A7BEB130
  • peekViewEditor.background#292929
  • peekViewEditor.matchHighlightBackground#A7BEB160
  • peekViewEditorGutter.background#A7BEB115
  • peekViewResult.background#A7BEB115
  • peekViewResult.fileForeground#A7BEB1
  • peekViewResult.lineForeground#A7BEB1
  • peekViewResult.matchHighlightBackground#A7BEB160
  • peekViewResult.selectionBackground#A7BEB160
  • peekViewResult.selectionForeground#A7BEB1
  • peekViewTitle.background#A7BEB115
  • peekViewTitleDescription.foreground#A7BEB160
  • peekViewTitleLabel.foreground#A7BEB1
  • pickerGroup.foreground#A7BEB1
  • progressBar.background#A7BEB1
  • quickInputList.focusBackground#A7BEB115
  • quickInputList.focusForeground#A7BEB1
  • quickInputTitle.background#292929
  • scrollbar.shadow#292929
  • scrollbarSlider.activeBackground#A7BEB130
  • scrollbarSlider.background#A7BEB130
  • scrollbarSlider.hoverBackground#A7BEB130
  • selection.background#A7BEB1
  • settings.checkboxBackground#292929
  • settings.checkboxForeground#A7BEB1
  • settings.dropdownBackground#292929
  • settings.dropdownForeground#A7BEB1
  • settings.headerForeground#A7BEB1
  • settings.modifiedItemIndicator#A7BEB1
  • settings.numberInputBackground#292929
  • settings.numberInputForeground#A7BEB1
  • settings.textInputBackground#292929
  • settings.textInputForeground#A7BEB1
  • sideBar.background#292929
  • sideBar.border#A7BEB130
  • sideBar.foreground#A7BEB190
  • sideBarSectionHeader.background#292929
  • sideBarSectionHeader.border#A7BEB130
  • sideBarSectionHeader.foreground#A7BEB190
  • sideBarTitle.foreground#A7BEB1
  • statusBar.background#292929
  • statusBar.border#A7BEB130
  • statusBar.debuggingBackground#A7BEB1
  • statusBar.debuggingForeground#A7BEB1
  • statusBar.foreground#A7BEB1
  • statusBar.noFolderBackground#292929
  • statusBarItem.hoverBackground#A7BEB130
  • statusBarItem.remoteBackground#292929
  • statusBarItem.remoteForeground#A7BEB1
  • tab.activeBackground#292929
  • tab.activeBorder#A7BEB1
  • tab.activeForeground#A7BEB1
  • tab.activeModifiedBorder#A7BEB1
  • tab.border#292929
  • tab.inactiveBackground#29292920
  • tab.inactiveForeground#A7BEB190
  • tab.unfocusedActiveBackground#A7BEB130
  • tab.unfocusedActiveBorder#292929
  • tab.unfocusedActiveForeground#A7BEB1
  • tab.unfocusedInactiveBackground#A7BEB115
  • tab.unfocusedInactiveForeground#A7BEB190
  • terminal.ansiBlack#292929
  • terminal.ansiBlue#A7BEB1
  • terminal.ansiBrightBlack#6D8571
  • terminal.ansiBrightBlue#A7BEB1
  • terminal.ansiBrightCyan#A59F5D
  • terminal.ansiBrightGreen#8BC191
  • terminal.ansiBrightMagenta#C18BBB
  • terminal.ansiBrightRed#C1918B
  • terminal.ansiBrightWhite#A7BEB1
  • terminal.ansiBrightYellow#A59F5D
  • terminal.ansiCyan#A59F5D
  • terminal.ansiGreen#8BC191
  • terminal.ansiMagenta#C18BBB
  • terminal.ansiRed#C1918B
  • terminal.ansiWhite#A7BEB1
  • terminal.ansiYellow#A59F5D
  • terminalCursor.background#292929
  • terminalCursor.foreground#A7BEB1
  • textLink.activeForeground#A59F5D
  • textLink.foreground#A59F5D
  • titleBar.activeBackground#292929
  • titleBar.activeForeground#A7BEB1
  • titleBar.border#A7BEB160
  • titleBar.inactiveBackground#292929
  • titleBar.inactiveForeground#A7BEB1
  • tree.indentGuidesStroke#A7BEB160
  • tree.tableColumnsBorder#A7BEB160
  • walkThrough.embeddedEditorBackground#292929
  • welcomePage.background#292929
  • welcomePage.buttonBackground#8BC191
  • welcomePage.buttonHoverBackground#A7BEB1
  • welcomePage.progress.background#292929
  • welcomePage.progress.foreground#A7BEB1
  • welcomePage.tileBackground#292929
  • welcomePage.tileHoverBackground#292929
  • widget.shadow#292929

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6D8571B3italic
constant.other.color#777774
invalid, invalid.illegal#C1918B
keyword, keyword.control, storage.type, storage.modifier#6D8571
keyword.other.import.dart, constant.other.color, punctuation, meta.embedded.block.vue-html, 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, meta.brace.curly.js, meta.brace.curly.litobj.js, meta.brace.round, meta.brace.square, meta.delimiter.comma.js, constant.character.format.placeholder.other.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.tag, keyword.operator.assignment, punctuation.section.embedded.begin, punctuation.section.embedded.end#6D8571B3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.function, support.function, meta.function-call, meta.method-call.groovy, variable.function, keyword.other.special-method, entity.name.type.class.python, entity.other.inherited-class.ts#8BC191
meta.object-literal.key, string.unquoted.js#98B077
source.python, support.type.exception.python, source.go, source.swift, source.groovy#98B077
support.other.variable, meta.property-value.css, string.other.link, meta.import, string.quoted.double, string.quoted.single, string.quoted.module.js, string.template.js, string.template.ts, string.template.tsx#A59F5D
constant.character, constant.escape, constant.language, constant.numeric, constant.other.caps.python, keyword.other, keyword.other.unit, meta.block variable.other, meta.var.expr, meta.function-call.arguments.python, meta.object.member, meta.method-call.with-arguments, meta.array.literal, meta.embedded.expression, meta.export.default, source, string constant.other.placeholder, variable.parameter, variable.other.class, variable.other.object, variable.other.constant, variable.object.property, meta.tag, text.html.derivative#A59F5D
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, support.type.primitive, support.type.builtin#A7BEB1
entity.name, meta.class.ts, meta.class.js, support.type, support.class, support.constant, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8BC191
entity.name.type.ts, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.type.module.ts, entity.other.inherited-class.tsx, entity.other.inherited-class.python, support.type, support.type.python, support.type.primitive, support.type.builtin, source.dart#98B077
constant.character.format.placeholder.other.python, entity.name.module.js, entity.other.block-attribute-name.vue, meta.property.object, support.variable.property.ts, variable.import.parameter.js, variable.other.constant.property, variable.other.object.property.ts, variable.other.object.property.tsx, variable.other.property#98B077
variable.language#8BC191italic
entity.other.attribute-name#98B077
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8BC191italic
entity.other.attribute-name.class, entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css, keyword.control.at-rule.css, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.header.css, keyword.control.at-rule.media.css, keyword.control.at-rule.font-face.css, punctuation.definition.entity.css, punctuation.definition.keyword.css#8BC191
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#98B077
constant.other.color.rgb-value.hex.css, meta.at-rule.charset.css, meta.at-rule.font-face.css, meta.at-rule.media.header.css, meta.property-value.css, punctuation.definition.constant.css, punctuation.definition.variable.less, variable.other.less, variable.scss#A59F5D
markup.inserted#777777
markup.deleted#C1918B
markup.changed#6D8571
string.regexp#A59F5D
constant.character.escape#6D8571
*url*, *link*, *uri*#A59F5Dunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.decorator.ts, punctuation.decorator.tsx, meta.decorator.ts, meta.decorator.tsx, punctuation.definition.decorator.python#8BC191italic
source.js constant.other.object.key.js string.unquoted.label.js#C1918Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#8BC191
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#96C79C
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#A2CDA7
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#B9D9BD
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#C5E0C8
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#D0E6D3
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#DCECDE
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#6D8571
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#E7f2E9
text.html.markdown, punctuation.definition.list_item.markdown#A7BEB1
text.html.markdown markup.inline.raw.markdown#A7BEB1
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8BC191
markup.italic#A59F5Ditalic
markup.bold, markup.bold string#A59F5Dbold
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#A59F5Dbold
markup.underline#A59F5Dunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#A59F5D
string.other.link.description.title.markdown#6D8571
constant.other.reference.link.markdown#8BC191
markup.raw.block#6D8571
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#6D8571
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#6D8571
Conifer Theme by imalbert - VS Code Theme