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#48191970
  • activityBar.activeBorder#F3696B
  • activityBar.background#3F1D1D
  • activityBar.foreground#F7EDEE
  • activityBar.inactiveForeground#6F6B6B
  • activityBarBadge.background#bf6f6f
  • activityBarBadge.foreground#401717
  • activityBarTop.foreground#F7EDEE
  • badge.background#bf6f6f
  • badge.foreground#401717
  • breadcrumb.activeForeground#F7EDEE
  • breadcrumb.activeSelectionForeground#F7EDEE
  • breadcrumb.background#3F1D1D
  • breadcrumb.focusForeground#F7EDEE
  • breadcrumb.foreground#6F6B6B
  • breadcrumbPicker.background#3F1D1D
  • button.background#bf6f6fdb
  • button.foreground#401717
  • button.hoverBackground#bf6f6f
  • button.secondaryBackground#F3696Bdb
  • button.secondaryForeground#401717
  • button.secondaryHoverBackground#F3696B
  • checkbox.background#2F1919
  • checkbox.foreground#F7EDEE
  • debugToolBar.background#81A6CB
  • debugToolBar.foreground#401717
  • descriptionForeground#F2DEDE
  • diffEditor.diagonalFill#81A6CB
  • diffEditor.insertedLineBackground#81A6CB40
  • diffEditor.insertedTextBackground#81A6CB50
  • diffEditor.insertedTextBorder#81A6CB
  • diffEditor.removedLineBackground#C4878740
  • diffEditor.removedTextBackground#C4878750
  • diffEditor.removedTextBorder#C48787
  • diffEditorGutter.insertedLineBackground#81A6CB
  • diffEditorGutter.removedLineBackground#C48787
  • disabledForeground#6F6B6B
  • dropdown.background#341819
  • dropdown.border#544E26
  • dropdown.foreground#F7EDEE
  • editor.background#2F1919
  • editor.findMatchBackground#7E733070
  • editor.findMatchForeground#F7EDEE
  • editor.findMatchHighlightBackground#48191970
  • editor.findMatchHighlightForeground#F7EDEE
  • editor.findRangeHighlightBackground#6B292A70
  • editor.foldBackground#48191970
  • editor.foldPlaceholderForeground#F7EDEE
  • editor.foreground#F7EDEE
  • editor.hoverHighlightBackground#48191970
  • editor.inactiveSelectionBackground#6B292A70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#F2DEDE
  • editor.rangeHighlightBackground#48191970
  • editor.selectionBackground#6B292A70
  • editor.selectionForeground#F7EDEE
  • editor.selectionHighlightBackground#6B292A70
  • editor.snippetFinalTabstopHighlightBackground#48191970
  • editor.snippetTabstopHighlightBackground#48191970
  • editor.symbolHighlightBackground#48191970
  • editor.wordHighlightBackground#48191970
  • editor.wordHighlightStrongBackground#48191950
  • editor.wordHighlightTextBackground#48191970
  • editorCodeLens.foreground#6F6B6B
  • editorCursor.background#48191970
  • editorCursor.foreground#F3696B
  • editorError.foreground#C48787
  • editorGroup.border#544E26
  • editorGroup.dropBackground#341819
  • editorGroup.emptyBackground#2F1919
  • editorGroupHeader.border#544E26
  • editorGroupHeader.tabsBackground#2F1919
  • editorGutter.addedBackground#26AE26
  • editorGutter.background#2F1919
  • editorGutter.commentRangeForeground#6F6B6B
  • editorGutter.deletedBackground#C48787
  • editorGutter.modifiedBackground#81A6CB
  • editorHint.foreground#26AE26
  • editorHoverWidget.background#2F1919
  • editorHoverWidget.border#544E26
  • editorHoverWidget.foreground#F7EDEE
  • editorHoverWidget.highlightForeground#F7EDEE
  • editorHoverWidget.statusBarBackground#2F1919
  • editorIndentGuide.activeBackground1#F3696B
  • editorIndentGuide.background1#48191970
  • editorInfo.foreground#81A6CB
  • editorLineNumber.activeForeground#F3696B
  • editorLineNumber.dimmedForeground#6F6B6B90
  • editorLineNumber.foreground#6F6B6B
  • editorLink.activeForeground#81A6CB
  • editorMarkerNavigation.background#3F1D1D
  • editorMarkerNavigationError.background#3F1D1D
  • editorMarkerNavigationWarning.background#3F1D1D
  • editorMultiCursor.primary.background#48191970
  • editorMultiCursor.primary.foreground#F3696B
  • editorMultiCursor.secondary.background#48191970
  • editorMultiCursor.secondary.foreground#F7EDEE
  • editorOverviewRuler.addedForeground#26AE26
  • editorOverviewRuler.border#544E26
  • editorOverviewRuler.commentForeground#6F6B6B
  • editorOverviewRuler.commonContentForeground#F7EDEE
  • editorOverviewRuler.currentContentForeground#81A6CB
  • editorOverviewRuler.deletedForeground#C48787
  • editorOverviewRuler.errorForeground#C48787
  • editorOverviewRuler.findMatchForeground#F7EDEE
  • editorOverviewRuler.incomingContentForeground#26AE26
  • editorOverviewRuler.infoForeground#81A6CB
  • editorOverviewRuler.modifiedForeground#81A6CB
  • editorOverviewRuler.rangeHighlightForeground#48191970
  • editorOverviewRuler.selectionHighlightForeground#6B292A70
  • editorOverviewRuler.warningForeground#D8A674
  • editorOverviewRuler.wordHighlightForeground#48191970
  • editorOverviewRuler.wordHighlightStrongForeground#48191970
  • editorRuler.foreground#48191970
  • editorSuggestWidget.background#2F1919
  • editorSuggestWidget.border#544E26
  • editorSuggestWidget.focusHighlightForeground#F7EDEE
  • editorSuggestWidget.foreground#6F6B6B
  • editorSuggestWidget.highlightForeground#F7EDEE
  • editorSuggestWidget.selectedBackground#bf6f6f80
  • editorSuggestWidget.selectedForeground#F7EDEE
  • editorUnicodeHighlight.background#48191970
  • editorWarning.foreground#D8A674
  • editorWhitespace.foreground#48191970
  • editorWidget.background#2F1919
  • editorWidget.border#544E26
  • editorWidget.foreground#F7EDEE
  • errorForeground#C48787
  • extensionButton.prominentBackground#bf6f6faa
  • extensionButton.prominentForeground#401717
  • extensionButton.prominentHoverBackground#bf6f6f
  • focusBorder#544E26
  • foreground#F7EDEE
  • gitDecoration.addedResourceForeground#26AE26
  • gitDecoration.conflictingResourceForeground#D8A674
  • gitDecoration.deletedResourceForeground#C48787
  • gitDecoration.ignoredResourceForeground#6F6B6B
  • gitDecoration.modifiedResourceForeground#81A6CB
  • gitDecoration.renamedResourceForeground#F3696B
  • gitDecoration.untrackedResourceForeground#F2DEDE
  • input.background#2F1919
  • input.border#6F6B6B
  • input.foreground#F7EDEE
  • input.placeholderForeground#6F6B6B
  • inputOption.activeBorder#F3696B
  • inputValidation.errorBorder#C48787
  • inputValidation.infoBorder#81A6CB
  • inputValidation.warningBorder#D8A674
  • list.activeSelectionBackground#bf6f6f70
  • list.activeSelectionForeground#F7EDEE
  • list.dropBackground#341819
  • list.dropBetweenBackground#544E26
  • list.errorForeground#C48787
  • list.focusBackground#bf6f6f50
  • list.focusForeground#F7EDEE
  • list.highlightForeground#F3696B
  • list.hoverBackground#bf6f6f20
  • list.hoverForeground#F7EDEE
  • list.inactiveFocusBackground#3F1D1D
  • list.inactiveSelectionBackground#bf6f6f60
  • list.inactiveSelectionForeground#F2DEDE
  • list.warningForeground#D8A674
  • listFilterWidget.background#341819
  • listFilterWidget.noMatchesOutline#C48787
  • listFilterWidget.outline#544E26
  • merge.border#544E26
  • merge.currentContentBackground#81A6CB20
  • merge.currentHeaderBackground#81A6CB40
  • merge.incomingContentBackground#26AE2620
  • merge.incomingHeaderBackground#26AE2640
  • mergeEditor.change.background#D8A674
  • notificationLink.foreground#81A6CB
  • notifications.background#3F1D1D
  • notifications.border#544E26
  • notifications.foreground#F7EDEE
  • notificationsErrorIcon.foreground#C48787
  • notificationsInfoIcon.foreground#81A6CB
  • notificationsWarningIcon.foreground#D8A674
  • panel.background#3F1D1D
  • panel.border#F3696B
  • panelInput.border#6F6B6B
  • panelTitle.activeBorder#F3696B
  • panelTitle.activeForeground#F7EDEE
  • panelTitle.inactiveForeground#6F6B6B
  • peekView.border#bf6f6f
  • peekViewEditor.background#2F1919
  • peekViewEditor.matchHighlightBackground#7E733070
  • peekViewResult.background#2F1919
  • peekViewResult.fileForeground#F7EDEE
  • peekViewResult.lineForeground#F7EDEE
  • peekViewResult.matchHighlightBackground#48191970
  • peekViewResult.selectionBackground#3F1D1D
  • peekViewResult.selectionForeground#F7EDEE
  • peekViewTitle.background#2F1919
  • peekViewTitleDescription.foreground#F2DEDE
  • peekViewTitleLabel.foreground#F7EDEE
  • pickerGroup.border#bf6f6f
  • pickerGroup.foreground#E9C0BE
  • progressBar.background#F3696B
  • selection.background#bf6f6f50
  • settings.checkboxBackground#2F1919
  • settings.checkboxBorder#544E26
  • settings.checkboxForeground#F7EDEE
  • settings.dropdownBackground#2F1919
  • settings.dropdownBorder#544E26
  • settings.dropdownForeground#F7EDEE
  • settings.focusedRowBackground#48191970
  • settings.focusedRowBorder#6F6B6B
  • settings.headerBorder#544E26
  • settings.headerForeground#F7EDEE
  • settings.inactiveSelectedItemBorder#6F6B6B
  • settings.modifiedItemIndicator#D8A674
  • settings.numberInputBackground#2F1919
  • settings.numberInputBorder#6F6B6B
  • settings.numberInputForeground#F7EDEE
  • settings.rowHoverBackground#48191970
  • settings.settingsHeaderHoverForeground#F7EDEE
  • settings.textInputBackground#2F1919
  • settings.textInputBorder#6F6B6B
  • settings.textInputForeground#F7EDEE
  • sideBar.background#2F1919
  • sideBarActivityBarTop.border#544E26
  • sideBarSectionHeader.background#3F1D1D
  • sideBarSectionHeader.border#544E26
  • sideBarStickyScroll.background#2F1919
  • sideBarStickyScroll.border#544E26
  • sideBarStickyScroll.shadow#544E26
  • sideBarTitle.background#2F1919
  • sideBarTitle.foreground#F7EDEE
  • statusBar.background#bf6f6f
  • statusBar.debuggingBackground#D8A674
  • statusBar.debuggingForeground#401717
  • statusBar.foreground#401717
  • statusBar.noFolderBackground#F2DEDE
  • statusBar.noFolderForeground#401717
  • statusBarItem.activeBackground#bf6f6faa
  • statusBarItem.errorBackground#C48787
  • statusBarItem.errorForeground#401717
  • statusBarItem.errorHoverBackground#C48787aa
  • statusBarItem.hoverBackground#bf6f6faa
  • statusBarItem.prominentBackground#bf6f6faa
  • statusBarItem.prominentForeground#401717
  • statusBarItem.prominentHoverBackground#bf6f6faa
  • statusBarItem.prominentHoverForeground#401717
  • statusBarItem.remoteBackground#F3696B
  • statusBarItem.remoteForeground#401717
  • statusBarItem.remoteHoverBackground#F3696Baa
  • statusBarItem.warningBackground#D8A674
  • statusBarItem.warningForeground#401717
  • statusBarItem.warningHoverBackground#D8A674aa
  • tab.activeBackground#3F1D1D
  • tab.activeBorderTop#F3696B
  • tab.activeForeground#F7EDEE
  • tab.border#544E26
  • tab.hoverBackground#3F1D1D80
  • tab.hoverForeground#F7EDEE
  • tab.inactiveBackground#2F1919
  • tab.inactiveForeground#6F6B6B
  • tab.selectedBackground#48191970
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8B81FF
  • terminal.ansiBrightBlack#484848
  • terminal.ansiBrightBlue#AAA3FF
  • terminal.ansiBrightCyan#56E7F5
  • terminal.ansiBrightGreen#90FF78
  • terminal.ansiBrightMagenta#F6A8E0
  • terminal.ansiBrightRed#FAE1DC
  • terminal.ansiBrightWhite#FDFCFC
  • terminal.ansiBrightYellow#E6D78C
  • terminal.ansiCyan#3097A1
  • terminal.ansiGreen#42E41E
  • terminal.ansiMagenta#CD69B0
  • terminal.ansiRed#D3A49B
  • terminal.ansiWhite#F7F6F3
  • terminal.ansiYellow#B7A54E
  • terminal.background#2F1919
  • terminal.border#544E26
  • terminal.foreground#F7EDEE
  • terminal.inactiveSelectionBackground#6B292A70
  • terminal.selectionBackground#6B292A70
  • textBlockQuote.background#341819
  • textBlockQuote.border#544E26
  • textCodeBlock.background#341819
  • textLink.activeForeground#81A6CB
  • textLink.foreground#bf6f6f
  • textPreformat.background#341819
  • textPreformat.foreground#F7EDEE
  • textSeparator.foreground#F7EDEE
  • titleBar.activeBackground#3F1D1D
  • titleBar.activeForeground#F7EDEE
  • titleBar.inactiveBackground#3F1D1D
  • titleBar.inactiveForeground#6F6B6B
  • widget.border#544E26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F7EDEE
