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#353B2170
  • activityBar.activeBorder#A9B67C
  • activityBar.background#1a2324
  • activityBar.foreground#CCD7A8
  • activityBar.inactiveForeground#7C7273
  • activityBarBadge.background#FF6F7A
  • activityBarBadge.foreground#2C1618
  • activityBarTop.foreground#CCD7A8
  • badge.background#FF6F7A
  • badge.foreground#2C1618
  • breadcrumb.activeForeground#CCD7A8
  • breadcrumb.activeSelectionForeground#CCD7A8
  • breadcrumb.background#1a2324
  • breadcrumb.focusForeground#CCD7A8
  • breadcrumb.foreground#7C7273
  • breadcrumbPicker.background#1a2324
  • button.background#FF6F7Adb
  • button.foreground#2C1618
  • button.hoverBackground#FF6F7A
  • button.secondaryBackground#A9B67Cdb
  • button.secondaryForeground#2C1618
  • button.secondaryHoverBackground#A9B67C
  • checkbox.background#1C292B
  • checkbox.foreground#CCD7A8
  • debugToolBar.background#8CA6C0
  • debugToolBar.foreground#2C1618
  • descriptionForeground#CF969A
  • diffEditor.diagonalFill#8CA6C0
  • diffEditor.insertedLineBackground#8CA6C040
  • diffEditor.insertedTextBackground#8CA6C050
  • diffEditor.insertedTextBorder#8CA6C0
  • diffEditor.removedLineBackground#B09C9C40
  • diffEditor.removedTextBackground#B09C9C50
  • diffEditor.removedTextBorder#B09C9C
  • diffEditorGutter.insertedLineBackground#8CA6C0
  • diffEditorGutter.removedLineBackground#B09C9C
  • disabledForeground#7C7273
  • dropdown.background#192121
  • dropdown.border#6b5d5e
  • dropdown.foreground#CCD7A8
  • editor.background#1C292B
  • editor.findMatchBackground#326D7670
  • editor.findMatchForeground#CCD7A8
  • editor.findMatchHighlightBackground#353B2170
  • editor.findMatchHighlightForeground#CCD7A8
  • editor.findRangeHighlightBackground#59363870
  • editor.foldBackground#353B2170
  • editor.foldPlaceholderForeground#CCD7A8
  • editor.foreground#CCD7A8
  • editor.hoverHighlightBackground#353B2170
  • editor.inactiveSelectionBackground#59363870
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CF969A
  • editor.rangeHighlightBackground#353B2170
  • editor.selectionBackground#59363870
  • editor.selectionForeground#CCD7A8
  • editor.selectionHighlightBackground#59363870
  • editor.snippetFinalTabstopHighlightBackground#353B2170
  • editor.snippetTabstopHighlightBackground#353B2170
  • editor.symbolHighlightBackground#353B2170
  • editor.wordHighlightBackground#353B2170
  • editor.wordHighlightStrongBackground#353B2150
  • editor.wordHighlightTextBackground#353B2170
  • editorCodeLens.foreground#7C7273
  • editorCursor.background#353B2170
  • editorCursor.foreground#A9B67C
  • editorError.foreground#B09C9C
  • editorGroup.border#6b5d5e
  • editorGroup.dropBackground#192121
  • editorGroup.emptyBackground#1C292B
  • editorGroupHeader.border#6b5d5e
  • editorGroupHeader.tabsBackground#1C292B
  • editorGutter.addedBackground#01BD01
  • editorGutter.background#1C292B
  • editorGutter.commentRangeForeground#7C7273
  • editorGutter.deletedBackground#B09C9C
  • editorGutter.modifiedBackground#8CA6C0
  • editorHint.foreground#01BD01
  • editorHoverWidget.background#1C292B
  • editorHoverWidget.border#6b5d5e
  • editorHoverWidget.foreground#CCD7A8
  • editorHoverWidget.highlightForeground#CCD7A8
  • editorHoverWidget.statusBarBackground#1C292B
  • editorIndentGuide.activeBackground1#A9B67C
  • editorIndentGuide.background1#353B2170
  • editorInfo.foreground#8CA6C0
  • editorLineNumber.activeForeground#A9B67C
  • editorLineNumber.dimmedForeground#7C727390
  • editorLineNumber.foreground#7C7273
  • editorLink.activeForeground#8CA6C0
  • editorMarkerNavigation.background#1a2324
  • editorMarkerNavigationError.background#1a2324
  • editorMarkerNavigationWarning.background#1a2324
  • editorMultiCursor.primary.background#353B2170
  • editorMultiCursor.primary.foreground#A9B67C
  • editorMultiCursor.secondary.background#353B2170
  • editorMultiCursor.secondary.foreground#CCD7A8
  • editorOverviewRuler.addedForeground#01BD01
  • editorOverviewRuler.border#6b5d5e
  • editorOverviewRuler.commentForeground#7C7273
  • editorOverviewRuler.commonContentForeground#CCD7A8
  • editorOverviewRuler.currentContentForeground#8CA6C0
  • editorOverviewRuler.deletedForeground#B09C9C
  • editorOverviewRuler.errorForeground#B09C9C
  • editorOverviewRuler.findMatchForeground#CCD7A8
  • editorOverviewRuler.incomingContentForeground#01BD01
  • editorOverviewRuler.infoForeground#8CA6C0
  • editorOverviewRuler.modifiedForeground#8CA6C0
  • editorOverviewRuler.rangeHighlightForeground#353B2170
  • editorOverviewRuler.selectionHighlightForeground#59363870
  • editorOverviewRuler.warningForeground#C0A68B
  • editorOverviewRuler.wordHighlightForeground#353B2170
  • editorOverviewRuler.wordHighlightStrongForeground#353B2170
  • editorRuler.foreground#353B2170
  • editorSuggestWidget.background#1C292B
  • editorSuggestWidget.border#6b5d5e
  • editorSuggestWidget.focusHighlightForeground#CCD7A8
  • editorSuggestWidget.foreground#7C7273
  • editorSuggestWidget.highlightForeground#CCD7A8
  • editorSuggestWidget.selectedBackground#FF6F7A80
  • editorSuggestWidget.selectedForeground#CCD7A8
  • editorUnicodeHighlight.background#353B2170
  • editorWarning.foreground#C0A68B
  • editorWhitespace.foreground#353B2170
  • editorWidget.background#1C292B
  • editorWidget.border#6b5d5e
  • editorWidget.foreground#CCD7A8
  • errorForeground#B09C9C
  • extensionButton.prominentBackground#FF6F7Aaa
  • extensionButton.prominentForeground#2C1618
  • extensionButton.prominentHoverBackground#FF6F7A
  • focusBorder#6b5d5e
  • foreground#CCD7A8
  • gitDecoration.addedResourceForeground#01BD01
  • gitDecoration.conflictingResourceForeground#C0A68B
  • gitDecoration.deletedResourceForeground#B09C9C
  • gitDecoration.ignoredResourceForeground#7C7273
  • gitDecoration.modifiedResourceForeground#8CA6C0
  • gitDecoration.renamedResourceForeground#A9B67C
  • gitDecoration.untrackedResourceForeground#CF969A
  • input.background#1C292B
  • input.border#7C7273
  • input.foreground#CCD7A8
  • input.placeholderForeground#7C7273
  • inputOption.activeBorder#A9B67C
  • inputValidation.errorBorder#B09C9C
  • inputValidation.infoBorder#8CA6C0
  • inputValidation.warningBorder#C0A68B
  • list.activeSelectionBackground#FF6F7A70
  • list.activeSelectionForeground#CCD7A8
  • list.dropBackground#192121
  • list.dropBetweenBackground#6b5d5e
  • list.errorForeground#B09C9C
  • list.focusBackground#FF6F7A50
  • list.focusForeground#CCD7A8
  • list.highlightForeground#A9B67C
  • list.hoverBackground#FF6F7A20
  • list.hoverForeground#CCD7A8
  • list.inactiveFocusBackground#1a2324
  • list.inactiveSelectionBackground#FF6F7A60
  • list.inactiveSelectionForeground#CF969A
  • list.warningForeground#C0A68B
  • listFilterWidget.background#192121
  • listFilterWidget.noMatchesOutline#B09C9C
  • listFilterWidget.outline#6b5d5e
  • merge.border#6b5d5e
  • merge.currentContentBackground#8CA6C020
  • merge.currentHeaderBackground#8CA6C040
  • merge.incomingContentBackground#01BD0120
  • merge.incomingHeaderBackground#01BD0140
  • mergeEditor.change.background#C0A68B
  • notificationLink.foreground#8CA6C0
  • notifications.background#1a2324
  • notifications.border#6b5d5e
  • notifications.foreground#CCD7A8
  • notificationsErrorIcon.foreground#B09C9C
  • notificationsInfoIcon.foreground#8CA6C0
  • notificationsWarningIcon.foreground#C0A68B
  • panel.background#1a2324
  • panel.border#A9B67C
  • panelInput.border#7C7273
  • panelTitle.activeBorder#A9B67C
  • panelTitle.activeForeground#CCD7A8
  • panelTitle.inactiveForeground#7C7273
  • peekView.border#FF6F7A
  • peekViewEditor.background#1C292B
  • peekViewEditor.matchHighlightBackground#326D7670
  • peekViewResult.background#1C292B
  • peekViewResult.fileForeground#CCD7A8
  • peekViewResult.lineForeground#CCD7A8
  • peekViewResult.matchHighlightBackground#353B2170
  • peekViewResult.selectionBackground#1a2324
  • peekViewResult.selectionForeground#CCD7A8
  • peekViewTitle.background#1C292B
  • peekViewTitleDescription.foreground#CF969A
  • peekViewTitleLabel.foreground#CCD7A8
  • pickerGroup.border#FF6F7A
  • pickerGroup.foreground#E8C0C3
  • progressBar.background#A9B67C
  • selection.background#FF6F7A50
  • settings.checkboxBackground#1C292B
  • settings.checkboxBorder#6b5d5e
  • settings.checkboxForeground#CCD7A8
  • settings.dropdownBackground#1C292B
  • settings.dropdownBorder#6b5d5e
  • settings.dropdownForeground#CCD7A8
  • settings.focusedRowBackground#353B2170
  • settings.focusedRowBorder#7C7273
  • settings.headerBorder#6b5d5e
  • settings.headerForeground#CCD7A8
  • settings.inactiveSelectedItemBorder#7C7273
  • settings.modifiedItemIndicator#C0A68B
  • settings.numberInputBackground#1C292B
  • settings.numberInputBorder#7C7273
  • settings.numberInputForeground#CCD7A8
  • settings.rowHoverBackground#353B2170
  • settings.settingsHeaderHoverForeground#CCD7A8
  • settings.textInputBackground#1C292B
  • settings.textInputBorder#7C7273
  • settings.textInputForeground#CCD7A8
  • sideBar.background#1C292B
  • sideBarActivityBarTop.border#6b5d5e
  • sideBarSectionHeader.background#1a2324
  • sideBarSectionHeader.border#6b5d5e
  • sideBarStickyScroll.background#1C292B
  • sideBarStickyScroll.border#6b5d5e
  • sideBarStickyScroll.shadow#6b5d5e
  • sideBarTitle.background#1C292B
  • sideBarTitle.foreground#CCD7A8
  • statusBar.background#FF6F7A
  • statusBar.debuggingBackground#C0A68B
  • statusBar.debuggingForeground#2C1618
  • statusBar.foreground#2C1618
  • statusBar.noFolderBackground#CF969A
  • statusBar.noFolderForeground#2C1618
  • statusBarItem.activeBackground#FF6F7Aaa
  • statusBarItem.errorBackground#B09C9C
  • statusBarItem.errorForeground#2C1618
  • statusBarItem.errorHoverBackground#B09C9Caa
  • statusBarItem.hoverBackground#FF6F7Aaa
  • statusBarItem.prominentBackground#FF6F7Aaa
  • statusBarItem.prominentForeground#2C1618
  • statusBarItem.prominentHoverBackground#FF6F7Aaa
  • statusBarItem.prominentHoverForeground#2C1618
  • statusBarItem.remoteBackground#A9B67C
  • statusBarItem.remoteForeground#2C1618
  • statusBarItem.remoteHoverBackground#A9B67Caa
  • statusBarItem.warningBackground#C0A68B
  • statusBarItem.warningForeground#2C1618
  • statusBarItem.warningHoverBackground#C0A68Baa
  • tab.activeBackground#1a2324
  • tab.activeBorderTop#A9B67C
  • tab.activeForeground#CCD7A8
  • tab.border#6b5d5e
  • tab.hoverBackground#1a232480
  • tab.hoverForeground#CCD7A8
  • tab.inactiveBackground#1C292B
  • tab.inactiveForeground#7C7273
  • tab.selectedBackground#353B2170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#A886CE
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#EFE5FA
  • terminal.ansiBrightCyan#C2F5E0
  • terminal.ansiBrightGreen#A4FDD0
  • terminal.ansiBrightMagenta#FFE5F3
  • terminal.ansiBrightRed#FDF2E7
  • terminal.ansiBrightWhite#FDFDFD
  • terminal.ansiBrightYellow#FFEED6
  • terminal.ansiCyan#4FC293
  • terminal.ansiGreen#4DD992
  • terminal.ansiMagenta#F191C4
  • terminal.ansiRed#D69C65
  • terminal.ansiWhite#F2F1EE
  • terminal.ansiYellow#EDC281
  • terminal.background#1C292B
  • terminal.border#6b5d5e
  • terminal.foreground#CCD7A8
  • terminal.inactiveSelectionBackground#59363870
  • terminal.selectionBackground#59363870
  • textBlockQuote.background#192121
  • textBlockQuote.border#6b5d5e
  • textCodeBlock.background#192121
  • textLink.activeForeground#8CA6C0
  • textLink.foreground#FF6F7A
  • textPreformat.background#192121
  • textPreformat.foreground#CCD7A8
  • textSeparator.foreground#CCD7A8
  • titleBar.activeBackground#1a2324
  • titleBar.activeForeground#CCD7A8
  • titleBar.inactiveBackground#1a2324
  • titleBar.inactiveForeground#7C7273
  • widget.border#6b5d5e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#CCD7A8
