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#CBCED870
  • activityBar.activeBorder#541817
  • activityBar.background#fff6d8
  • activityBar.foreground#281A1A
  • activityBar.inactiveForeground#BCC5DF
  • activityBarBadge.background#AE3837
  • activityBarBadge.foreground#281A1A
  • activityBarTop.foreground#281A1A
  • badge.background#AE3837
  • badge.foreground#281A1A
  • breadcrumb.activeForeground#281A1A
  • breadcrumb.activeSelectionForeground#281A1A
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#281A1A
  • breadcrumb.foreground#BCC5DF
  • breadcrumbPicker.background#fff6d8
  • button.background#AE3837db
  • button.foreground#281A1A
  • button.hoverBackground#AE3837
  • button.secondaryBackground#541817db
  • button.secondaryForeground#281A1A
  • button.secondaryHoverBackground#541817
  • checkbox.background#fffae2
  • checkbox.foreground#281A1A
  • debugToolBar.background#3D73A9
  • debugToolBar.foreground#281A1A
  • descriptionForeground#101219
  • diffEditor.diagonalFill#3D73A9
  • diffEditor.insertedLineBackground#3D73A940
  • diffEditor.insertedTextBackground#3D73A950
  • diffEditor.insertedTextBorder#3D73A9
  • diffEditor.removedLineBackground#8C272740
  • diffEditor.removedTextBackground#8C272750
  • diffEditor.removedTextBorder#8C2727
  • diffEditorGutter.insertedLineBackground#3D73A9
  • diffEditorGutter.removedLineBackground#8C2727
  • disabledForeground#BCC5DF
  • dropdown.background#cdc7bb
  • dropdown.border#CABFBF
  • dropdown.foreground#281A1A
  • editor.background#fffae2
  • editor.findMatchBackground#C3949370
  • editor.findMatchForeground#281A1A
  • editor.findMatchHighlightBackground#CBCED870
  • editor.findMatchHighlightForeground#281A1A
  • editor.findRangeHighlightBackground#AAB1C570
  • editor.foldBackground#CBCED870
  • editor.foldPlaceholderForeground#281A1A
  • editor.foreground#281A1A
  • editor.hoverHighlightBackground#CBCED870
  • editor.inactiveSelectionBackground#AAB1C570
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#101219
  • editor.rangeHighlightBackground#CBCED870
  • editor.selectionBackground#AAB1C570
  • editor.selectionForeground#281A1A
  • editor.selectionHighlightBackground#AAB1C570
  • editor.snippetFinalTabstopHighlightBackground#CBCED870
  • editor.snippetTabstopHighlightBackground#CBCED870
  • editor.symbolHighlightBackground#CBCED870
  • editor.wordHighlightBackground#CBCED870
  • editor.wordHighlightStrongBackground#CBCED850
  • editor.wordHighlightTextBackground#CBCED870
  • editorCodeLens.foreground#BCC5DF
  • editorCursor.background#CBCED870
  • editorCursor.foreground#541817
  • editorError.foreground#8C2727
  • editorGroup.border#CABFBF
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#CABFBF
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#255B25
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#BCC5DF
  • editorGutter.deletedBackground#8C2727
  • editorGutter.modifiedBackground#3D73A9
  • editorHint.foreground#255B25
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#CABFBF
  • editorHoverWidget.foreground#281A1A
  • editorHoverWidget.highlightForeground#281A1A
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#541817
  • editorIndentGuide.background1#CBCED870
  • editorInfo.foreground#3D73A9
  • editorLineNumber.activeForeground#541817
  • editorLineNumber.dimmedForeground#BCC5DF90
  • editorLineNumber.foreground#BCC5DF
  • editorLink.activeForeground#3D73A9
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#CBCED870
  • editorMultiCursor.primary.foreground#541817
  • editorMultiCursor.secondary.background#CBCED870
  • editorMultiCursor.secondary.foreground#281A1A
  • editorOverviewRuler.addedForeground#255B25
  • editorOverviewRuler.border#CABFBF
  • editorOverviewRuler.commentForeground#BCC5DF
  • editorOverviewRuler.commonContentForeground#281A1A
  • editorOverviewRuler.currentContentForeground#3D73A9
  • editorOverviewRuler.deletedForeground#8C2727
  • editorOverviewRuler.errorForeground#8C2727
  • editorOverviewRuler.findMatchForeground#281A1A
  • editorOverviewRuler.incomingContentForeground#255B25
  • editorOverviewRuler.infoForeground#3D73A9
  • editorOverviewRuler.modifiedForeground#3D73A9
  • editorOverviewRuler.rangeHighlightForeground#CBCED870
  • editorOverviewRuler.selectionHighlightForeground#AAB1C570
  • editorOverviewRuler.warningForeground#87592B
  • editorOverviewRuler.wordHighlightForeground#CBCED870
  • editorOverviewRuler.wordHighlightStrongForeground#CBCED870
  • editorRuler.foreground#CBCED870
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#CABFBF
  • editorSuggestWidget.focusHighlightForeground#281A1A
  • editorSuggestWidget.foreground#BCC5DF
  • editorSuggestWidget.highlightForeground#281A1A
  • editorSuggestWidget.selectedBackground#AE383780
  • editorSuggestWidget.selectedForeground#281A1A
  • editorUnicodeHighlight.background#CBCED870
  • editorWarning.foreground#87592B
  • editorWhitespace.foreground#CBCED870
  • editorWidget.background#fffae2
  • editorWidget.border#CABFBF
  • editorWidget.foreground#281A1A
  • errorForeground#8C2727
  • extensionButton.prominentBackground#AE3837aa
  • extensionButton.prominentForeground#281A1A
  • extensionButton.prominentHoverBackground#AE3837
  • focusBorder#CABFBF
  • foreground#281A1A
  • gitDecoration.addedResourceForeground#255B25
  • gitDecoration.conflictingResourceForeground#87592B
  • gitDecoration.deletedResourceForeground#8C2727
  • gitDecoration.ignoredResourceForeground#BCC5DF
  • gitDecoration.modifiedResourceForeground#3D73A9
  • gitDecoration.renamedResourceForeground#541817
  • gitDecoration.untrackedResourceForeground#101219
  • input.background#fffae2
  • input.border#BCC5DF
  • input.foreground#281A1A
  • input.placeholderForeground#BCC5DF
  • inputOption.activeBorder#541817
  • inputValidation.errorBorder#8C2727
  • inputValidation.infoBorder#3D73A9
  • inputValidation.warningBorder#87592B
  • list.activeSelectionBackground#AE383770
  • list.activeSelectionForeground#281A1A
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#CABFBF
  • list.errorForeground#8C2727
  • list.focusBackground#AE383750
  • list.focusForeground#281A1A
  • list.highlightForeground#541817
  • list.hoverBackground#AE383720
  • list.hoverForeground#281A1A
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#AE383760
  • list.inactiveSelectionForeground#101219
  • list.warningForeground#87592B
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#8C2727
  • listFilterWidget.outline#CABFBF
  • merge.border#CABFBF
  • merge.currentContentBackground#3D73A920
  • merge.currentHeaderBackground#3D73A940
  • merge.incomingContentBackground#255B2520
  • merge.incomingHeaderBackground#255B2540
  • mergeEditor.change.background#87592B
  • notificationLink.foreground#3D73A9
  • notifications.background#fff6d8
  • notifications.border#CABFBF
  • notifications.foreground#281A1A
  • notificationsErrorIcon.foreground#8C2727
  • notificationsInfoIcon.foreground#3D73A9
  • notificationsWarningIcon.foreground#87592B
  • panel.background#fff6d8
  • panel.border#541817
  • panelInput.border#BCC5DF
  • panelTitle.activeBorder#541817
  • panelTitle.activeForeground#281A1A
  • panelTitle.inactiveForeground#BCC5DF
  • peekView.border#AE3837
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#C3949370
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#281A1A
  • peekViewResult.lineForeground#281A1A
  • peekViewResult.matchHighlightBackground#CBCED870
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#281A1A
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#101219
  • peekViewTitleLabel.foreground#281A1A
  • pickerGroup.border#AE3837
  • pickerGroup.foreground#622324
  • progressBar.background#541817
  • selection.background#AE383750
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#CABFBF
  • settings.checkboxForeground#281A1A
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#CABFBF
  • settings.dropdownForeground#281A1A
  • settings.focusedRowBackground#CBCED870
  • settings.focusedRowBorder#BCC5DF
  • settings.headerBorder#CABFBF
  • settings.headerForeground#281A1A
  • settings.inactiveSelectedItemBorder#BCC5DF
  • settings.modifiedItemIndicator#87592B
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#BCC5DF
  • settings.numberInputForeground#281A1A
  • settings.rowHoverBackground#CBCED870
  • settings.settingsHeaderHoverForeground#281A1A
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#BCC5DF
  • settings.textInputForeground#281A1A
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#CABFBF
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#CABFBF
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#CABFBF
  • sideBarStickyScroll.shadow#CABFBF
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#281A1A
  • statusBar.background#AE3837
  • statusBar.debuggingBackground#87592B
  • statusBar.debuggingForeground#281A1A
  • statusBar.foreground#281A1A
  • statusBar.noFolderBackground#101219
  • statusBar.noFolderForeground#D0D1D2
  • statusBarItem.activeBackground#AE3837aa
  • statusBarItem.errorBackground#8C2727
  • statusBarItem.errorForeground#281A1A
  • statusBarItem.errorHoverBackground#8C2727aa
  • statusBarItem.hoverBackground#AE3837aa
  • statusBarItem.prominentBackground#AE3837aa
  • statusBarItem.prominentForeground#D0D1D2
  • statusBarItem.prominentHoverBackground#AE3837aa
  • statusBarItem.prominentHoverForeground#D0D1D2
  • statusBarItem.remoteBackground#541817
  • statusBarItem.remoteForeground#281A1A
  • statusBarItem.remoteHoverBackground#541817aa
  • statusBarItem.warningBackground#87592B
  • statusBarItem.warningForeground#281A1A
  • statusBarItem.warningHoverBackground#87592Baa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#541817
  • tab.activeForeground#281A1A
  • tab.border#CABFBF
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#281A1A
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#BCC5DF
  • tab.selectedBackground#CBCED870
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3E2473
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#5A13EC
  • terminal.ansiBrightCyan#00A06C
  • terminal.ansiBrightGreen#4BA100
  • terminal.ansiBrightMagenta#C273FF
  • terminal.ansiBrightRed#FF564F
  • terminal.ansiBrightWhite#868600
  • terminal.ansiBrightYellow#7D8600
  • terminal.ansiCyan#107E5B
  • terminal.ansiGreen#4CA000
  • terminal.ansiMagenta#7C10D5
  • terminal.ansiRed#FF625B
  • terminal.ansiWhite#DB6B00
  • terminal.ansiYellow#6C7220
  • terminal.background#fffae2
  • terminal.border#CABFBF
  • terminal.foreground#281A1A
  • terminal.inactiveSelectionBackground#AAB1C570
  • terminal.selectionBackground#AAB1C570
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#CABFBF
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#3D73A9
  • textLink.foreground#AE3837
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#281A1A
  • textSeparator.foreground#281A1A
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#281A1A
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#BCC5DF
  • widget.border#CABFBF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#281A1A
