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#24202070
  • activityBar.activeBorder#7196D4
  • activityBar.background#211918
  • activityBar.foreground#E9E4E4
  • activityBar.inactiveForeground#6E6A6A
  • activityBarBadge.background#7E94C8
  • activityBarBadge.foreground#131313
  • activityBarTop.foreground#E9E4E4
  • badge.background#7E94C8
  • badge.foreground#131313
  • breadcrumb.activeForeground#E9E4E4
  • breadcrumb.activeSelectionForeground#E9E4E4
  • breadcrumb.background#211918
  • breadcrumb.focusForeground#E9E4E4
  • breadcrumb.foreground#6E6A6A
  • breadcrumbPicker.background#211918
  • button.background#7E94C8db
  • button.foreground#131313
  • button.hoverBackground#7E94C8
  • button.secondaryBackground#7196D4db
  • button.secondaryForeground#131313
  • button.secondaryHoverBackground#7196D4
  • checkbox.background#1E1B1B
  • checkbox.foreground#E9E4E4
  • debugToolBar.background#7BA3D4
  • debugToolBar.foreground#131313
  • descriptionForeground#E1D2D3
  • diffEditor.diagonalFill#7BA3D4
  • diffEditor.insertedLineBackground#7BA3D440
  • diffEditor.insertedTextBackground#7BA3D450
  • diffEditor.insertedTextBorder#7BA3D4
  • diffEditor.removedLineBackground#DE6D7040
  • diffEditor.removedTextBackground#DE6D7050
  • diffEditor.removedTextBorder#DE6D70
  • diffEditorGutter.insertedLineBackground#7BA3D4
  • diffEditorGutter.removedLineBackground#DE6D70
  • disabledForeground#6E6A6A
  • dropdown.background#322828
  • dropdown.border#292121
  • dropdown.foreground#E9E4E4
  • editor.background#1E1B1B
  • editor.findMatchBackground#283A5470
  • editor.findMatchForeground#E9E4E4
  • editor.findMatchHighlightBackground#24202070
  • editor.findMatchHighlightForeground#E9E4E4
  • editor.findRangeHighlightBackground#4D363670
  • editor.foldBackground#24202070
  • editor.foldPlaceholderForeground#E9E4E4
  • editor.foreground#E9E4E4
  • editor.hoverHighlightBackground#24202070
  • editor.inactiveSelectionBackground#4D363670
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E1D2D3
  • editor.rangeHighlightBackground#24202070
  • editor.selectionBackground#4D363670
  • editor.selectionForeground#E9E4E4
  • editor.selectionHighlightBackground#4D363670
  • editor.snippetFinalTabstopHighlightBackground#24202070
  • editor.snippetTabstopHighlightBackground#24202070
  • editor.symbolHighlightBackground#24202070
  • editor.wordHighlightBackground#24202070
  • editor.wordHighlightStrongBackground#24202050
  • editor.wordHighlightTextBackground#24202070
  • editorCodeLens.foreground#6E6A6A
  • editorCursor.background#24202070
  • editorCursor.foreground#7196D4
  • editorError.foreground#DE6D70
  • editorGroup.border#292121
  • editorGroup.dropBackground#322828
  • editorGroup.emptyBackground#1E1B1B
  • editorGroupHeader.border#292121
  • editorGroupHeader.tabsBackground#1E1B1B
  • editorGutter.addedBackground#40973C
  • editorGutter.background#1E1B1B
  • editorGutter.commentRangeForeground#6E6A6A
  • editorGutter.deletedBackground#DE6D70
  • editorGutter.modifiedBackground#7BA3D4
  • editorHint.foreground#40973C
  • editorHoverWidget.background#1E1B1B
  • editorHoverWidget.border#292121
  • editorHoverWidget.foreground#E9E4E4
  • editorHoverWidget.highlightForeground#E9E4E4
  • editorHoverWidget.statusBarBackground#1E1B1B
  • editorIndentGuide.activeBackground1#7196D4
  • editorIndentGuide.background1#24202070
  • editorInfo.foreground#7BA3D4
  • editorLineNumber.activeForeground#7196D4
  • editorLineNumber.dimmedForeground#6E6A6A90
  • editorLineNumber.foreground#6E6A6A
  • editorLink.activeForeground#7BA3D4
  • editorMarkerNavigation.background#211918
  • editorMarkerNavigationError.background#211918
  • editorMarkerNavigationWarning.background#211918
  • editorMultiCursor.primary.background#24202070
  • editorMultiCursor.primary.foreground#7196D4
  • editorMultiCursor.secondary.background#24202070
  • editorMultiCursor.secondary.foreground#E9E4E4
  • editorOverviewRuler.addedForeground#40973C
  • editorOverviewRuler.border#292121
  • editorOverviewRuler.commentForeground#6E6A6A
  • editorOverviewRuler.commonContentForeground#E9E4E4
  • editorOverviewRuler.currentContentForeground#7BA3D4
  • editorOverviewRuler.deletedForeground#DE6D70
  • editorOverviewRuler.errorForeground#DE6D70
  • editorOverviewRuler.findMatchForeground#E9E4E4
  • editorOverviewRuler.incomingContentForeground#40973C
  • editorOverviewRuler.infoForeground#7BA3D4
  • editorOverviewRuler.modifiedForeground#7BA3D4
  • editorOverviewRuler.rangeHighlightForeground#24202070
  • editorOverviewRuler.selectionHighlightForeground#4D363670
  • editorOverviewRuler.warningForeground#D79B68
  • editorOverviewRuler.wordHighlightForeground#24202070
  • editorOverviewRuler.wordHighlightStrongForeground#24202070
  • editorRuler.foreground#24202070
  • editorSuggestWidget.background#1E1B1B
  • editorSuggestWidget.border#292121
  • editorSuggestWidget.focusHighlightForeground#E9E4E4
  • editorSuggestWidget.foreground#6E6A6A
  • editorSuggestWidget.highlightForeground#E9E4E4
  • editorSuggestWidget.selectedBackground#7E94C880
  • editorSuggestWidget.selectedForeground#E9E4E4
  • editorUnicodeHighlight.background#24202070
  • editorWarning.foreground#D79B68
  • editorWhitespace.foreground#24202070
  • editorWidget.background#1E1B1B
  • editorWidget.border#292121
  • editorWidget.foreground#E9E4E4
  • errorForeground#DE6D70
  • extensionButton.prominentBackground#7E94C8aa
  • extensionButton.prominentForeground#131313
  • extensionButton.prominentHoverBackground#7E94C8
  • focusBorder#292121
  • foreground#E9E4E4
  • gitDecoration.addedResourceForeground#40973C
  • gitDecoration.conflictingResourceForeground#D79B68
  • gitDecoration.deletedResourceForeground#DE6D70
  • gitDecoration.ignoredResourceForeground#6E6A6A
  • gitDecoration.modifiedResourceForeground#7BA3D4
  • gitDecoration.renamedResourceForeground#7196D4
  • gitDecoration.untrackedResourceForeground#E1D2D3
  • input.background#1E1B1B
  • input.border#6E6A6A
  • input.foreground#E9E4E4
  • input.placeholderForeground#6E6A6A
  • inputOption.activeBorder#7196D4
  • inputValidation.errorBorder#DE6D70
  • inputValidation.infoBorder#7BA3D4
  • inputValidation.warningBorder#D79B68
  • list.activeSelectionBackground#7E94C870
  • list.activeSelectionForeground#E9E4E4
  • list.dropBackground#322828
  • list.dropBetweenBackground#292121
  • list.errorForeground#DE6D70
  • list.focusBackground#7E94C850
  • list.focusForeground#E9E4E4
  • list.highlightForeground#7196D4
  • list.hoverBackground#7E94C820
  • list.hoverForeground#E9E4E4
  • list.inactiveFocusBackground#211918
  • list.inactiveSelectionBackground#7E94C860
  • list.inactiveSelectionForeground#E1D2D3
  • list.warningForeground#D79B68
  • listFilterWidget.background#322828
  • listFilterWidget.noMatchesOutline#DE6D70
  • listFilterWidget.outline#292121
  • merge.border#292121
  • merge.currentContentBackground#7BA3D420
  • merge.currentHeaderBackground#7BA3D440
  • merge.incomingContentBackground#40973C20
  • merge.incomingHeaderBackground#40973C40
  • mergeEditor.change.background#D79B68
  • notificationLink.foreground#7BA3D4
  • notifications.background#211918
  • notifications.border#292121
  • notifications.foreground#E9E4E4
  • notificationsErrorIcon.foreground#DE6D70
  • notificationsInfoIcon.foreground#7BA3D4
  • notificationsWarningIcon.foreground#D79B68
  • panel.background#211918
  • panel.border#7196D4
  • panelInput.border#6E6A6A
  • panelTitle.activeBorder#7196D4
  • panelTitle.activeForeground#E9E4E4
  • panelTitle.inactiveForeground#6E6A6A
  • peekView.border#7E94C8
  • peekViewEditor.background#1E1B1B
  • peekViewEditor.matchHighlightBackground#283A5470
  • peekViewResult.background#1E1B1B
  • peekViewResult.fileForeground#E9E4E4
  • peekViewResult.lineForeground#E9E4E4
  • peekViewResult.matchHighlightBackground#24202070
  • peekViewResult.selectionBackground#211918
  • peekViewResult.selectionForeground#E9E4E4
  • peekViewTitle.background#1E1B1B
  • peekViewTitleDescription.foreground#E1D2D3
  • peekViewTitleLabel.foreground#E9E4E4
  • pickerGroup.border#7E94C8
  • pickerGroup.foreground#E5B9B8
  • progressBar.background#7196D4
  • selection.background#7E94C850
  • settings.checkboxBackground#1E1B1B
  • settings.checkboxBorder#292121
  • settings.checkboxForeground#E9E4E4
  • settings.dropdownBackground#1E1B1B
  • settings.dropdownBorder#292121
  • settings.dropdownForeground#E9E4E4
  • settings.focusedRowBackground#24202070
  • settings.focusedRowBorder#6E6A6A
  • settings.headerBorder#292121
  • settings.headerForeground#E9E4E4
  • settings.inactiveSelectedItemBorder#6E6A6A
  • settings.modifiedItemIndicator#D79B68
  • settings.numberInputBackground#1E1B1B
  • settings.numberInputBorder#6E6A6A
  • settings.numberInputForeground#E9E4E4
  • settings.rowHoverBackground#24202070
  • settings.settingsHeaderHoverForeground#E9E4E4
  • settings.textInputBackground#1E1B1B
  • settings.textInputBorder#6E6A6A
  • settings.textInputForeground#E9E4E4
  • sideBar.background#1E1B1B
  • sideBarActivityBarTop.border#292121
  • sideBarSectionHeader.background#211918
  • sideBarSectionHeader.border#292121
  • sideBarStickyScroll.background#1E1B1B
  • sideBarStickyScroll.border#292121
  • sideBarStickyScroll.shadow#292121
  • sideBarTitle.background#1E1B1B
  • sideBarTitle.foreground#E9E4E4
  • statusBar.background#7E94C8
  • statusBar.debuggingBackground#D79B68
  • statusBar.debuggingForeground#131313
  • statusBar.foreground#131313
  • statusBar.noFolderBackground#E1D2D3
  • statusBar.noFolderForeground#131313
  • statusBarItem.activeBackground#7E94C8aa
  • statusBarItem.errorBackground#DE6D70
  • statusBarItem.errorForeground#131313
  • statusBarItem.errorHoverBackground#DE6D70aa
  • statusBarItem.hoverBackground#7E94C8aa
  • statusBarItem.prominentBackground#7E94C8aa
  • statusBarItem.prominentForeground#131313
  • statusBarItem.prominentHoverBackground#7E94C8aa
  • statusBarItem.prominentHoverForeground#131313
  • statusBarItem.remoteBackground#7196D4
  • statusBarItem.remoteForeground#131313
  • statusBarItem.remoteHoverBackground#7196D4aa
  • statusBarItem.warningBackground#D79B68
  • statusBarItem.warningForeground#131313
  • statusBarItem.warningHoverBackground#D79B68aa
  • tab.activeBackground#211918
  • tab.activeBorderTop#7196D4
  • tab.activeForeground#E9E4E4
  • tab.border#292121
  • tab.hoverBackground#21191880
  • tab.hoverForeground#E9E4E4
  • tab.inactiveBackground#1E1B1B
  • tab.inactiveForeground#6E6A6A
  • tab.selectedBackground#24202070
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#997CCD
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#9C69F5
  • terminal.ansiBrightCyan#C1DBD3
  • terminal.ansiBrightGreen#8AD15B
  • terminal.ansiBrightMagenta#CA4EEC
  • terminal.ansiBrightRed#C99478
  • terminal.ansiBrightWhite#FBFBFA
  • terminal.ansiBrightYellow#BFB233
  • terminal.ansiCyan#87938F
  • terminal.ansiGreen#6E8E58
  • terminal.ansiMagenta#D334FD
  • terminal.ansiRed#B17B5E
  • terminal.ansiWhite#F9F8F5
  • terminal.ansiYellow#938A32
  • terminal.background#1E1B1B
  • terminal.border#292121
  • terminal.foreground#E9E4E4
  • terminal.inactiveSelectionBackground#4D363670
  • terminal.selectionBackground#4D363670
  • textBlockQuote.background#322828
  • textBlockQuote.border#292121
  • textCodeBlock.background#322828
  • textLink.activeForeground#7BA3D4
  • textLink.foreground#7E94C8
  • textPreformat.background#322828
  • textPreformat.foreground#E9E4E4
  • textSeparator.foreground#E9E4E4
  • titleBar.activeBackground#211918
  • titleBar.activeForeground#E9E4E4
  • titleBar.inactiveBackground#211918
  • titleBar.inactiveForeground#6E6A6A
  • widget.border#292121

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E9E4E4
meta.diff, meta.diff.header#6E6A6A
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#EAC3C2
emphasisitalic
strongbold
invalid#DE6D70strikethrough
invalid.deprecated#E9E4E4underline italic
header#EAC3C2
source.ini, source.ignore, source#E1D2D3
markup.inserted#EAC3C2
markup.deleted#DE6D70
markup.changed#7BA3D4
markup.error#DE6D70
markup.underlineunderline
markup.bold#D79B68bold
markup.heading#7196D4bold
markup.italic#E1D2D3italic
markup.inline.raw, markup.raw.restructuredtext#7196D4
markup.underline.link, markup.underline.link.image, markup.quote#7BA3D4
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7E94C8
meta.separator.markdown#7196D4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#B9C9E4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D79B68
entity.name.class, entity.name.type.class, entity.other.inherited-class#7E94C8
entity.name.tag, entity.other.attribute-name.parent-selector#F0D6D6
entity.other.attribute-name#7E94C8
entity.name.function, meta.function-call, meta.method-call, meta.method#7196D4
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E6C7C7
support#E3B0B0
entity.name, variable.other.key#7196D4
entity.name.type#E4B9BA
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E1C1B7
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#DBE3F0
entity.other.attribute-name.class.css#7196D4
storage.class, storage.type#7E94C8
storage.modifier#E7C5C6
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6E6A6A
constant#EAC3C2
constant.other.color#DFA9AA
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#DE9C9B
constant.other.date, constant.other.timestamp#C1CFE7
keyword.operator#EDDEDE
keyword.other.unit#E4B4B5
keyword.control, keyword.other.template, keyword.other.substitution#E1A8A8
keyword.other.this#EAC3C2
keyword.control.import, keyword.control.from#D3B4AB
keyword.control.new, keyword.operator.new, keyword.other.important.css#7E94C8
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E1C2AD
meta.attribute-selector.scss#E4B9BA
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F0D6D6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E6CBC1
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#7E94C8
support.constant.property-value.css, constant.numeric.css#E1D2D3
keyword.control.at-rule.apply.tailwind#D3B4AB
keyword.control.at-rule.tailwind.tailwind#E1A8A8
keyword.control.at-rule.layer.tailwind#E1C2AD
meta.selector#E4B9BA
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#CFD4DD
punctuation.definition.constant.restructuredtext#EAC3C2
string.quoted.docstring.multi#7196D4
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#CFD4DD
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E6CBC1
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#F9F8F5
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#DEDFE8
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#E7E8EE
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#F3F4F7
punctuation.definition.directive.restructuredtext#EAC3C2
variable#E4C3C4
variable.other.alias.yaml#E4C3C4underline
variable.language, variable.parameter.function.language.special#DE9C9B
variable.other.constant#EEE0D8
support.variable#E4C3C4
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E8DECF
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D79B68
support.function, support.type.property-name#C9CAE9
storage#EAC8C8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#938A32
punctuation.definition.group.capture.regexp#B17B5E
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#B17B5E
punctuation.definition.character-class.regexp#BFB233
punctuation.definition.group.regexp#9C69F5
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#B17B5E
meta.assertion.look-ahead.regexp#9C69F5
source.json meta.structure.dictionary.json support.type.property-name.json#7196D4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7E94C8
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#7BA3D4
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#D79B68
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#DE6D70
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#40973C
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#7196D4
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#7E94C8
token.info-token#7BA3D4
token.warn-token#D79B68
token.error-token#DE6D70
token.debug-token#D79B68
RLabs Themes Collection by RLabs Inc. - VS Code Theme