meta.diff, meta.diff.header#7C7273
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E8EFD2
emphasisitalic
strongbold
invalid#B09C9Cstrikethrough
invalid.deprecated#CCD7A8underline italic
header#E8EFD2
source.ini, source.ignore, source#CF969A
markup.inserted#E8EFD2
markup.deleted#B09C9C
markup.changed#8CA6C0
markup.error#B09C9C
markup.underlineunderline
markup.bold#C0A68Bbold
markup.heading#A9B67Cbold
markup.italic#CF969Aitalic
markup.inline.raw, markup.raw.restructuredtext#A9B67C
markup.underline.link, markup.underline.link.image, markup.quote#8CA6C0
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#FF6F7A
meta.separator.markdown#A9B67C
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E6BCBE
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#FF6F7A
entity.name.tag, entity.other.attribute-name.parent-selector#EFD2D5
entity.other.attribute-name#FF6F7A
entity.name.function, meta.function-call, meta.method-call, meta.method#A9B67C
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#ECCACD
support#D1DEA6
entity.name, variable.other.key#A9B67C
entity.name.type#C3E4E9
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#AACBDF
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EDF1DA
entity.other.attribute-name.class.css#A9B67C
storage.class, storage.type#FF6F7A
storage.modifier#E2EAC7
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7C7273
constant#E8EFD2
constant.other.color#A2D4DC
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#D5E0AD
constant.other.date, constant.other.timestamp#E1E9C3
keyword.operator#ECF1DA
keyword.other.unit#D7E2B1
keyword.control, keyword.other.template, keyword.other.substitution#E0ADB1
keyword.other.this#E8EFD2
keyword.control.import, keyword.control.from#DDA6A2
keyword.control.new, keyword.operator.new, keyword.other.important.css#FF6F7A
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#DEB1A6
meta.attribute-selector.scss#DFE8BF
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EFD2D5
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E8C3C0
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#FF6F7A
support.constant.property-value.css, constant.numeric.css#CF969A
keyword.control.at-rule.apply.tailwind#DDA6A2
keyword.control.at-rule.tailwind.tailwind#E0ADB1
keyword.control.at-rule.layer.tailwind#DEB1A6
meta.selector#DFE8BF
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F5EAEB
punctuation.definition.constant.restructuredtext#E8EFD2
string.quoted.docstring.multi#A9B67C
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#F5EAEB
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E8C3C0
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#F2F1EE
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#F7F0EE
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#EDDDD9
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#E8EFD2
variable#E8BFC3
variable.other.alias.yaml#E8BFC3underline
variable.language, variable.parameter.function.language.special#D5E0AD
variable.other.constant#ECD6CB
support.variable#E8BFC3
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#EAD7C8
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#EFD8D2
storage#E3EAC7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#EDC281
punctuation.definition.group.capture.regexp#D69C65
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#D69C65
punctuation.definition.character-class.regexp#FFEED6
punctuation.definition.group.regexp#EFE5FA
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#D69C65
meta.assertion.look-ahead.regexp#EFE5FA
source.json meta.structure.dictionary.json support.type.property-name.json#A9B67C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF6F7A
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#8CA6C0
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#B09C9C
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#01BD01
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#A9B67C
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#FF6F7A
token.info-token#8CA6C0
token.warn-token#C0A68B
token.error-token#B09C9C
token.debug-token#C0A68B
RLabs Themes Collection by RLabs Inc. - VS Code Theme