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#17161270
  • activityBar.activeBorder#80B87A
  • activityBar.background#211F17
  • activityBar.foreground#E1C6CA
  • activityBar.inactiveForeground#67665C
  • activityBarBadge.background#C0BC8B
  • activityBarBadge.foreground#17150D
  • activityBarTop.foreground#E1C6CA
  • badge.background#C0BC8B
  • badge.foreground#17150D
  • breadcrumb.activeForeground#E1C6CA
  • breadcrumb.activeSelectionForeground#E1C6CA
  • breadcrumb.background#211F17
  • breadcrumb.focusForeground#E1C6CA
  • breadcrumb.foreground#67665C
  • breadcrumbPicker.background#211F17
  • button.background#C0BC8Bdb
  • button.foreground#17150D
  • button.hoverBackground#C0BC8B
  • button.secondaryBackground#80B87Adb
  • button.secondaryForeground#17150D
  • button.secondaryHoverBackground#80B87A
  • checkbox.background#0F150F
  • checkbox.foreground#E1C6CA
  • debugToolBar.background#8BA6C1
  • debugToolBar.foreground#17150D
  • descriptionForeground#C3DDC0
  • diffEditor.diagonalFill#8BA6C1
  • diffEditor.insertedLineBackground#8BA6C140
  • diffEditor.insertedTextBackground#8BA6C150
  • diffEditor.insertedTextBorder#8BA6C1
  • diffEditor.removedLineBackground#C18B8B40
  • diffEditor.removedTextBackground#C18B8B50
  • diffEditor.removedTextBorder#C18B8B
  • diffEditorGutter.insertedLineBackground#8BA6C1
  • diffEditorGutter.removedLineBackground#C18B8B
  • disabledForeground#67665C
  • dropdown.background#291E1F
  • dropdown.border#2C2917
  • dropdown.foreground#E1C6CA
  • editor.background#0F150F
  • editor.findMatchBackground#42333470
  • editor.findMatchForeground#E1C6CA
  • editor.findMatchHighlightBackground#17161270
  • editor.findMatchHighlightForeground#E1C6CA
  • editor.findRangeHighlightBackground#37252770
  • editor.foldBackground#17161270
  • editor.foldPlaceholderForeground#E1C6CA
  • editor.foreground#E1C6CA
  • editor.hoverHighlightBackground#17161270
  • editor.inactiveSelectionBackground#37252770
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#C3DDC0
  • editor.rangeHighlightBackground#17161270
  • editor.selectionBackground#37252770
  • editor.selectionForeground#E1C6CA
  • editor.selectionHighlightBackground#37252770
  • editor.snippetFinalTabstopHighlightBackground#17161270
  • editor.snippetTabstopHighlightBackground#17161270
  • editor.symbolHighlightBackground#17161270
  • editor.wordHighlightBackground#17161270
  • editor.wordHighlightStrongBackground#17161250
  • editor.wordHighlightTextBackground#17161270
  • editorCodeLens.foreground#67665C
  • editorCursor.background#17161270
  • editorCursor.foreground#80B87A
  • editorError.foreground#C18B8B
  • editorGroup.border#2C2917
  • editorGroup.dropBackground#291E1F
  • editorGroup.emptyBackground#0F150F
  • editorGroupHeader.border#2C2917
  • editorGroupHeader.tabsBackground#0F150F
  • editorGutter.addedBackground#519751
  • editorGutter.background#0F150F
  • editorGutter.commentRangeForeground#67665C
  • editorGutter.deletedBackground#C18B8B
  • editorGutter.modifiedBackground#8BA6C1
  • editorHint.foreground#519751
  • editorHoverWidget.background#0F150F
  • editorHoverWidget.border#2C2917
  • editorHoverWidget.foreground#E1C6CA
  • editorHoverWidget.highlightForeground#E1C6CA
  • editorHoverWidget.statusBarBackground#0F150F
  • editorIndentGuide.activeBackground1#80B87A
  • editorIndentGuide.background1#17161270
  • editorInfo.foreground#8BA6C1
  • editorLineNumber.activeForeground#80B87A
  • editorLineNumber.dimmedForeground#67665C90
  • editorLineNumber.foreground#67665C
  • editorLink.activeForeground#8BA6C1
  • editorMarkerNavigation.background#211F17
  • editorMarkerNavigationError.background#211F17
  • editorMarkerNavigationWarning.background#211F17
  • editorMultiCursor.primary.background#17161270
  • editorMultiCursor.primary.foreground#80B87A
  • editorMultiCursor.secondary.background#17161270
  • editorMultiCursor.secondary.foreground#E1C6CA
  • editorOverviewRuler.addedForeground#519751
  • editorOverviewRuler.border#2C2917
  • editorOverviewRuler.commentForeground#67665C
  • editorOverviewRuler.commonContentForeground#E1C6CA
  • editorOverviewRuler.currentContentForeground#8BA6C1
  • editorOverviewRuler.deletedForeground#C18B8B
  • editorOverviewRuler.errorForeground#C18B8B
  • editorOverviewRuler.findMatchForeground#E1C6CA
  • editorOverviewRuler.incomingContentForeground#519751
  • editorOverviewRuler.infoForeground#8BA6C1
  • editorOverviewRuler.modifiedForeground#8BA6C1
  • editorOverviewRuler.rangeHighlightForeground#17161270
  • editorOverviewRuler.selectionHighlightForeground#37252770
  • editorOverviewRuler.warningForeground#C0A68B
  • editorOverviewRuler.wordHighlightForeground#17161270
  • editorOverviewRuler.wordHighlightStrongForeground#17161270
  • editorRuler.foreground#17161270
  • editorSuggestWidget.background#0F150F
  • editorSuggestWidget.border#2C2917
  • editorSuggestWidget.focusHighlightForeground#E1C6CA
  • editorSuggestWidget.foreground#67665C
  • editorSuggestWidget.highlightForeground#E1C6CA
  • editorSuggestWidget.selectedBackground#C0BC8B80
  • editorSuggestWidget.selectedForeground#E1C6CA
  • editorUnicodeHighlight.background#17161270
  • editorWarning.foreground#C0A68B
  • editorWhitespace.foreground#17161270
  • editorWidget.background#0F150F
  • editorWidget.border#2C2917
  • editorWidget.foreground#E1C6CA
  • errorForeground#C18B8B
  • extensionButton.prominentBackground#C0BC8Baa
  • extensionButton.prominentForeground#17150D
  • extensionButton.prominentHoverBackground#C0BC8B
  • focusBorder#2C2917
  • foreground#E1C6CA
  • gitDecoration.addedResourceForeground#519751
  • gitDecoration.conflictingResourceForeground#C0A68B
  • gitDecoration.deletedResourceForeground#C18B8B
  • gitDecoration.ignoredResourceForeground#67665C
  • gitDecoration.modifiedResourceForeground#8BA6C1
  • gitDecoration.renamedResourceForeground#80B87A
  • gitDecoration.untrackedResourceForeground#C3DDC0
  • input.background#0F150F
  • input.border#67665C
  • input.foreground#E1C6CA
  • input.placeholderForeground#67665C
  • inputOption.activeBorder#80B87A
  • inputValidation.errorBorder#C18B8B
  • inputValidation.infoBorder#8BA6C1
  • inputValidation.warningBorder#C0A68B
  • list.activeSelectionBackground#C0BC8B70
  • list.activeSelectionForeground#E1C6CA
  • list.dropBackground#291E1F
  • list.dropBetweenBackground#2C2917
  • list.errorForeground#C18B8B
  • list.focusBackground#C0BC8B50
  • list.focusForeground#E1C6CA
  • list.highlightForeground#80B87A
  • list.hoverBackground#C0BC8B20
  • list.hoverForeground#E1C6CA
  • list.inactiveFocusBackground#211F17
  • list.inactiveSelectionBackground#C0BC8B60
  • list.inactiveSelectionForeground#C3DDC0
  • list.warningForeground#C0A68B
  • listFilterWidget.background#291E1F
  • listFilterWidget.noMatchesOutline#C18B8B
  • listFilterWidget.outline#2C2917
  • merge.border#2C2917
  • merge.currentContentBackground#8BA6C120
  • merge.currentHeaderBackground#8BA6C140
  • merge.incomingContentBackground#51975120
  • merge.incomingHeaderBackground#51975140
  • mergeEditor.change.background#C0A68B
  • notificationLink.foreground#8BA6C1
  • notifications.background#211F17
  • notifications.border#2C2917
  • notifications.foreground#E1C6CA
  • notificationsErrorIcon.foreground#C18B8B
  • notificationsInfoIcon.foreground#8BA6C1
  • notificationsWarningIcon.foreground#C0A68B
  • panel.background#211F17
  • panel.border#80B87A
  • panelInput.border#67665C
  • panelTitle.activeBorder#80B87A
  • panelTitle.activeForeground#E1C6CA
  • panelTitle.inactiveForeground#67665C
  • peekView.border#C0BC8B
  • peekViewEditor.background#0F150F
  • peekViewEditor.matchHighlightBackground#42333470
  • peekViewResult.background#0F150F
  • peekViewResult.fileForeground#E1C6CA
  • peekViewResult.lineForeground#E1C6CA
  • peekViewResult.matchHighlightBackground#17161270
  • peekViewResult.selectionBackground#211F17
  • peekViewResult.selectionForeground#E1C6CA
  • peekViewTitle.background#0F150F
  • peekViewTitleDescription.foreground#C3DDC0
  • peekViewTitleLabel.foreground#E1C6CA
  • pickerGroup.border#C0BC8B
  • pickerGroup.foreground#ECE7B6
  • progressBar.background#80B87A
  • selection.background#C0BC8B50
  • settings.checkboxBackground#0F150F
  • settings.checkboxBorder#2C2917
  • settings.checkboxForeground#E1C6CA
  • settings.dropdownBackground#0F150F
  • settings.dropdownBorder#2C2917
  • settings.dropdownForeground#E1C6CA
  • settings.focusedRowBackground#17161270
  • settings.focusedRowBorder#67665C
  • settings.headerBorder#2C2917
  • settings.headerForeground#E1C6CA
  • settings.inactiveSelectedItemBorder#67665C
  • settings.modifiedItemIndicator#C0A68B
  • settings.numberInputBackground#0F150F
  • settings.numberInputBorder#67665C
  • settings.numberInputForeground#E1C6CA
  • settings.rowHoverBackground#17161270
  • settings.settingsHeaderHoverForeground#E1C6CA
  • settings.textInputBackground#0F150F
  • settings.textInputBorder#67665C
  • settings.textInputForeground#E1C6CA
  • sideBar.background#0F150F
  • sideBarActivityBarTop.border#2C2917
  • sideBarSectionHeader.background#211F17
  • sideBarSectionHeader.border#2C2917
  • sideBarStickyScroll.background#0F150F
  • sideBarStickyScroll.border#2C2917
  • sideBarStickyScroll.shadow#2C2917
  • sideBarTitle.background#0F150F
  • sideBarTitle.foreground#E1C6CA
  • statusBar.background#C0BC8B
  • statusBar.debuggingBackground#C0A68B
  • statusBar.debuggingForeground#17150D
  • statusBar.foreground#17150D
  • statusBar.noFolderBackground#C3DDC0
  • statusBar.noFolderForeground#17150D
  • statusBarItem.activeBackground#C0BC8Baa
  • statusBarItem.errorBackground#C18B8B
  • statusBarItem.errorForeground#17150D
  • statusBarItem.errorHoverBackground#C18B8Baa
  • statusBarItem.hoverBackground#C0BC8Baa
  • statusBarItem.prominentBackground#C0BC8Baa
  • statusBarItem.prominentForeground#17150D
  • statusBarItem.prominentHoverBackground#C0BC8Baa
  • statusBarItem.prominentHoverForeground#17150D
  • statusBarItem.remoteBackground#80B87A
  • statusBarItem.remoteForeground#17150D
  • statusBarItem.remoteHoverBackground#80B87Aaa
  • statusBarItem.warningBackground#C0A68B
  • statusBarItem.warningForeground#17150D
  • statusBarItem.warningHoverBackground#C0A68Baa
  • tab.activeBackground#211F17
  • tab.activeBorderTop#80B87A
  • tab.activeForeground#E1C6CA
  • tab.border#2C2917
  • tab.hoverBackground#211F1780
  • tab.hoverForeground#E1C6CA
  • tab.inactiveBackground#0F150F
  • tab.inactiveForeground#67665C
  • tab.selectedBackground#17161270
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7377D8
  • terminal.ansiBrightBlack#414141
  • terminal.ansiBrightBlue#C7C9F6
  • terminal.ansiBrightCyan#E9FAFB
  • terminal.ansiBrightGreen#E8FCE9
  • terminal.ansiBrightMagenta#E44BD7
  • terminal.ansiBrightRed#F3C8B3
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#FCEDE8
  • terminal.ansiCyan#A5D8DA
  • terminal.ansiGreen#9AE39F
  • terminal.ansiMagenta#D344C6
  • terminal.ansiRed#C98867
  • terminal.ansiWhite#F5F5F3
  • terminal.ansiYellow#D2947F
  • terminal.background#0F150F
  • terminal.border#2C2917
  • terminal.foreground#E1C6CA
  • terminal.inactiveSelectionBackground#37252770
  • terminal.selectionBackground#37252770
  • textBlockQuote.background#291E1F
  • textBlockQuote.border#2C2917
  • textCodeBlock.background#291E1F
  • textLink.activeForeground#8BA6C1
  • textLink.foreground#C0BC8B
  • textPreformat.background#291E1F
  • textPreformat.foreground#E1C6CA
  • textSeparator.foreground#E1C6CA
  • titleBar.activeBackground#211F17
  • titleBar.activeForeground#E1C6CA
  • titleBar.inactiveBackground#211F17
  • titleBar.inactiveForeground#67665C
  • widget.border#2C2917

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E1C6CA
meta.diff, meta.diff.header#67665C
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#CEF1CB
emphasisitalic
strongbold
invalid#C18B8Bstrikethrough
invalid.deprecated#E1C6CAunderline italic
header#CEF1CB
source.ini, source.ignore, source#C3DDC0
markup.inserted#CEF1CB
markup.deleted#C18B8B
markup.changed#8BA6C1
markup.error#C18B8B
markup.underlineunderline
markup.bold#C0A68Bbold
markup.heading#80B87Abold
markup.italic#C3DDC0italic
markup.inline.raw, markup.raw.restructuredtext#80B87A
markup.underline.link, markup.underline.link.image, markup.quote#8BA6C1
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#C0BC8B
meta.separator.markdown#80B87A
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EDBABF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C0A68B
entity.name.class, entity.name.type.class, entity.other.inherited-class#C0BC8B
entity.name.tag, entity.other.attribute-name.parent-selector#EFC2C6
entity.other.attribute-name#C0BC8B
entity.name.function, meta.function-call, meta.method-call, meta.method#80B87A
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EEEABE
support#B3EAAE
entity.name, variable.other.key#80B87A
entity.name.type#C2EEBE
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#AAE9B4
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D1F2CE
entity.other.attribute-name.class.css#80B87A
storage.class, storage.type#C0BC8B
storage.modifier#C7EFC2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#67665C
constant#CEF1CB
constant.other.color#E4DC95
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E28D96
constant.other.date, constant.other.timestamp#BFEDBB
keyword.operator#F5F2D6
keyword.other.unit#E59AA1
keyword.control, keyword.other.template, keyword.other.substitution#E5DE99
keyword.other.this#CEF1CB
keyword.control.import, keyword.control.from#DFE599
keyword.control.new, keyword.operator.new, keyword.other.important.css#C0BC8B
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#D3E59A
meta.attribute-selector.scss#EFC3C6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EFC2C6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ECBAB6
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#C0BC8B
support.constant.property-value.css, constant.numeric.css#C3DDC0
keyword.control.at-rule.apply.tailwind#DFE599
keyword.control.at-rule.tailwind.tailwind#E5DE99
keyword.control.at-rule.layer.tailwind#D3E59A
meta.selector#EFC3C6
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F0D6D8
punctuation.definition.constant.restructuredtext#CEF1CB
string.quoted.docstring.multi#80B87A
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#F0D6D8
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ECBAB6
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#F5F5F3
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#F5E9E5
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#F3E0DD
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#F6E5E6
punctuation.definition.directive.restructuredtext#CEF1CB
variable#BBECB6
variable.other.alias.yaml#BBECB6underline
variable.language, variable.parameter.function.language.special#E28D96
variable.other.constant#BBEDC9
support.variable#BBECB6
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#B2EBC7
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C0A68B
support.function, support.type.property-name#F6DEDA
storage#EFEBC3
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D2947F
punctuation.definition.group.capture.regexp#C98867
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C98867
punctuation.definition.character-class.regexp#FCEDE8
punctuation.definition.group.regexp#C7C9F6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C98867
meta.assertion.look-ahead.regexp#C7C9F6
source.json meta.structure.dictionary.json support.type.property-name.json#80B87A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C0BC8B
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#8BA6C1
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#C0A68B
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#C18B8B
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#519751
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#80B87A
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#C0BC8B
token.info-token#8BA6C1
token.warn-token#C0A68B
token.error-token#C18B8B
token.debug-token#C0A68B
RLabs Themes Collection by RLabs Inc. - VS Code Theme