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#1A141470
  • activityBar.activeBorder#D65C5C
  • activityBar.background#1B1818
  • activityBar.foreground#F9F6F6
  • activityBar.inactiveForeground#795959
  • activityBarBadge.background#D77577
  • activityBarBadge.foreground#121111
  • activityBarTop.foreground#F9F6F6
  • badge.background#D77577
  • badge.foreground#121111
  • breadcrumb.activeForeground#F9F6F6
  • breadcrumb.activeSelectionForeground#F9F6F6
  • breadcrumb.background#1B1818
  • breadcrumb.focusForeground#F9F6F6
  • breadcrumb.foreground#795959
  • breadcrumbPicker.background#1B1818
  • button.background#D77577db
  • button.foreground#121111
  • button.hoverBackground#D77577
  • button.secondaryBackground#D65C5Cdb
  • button.secondaryForeground#F9F6F6
  • button.secondaryHoverBackground#D65C5C
  • checkbox.background#0D0C0C
  • checkbox.foreground#F9F6F6
  • debugToolBar.background#79A6D2
  • debugToolBar.foreground#121111
  • descriptionForeground#F5EFEF
  • diffEditor.diagonalFill#79A6D2
  • diffEditor.insertedLineBackground#79A6D240
  • diffEditor.insertedTextBackground#79A6D250
  • diffEditor.insertedTextBorder#79A6D2
  • diffEditor.removedLineBackground#DB707040
  • diffEditor.removedTextBackground#DB707050
  • diffEditor.removedTextBorder#DB7070
  • diffEditorGutter.insertedLineBackground#79A6D2
  • diffEditorGutter.removedLineBackground#DB7070
  • disabledForeground#795959
  • dropdown.background#0E1011
  • dropdown.border#272020
  • dropdown.foreground#F9F6F6
  • editor.background#0D0C0C
  • editor.findMatchBackground#502B2B70
  • editor.findMatchForeground#F9F6F6
  • editor.findMatchHighlightBackground#1A141470
  • editor.findMatchHighlightForeground#F9F6F6
  • editor.findRangeHighlightBackground#3A272770
  • editor.foldBackground#1A141470
  • editor.foldPlaceholderForeground#F9F6F6
  • editor.foreground#F9F6F6
  • editor.hoverHighlightBackground#1A141470
  • editor.inactiveSelectionBackground#3A272770
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#F5EFEF
  • editor.rangeHighlightBackground#1A141470
  • editor.selectionBackground#3A272770
  • editor.selectionForeground#F9F6F6
  • editor.selectionHighlightBackground#3A272770
  • editor.snippetFinalTabstopHighlightBackground#1A141470
  • editor.snippetTabstopHighlightBackground#1A141470
  • editor.symbolHighlightBackground#1A141470
  • editor.wordHighlightBackground#1A141470
  • editor.wordHighlightStrongBackground#1A141450
  • editor.wordHighlightTextBackground#1A141470
  • editorCodeLens.foreground#795959
  • editorCursor.background#1A141470
  • editorCursor.foreground#D65C5C
  • editorError.foreground#DB7070
  • editorGroup.border#272020
  • editorGroup.dropBackground#0E1011
  • editorGroup.emptyBackground#0D0C0C
  • editorGroupHeader.border#272020
  • editorGroupHeader.tabsBackground#0D0C0C
  • editorGutter.addedBackground#389438
  • editorGutter.background#0D0C0C
  • editorGutter.commentRangeForeground#795959
  • editorGutter.deletedBackground#DB7070
  • editorGutter.modifiedBackground#79A6D2
  • editorHint.foreground#389438
  • editorHoverWidget.background#0D0C0C
  • editorHoverWidget.border#272020
  • editorHoverWidget.foreground#F9F6F6
  • editorHoverWidget.highlightForeground#F9F6F6
  • editorHoverWidget.statusBarBackground#0D0C0C
  • editorIndentGuide.activeBackground1#D65C5C
  • editorIndentGuide.background1#1A141470
  • editorInfo.foreground#79A6D2
  • editorLineNumber.activeForeground#D65C5C
  • editorLineNumber.dimmedForeground#79595990
  • editorLineNumber.foreground#795959
  • editorLink.activeForeground#79A6D2
  • editorMarkerNavigation.background#1B1818
  • editorMarkerNavigationError.background#1B1818
  • editorMarkerNavigationWarning.background#1B1818
  • editorMultiCursor.primary.background#1A141470
  • editorMultiCursor.primary.foreground#D65C5C
  • editorMultiCursor.secondary.background#1A141470
  • editorMultiCursor.secondary.foreground#F9F6F6
  • editorOverviewRuler.addedForeground#389438
  • editorOverviewRuler.border#272020
  • editorOverviewRuler.commentForeground#795959
  • editorOverviewRuler.commonContentForeground#F9F6F6
  • editorOverviewRuler.currentContentForeground#79A6D2
  • editorOverviewRuler.deletedForeground#DB7070
  • editorOverviewRuler.errorForeground#DB7070
  • editorOverviewRuler.findMatchForeground#F9F6F6
  • editorOverviewRuler.incomingContentForeground#389438
  • editorOverviewRuler.infoForeground#79A6D2
  • editorOverviewRuler.modifiedForeground#79A6D2
  • editorOverviewRuler.rangeHighlightForeground#1A141470
  • editorOverviewRuler.selectionHighlightForeground#3A272770
  • editorOverviewRuler.warningForeground#D7A675
  • editorOverviewRuler.wordHighlightForeground#1A141470
  • editorOverviewRuler.wordHighlightStrongForeground#1A141470
  • editorRuler.foreground#1A141470
  • editorSuggestWidget.background#0D0C0C
  • editorSuggestWidget.border#272020
  • editorSuggestWidget.focusHighlightForeground#F9F6F6
  • editorSuggestWidget.foreground#795959
  • editorSuggestWidget.highlightForeground#F9F6F6
  • editorSuggestWidget.selectedBackground#D7757780
  • editorSuggestWidget.selectedForeground#F9F6F6
  • editorUnicodeHighlight.background#1A141470
  • editorWarning.foreground#D7A675
  • editorWhitespace.foreground#1A141470
  • editorWidget.background#0D0C0C
  • editorWidget.border#272020
  • editorWidget.foreground#F9F6F6
  • errorForeground#DB7070
  • extensionButton.prominentBackground#D77577aa
  • extensionButton.prominentForeground#121111
  • extensionButton.prominentHoverBackground#D77577
  • focusBorder#272020
  • foreground#F9F6F6
  • gitDecoration.addedResourceForeground#389438
  • gitDecoration.conflictingResourceForeground#D7A675
  • gitDecoration.deletedResourceForeground#DB7070
  • gitDecoration.ignoredResourceForeground#795959
  • gitDecoration.modifiedResourceForeground#79A6D2
  • gitDecoration.renamedResourceForeground#D65C5C
  • gitDecoration.untrackedResourceForeground#F5EFEF
  • input.background#0D0C0C
  • input.border#795959
  • input.foreground#F9F6F6
  • input.placeholderForeground#795959
  • inputOption.activeBorder#D65C5C
  • inputValidation.errorBorder#DB7070
  • inputValidation.infoBorder#79A6D2
  • inputValidation.warningBorder#D7A675
  • list.activeSelectionBackground#D7757770
  • list.activeSelectionForeground#F9F6F6
  • list.dropBackground#0E1011
  • list.dropBetweenBackground#272020
  • list.errorForeground#DB7070
  • list.focusBackground#D7757750
  • list.focusForeground#F9F6F6
  • list.highlightForeground#D65C5C
  • list.hoverBackground#D7757720
  • list.hoverForeground#F9F6F6
  • list.inactiveFocusBackground#1B1818
  • list.inactiveSelectionBackground#D7757760
  • list.inactiveSelectionForeground#F5EFEF
  • list.warningForeground#D7A675
  • listFilterWidget.background#0E1011
  • listFilterWidget.noMatchesOutline#DB7070
  • listFilterWidget.outline#272020
  • merge.border#272020
  • merge.currentContentBackground#79A6D220
  • merge.currentHeaderBackground#79A6D240
  • merge.incomingContentBackground#38943820
  • merge.incomingHeaderBackground#38943840
  • mergeEditor.change.background#D7A675
  • notificationLink.foreground#79A6D2
  • notifications.background#1B1818
  • notifications.border#272020
  • notifications.foreground#F9F6F6
  • notificationsErrorIcon.foreground#DB7070
  • notificationsInfoIcon.foreground#79A6D2
  • notificationsWarningIcon.foreground#D7A675
  • panel.background#1B1818
  • panel.border#D65C5C
  • panelInput.border#795959
  • panelTitle.activeBorder#D65C5C
  • panelTitle.activeForeground#F9F6F6
  • panelTitle.inactiveForeground#795959
  • peekView.border#D77577
  • peekViewEditor.background#0D0C0C
  • peekViewEditor.matchHighlightBackground#502B2B70
  • peekViewResult.background#0D0C0C
  • peekViewResult.fileForeground#F9F6F6
  • peekViewResult.lineForeground#F9F6F6
  • peekViewResult.matchHighlightBackground#1A141470
  • peekViewResult.selectionBackground#1B1818
  • peekViewResult.selectionForeground#F9F6F6
  • peekViewTitle.background#0D0C0C
  • peekViewTitleDescription.foreground#F5EFEF
  • peekViewTitleLabel.foreground#F9F6F6
  • pickerGroup.border#D77577
  • pickerGroup.foreground#E1C1C2
  • progressBar.background#D65C5C
  • selection.background#D7757750
  • settings.checkboxBackground#0D0C0C
  • settings.checkboxBorder#272020
  • settings.checkboxForeground#F9F6F6
  • settings.dropdownBackground#0D0C0C
  • settings.dropdownBorder#272020
  • settings.dropdownForeground#F9F6F6
  • settings.focusedRowBackground#1A141470
  • settings.focusedRowBorder#795959
  • settings.headerBorder#272020
  • settings.headerForeground#F9F6F6
  • settings.inactiveSelectedItemBorder#795959
  • settings.modifiedItemIndicator#D7A675
  • settings.numberInputBackground#0D0C0C
  • settings.numberInputBorder#795959
  • settings.numberInputForeground#F9F6F6
  • settings.rowHoverBackground#1A141470
  • settings.settingsHeaderHoverForeground#F9F6F6
  • settings.textInputBackground#0D0C0C
  • settings.textInputBorder#795959
  • settings.textInputForeground#F9F6F6
  • sideBar.background#0D0C0C
  • sideBarActivityBarTop.border#272020
  • sideBarSectionHeader.background#1B1818
  • sideBarSectionHeader.border#272020
  • sideBarStickyScroll.background#0D0C0C
  • sideBarStickyScroll.border#272020
  • sideBarStickyScroll.shadow#272020
  • sideBarTitle.background#0D0C0C
  • sideBarTitle.foreground#F9F6F6
  • statusBar.background#D77577
  • statusBar.debuggingBackground#D7A675
  • statusBar.debuggingForeground#121111
  • statusBar.foreground#121111
  • statusBar.noFolderBackground#F5EFEF
  • statusBar.noFolderForeground#121111
  • statusBarItem.activeBackground#D77577aa
  • statusBarItem.errorBackground#DB7070
  • statusBarItem.errorForeground#121111
  • statusBarItem.errorHoverBackground#DB7070aa
  • statusBarItem.hoverBackground#D77577aa
  • statusBarItem.prominentBackground#D77577aa
  • statusBarItem.prominentForeground#121111
  • statusBarItem.prominentHoverBackground#D77577aa
  • statusBarItem.prominentHoverForeground#121111
  • statusBarItem.remoteBackground#D65C5C
  • statusBarItem.remoteForeground#F9F6F6
  • statusBarItem.remoteHoverBackground#D65C5Caa
  • statusBarItem.warningBackground#D7A675
  • statusBarItem.warningForeground#121111
  • statusBarItem.warningHoverBackground#D7A675aa
  • tab.activeBackground#1B1818
  • tab.activeBorderTop#D65C5C
  • tab.activeForeground#F9F6F6
  • tab.border#272020
  • tab.hoverBackground#1B181880
  • tab.hoverForeground#F9F6F6
  • tab.inactiveBackground#0D0C0C
  • tab.inactiveForeground#795959
  • tab.selectedBackground#1A141470
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7673E7
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#8F8CF5
  • terminal.ansiBrightCyan#82E8CE
  • terminal.ansiBrightGreen#C1E6BC
  • terminal.ansiBrightMagenta#C996E8
  • terminal.ansiBrightRed#D44F25
  • terminal.ansiBrightWhite#FAFAF9
  • terminal.ansiBrightYellow#D6987D
  • terminal.ansiCyan#309078
  • terminal.ansiGreen#608B5A
  • terminal.ansiMagenta#AC5BDC
  • terminal.ansiRed#C95C39
  • terminal.ansiWhite#FDFDFC
  • terminal.ansiYellow#AE6F54
  • terminal.background#0D0C0C
  • terminal.border#272020
  • terminal.foreground#F9F6F6
  • terminal.inactiveSelectionBackground#3A272770
  • terminal.selectionBackground#3A272770
  • textBlockQuote.background#0E1011
  • textBlockQuote.border#272020
  • textCodeBlock.background#0E1011
  • textLink.activeForeground#79A6D2
  • textLink.foreground#D77577
  • textPreformat.background#0E1011
  • textPreformat.foreground#F9F6F6
  • textSeparator.foreground#F9F6F6
  • titleBar.activeBackground#1B1818
  • titleBar.activeForeground#F9F6F6
  • titleBar.inactiveBackground#1B1818
  • titleBar.inactiveForeground#795959
  • widget.border#272020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F9F6F6