meta.diff, meta.diff.header#BCC5DF
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#6F2525
emphasisitalic
strongbold
invalid#8C2727strikethrough
invalid.deprecated#281A1Aunderline italic
header#6F2525
source.ini, source.ignore, source#101219
markup.inserted#6F2525
markup.deleted#8C2727
markup.changed#3D73A9
markup.error#8C2727
markup.underlineunderline
markup.bold#87592Bbold
markup.heading#541817bold
markup.italic#101219italic
markup.inline.raw, markup.raw.restructuredtext#541817
markup.underline.link, markup.underline.link.image, markup.quote#3D73A9
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#AE3837
meta.separator.markdown#541817
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#612426
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#87592B
entity.name.class, entity.name.type.class, entity.other.inherited-class#AE3837
entity.name.tag, entity.other.attribute-name.parent-selector#782B2B
entity.other.attribute-name#AE3837
entity.name.function, meta.function-call, meta.method-call, meta.method#541817
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#582728
support#5C1F1F
entity.name, variable.other.key#541817
entity.name.type#672728
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#503520
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#263359
entity.other.attribute-name.class.css#541817
storage.class, storage.type#AE3837
storage.modifier#2A3A6A
comment, punctuation.definition.comment, unused.comment, wildcard.comment#BCC5DF
constant#6F2525
constant.other.color#4F1C1C
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#4D1A19
constant.other.date, constant.other.timestamp#2A3C6F
keyword.operator#643537
keyword.other.unit#5B2020
keyword.control, keyword.other.template, keyword.other.substitution#131D39
keyword.other.this#6F2525
keyword.control.import, keyword.control.from#1C204A
keyword.control.new, keyword.operator.new, keyword.other.important.css#AE3837
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#231F56
meta.attribute-selector.scss#612426
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#782B2B
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#633227
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#AE3837
support.constant.property-value.css, constant.numeric.css#101219
keyword.control.at-rule.apply.tailwind#1C204A
keyword.control.at-rule.tailwind.tailwind#131D39
keyword.control.at-rule.layer.tailwind#231F56
meta.selector#612426
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#604343
punctuation.definition.constant.restructuredtext#6F2525
string.quoted.docstring.multi#541817
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#604343
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#633227
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#DB6B00
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#755D52
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#5B453E
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#71544C
punctuation.definition.directive.restructuredtext#6F2525
variable#582728
variable.other.alias.yaml#582728underline
variable.language, variable.parameter.function.language.special#4D1A19
variable.other.constant#68392B
support.variable#582728
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#6D4332
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#87592B
support.function, support.type.property-name#804B33
storage#273767
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#6C7220
punctuation.definition.group.capture.regexp#FF625B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF625B
punctuation.definition.character-class.regexp#7D8600
punctuation.definition.group.regexp#5A13EC
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF625B
meta.assertion.look-ahead.regexp#5A13EC
source.json meta.structure.dictionary.json support.type.property-name.json#541817
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AE3837
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#3D73A9
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#87592B
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#8C2727
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#255B25
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#541817
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#AE3837
token.info-token#3D73A9
token.warn-token#87592B
token.error-token#8C2727
token.debug-token#87592B
RLabs Themes Collection by RLabs Inc. - VS Code Theme