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#16141A70
  • activityBar.activeBorder#C86ABA
  • activityBar.background#211F23
  • activityBar.foreground#D7D2DF
  • activityBar.inactiveForeground#636686
  • activityBarBadge.background#80C0CB
  • activityBarBadge.foreground#0A0A0A
  • activityBarTop.foreground#D7D2DF
  • badge.background#80C0CB
  • badge.foreground#0A0A0A
  • breadcrumb.activeForeground#D7D2DF
  • breadcrumb.activeSelectionForeground#D7D2DF
  • breadcrumb.background#211F23
  • breadcrumb.focusForeground#D7D2DF
  • breadcrumb.foreground#636686
  • breadcrumbPicker.background#211F23
  • button.background#80C0CBdb
  • button.foreground#0A0A0A
  • button.hoverBackground#80C0CB
  • button.secondaryBackground#C86ABAdb
  • button.secondaryForeground#0A0A0A
  • button.secondaryHoverBackground#C86ABA
  • checkbox.background#181618
  • checkbox.foreground#D7D2DF
  • debugToolBar.background#84A6C8
  • debugToolBar.foreground#0A0A0A
  • descriptionForeground#B3A8C2
  • diffEditor.diagonalFill#84A6C8
  • diffEditor.insertedLineBackground#84A6C840
  • diffEditor.insertedTextBackground#84A6C850
  • diffEditor.insertedTextBorder#84A6C8
  • diffEditor.removedLineBackground#CE7D7D40
  • diffEditor.removedTextBackground#CE7D7D50
  • diffEditor.removedTextBorder#CE7D7D
  • diffEditorGutter.insertedLineBackground#84A6C8
  • diffEditorGutter.removedLineBackground#CE7D7D
  • disabledForeground#636686
  • dropdown.background#212626
  • dropdown.border#212626
  • dropdown.foreground#D7D2DF
  • editor.background#181618
  • editor.findMatchBackground#2F474B70
  • editor.findMatchForeground#D7D2DF
  • editor.findMatchHighlightBackground#16141A70
  • editor.findMatchHighlightForeground#D7D2DF
  • editor.findRangeHighlightBackground#33293870
  • editor.foldBackground#16141A70
  • editor.foldPlaceholderForeground#D7D2DF
  • editor.foreground#D7D2DF
  • editor.hoverHighlightBackground#16141A70
  • editor.inactiveSelectionBackground#33293870
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#B3A8C2
  • editor.rangeHighlightBackground#16141A70
  • editor.selectionBackground#33293870
  • editor.selectionForeground#D7D2DF
  • editor.selectionHighlightBackground#33293870
  • editor.snippetFinalTabstopHighlightBackground#16141A70
  • editor.snippetTabstopHighlightBackground#16141A70
  • editor.symbolHighlightBackground#16141A70
  • editor.wordHighlightBackground#16141A70
  • editor.wordHighlightStrongBackground#16141A50
  • editor.wordHighlightTextBackground#16141A70
  • editorCodeLens.foreground#636686
  • editorCursor.background#16141A70
  • editorCursor.foreground#C86ABA
  • editorError.foreground#CE7D7D
  • editorGroup.border#212626
  • editorGroup.dropBackground#212626
  • editorGroup.emptyBackground#181618
  • editorGroupHeader.border#212626
  • editorGroupHeader.tabsBackground#181618
  • editorGutter.addedBackground#459245
  • editorGutter.background#181618
  • editorGutter.commentRangeForeground#636686
  • editorGutter.deletedBackground#CE7D7D
  • editorGutter.modifiedBackground#84A6C8
  • editorHint.foreground#459245
  • editorHoverWidget.background#181618
  • editorHoverWidget.border#212626
  • editorHoverWidget.foreground#D7D2DF
  • editorHoverWidget.highlightForeground#D7D2DF
  • editorHoverWidget.statusBarBackground#181618
  • editorIndentGuide.activeBackground1#C86ABA
  • editorIndentGuide.background1#16141A70
  • editorInfo.foreground#84A6C8
  • editorLineNumber.activeForeground#C86ABA
  • editorLineNumber.dimmedForeground#63668690
  • editorLineNumber.foreground#636686
  • editorLink.activeForeground#84A6C8
  • editorMarkerNavigation.background#211F23
  • editorMarkerNavigationError.background#211F23
  • editorMarkerNavigationWarning.background#211F23
  • editorMultiCursor.primary.background#16141A70
  • editorMultiCursor.primary.foreground#C86ABA
  • editorMultiCursor.secondary.background#16141A70
  • editorMultiCursor.secondary.foreground#D7D2DF
  • editorOverviewRuler.addedForeground#459245
  • editorOverviewRuler.border#212626
  • editorOverviewRuler.commentForeground#636686
  • editorOverviewRuler.commonContentForeground#D7D2DF
  • editorOverviewRuler.currentContentForeground#84A6C8
  • editorOverviewRuler.deletedForeground#CE7D7D
  • editorOverviewRuler.errorForeground#CE7D7D
  • editorOverviewRuler.findMatchForeground#D7D2DF
  • editorOverviewRuler.incomingContentForeground#459245
  • editorOverviewRuler.infoForeground#84A6C8
  • editorOverviewRuler.modifiedForeground#84A6C8
  • editorOverviewRuler.rangeHighlightForeground#16141A70
  • editorOverviewRuler.selectionHighlightForeground#33293870
  • editorOverviewRuler.warningForeground#CBA680
  • editorOverviewRuler.wordHighlightForeground#16141A70
  • editorOverviewRuler.wordHighlightStrongForeground#16141A70
  • editorRuler.foreground#16141A70
  • editorSuggestWidget.background#181618
  • editorSuggestWidget.border#212626
  • editorSuggestWidget.focusHighlightForeground#D7D2DF
  • editorSuggestWidget.foreground#636686
  • editorSuggestWidget.highlightForeground#D7D2DF
  • editorSuggestWidget.selectedBackground#80C0CB80
  • editorSuggestWidget.selectedForeground#D7D2DF
  • editorUnicodeHighlight.background#16141A70
  • editorWarning.foreground#CBA680
  • editorWhitespace.foreground#16141A70
  • editorWidget.background#181618
  • editorWidget.border#212626
  • editorWidget.foreground#D7D2DF
  • errorForeground#CE7D7D
  • extensionButton.prominentBackground#80C0CBaa
  • extensionButton.prominentForeground#0A0A0A
  • extensionButton.prominentHoverBackground#80C0CB
  • focusBorder#212626
  • foreground#D7D2DF
  • gitDecoration.addedResourceForeground#459245
  • gitDecoration.conflictingResourceForeground#CBA680
  • gitDecoration.deletedResourceForeground#CE7D7D
  • gitDecoration.ignoredResourceForeground#636686
  • gitDecoration.modifiedResourceForeground#84A6C8
  • gitDecoration.renamedResourceForeground#C86ABA
  • gitDecoration.untrackedResourceForeground#B3A8C2
  • input.background#181618
  • input.border#636686
  • input.foreground#D7D2DF
  • input.placeholderForeground#636686
  • inputOption.activeBorder#C86ABA
  • inputValidation.errorBorder#CE7D7D
  • inputValidation.infoBorder#84A6C8
  • inputValidation.warningBorder#CBA680
  • list.activeSelectionBackground#80C0CB70
  • list.activeSelectionForeground#D7D2DF
  • list.dropBackground#212626
  • list.dropBetweenBackground#212626
  • list.errorForeground#CE7D7D
  • list.focusBackground#80C0CB50
  • list.focusForeground#D7D2DF
  • list.highlightForeground#C86ABA
  • list.hoverBackground#80C0CB20
  • list.hoverForeground#D7D2DF
  • list.inactiveFocusBackground#211F23
  • list.inactiveSelectionBackground#80C0CB60
  • list.inactiveSelectionForeground#B3A8C2
  • list.warningForeground#CBA680
  • listFilterWidget.background#212626
  • listFilterWidget.noMatchesOutline#CE7D7D
  • listFilterWidget.outline#212626
  • merge.border#212626
  • merge.currentContentBackground#84A6C820
  • merge.currentHeaderBackground#84A6C840
  • merge.incomingContentBackground#45924520
  • merge.incomingHeaderBackground#45924540
  • mergeEditor.change.background#CBA680
  • notificationLink.foreground#84A6C8
  • notifications.background#211F23
  • notifications.border#212626
  • notifications.foreground#D7D2DF
  • notificationsErrorIcon.foreground#CE7D7D
  • notificationsInfoIcon.foreground#84A6C8
  • notificationsWarningIcon.foreground#CBA680
  • panel.background#211F23
  • panel.border#C86ABA
  • panelInput.border#636686
  • panelTitle.activeBorder#C86ABA
  • panelTitle.activeForeground#D7D2DF
  • panelTitle.inactiveForeground#636686
  • peekView.border#80C0CB
  • peekViewEditor.background#181618
  • peekViewEditor.matchHighlightBackground#2F474B70
  • peekViewResult.background#181618
  • peekViewResult.fileForeground#D7D2DF
  • peekViewResult.lineForeground#D7D2DF
  • peekViewResult.matchHighlightBackground#16141A70
  • peekViewResult.selectionBackground#211F23
  • peekViewResult.selectionForeground#D7D2DF
  • peekViewTitle.background#181618
  • peekViewTitleDescription.foreground#B3A8C2
  • peekViewTitleLabel.foreground#D7D2DF
  • pickerGroup.border#80C0CB
  • pickerGroup.foreground#BFCEE8
  • progressBar.background#C86ABA
  • selection.background#80C0CB50
  • settings.checkboxBackground#181618
  • settings.checkboxBorder#212626
  • settings.checkboxForeground#D7D2DF
  • settings.dropdownBackground#181618
  • settings.dropdownBorder#212626
  • settings.dropdownForeground#D7D2DF
  • settings.focusedRowBackground#16141A70
  • settings.focusedRowBorder#636686
  • settings.headerBorder#212626
  • settings.headerForeground#D7D2DF
  • settings.inactiveSelectedItemBorder#636686
  • settings.modifiedItemIndicator#CBA680
  • settings.numberInputBackground#181618
  • settings.numberInputBorder#636686
  • settings.numberInputForeground#D7D2DF
  • settings.rowHoverBackground#16141A70
  • settings.settingsHeaderHoverForeground#D7D2DF
  • settings.textInputBackground#181618
  • settings.textInputBorder#636686
  • settings.textInputForeground#D7D2DF
  • sideBar.background#181618
  • sideBarActivityBarTop.border#212626
  • sideBarSectionHeader.background#211F23
  • sideBarSectionHeader.border#212626
  • sideBarStickyScroll.background#181618
  • sideBarStickyScroll.border#212626
  • sideBarStickyScroll.shadow#212626
  • sideBarTitle.background#181618
  • sideBarTitle.foreground#D7D2DF
  • statusBar.background#80C0CB
  • statusBar.debuggingBackground#CBA680
  • statusBar.debuggingForeground#0A0A0A
  • statusBar.foreground#0A0A0A
  • statusBar.noFolderBackground#B3A8C2
  • statusBar.noFolderForeground#0A0A0A
  • statusBarItem.activeBackground#80C0CBaa
  • statusBarItem.errorBackground#CE7D7D
  • statusBarItem.errorForeground#0A0A0A
  • statusBarItem.errorHoverBackground#CE7D7Daa
  • statusBarItem.hoverBackground#80C0CBaa
  • statusBarItem.prominentBackground#80C0CBaa
  • statusBarItem.prominentForeground#0A0A0A
  • statusBarItem.prominentHoverBackground#80C0CBaa
  • statusBarItem.prominentHoverForeground#0A0A0A
  • statusBarItem.remoteBackground#C86ABA
  • statusBarItem.remoteForeground#0A0A0A
  • statusBarItem.remoteHoverBackground#C86ABAaa
  • statusBarItem.warningBackground#CBA680
  • statusBarItem.warningForeground#0A0A0A
  • statusBarItem.warningHoverBackground#CBA680aa
  • tab.activeBackground#211F23
  • tab.activeBorderTop#C86ABA
  • tab.activeForeground#D7D2DF
  • tab.border#212626
  • tab.hoverBackground#211F2380
  • tab.hoverForeground#D7D2DF
  • tab.inactiveBackground#181618
  • tab.inactiveForeground#636686
  • tab.selectedBackground#16141A70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8771D2
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#A38CF3
  • terminal.ansiBrightCyan#E6FFF9
  • terminal.ansiBrightGreen#BEF3A0
  • terminal.ansiBrightMagenta#E581E7
  • terminal.ansiBrightRed#D8699D
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#F9F5EB
  • terminal.ansiCyan#8AE6D2
  • terminal.ansiGreen#60AB35
  • terminal.ansiMagenta#BE61C1
  • terminal.ansiRed#CA6091
  • terminal.ansiWhite#F2F0EB
  • terminal.ansiYellow#C5B187
  • terminal.background#181618
  • terminal.border#212626
  • terminal.foreground#D7D2DF
  • terminal.inactiveSelectionBackground#33293870
  • terminal.selectionBackground#33293870
  • textBlockQuote.background#212626
  • textBlockQuote.border#212626
  • textCodeBlock.background#212626
  • textLink.activeForeground#84A6C8
  • textLink.foreground#80C0CB
  • textPreformat.background#212626
  • textPreformat.foreground#D7D2DF
  • textSeparator.foreground#D7D2DF
  • titleBar.activeBackground#211F23
  • titleBar.activeForeground#D7D2DF
  • titleBar.inactiveBackground#211F23
  • titleBar.inactiveForeground#636686
  • widget.border#212626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D7D2DF