meta.diff, meta.diff.header#795959
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E4C4C4
emphasisitalic
strongbold
invalid#DB7070strikethrough
invalid.deprecated#F9F6F6underline italic
header#E4C4C4
source.ini, source.ignore, source#F5EFEF
markup.inserted#E4C4C4
markup.deleted#DB7070
markup.changed#79A6D2
markup.error#DB7070
markup.underlineunderline
markup.bold#D7A675bold
markup.heading#D65C5Cbold
markup.italic#F5EFEFitalic
markup.inline.raw, markup.raw.restructuredtext#D65C5C
markup.underline.link, markup.underline.link.image, markup.quote#79A6D2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D77577
meta.separator.markdown#D65C5C
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E1C2C2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D7A675
entity.name.class, entity.name.type.class, entity.other.inherited-class#D77577
entity.name.tag, entity.other.attribute-name.parent-selector#EAD2D3
entity.other.attribute-name#D77577
entity.name.function, meta.function-call, meta.method-call, meta.method#D65C5C
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#DDC1C1
support#DFB9BA
entity.name, variable.other.key#D65C5C
entity.name.type#E6CCCC
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DCC8BC
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EDDEDE
entity.other.attribute-name.class.css#D65C5C
storage.class, storage.type#D77577
storage.modifier#E5CDCD
comment, punctuation.definition.comment, unused.comment, wildcard.comment#795959
constant#E4C4C4
constant.other.color#D4A5A6
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#D9ABAA
constant.other.date, constant.other.timestamp#E2C5C5
keyword.operator#D7C1C1
keyword.other.unit#DCB7B7
keyword.control, keyword.other.template, keyword.other.substitution#CA8C8C
keyword.other.this#E4C4C4
keyword.control.import, keyword.control.from#CDB6AD
keyword.control.new, keyword.operator.new, keyword.other.important.css#D77577
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#D6B7A9
meta.attribute-selector.scss#DDBBBB
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EAD2D3
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E3D0C9
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#D77577
support.constant.property-value.css, constant.numeric.css#F5EFEF
keyword.control.at-rule.apply.tailwind#CDB6AD
keyword.control.at-rule.tailwind.tailwind#CA8C8C
keyword.control.at-rule.layer.tailwind#D6B7A9
meta.selector#DDBBBB
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E8EBED
punctuation.definition.constant.restructuredtext#E4C4C4
string.quoted.docstring.multi#D65C5C
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#E8EBED
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E3D0C9
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#FDFDFC
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#F6F7F8
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#FFFFFF
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#D9DFE3
punctuation.definition.directive.restructuredtext#E4C4C4
variable#BDD0DB
variable.other.alias.yaml#BDD0DBunderline
variable.language, variable.parameter.function.language.special#D9ABAA
variable.other.constant#D7DCEA
support.variable#BDD0DB
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#CBCEE1
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D7A675
support.function, support.type.property-name#E8DAD3
storage#C8DAE4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#AE6F54
punctuation.definition.group.capture.regexp#C95C39
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C95C39
punctuation.definition.character-class.regexp#D6987D
punctuation.definition.group.regexp#8F8CF5
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C95C39
meta.assertion.look-ahead.regexp#8F8CF5
source.json meta.structure.dictionary.json support.type.property-name.json#D65C5C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D77577
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#79A6D2
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#D7A675
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#DB7070
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#389438
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#D65C5C
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#D77577
token.info-token#79A6D2
token.warn-token#D7A675
token.error-token#DB7070
token.debug-token#D7A675
RLabs Themes Collection by RLabs Inc. - VS Code Theme