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#1D0C0C70
  • activityBar.activeBorder#EA6967
  • activityBar.background#120807
  • activityBar.foreground#EFC2C2
  • activityBar.inactiveForeground#6F6A6A
  • activityBarBadge.background#F16B68
  • activityBarBadge.foreground#120707
  • activityBarTop.foreground#EFC2C2
  • badge.background#F16B68
  • badge.foreground#120707
  • breadcrumb.activeForeground#EFC2C2
  • breadcrumb.activeSelectionForeground#EFC2C2
  • breadcrumb.background#120807
  • breadcrumb.focusForeground#EFC2C2
  • breadcrumb.foreground#6F6A6A
  • breadcrumbPicker.background#120807
  • button.background#F16B68db
  • button.foreground#120707
  • button.hoverBackground#F16B68
  • button.secondaryBackground#EA6967db
  • button.secondaryForeground#120707
  • button.secondaryHoverBackground#EA6967
  • checkbox.background#0B1E1B
  • checkbox.foreground#EFC2C2
  • debugToolBar.background#66A6E5
  • debugToolBar.foreground#120707
  • descriptionForeground#F0C7C6
  • diffEditor.diagonalFill#66A6E5
  • diffEditor.insertedLineBackground#66A6E540
  • diffEditor.insertedTextBackground#66A6E550
  • diffEditor.insertedTextBorder#66A6E5
  • diffEditor.removedLineBackground#CE7D7D40
  • diffEditor.removedTextBackground#CE7D7D50
  • diffEditor.removedTextBorder#CE7D7D
  • diffEditorGutter.insertedLineBackground#66A6E5
  • diffEditorGutter.removedLineBackground#CE7D7D
  • disabledForeground#6F6A6A
  • dropdown.background#15090A
  • dropdown.border#3A0909
  • dropdown.foreground#EFC2C2
  • editor.background#0B1E1B
  • editor.findMatchBackground#54212270
  • editor.findMatchForeground#EFC2C2
  • editor.findMatchHighlightBackground#1D0C0C70
  • editor.findMatchHighlightForeground#EFC2C2
  • editor.findRangeHighlightBackground#45161770
  • editor.foldBackground#1D0C0C70
  • editor.foldPlaceholderForeground#EFC2C2
  • editor.foreground#EFC2C2
  • editor.hoverHighlightBackground#1D0C0C70
  • editor.inactiveSelectionBackground#45161770
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#F0C7C6
  • editor.rangeHighlightBackground#1D0C0C70
  • editor.selectionBackground#45161770
  • editor.selectionForeground#EFC2C2
  • editor.selectionHighlightBackground#45161770
  • editor.snippetFinalTabstopHighlightBackground#1D0C0C70
  • editor.snippetTabstopHighlightBackground#1D0C0C70
  • editor.symbolHighlightBackground#1D0C0C70
  • editor.wordHighlightBackground#1D0C0C70
  • editor.wordHighlightStrongBackground#1D0C0C50
  • editor.wordHighlightTextBackground#1D0C0C70
  • editorCodeLens.foreground#6F6A6A
  • editorCursor.background#1D0C0C70
  • editorCursor.foreground#EA6967
  • editorError.foreground#CE7D7D
  • editorGroup.border#3A0909
  • editorGroup.dropBackground#15090A
  • editorGroup.emptyBackground#0B1E1B
  • editorGroupHeader.border#3A0909
  • editorGroupHeader.tabsBackground#0B1E1B
  • editorGutter.addedBackground#1BB11B
  • editorGutter.background#0B1E1B
  • editorGutter.commentRangeForeground#6F6A6A
  • editorGutter.deletedBackground#CE7D7D
  • editorGutter.modifiedBackground#66A6E5
  • editorHint.foreground#1BB11B
  • editorHoverWidget.background#0B1E1B
  • editorHoverWidget.border#3A0909
  • editorHoverWidget.foreground#EFC2C2
  • editorHoverWidget.highlightForeground#EFC2C2
  • editorHoverWidget.statusBarBackground#0B1E1B
  • editorIndentGuide.activeBackground1#EA6967
  • editorIndentGuide.background1#1D0C0C70
  • editorInfo.foreground#66A6E5
  • editorLineNumber.activeForeground#EA6967
  • editorLineNumber.dimmedForeground#6F6A6A90
  • editorLineNumber.foreground#6F6A6A
  • editorLink.activeForeground#66A6E5
  • editorMarkerNavigation.background#120807
  • editorMarkerNavigationError.background#120807
  • editorMarkerNavigationWarning.background#120807
  • editorMultiCursor.primary.background#1D0C0C70
  • editorMultiCursor.primary.foreground#EA6967
  • editorMultiCursor.secondary.background#1D0C0C70
  • editorMultiCursor.secondary.foreground#EFC2C2
  • editorOverviewRuler.addedForeground#1BB11B
  • editorOverviewRuler.border#3A0909
  • editorOverviewRuler.commentForeground#6F6A6A
  • editorOverviewRuler.commonContentForeground#EFC2C2
  • editorOverviewRuler.currentContentForeground#66A6E5
  • editorOverviewRuler.deletedForeground#CE7D7D
  • editorOverviewRuler.errorForeground#CE7D7D
  • editorOverviewRuler.findMatchForeground#EFC2C2
  • editorOverviewRuler.incomingContentForeground#1BB11B
  • editorOverviewRuler.infoForeground#66A6E5
  • editorOverviewRuler.modifiedForeground#66A6E5
  • editorOverviewRuler.rangeHighlightForeground#1D0C0C70
  • editorOverviewRuler.selectionHighlightForeground#45161770
  • editorOverviewRuler.warningForeground#E5A667
  • editorOverviewRuler.wordHighlightForeground#1D0C0C70
  • editorOverviewRuler.wordHighlightStrongForeground#1D0C0C70
  • editorRuler.foreground#1D0C0C70
  • editorSuggestWidget.background#0B1E1B
  • editorSuggestWidget.border#3A0909
  • editorSuggestWidget.focusHighlightForeground#EFC2C2
  • editorSuggestWidget.foreground#6F6A6A
  • editorSuggestWidget.highlightForeground#EFC2C2
  • editorSuggestWidget.selectedBackground#F16B6880
  • editorSuggestWidget.selectedForeground#EFC2C2
  • editorUnicodeHighlight.background#1D0C0C70
  • editorWarning.foreground#E5A667
  • editorWhitespace.foreground#1D0C0C70
  • editorWidget.background#0B1E1B
  • editorWidget.border#3A0909
  • editorWidget.foreground#EFC2C2
  • errorForeground#CE7D7D
  • extensionButton.prominentBackground#F16B68aa
  • extensionButton.prominentForeground#120707
  • extensionButton.prominentHoverBackground#F16B68
  • focusBorder#3A0909
  • foreground#EFC2C2
  • gitDecoration.addedResourceForeground#1BB11B
  • gitDecoration.conflictingResourceForeground#E5A667
  • gitDecoration.deletedResourceForeground#CE7D7D
  • gitDecoration.ignoredResourceForeground#6F6A6A
  • gitDecoration.modifiedResourceForeground#66A6E5
  • gitDecoration.renamedResourceForeground#EA6967
  • gitDecoration.untrackedResourceForeground#F0C7C6
  • input.background#0B1E1B
  • input.border#6F6A6A
  • input.foreground#EFC2C2
  • input.placeholderForeground#6F6A6A
  • inputOption.activeBorder#EA6967
  • inputValidation.errorBorder#CE7D7D
  • inputValidation.infoBorder#66A6E5
  • inputValidation.warningBorder#E5A667
  • list.activeSelectionBackground#F16B6870
  • list.activeSelectionForeground#EFC2C2
  • list.dropBackground#15090A
  • list.dropBetweenBackground#3A0909
  • list.errorForeground#CE7D7D
  • list.focusBackground#F16B6850
  • list.focusForeground#EFC2C2
  • list.highlightForeground#EA6967
  • list.hoverBackground#F16B6820
  • list.hoverForeground#EFC2C2
  • list.inactiveFocusBackground#120807
  • list.inactiveSelectionBackground#F16B6860
  • list.inactiveSelectionForeground#F0C7C6
  • list.warningForeground#E5A667
  • listFilterWidget.background#15090A
  • listFilterWidget.noMatchesOutline#CE7D7D
  • listFilterWidget.outline#3A0909
  • merge.border#3A0909
  • merge.currentContentBackground#66A6E520
  • merge.currentHeaderBackground#66A6E540
  • merge.incomingContentBackground#1BB11B20
  • merge.incomingHeaderBackground#1BB11B40
  • mergeEditor.change.background#E5A667
  • notificationLink.foreground#66A6E5
  • notifications.background#120807
  • notifications.border#3A0909
  • notifications.foreground#EFC2C2
  • notificationsErrorIcon.foreground#CE7D7D
  • notificationsInfoIcon.foreground#66A6E5
  • notificationsWarningIcon.foreground#E5A667
  • panel.background#120807
  • panel.border#EA6967
  • panelInput.border#6F6A6A
  • panelTitle.activeBorder#EA6967
  • panelTitle.activeForeground#EFC2C2
  • panelTitle.inactiveForeground#6F6A6A
  • peekView.border#F16B68
  • peekViewEditor.background#0B1E1B
  • peekViewEditor.matchHighlightBackground#54212270
  • peekViewResult.background#0B1E1B
  • peekViewResult.fileForeground#EFC2C2
  • peekViewResult.lineForeground#EFC2C2
  • peekViewResult.matchHighlightBackground#1D0C0C70
  • peekViewResult.selectionBackground#120807
  • peekViewResult.selectionForeground#EFC2C2
  • peekViewTitle.background#0B1E1B
  • peekViewTitleDescription.foreground#F0C7C6
  • peekViewTitleLabel.foreground#EFC2C2
  • pickerGroup.border#F16B68
  • pickerGroup.foreground#BAE3DC
  • progressBar.background#EA6967
  • selection.background#F16B6850
  • settings.checkboxBackground#0B1E1B
  • settings.checkboxBorder#3A0909
  • settings.checkboxForeground#EFC2C2
  • settings.dropdownBackground#0B1E1B
  • settings.dropdownBorder#3A0909
  • settings.dropdownForeground#EFC2C2
  • settings.focusedRowBackground#1D0C0C70
  • settings.focusedRowBorder#6F6A6A
  • settings.headerBorder#3A0909
  • settings.headerForeground#EFC2C2
  • settings.inactiveSelectedItemBorder#6F6A6A
  • settings.modifiedItemIndicator#E5A667
  • settings.numberInputBackground#0B1E1B
  • settings.numberInputBorder#6F6A6A
  • settings.numberInputForeground#EFC2C2
  • settings.rowHoverBackground#1D0C0C70
  • settings.settingsHeaderHoverForeground#EFC2C2
  • settings.textInputBackground#0B1E1B
  • settings.textInputBorder#6F6A6A
  • settings.textInputForeground#EFC2C2
  • sideBar.background#0B1E1B
  • sideBarActivityBarTop.border#3A0909
  • sideBarSectionHeader.background#120807
  • sideBarSectionHeader.border#3A0909
  • sideBarStickyScroll.background#0B1E1B
  • sideBarStickyScroll.border#3A0909
  • sideBarStickyScroll.shadow#3A0909
  • sideBarTitle.background#0B1E1B
  • sideBarTitle.foreground#EFC2C2
  • statusBar.background#F16B68
  • statusBar.debuggingBackground#E5A667
  • statusBar.debuggingForeground#120707
  • statusBar.foreground#120707
  • statusBar.noFolderBackground#F0C7C6
  • statusBar.noFolderForeground#120707
  • statusBarItem.activeBackground#F16B68aa
  • statusBarItem.errorBackground#CE7D7D
  • statusBarItem.errorForeground#120707
  • statusBarItem.errorHoverBackground#CE7D7Daa
  • statusBarItem.hoverBackground#F16B68aa
  • statusBarItem.prominentBackground#F16B68aa
  • statusBarItem.prominentForeground#120707
  • statusBarItem.prominentHoverBackground#F16B68aa
  • statusBarItem.prominentHoverForeground#120707
  • statusBarItem.remoteBackground#EA6967
  • statusBarItem.remoteForeground#120707
  • statusBarItem.remoteHoverBackground#EA6967aa
  • statusBarItem.warningBackground#E5A667
  • statusBarItem.warningForeground#120707
  • statusBarItem.warningHoverBackground#E5A667aa
  • tab.activeBackground#120807
  • tab.activeBorderTop#EA6967
  • tab.activeForeground#EFC2C2
  • tab.border#3A0909
  • tab.hoverBackground#12080780
  • tab.hoverForeground#EFC2C2
  • tab.inactiveBackground#0B1E1B
  • tab.inactiveForeground#6F6A6A
  • tab.selectedBackground#1D0C0C70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#927ECE
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#B4A4E6
  • terminal.ansiBrightCyan#D2F4F6
  • terminal.ansiBrightGreen#C7E9B3
  • terminal.ansiBrightMagenta#EF89DB
  • terminal.ansiBrightRed#FA825E
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#E7A660
  • terminal.ansiCyan#4DADB2
  • terminal.ansiGreen#6E9357
  • terminal.ansiMagenta#D556BB
  • terminal.ansiRed#E25D35
  • terminal.ansiWhite#F5F5F2
  • terminal.ansiYellow#AD7D48
  • terminal.background#0B1E1B
  • terminal.border#3A0909
  • terminal.foreground#EFC2C2
  • terminal.inactiveSelectionBackground#45161770
  • terminal.selectionBackground#45161770
  • textBlockQuote.background#15090A
  • textBlockQuote.border#3A0909
  • textCodeBlock.background#15090A
  • textLink.activeForeground#66A6E5
  • textLink.foreground#F16B68
  • textPreformat.background#15090A
  • textPreformat.foreground#EFC2C2
  • textSeparator.foreground#EFC2C2
  • titleBar.activeBackground#120807
  • titleBar.activeForeground#EFC2C2
  • titleBar.inactiveBackground#120807
  • titleBar.inactiveForeground#6F6A6A
  • widget.border#3A0909

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#EFC2C2
meta.diff, meta.diff.header#6F6A6A
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F2CECF
emphasisitalic
strongbold
invalid#CE7D7Dstrikethrough
invalid.deprecated#EFC2C2underline italic
header#F2CECF
source.ini, source.ignore, source#F0C7C6
markup.inserted#F2CECF
markup.deleted#CE7D7D
markup.changed#66A6E5
markup.error#CE7D7D
markup.underlineunderline
markup.bold#E5A667bold
markup.heading#EA6967bold
markup.italic#F0C7C6italic
markup.inline.raw, markup.raw.restructuredtext#EA6967
markup.underline.link, markup.underline.link.image, markup.quote#66A6E5
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#F16B68
meta.separator.markdown#EA6967
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E9B4B5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#E5A667
entity.name.class, entity.name.type.class, entity.other.inherited-class#F16B68
entity.name.tag, entity.other.attribute-name.parent-selector#EEC9C8
entity.other.attribute-name#F16B68
entity.name.function, meta.function-call, meta.method-call, meta.method#EA6967
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EBD1D1
support#9FD5CC
entity.name, variable.other.key#EA6967
entity.name.type#E5BDBE
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DEBFAA
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#ECC0C1
entity.other.attribute-name.class.css#EA6967
storage.class, storage.type#F16B68
storage.modifier#ECC1C1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6F6A6A
constant#F2CECF
constant.other.color#DEA0A1
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E2ACAD
constant.other.date, constant.other.timestamp#BAE8E0
keyword.operator#EED8D9
keyword.other.unit#E7A3A1
keyword.control, keyword.other.template, keyword.other.substitution#E5A4A4
keyword.other.this#F2CECF
keyword.control.import, keyword.control.from#DDA79C
keyword.control.new, keyword.operator.new, keyword.other.important.css#F16B68
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#DFC3B9
meta.attribute-selector.scss#EBC7C6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EEC9C8
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EFCCC2
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#F16B68
support.constant.property-value.css, constant.numeric.css#F0C7C6
keyword.control.at-rule.apply.tailwind#DDA79C
keyword.control.at-rule.tailwind.tailwind#E5A4A4
keyword.control.at-rule.layer.tailwind#DFC3B9
meta.selector#EBC7C6
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F7EEEE
punctuation.definition.constant.restructuredtext#F2CECF
string.quoted.docstring.multi#EA6967
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#F7EEEE
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EFCCC2
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#F5F5F2
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#FCF9F8
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#F5E2E0
punctuation.definition.directive.restructuredtext#F2CECF
variable#E5BEBD
variable.other.alias.yaml#E5BEBDunderline
variable.language, variable.parameter.function.language.special#E2ACAD
variable.other.constant#F1D8C5
support.variable#E5BEBD
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#F0D6C2
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#E5A667
support.function, support.type.property-name#EBD6D1
storage#EAC8C8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#AD7D48
punctuation.definition.group.capture.regexp#E25D35
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E25D35
punctuation.definition.character-class.regexp#E7A660
punctuation.definition.group.regexp#B4A4E6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E25D35
meta.assertion.look-ahead.regexp#B4A4E6
source.json meta.structure.dictionary.json support.type.property-name.json#EA6967
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F16B68
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#66A6E5
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#E5A667
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#CE7D7D
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#1BB11B
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#EA6967
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#F16B68
token.info-token#66A6E5
token.warn-token#E5A667
token.error-token#CE7D7D
token.debug-token#E5A667
RLabs Themes Collection by RLabs Inc. - VS Code Theme