meta.diff, meta.diff.header#6F6B6B
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E8E2BA
emphasisitalic
strongbold
invalid#C48787strikethrough
invalid.deprecated#F7EDEEunderline italic
header#E8E2BA
source.ini, source.ignore, source#F2DEDE
markup.inserted#E8E2BA
markup.deleted#C48787
markup.changed#81A6CB
markup.error#C48787
markup.underlineunderline
markup.bold#D8A674bold
markup.heading#F3696Bbold
markup.italic#F2DEDEitalic
markup.inline.raw, markup.raw.restructuredtext#F3696B
markup.underline.link, markup.underline.link.image, markup.quote#81A6CB
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#bf6f6f
meta.separator.markdown#F3696B
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E8BBBB
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D8A674
entity.name.class, entity.name.type.class, entity.other.inherited-class#bf6f6f
entity.name.tag, entity.other.attribute-name.parent-selector#F1D5D6
entity.other.attribute-name#bf6f6f
entity.name.function, meta.function-call, meta.method-call, meta.method#F3696B
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E6B3B3
support#E4AFAF
entity.name, variable.other.key#F3696B
entity.name.type#EBC2C2
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E6C5B3
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#E8BABB
entity.other.attribute-name.class.css#F3696B
storage.class, storage.type#bf6f6f
storage.modifier#E9BEBE
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6F6B6B
constant#E8E2BA
constant.other.color#DE9C9D
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#DE9D9B
constant.other.date, constant.other.timestamp#E6B3B3
keyword.operator#E6B3B3
keyword.other.unit#E6DFB3
keyword.control, keyword.other.template, keyword.other.substitution#E3DBAB
keyword.other.this#E8E2BA
keyword.control.import, keyword.control.from#D6DD98
keyword.control.new, keyword.operator.new, keyword.other.important.css#bf6f6f
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#D6E4AF
meta.attribute-selector.scss#EEEACD
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F1D5D6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EBCBC1
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#bf6f6f
support.constant.property-value.css, constant.numeric.css#F2DEDE
keyword.control.at-rule.apply.tailwind#D6DD98
keyword.control.at-rule.tailwind.tailwind#E3DBAB
keyword.control.at-rule.layer.tailwind#D6E4AF
meta.selector#EEEACD
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F3E2E2
punctuation.definition.constant.restructuredtext#E8E2BA
string.quoted.docstring.multi#F3696B
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#F3E2E2
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EBCBC1
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#F7F6F3
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#F4EBE6
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#FBF6F4
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#E8E2BA
variable#E6B3B3
variable.other.alias.yaml#E6B3B3underline
variable.language, variable.parameter.function.language.special#DE9D9B
variable.other.constant#EDD6CA
support.variable#E6B3B3
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E6C7B3
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D8A674
support.function, support.type.property-name#ECCDC5
storage#E9E4BE
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#B7A54E
punctuation.definition.group.capture.regexp#D3A49B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#D3A49B
punctuation.definition.character-class.regexp#E6D78C
punctuation.definition.group.regexp#AAA3FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#D3A49B
meta.assertion.look-ahead.regexp#AAA3FF
source.json meta.structure.dictionary.json support.type.property-name.json#F3696B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bf6f6f
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#81A6CB
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#D8A674
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#C48787
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#26AE26
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#F3696B
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#bf6f6f
token.info-token#81A6CB
token.warn-token#D8A674
token.error-token#C48787
token.debug-token#D8A674
RLabs Themes Collection by RLabs Inc. - VS Code Theme