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#342D2D70
  • activityBar.activeBorder#C56F6D
  • activityBar.background#262222
  • activityBar.foreground#D7D5D5
  • activityBar.inactiveForeground#746F6F
  • activityBarBadge.background#82C9B9
  • activityBarBadge.foreground#292828
  • activityBarTop.foreground#D7D5D5
  • badge.background#82C9B9
  • badge.foreground#292828
  • breadcrumb.activeForeground#D7D5D5
  • breadcrumb.activeSelectionForeground#D7D5D5
  • breadcrumb.background#262222
  • breadcrumb.focusForeground#D7D5D5
  • breadcrumb.foreground#746F6F
  • breadcrumbPicker.background#262222
  • button.background#82C9B9db
  • button.foreground#292828
  • button.hoverBackground#82C9B9
  • button.secondaryBackground#C56F6Ddb
  • button.secondaryForeground#292828
  • button.secondaryHoverBackground#C56F6D
  • checkbox.background#272525
  • checkbox.foreground#D7D5D5
  • debugToolBar.background#9FA6AC
  • debugToolBar.foreground#292828
  • descriptionForeground#BFBABA
  • diffEditor.diagonalFill#9FA6AC
  • diffEditor.insertedLineBackground#9FA6AC40
  • diffEditor.insertedTextBackground#9FA6AC50
  • diffEditor.insertedTextBorder#9FA6AC
  • diffEditor.removedLineBackground#CC7F7F40
  • diffEditor.removedTextBackground#CC7F7F50
  • diffEditor.removedTextBorder#CC7F7F
  • diffEditorGutter.insertedLineBackground#9FA6AC
  • diffEditorGutter.removedLineBackground#CC7F7F
  • disabledForeground#746F6F
  • dropdown.background#473E3E
  • dropdown.border#423939
  • dropdown.foreground#D7D5D5
  • editor.background#272525
  • editor.findMatchBackground#624C4C70
  • editor.findMatchForeground#D7D5D5
  • editor.findMatchHighlightBackground#342D2D70
  • editor.findMatchHighlightForeground#D7D5D5
  • editor.findRangeHighlightBackground#50444470
  • editor.foldBackground#342D2D70
  • editor.foldPlaceholderForeground#D7D5D5
  • editor.foreground#D7D5D5
  • editor.hoverHighlightBackground#342D2D70
  • editor.inactiveSelectionBackground#50444470
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#BFBABA
  • editor.rangeHighlightBackground#342D2D70
  • editor.selectionBackground#50444470
  • editor.selectionForeground#D7D5D5
  • editor.selectionHighlightBackground#50444470
  • editor.snippetFinalTabstopHighlightBackground#342D2D70
  • editor.snippetTabstopHighlightBackground#342D2D70
  • editor.symbolHighlightBackground#342D2D70
  • editor.wordHighlightBackground#342D2D70
  • editor.wordHighlightStrongBackground#342D2D50
  • editor.wordHighlightTextBackground#342D2D70
  • editorCodeLens.foreground#746F6F
  • editorCursor.background#342D2D70
  • editorCursor.foreground#C56F6D
  • editorError.foreground#CC7F7F
  • editorGroup.border#423939
  • editorGroup.dropBackground#473E3E
  • editorGroup.emptyBackground#272525
  • editorGroupHeader.border#423939
  • editorGroupHeader.tabsBackground#272525
  • editorGutter.addedBackground#4F9B4F
  • editorGutter.background#272525
  • editorGutter.commentRangeForeground#746F6F
  • editorGutter.deletedBackground#CC7F7F
  • editorGutter.modifiedBackground#9FA6AC
  • editorHint.foreground#4F9B4F
  • editorHoverWidget.background#272525
  • editorHoverWidget.border#423939
  • editorHoverWidget.foreground#D7D5D5
  • editorHoverWidget.highlightForeground#D7D5D5
  • editorHoverWidget.statusBarBackground#272525
  • editorIndentGuide.activeBackground1#C56F6D
  • editorIndentGuide.background1#342D2D70
  • editorInfo.foreground#9FA6AC
  • editorLineNumber.activeForeground#C56F6D
  • editorLineNumber.dimmedForeground#746F6F90
  • editorLineNumber.foreground#746F6F
  • editorLink.activeForeground#9FA6AC
  • editorMarkerNavigation.background#262222
  • editorMarkerNavigationError.background#262222
  • editorMarkerNavigationWarning.background#262222
  • editorMultiCursor.primary.background#342D2D70
  • editorMultiCursor.primary.foreground#C56F6D
  • editorMultiCursor.secondary.background#342D2D70
  • editorMultiCursor.secondary.foreground#D7D5D5
  • editorOverviewRuler.addedForeground#4F9B4F
  • editorOverviewRuler.border#423939
  • editorOverviewRuler.commentForeground#746F6F
  • editorOverviewRuler.commonContentForeground#D7D5D5
  • editorOverviewRuler.currentContentForeground#9FA6AC
  • editorOverviewRuler.deletedForeground#CC7F7F
  • editorOverviewRuler.errorForeground#CC7F7F
  • editorOverviewRuler.findMatchForeground#D7D5D5
  • editorOverviewRuler.incomingContentForeground#4F9B4F
  • editorOverviewRuler.infoForeground#9FA6AC
  • editorOverviewRuler.modifiedForeground#9FA6AC
  • editorOverviewRuler.rangeHighlightForeground#342D2D70
  • editorOverviewRuler.selectionHighlightForeground#50444470
  • editorOverviewRuler.warningForeground#C9A682
  • editorOverviewRuler.wordHighlightForeground#342D2D70
  • editorOverviewRuler.wordHighlightStrongForeground#342D2D70
  • editorRuler.foreground#342D2D70
  • editorSuggestWidget.background#272525
  • editorSuggestWidget.border#423939
  • editorSuggestWidget.focusHighlightForeground#D7D5D5
  • editorSuggestWidget.foreground#746F6F
  • editorSuggestWidget.highlightForeground#D7D5D5
  • editorSuggestWidget.selectedBackground#82C9B980
  • editorSuggestWidget.selectedForeground#D7D5D5
  • editorUnicodeHighlight.background#342D2D70
  • editorWarning.foreground#C9A682
  • editorWhitespace.foreground#342D2D70
  • editorWidget.background#272525
  • editorWidget.border#423939
  • editorWidget.foreground#D7D5D5
  • errorForeground#CC7F7F
  • extensionButton.prominentBackground#82C9B9aa
  • extensionButton.prominentForeground#292828
  • extensionButton.prominentHoverBackground#82C9B9
  • focusBorder#423939
  • foreground#D7D5D5
  • gitDecoration.addedResourceForeground#4F9B4F
  • gitDecoration.conflictingResourceForeground#C9A682
  • gitDecoration.deletedResourceForeground#CC7F7F
  • gitDecoration.ignoredResourceForeground#746F6F
  • gitDecoration.modifiedResourceForeground#9FA6AC
  • gitDecoration.renamedResourceForeground#C56F6D
  • gitDecoration.untrackedResourceForeground#BFBABA
  • input.background#272525
  • input.border#746F6F
  • input.foreground#D7D5D5
  • input.placeholderForeground#746F6F
  • inputOption.activeBorder#C56F6D
  • inputValidation.errorBorder#CC7F7F
  • inputValidation.infoBorder#9FA6AC
  • inputValidation.warningBorder#C9A682
  • list.activeSelectionBackground#82C9B970
  • list.activeSelectionForeground#D7D5D5
  • list.dropBackground#473E3E
  • list.dropBetweenBackground#423939
  • list.errorForeground#CC7F7F
  • list.focusBackground#82C9B950
  • list.focusForeground#D7D5D5
  • list.highlightForeground#C56F6D
  • list.hoverBackground#82C9B920
  • list.hoverForeground#D7D5D5
  • list.inactiveFocusBackground#262222
  • list.inactiveSelectionBackground#82C9B960
  • list.inactiveSelectionForeground#BFBABA
  • list.warningForeground#C9A682
  • listFilterWidget.background#473E3E
  • listFilterWidget.noMatchesOutline#CC7F7F
  • listFilterWidget.outline#423939
  • merge.border#423939
  • merge.currentContentBackground#9FA6AC20
  • merge.currentHeaderBackground#9FA6AC40
  • merge.incomingContentBackground#4F9B4F20
  • merge.incomingHeaderBackground#4F9B4F40
  • mergeEditor.change.background#C9A682
  • notificationLink.foreground#9FA6AC
  • notifications.background#262222
  • notifications.border#423939
  • notifications.foreground#D7D5D5
  • notificationsErrorIcon.foreground#CC7F7F
  • notificationsInfoIcon.foreground#9FA6AC
  • notificationsWarningIcon.foreground#C9A682
  • panel.background#262222
  • panel.border#C56F6D
  • panelInput.border#746F6F
  • panelTitle.activeBorder#C56F6D
  • panelTitle.activeForeground#D7D5D5
  • panelTitle.inactiveForeground#746F6F
  • peekView.border#82C9B9
  • peekViewEditor.background#272525
  • peekViewEditor.matchHighlightBackground#624C4C70
  • peekViewResult.background#272525
  • peekViewResult.fileForeground#D7D5D5
  • peekViewResult.lineForeground#D7D5D5
  • peekViewResult.matchHighlightBackground#342D2D70
  • peekViewResult.selectionBackground#262222
  • peekViewResult.selectionForeground#D7D5D5
  • peekViewTitle.background#272525
  • peekViewTitleDescription.foreground#BFBABA
  • peekViewTitleLabel.foreground#D7D5D5
  • pickerGroup.border#82C9B9
  • pickerGroup.foreground#E6C3C1
  • progressBar.background#C56F6D
  • selection.background#82C9B950
  • settings.checkboxBackground#272525
  • settings.checkboxBorder#423939
  • settings.checkboxForeground#D7D5D5
  • settings.dropdownBackground#272525
  • settings.dropdownBorder#423939
  • settings.dropdownForeground#D7D5D5
  • settings.focusedRowBackground#342D2D70
  • settings.focusedRowBorder#746F6F
  • settings.headerBorder#423939
  • settings.headerForeground#D7D5D5
  • settings.inactiveSelectedItemBorder#746F6F
  • settings.modifiedItemIndicator#C9A682
  • settings.numberInputBackground#272525
  • settings.numberInputBorder#746F6F
  • settings.numberInputForeground#D7D5D5
  • settings.rowHoverBackground#342D2D70
  • settings.settingsHeaderHoverForeground#D7D5D5
  • settings.textInputBackground#272525
  • settings.textInputBorder#746F6F
  • settings.textInputForeground#D7D5D5
  • sideBar.background#272525
  • sideBarActivityBarTop.border#423939
  • sideBarSectionHeader.background#262222
  • sideBarSectionHeader.border#423939
  • sideBarStickyScroll.background#272525
  • sideBarStickyScroll.border#423939
  • sideBarStickyScroll.shadow#423939
  • sideBarTitle.background#272525
  • sideBarTitle.foreground#D7D5D5
  • statusBar.background#82C9B9
  • statusBar.debuggingBackground#C9A682
  • statusBar.debuggingForeground#292828
  • statusBar.foreground#292828
  • statusBar.noFolderBackground#BFBABA
  • statusBar.noFolderForeground#292828
  • statusBarItem.activeBackground#82C9B9aa
  • statusBarItem.errorBackground#CC7F7F
  • statusBarItem.errorForeground#292828
  • statusBarItem.errorHoverBackground#CC7F7Faa
  • statusBarItem.hoverBackground#82C9B9aa
  • statusBarItem.prominentBackground#82C9B9aa
  • statusBarItem.prominentForeground#292828
  • statusBarItem.prominentHoverBackground#82C9B9aa
  • statusBarItem.prominentHoverForeground#292828
  • statusBarItem.remoteBackground#C56F6D
  • statusBarItem.remoteForeground#292828
  • statusBarItem.remoteHoverBackground#C56F6Daa
  • statusBarItem.warningBackground#C9A682
  • statusBarItem.warningForeground#292828
  • statusBarItem.warningHoverBackground#C9A682aa
  • tab.activeBackground#262222
  • tab.activeBorderTop#C56F6D
  • tab.activeForeground#D7D5D5
  • tab.border#423939
  • tab.hoverBackground#26222280
  • tab.hoverForeground#D7D5D5
  • tab.inactiveBackground#272525
  • tab.inactiveForeground#746F6F
  • tab.selectedBackground#342D2D70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#498EEA
  • terminal.ansiBrightBlack#434343
  • terminal.ansiBrightBlue#A6C5EE
  • terminal.ansiBrightCyan#B9D7F0
  • terminal.ansiBrightGreen#E7FCDE
  • terminal.ansiBrightMagenta#E6B2F6
  • terminal.ansiBrightRed#FFA0CD
  • terminal.ansiBrightWhite#FEFEFD
  • terminal.ansiBrightYellow#F4D8B4
  • terminal.ansiCyan#4191D2
  • terminal.ansiGreen#9AD77D
  • terminal.ansiMagenta#CC63ED
  • terminal.ansiRed#E55A9D
  • terminal.ansiWhite#F6F6F2
  • terminal.ansiYellow#C29256
  • terminal.background#272525
  • terminal.border#423939
  • terminal.foreground#D7D5D5
  • terminal.inactiveSelectionBackground#50444470
  • terminal.selectionBackground#50444470
  • textBlockQuote.background#473E3E
  • textBlockQuote.border#423939
  • textCodeBlock.background#473E3E
  • textLink.activeForeground#9FA6AC
  • textLink.foreground#82C9B9
  • textPreformat.background#473E3E
  • textPreformat.foreground#D7D5D5
  • textSeparator.foreground#D7D5D5
  • titleBar.activeBackground#262222
  • titleBar.activeForeground#D7D5D5
  • titleBar.inactiveBackground#262222
  • titleBar.inactiveForeground#746F6F
  • widget.border#423939

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D7D5D5
meta.diff, meta.diff.header#746F6F
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#ECD2D0
emphasisitalic
strongbold
invalid#CC7F7Fstrikethrough
invalid.deprecated#D7D5D5underline italic
header#ECD2D0
source.ini, source.ignore, source#BFBABA
markup.inserted#ECD2D0
markup.deleted#CC7F7F
markup.changed#9FA6AC
markup.error#CC7F7F
markup.underlineunderline
markup.bold#C9A682bold
markup.heading#C56F6Dbold
markup.italic#BFBABAitalic
markup.inline.raw, markup.raw.restructuredtext#C56F6D
markup.underline.link, markup.underline.link.image, markup.quote#9FA6AC
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#82C9B9
meta.separator.markdown#C56F6D
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EACDCD
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C9A682
entity.name.class, entity.name.type.class, entity.other.inherited-class#82C9B9
entity.name.tag, entity.other.attribute-name.parent-selector#E9C9C9
entity.other.attribute-name#82C9B9
entity.name.function, meta.function-call, meta.method-call, meta.method#C56F6D
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E1C2C2
support#DBA4A4
entity.name, variable.other.key#C56F6D
entity.name.type#E5C2C2
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#D7BBA7
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#BADED5
entity.other.attribute-name.class.css#C56F6D
storage.class, storage.type#82C9B9
storage.modifier#E2C0C0
comment, punctuation.definition.comment, unused.comment, wildcard.comment#746F6F
constant#ECD2D0
constant.other.color#D8A3A1
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E2B2B0
constant.other.date, constant.other.timestamp#BFE4DA
keyword.operator#EEE3E3
keyword.other.unit#DAA5A5
keyword.control, keyword.other.template, keyword.other.substitution#E1B2B2
keyword.other.this#ECD2D0
keyword.control.import, keyword.control.from#DFC1B4
keyword.control.new, keyword.operator.new, keyword.other.important.css#82C9B9
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#DAB6A5
meta.attribute-selector.scss#E4BFBF
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#E9C9C9
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E4CCC4
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#82C9B9
support.constant.property-value.css, constant.numeric.css#BFBABA
keyword.control.at-rule.apply.tailwind#DFC1B4
keyword.control.at-rule.tailwind.tailwind#E1B2B2
keyword.control.at-rule.layer.tailwind#DAB6A5
meta.selector#E4BFBF
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E3D9D9
punctuation.definition.constant.restructuredtext#ECD2D0
string.quoted.docstring.multi#C56F6D
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#E3D9D9
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E4CCC4
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#F6F6F2
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#F2EFED
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#E4DAD8
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#ECE4E4
punctuation.definition.directive.restructuredtext#ECD2D0
variable#DFBFBE
variable.other.alias.yaml#DFBFBEunderline
variable.language, variable.parameter.function.language.special#E2B2B0
variable.other.constant#E7D4CB
support.variable#DFBFBE
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E3D3C9
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C9A682
support.function, support.type.property-name#F2E6E3
storage#E6C7C6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#C29256
punctuation.definition.group.capture.regexp#E55A9D
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E55A9D
punctuation.definition.character-class.regexp#F4D8B4
punctuation.definition.group.regexp#A6C5EE
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E55A9D
meta.assertion.look-ahead.regexp#A6C5EE
source.json meta.structure.dictionary.json support.type.property-name.json#C56F6D
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82C9B9
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#9FA6AC
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#C9A682
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#CC7F7F
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#4F9B4F
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#C56F6D
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#82C9B9
token.info-token#9FA6AC
token.warn-token#C9A682
token.error-token#CC7F7F
token.debug-token#C9A682
RLabs Themes Collection by RLabs Inc. - VS Code Theme