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.activeBackground#21102870
  • activityBar.activeBorder#BBA477
  • activityBar.background#161019
  • activityBar.foreground#D5AACA
  • activityBar.inactiveForeground#6D6B6E
  • activityBarBadge.background#B288C3
  • activityBarBadge.foreground#220C1D
  • activityBarTop.foreground#D5AACA
  • badge.background#B288C3
  • badge.foreground#220C1D
  • breadcrumb.activeForeground#D5AACA
  • breadcrumb.activeSelectionForeground#D5AACA
  • breadcrumb.background#161019
  • breadcrumb.focusForeground#D5AACA
  • breadcrumb.foreground#6D6B6E
  • breadcrumbPicker.background#161019
  • button.background#B288C3db
  • button.foreground#220C1D
  • button.hoverBackground#B288C3
  • button.secondaryBackground#BBA477db
  • button.secondaryForeground#220C1D
  • button.secondaryHoverBackground#BBA477
  • checkbox.background#211C12
  • checkbox.foreground#D5AACA
  • debugToolBar.background#7CA6D0
  • debugToolBar.foreground#220C1D
  • descriptionForeground#CCC0A8
  • diffEditor.diagonalFill#7CA6D0
  • diffEditor.insertedLineBackground#7CA6D040
  • diffEditor.insertedTextBackground#7CA6D050
  • diffEditor.insertedTextBorder#7CA6D0
  • diffEditor.removedLineBackground#CB808040
  • diffEditor.removedTextBackground#CB808050
  • diffEditor.removedTextBorder#CB8080
  • diffEditorGutter.insertedLineBackground#7CA6D0
  • diffEditorGutter.removedLineBackground#CB8080
  • disabledForeground#6D6B6E
  • dropdown.background#110C13
  • dropdown.border#381A31
  • dropdown.foreground#D5AACA
  • editor.background#211C12
  • editor.findMatchBackground#4E265F70
  • editor.findMatchForeground#D5AACA
  • editor.findMatchHighlightBackground#21102870
  • editor.findMatchHighlightForeground#D5AACA
  • editor.findRangeHighlightBackground#4B3C2070
  • editor.foldBackground#21102870
  • editor.foldPlaceholderForeground#D5AACA
  • editor.foreground#D5AACA
  • editor.hoverHighlightBackground#21102870
  • editor.inactiveSelectionBackground#4B3C2070
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CCC0A8
  • editor.rangeHighlightBackground#21102870
  • editor.selectionBackground#4B3C2070
  • editor.selectionForeground#D5AACA
  • editor.selectionHighlightBackground#4B3C2070
  • editor.snippetFinalTabstopHighlightBackground#21102870
  • editor.snippetTabstopHighlightBackground#21102870
  • editor.symbolHighlightBackground#21102870
  • editor.wordHighlightBackground#21102870
  • editor.wordHighlightStrongBackground#21102850
  • editor.wordHighlightTextBackground#21102870
  • editorCodeLens.foreground#6D6B6E
  • editorCursor.background#21102870
  • editorCursor.foreground#BBA477
  • editorError.foreground#CB8080
  • editorGroup.border#381A31
  • editorGroup.dropBackground#110C13
  • editorGroup.emptyBackground#211C12
  • editorGroupHeader.border#381A31
  • editorGroupHeader.tabsBackground#211C12
  • editorGutter.addedBackground#28AB28
  • editorGutter.background#211C12
  • editorGutter.commentRangeForeground#6D6B6E
  • editorGutter.deletedBackground#CB8080
  • editorGutter.modifiedBackground#7CA6D0
  • editorHint.foreground#28AB28
  • editorHoverWidget.background#211C12
  • editorHoverWidget.border#381A31
  • editorHoverWidget.foreground#D5AACA
  • editorHoverWidget.highlightForeground#D5AACA
  • editorHoverWidget.statusBarBackground#211C12
  • editorIndentGuide.activeBackground1#BBA477
  • editorIndentGuide.background1#21102870
  • editorInfo.foreground#7CA6D0
  • editorLineNumber.activeForeground#BBA477
  • editorLineNumber.dimmedForeground#6D6B6E90
  • editorLineNumber.foreground#6D6B6E
  • editorLink.activeForeground#7CA6D0
  • editorMarkerNavigation.background#161019
  • editorMarkerNavigationError.background#161019
  • editorMarkerNavigationWarning.background#161019
  • editorMultiCursor.primary.background#21102870
  • editorMultiCursor.primary.foreground#BBA477
  • editorMultiCursor.secondary.background#21102870
  • editorMultiCursor.secondary.foreground#D5AACA
  • editorOverviewRuler.addedForeground#28AB28
  • editorOverviewRuler.border#381A31
  • editorOverviewRuler.commentForeground#6D6B6E
  • editorOverviewRuler.commonContentForeground#D5AACA
  • editorOverviewRuler.currentContentForeground#7CA6D0
  • editorOverviewRuler.deletedForeground#CB8080
  • editorOverviewRuler.errorForeground#CB8080
  • editorOverviewRuler.findMatchForeground#D5AACA
  • editorOverviewRuler.incomingContentForeground#28AB28
  • editorOverviewRuler.infoForeground#7CA6D0
  • editorOverviewRuler.modifiedForeground#7CA6D0
  • editorOverviewRuler.rangeHighlightForeground#21102870
  • editorOverviewRuler.selectionHighlightForeground#4B3C2070
  • editorOverviewRuler.warningForeground#D0A67B
  • editorOverviewRuler.wordHighlightForeground#21102870
  • editorOverviewRuler.wordHighlightStrongForeground#21102870
  • editorRuler.foreground#21102870
  • editorSuggestWidget.background#211C12
  • editorSuggestWidget.border#381A31
  • editorSuggestWidget.focusHighlightForeground#D5AACA
  • editorSuggestWidget.foreground#6D6B6E
  • editorSuggestWidget.highlightForeground#D5AACA
  • editorSuggestWidget.selectedBackground#B288C380
  • editorSuggestWidget.selectedForeground#D5AACA
  • editorUnicodeHighlight.background#21102870
  • editorWarning.foreground#D0A67B
  • editorWhitespace.foreground#21102870
  • editorWidget.background#211C12
  • editorWidget.border#381A31
  • editorWidget.foreground#D5AACA
  • errorForeground#CB8080
  • extensionButton.prominentBackground#B288C3aa
  • extensionButton.prominentForeground#220C1D
  • extensionButton.prominentHoverBackground#B288C3
  • focusBorder#381A31
  • foreground#D5AACA
  • gitDecoration.addedResourceForeground#28AB28
  • gitDecoration.conflictingResourceForeground#D0A67B
  • gitDecoration.deletedResourceForeground#CB8080
  • gitDecoration.ignoredResourceForeground#6D6B6E
  • gitDecoration.modifiedResourceForeground#7CA6D0
  • gitDecoration.renamedResourceForeground#BBA477
  • gitDecoration.untrackedResourceForeground#CCC0A8
  • input.background#211C12
  • input.border#6D6B6E
  • input.foreground#D5AACA
  • input.placeholderForeground#6D6B6E
  • inputOption.activeBorder#BBA477
  • inputValidation.errorBorder#CB8080
  • inputValidation.infoBorder#7CA6D0
  • inputValidation.warningBorder#D0A67B
  • list.activeSelectionBackground#B288C370
  • list.activeSelectionForeground#D5AACA
  • list.dropBackground#110C13
  • list.dropBetweenBackground#381A31
  • list.errorForeground#CB8080
  • list.focusBackground#B288C350
  • list.focusForeground#D5AACA
  • list.highlightForeground#BBA477
  • list.hoverBackground#B288C320
  • list.hoverForeground#D5AACA
  • list.inactiveFocusBackground#161019
  • list.inactiveSelectionBackground#B288C360
  • list.inactiveSelectionForeground#CCC0A8
  • list.warningForeground#D0A67B
  • listFilterWidget.background#110C13
  • listFilterWidget.noMatchesOutline#CB8080
  • listFilterWidget.outline#381A31
  • merge.border#381A31
  • merge.currentContentBackground#7CA6D020
  • merge.currentHeaderBackground#7CA6D040
  • merge.incomingContentBackground#28AB2820
  • merge.incomingHeaderBackground#28AB2840
  • mergeEditor.change.background#D0A67B
  • notificationLink.foreground#7CA6D0
  • notifications.background#161019
  • notifications.border#381A31
  • notifications.foreground#D5AACA
  • notificationsErrorIcon.foreground#CB8080
  • notificationsInfoIcon.foreground#7CA6D0
  • notificationsWarningIcon.foreground#D0A67B
  • panel.background#161019
  • panel.border#BBA477
  • panelInput.border#6D6B6E
  • panelTitle.activeBorder#BBA477
  • panelTitle.activeForeground#D5AACA
  • panelTitle.inactiveForeground#6D6B6E
  • peekView.border#B288C3
  • peekViewEditor.background#211C12
  • peekViewEditor.matchHighlightBackground#4E265F70
  • peekViewResult.background#211C12
  • peekViewResult.fileForeground#D5AACA
  • peekViewResult.lineForeground#D5AACA
  • peekViewResult.matchHighlightBackground#21102870
  • peekViewResult.selectionBackground#161019
  • peekViewResult.selectionForeground#D5AACA
  • peekViewTitle.background#211C12
  • peekViewTitleDescription.foreground#CCC0A8
  • peekViewTitleLabel.foreground#D5AACA
  • pickerGroup.border#B288C3
  • pickerGroup.foreground#D7BAE4
  • progressBar.background#BBA477
  • selection.background#B288C350
  • settings.checkboxBackground#211C12
  • settings.checkboxBorder#381A31
  • settings.checkboxForeground#D5AACA
  • settings.dropdownBackground#211C12
  • settings.dropdownBorder#381A31
  • settings.dropdownForeground#D5AACA
  • settings.focusedRowBackground#21102870
  • settings.focusedRowBorder#6D6B6E
  • settings.headerBorder#381A31
  • settings.headerForeground#D5AACA
  • settings.inactiveSelectedItemBorder#6D6B6E
  • settings.modifiedItemIndicator#D0A67B
  • settings.numberInputBackground#211C12
  • settings.numberInputBorder#6D6B6E
  • settings.numberInputForeground#D5AACA
  • settings.rowHoverBackground#21102870
  • settings.settingsHeaderHoverForeground#D5AACA
  • settings.textInputBackground#211C12
  • settings.textInputBorder#6D6B6E
  • settings.textInputForeground#D5AACA
  • sideBar.background#211C12
  • sideBarActivityBarTop.border#381A31
  • sideBarSectionHeader.background#161019
  • sideBarSectionHeader.border#381A31
  • sideBarStickyScroll.background#211C12
  • sideBarStickyScroll.border#381A31
  • sideBarStickyScroll.shadow#381A31
  • sideBarTitle.background#211C12
  • sideBarTitle.foreground#D5AACA
  • statusBar.background#B288C3
  • statusBar.debuggingBackground#D0A67B
  • statusBar.debuggingForeground#220C1D
  • statusBar.foreground#220C1D
  • statusBar.noFolderBackground#CCC0A8
  • statusBar.noFolderForeground#220C1D
  • statusBarItem.activeBackground#B288C3aa
  • statusBarItem.errorBackground#CB8080
  • statusBarItem.errorForeground#220C1D
  • statusBarItem.errorHoverBackground#CB8080aa
  • statusBarItem.hoverBackground#B288C3aa
  • statusBarItem.prominentBackground#B288C3aa
  • statusBarItem.prominentForeground#220C1D
  • statusBarItem.prominentHoverBackground#B288C3aa
  • statusBarItem.prominentHoverForeground#220C1D
  • statusBarItem.remoteBackground#BBA477
  • statusBarItem.remoteForeground#220C1D
  • statusBarItem.remoteHoverBackground#BBA477aa
  • statusBarItem.warningBackground#D0A67B
  • statusBarItem.warningForeground#220C1D
  • statusBarItem.warningHoverBackground#D0A67Baa
  • tab.activeBackground#161019
  • tab.activeBorderTop#BBA477
  • tab.activeForeground#D5AACA
  • tab.border#381A31
  • tab.hoverBackground#16101980
  • tab.hoverForeground#D5AACA
  • tab.inactiveBackground#211C12
  • tab.inactiveForeground#6D6B6E
  • tab.selectedBackground#21102870
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8482C6
  • terminal.ansiBrightBlack#464646
  • terminal.ansiBrightBlue#C1BFEB
  • terminal.ansiBrightCyan#68DFF2
  • terminal.ansiBrightGreen#76FF80
  • terminal.ansiBrightMagenta#E988E2
  • terminal.ansiBrightRed#EE8E83
  • terminal.ansiBrightWhite#FBFBF9
  • terminal.ansiBrightYellow#FBFCAB
  • terminal.ansiCyan#31A0B2
  • terminal.ansiGreen#31CF3D
  • terminal.ansiMagenta#BE68B8
  • terminal.ansiRed#C7736A
  • terminal.ansiWhite#FEFEFE
  • terminal.ansiYellow#D1D35E
  • terminal.background#211C12
  • terminal.border#381A31
  • terminal.foreground#D5AACA
  • terminal.inactiveSelectionBackground#4B3C2070
  • terminal.selectionBackground#4B3C2070
  • textBlockQuote.background#110C13
  • textBlockQuote.border#381A31
  • textCodeBlock.background#110C13
  • textLink.activeForeground#7CA6D0
  • textLink.foreground#B288C3
  • textPreformat.background#110C13
  • textPreformat.foreground#D5AACA
  • textSeparator.foreground#D5AACA
  • titleBar.activeBackground#161019
  • titleBar.activeForeground#D5AACA
  • titleBar.inactiveBackground#161019
  • titleBar.inactiveForeground#6D6B6E
  • widget.border#381A31

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D5AACA
meta.diff, meta.diff.header#6D6B6E
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E6D3D1
emphasisitalic
strongbold
invalid#CB8080strikethrough
invalid.deprecated#D5AACAunderline italic
header#E6D3D1
source.ini, source.ignore, source#CCC0A8
markup.inserted#E6D3D1
markup.deleted#CB8080
markup.changed#7CA6D0
markup.error#CB8080
markup.underlineunderline
markup.bold#D0A67Bbold
markup.heading#BBA477bold
markup.italic#CCC0A8italic
markup.inline.raw, markup.raw.restructuredtext#BBA477
markup.underline.link, markup.underline.link.image, markup.quote#7CA6D0
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#B288C3
meta.separator.markdown#BBA477
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ECE0CB
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D0A67B
entity.name.class, entity.name.type.class, entity.other.inherited-class#B288C3
entity.name.tag, entity.other.attribute-name.parent-selector#E8D7EF
entity.other.attribute-name#B288C3
entity.name.function, meta.function-call, meta.method-call, meta.method#BBA477
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E0C8EA
support#C9A7D7
entity.name, variable.other.key#BBA477
entity.name.type#E5CAC7
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DBBFA9
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#DDBFBB
entity.other.attribute-name.class.css#BBA477
storage.class, storage.type#B288C3
storage.modifier#EAC7E2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6D6B6E
constant#E6D3D1
constant.other.color#DDD1BB
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E0CFAE
constant.other.date, constant.other.timestamp#E3BFBA
keyword.operator#EDDEE9
keyword.other.unit#CAADD6
keyword.control, keyword.other.template, keyword.other.substitution#C79F99
keyword.other.this#E6D3D1
keyword.control.import, keyword.control.from#D8C3B5
keyword.control.new, keyword.operator.new, keyword.other.important.css#B288C3
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#DBCBBD
meta.attribute-selector.scss#E0D2B8
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#E8D7EF
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E2B5E3
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#B288C3
support.constant.property-value.css, constant.numeric.css#CCC0A8
keyword.control.at-rule.apply.tailwind#D8C3B5
keyword.control.at-rule.tailwind.tailwind#C79F99
keyword.control.at-rule.layer.tailwind#DBCBBD
meta.selector#E0D2B8
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#EFEAE1
punctuation.definition.constant.restructuredtext#E6D3D1
string.quoted.docstring.multi#BBA477
punctuation.definition.keyword.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#EFEAE1
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E2B5E3
entity.other.attribute-name punctuation, meta.brace.square, meta.group.toml, meta.group.double.toml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator#FEFEFE
meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end#EAE7D2
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.variable.makefile#E9E8D8
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css#FFFFFF
punctuation.definition.directive.restructuredtext#E6D3D1
variable#E7DAC1
variable.other.alias.yaml#E7DAC1underline
variable.language, variable.parameter.function.language.special#E0CFAE
variable.other.constant#DFE2B6
support.variable#E7DAC1
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E9E8C3
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D0A67B
support.function, support.type.property-name#E6E9C8
storage#D5BFDE
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D1D35E
punctuation.definition.group.capture.regexp#C7736A
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C7736A
punctuation.definition.character-class.regexp#FBFCAB
punctuation.definition.group.regexp#C1BFEB
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C7736A
meta.assertion.look-ahead.regexp#C1BFEB
source.json meta.structure.dictionary.json support.type.property-name.json#BBA477
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B288C3
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#7CA6D0
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#D0A67B
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#CB8080
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#28AB28
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#BBA477
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#B288C3
token.info-token#7CA6D0
token.warn-token#D0A67B
token.error-token#CB8080
token.debug-token#D0A67B
RLabs Themes Collection by RLabs Inc. - VS Code Theme