meta.diff, meta.diff.header#636686
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#B3C4E5
emphasisitalic
strongbold
invalid#CE7D7Dstrikethrough
invalid.deprecated#D7D2DFunderline italic
header#B3C4E5
source.ini, source.ignore, source#B3A8C2
markup.inserted#B3C4E5
markup.deleted#CE7D7D
markup.changed#84A6C8
markup.error#CE7D7D
markup.underlineunderline
markup.bold#CBA680bold
markup.heading#C86ABAbold
markup.italic#B3A8C2italic
markup.inline.raw, markup.raw.restructuredtext#C86ABA
markup.underline.link, markup.underline.link.image, markup.quote#84A6C8
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#80C0CB
meta.separator.markdown#C86ABA
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#C0E7E4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CBA680
entity.name.class, entity.name.type.class, entity.other.inherited-class#80C0CB
entity.name.tag, entity.other.attribute-name.parent-selector#BFD7E8
entity.other.attribute-name#80C0CB
entity.name.function, meta.function-call, meta.method-call, meta.method#C86ABA
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#B9BDDF
support#B0DCE3
entity.name, variable.other.key#C86ABA
entity.name.type#B6DBE2
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#B7CEE1
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D4D7ED
entity.other.attribute-name.class.css#C86ABA
storage.class, storage.type#80C0CB
storage.modifier#E1B7DB
comment, punctuation.definition.comment, unused.comment, wildcard.comment#636686
constant#B3C4E5
constant.other.color#B4B9E4
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E4AEDD
constant.other.date, constant.other.timestamp#D0C0E7
keyword.operator#C3C6DF
keyword.other.unit#AFA6DE
keyword.control, keyword.other.template, keyword.other.substitution#8ED7D0
keyword.other.this#B3C4E5
keyword.control.import, keyword.control.from#9CCCD9
keyword.control.new, keyword.operator.new, keyword.other.important.css#80C0CB
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#A6CCDE
meta.attribute-selector.scss#E6BDE0
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#BFD7E8
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#C5D3E8
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#80C0CB
support.constant.property-value.css, constant.numeric.css#B3A8C2
keyword.control.at-rule.apply.tailwind#9CCCD9
keyword.control.at-rule.tailwind.tailwind#8ED7D0
keyword.control.at-rule.layer.tailwind#A6CCDE
meta.selector#E6BDE0
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E1DEE8
punctuation.definition.constant.restructuredtext#B3C4E5
string.quoted.docstring.multi#C86ABA
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#E1DEE8
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#C5D3E8
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#F2F0EB
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#F3F0F5
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#F3F0F5
punctuation.definition.directive.restructuredtext#B3C4E5
variable#B9DFDB
variable.other.alias.yaml#B9DFDBunderline
variable.language, variable.parameter.function.language.special#E4AEDD
variable.other.constant#C6E3E6
support.variable#B9DFDB
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C4D4E3
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#CBA680
support.function, support.type.property-name#D0E4EC
storage#E7C0D7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#C5B187
punctuation.definition.group.capture.regexp#CA6091
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CA6091
punctuation.definition.character-class.regexp#F9F5EB
punctuation.definition.group.regexp#A38CF3
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CA6091
meta.assertion.look-ahead.regexp#A38CF3
source.json meta.structure.dictionary.json support.type.property-name.json#C86ABA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#80C0CB
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#84A6C8
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#CBA680
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#459245
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#C86ABA
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#80C0CB
token.info-token#84A6C8
token.warn-token#CBA680
token.error-token#CE7D7D
token.debug-token#CBA680
RLabs Themes Collection by RLabs Inc. - VS Code Theme