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#09071770
  • activityBar.activeBorder#8A7FE3
  • activityBar.background#040307
  • activityBar.foreground#B9DFE4
  • activityBar.inactiveForeground#615848
  • activityBarBadge.background#CEAF7D
  • activityBarBadge.foreground#040A0B
  • activityBarTop.foreground#B9DFE4
  • badge.background#CEAF7D
  • badge.foreground#040A0B
  • breadcrumb.activeForeground#B9DFE4
  • breadcrumb.activeSelectionForeground#B9DFE4
  • breadcrumb.background#040307
  • breadcrumb.focusForeground#B9DFE4
  • breadcrumb.foreground#615848
  • breadcrumbPicker.background#040307
  • button.background#CEAF7Ddb
  • button.foreground#040A0B
  • button.hoverBackground#CEAF7D
  • button.secondaryBackground#8A7FE3db
  • button.secondaryForeground#040A0B
  • button.secondaryHoverBackground#8A7FE3
  • checkbox.background#081516
  • checkbox.foreground#B9DFE4
  • debugToolBar.background#76A6D5
  • debugToolBar.foreground#040A0B
  • descriptionForeground#8B81DA
  • diffEditor.diagonalFill#76A6D5
  • diffEditor.insertedLineBackground#76A6D540
  • diffEditor.insertedTextBackground#76A6D550
  • diffEditor.insertedTextBorder#76A6D5
  • diffEditor.removedLineBackground#D17A7A40
  • diffEditor.removedTextBackground#D17A7A50
  • diffEditor.removedTextBorder#D17A7A
  • diffEditorGutter.insertedLineBackground#76A6D5
  • diffEditorGutter.removedLineBackground#D17A7A
  • disabledForeground#615848
  • dropdown.background#231C10
  • dropdown.border#0F0B2D
  • dropdown.foreground#B9DFE4
  • editor.background#081516
  • editor.findMatchBackground#5A3E1270
  • editor.findMatchForeground#B9DFE4
  • editor.findMatchHighlightBackground#09071770
  • editor.findMatchHighlightForeground#B9DFE4
  • editor.findRangeHighlightBackground#17114070
  • editor.foldBackground#09071770
  • editor.foldPlaceholderForeground#B9DFE4
  • editor.foreground#B9DFE4
  • editor.hoverHighlightBackground#09071770
  • editor.inactiveSelectionBackground#17114070
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#8B81DA
  • editor.rangeHighlightBackground#09071770
  • editor.selectionBackground#17114070
  • editor.selectionForeground#B9DFE4
  • editor.selectionHighlightBackground#17114070
  • editor.snippetFinalTabstopHighlightBackground#09071770
  • editor.snippetTabstopHighlightBackground#09071770
  • editor.symbolHighlightBackground#09071770
  • editor.wordHighlightBackground#09071770
  • editor.wordHighlightStrongBackground#09071750
  • editor.wordHighlightTextBackground#09071770
  • editorCodeLens.foreground#615848
  • editorCursor.background#09071770
  • editorCursor.foreground#8A7FE3
  • editorError.foreground#D17A7A
  • editorGroup.border#0F0B2D
  • editorGroup.dropBackground#231C10
  • editorGroup.emptyBackground#081516
  • editorGroupHeader.border#0F0B2D
  • editorGroupHeader.tabsBackground#081516
  • editorGutter.addedBackground#2DA92D
  • editorGutter.background#081516
  • editorGutter.commentRangeForeground#615848
  • editorGutter.deletedBackground#D17A7A
  • editorGutter.modifiedBackground#76A6D5
  • editorHint.foreground#2DA92D
  • editorHoverWidget.background#081516
  • editorHoverWidget.border#0F0B2D
  • editorHoverWidget.foreground#B9DFE4
  • editorHoverWidget.highlightForeground#B9DFE4
  • editorHoverWidget.statusBarBackground#081516
  • editorIndentGuide.activeBackground1#8A7FE3
  • editorIndentGuide.background1#09071770
  • editorInfo.foreground#76A6D5
  • editorLineNumber.activeForeground#8A7FE3
  • editorLineNumber.dimmedForeground#61584890
  • editorLineNumber.foreground#615848
  • editorLink.activeForeground#76A6D5
  • editorMarkerNavigation.background#040307
  • editorMarkerNavigationError.background#040307
  • editorMarkerNavigationWarning.background#040307
  • editorMultiCursor.primary.background#09071770
  • editorMultiCursor.primary.foreground#8A7FE3
  • editorMultiCursor.secondary.background#09071770
  • editorMultiCursor.secondary.foreground#B9DFE4
  • editorOverviewRuler.addedForeground#2DA92D
  • editorOverviewRuler.border#0F0B2D
  • editorOverviewRuler.commentForeground#615848
  • editorOverviewRuler.commonContentForeground#B9DFE4
  • editorOverviewRuler.currentContentForeground#76A6D5
  • editorOverviewRuler.deletedForeground#D17A7A
  • editorOverviewRuler.errorForeground#D17A7A
  • editorOverviewRuler.findMatchForeground#B9DFE4
  • editorOverviewRuler.incomingContentForeground#2DA92D
  • editorOverviewRuler.infoForeground#76A6D5
  • editorOverviewRuler.modifiedForeground#76A6D5
  • editorOverviewRuler.rangeHighlightForeground#09071770
  • editorOverviewRuler.selectionHighlightForeground#17114070
  • editorOverviewRuler.warningForeground#D7A674
  • editorOverviewRuler.wordHighlightForeground#09071770
  • editorOverviewRuler.wordHighlightStrongForeground#09071770
  • editorRuler.foreground#09071770
  • editorSuggestWidget.background#081516
  • editorSuggestWidget.border#0F0B2D
  • editorSuggestWidget.focusHighlightForeground#B9DFE4
  • editorSuggestWidget.foreground#615848
  • editorSuggestWidget.highlightForeground#B9DFE4
  • editorSuggestWidget.selectedBackground#CEAF7D80
  • editorSuggestWidget.selectedForeground#B9DFE4
  • editorUnicodeHighlight.background#09071770
  • editorWarning.foreground#D7A674
  • editorWhitespace.foreground#09071770
  • editorWidget.background#081516
  • editorWidget.border#0F0B2D
  • editorWidget.foreground#B9DFE4
  • errorForeground#D17A7A
  • extensionButton.prominentBackground#CEAF7Daa
  • extensionButton.prominentForeground#040A0B
  • extensionButton.prominentHoverBackground#CEAF7D
  • focusBorder#0F0B2D
  • foreground#B9DFE4
  • gitDecoration.addedResourceForeground#2DA92D
  • gitDecoration.conflictingResourceForeground#D7A674
  • gitDecoration.deletedResourceForeground#D17A7A
  • gitDecoration.ignoredResourceForeground#615848
  • gitDecoration.modifiedResourceForeground#76A6D5
  • gitDecoration.renamedResourceForeground#8A7FE3
  • gitDecoration.untrackedResourceForeground#8B81DA
  • input.background#081516
  • input.border#615848
  • input.foreground#B9DFE4
  • input.placeholderForeground#615848
  • inputOption.activeBorder#8A7FE3
  • inputValidation.errorBorder#D17A7A
  • inputValidation.infoBorder#76A6D5
  • inputValidation.warningBorder#D7A674
  • list.activeSelectionBackground#CEAF7D70
  • list.activeSelectionForeground#B9DFE4
  • list.dropBackground#231C10
  • list.dropBetweenBackground#0F0B2D
  • list.errorForeground#D17A7A
  • list.focusBackground#CEAF7D50
  • list.focusForeground#B9DFE4
  • list.highlightForeground#8A7FE3
  • list.hoverBackground#CEAF7D20
  • list.hoverForeground#B9DFE4
  • list.inactiveFocusBackground#040307
  • list.inactiveSelectionBackground#CEAF7D60
  • list.inactiveSelectionForeground#8B81DA
  • list.warningForeground#D7A674
  • listFilterWidget.background#231C10
  • listFilterWidget.noMatchesOutline#D17A7A
  • listFilterWidget.outline#0F0B2D
  • merge.border#0F0B2D
  • merge.currentContentBackground#76A6D520
  • merge.currentHeaderBackground#76A6D540
  • merge.incomingContentBackground#2DA92D20
  • merge.incomingHeaderBackground#2DA92D40
  • mergeEditor.change.background#D7A674
  • notificationLink.foreground#76A6D5
  • notifications.background#040307
  • notifications.border#0F0B2D
  • notifications.foreground#B9DFE4
  • notificationsErrorIcon.foreground#D17A7A
  • notificationsInfoIcon.foreground#76A6D5
  • notificationsWarningIcon.foreground#D7A674
  • panel.background#040307
  • panel.border#8A7FE3
  • panelInput.border#615848
  • panelTitle.activeBorder#8A7FE3
  • panelTitle.activeForeground#B9DFE4
  • panelTitle.inactiveForeground#615848
  • peekView.border#CEAF7D
  • peekViewEditor.background#081516
  • peekViewEditor.matchHighlightBackground#5A3E1270
  • peekViewResult.background#081516
  • peekViewResult.fileForeground#B9DFE4
  • peekViewResult.lineForeground#B9DFE4
  • peekViewResult.matchHighlightBackground#09071770
  • peekViewResult.selectionBackground#040307
  • peekViewResult.selectionForeground#B9DFE4
  • peekViewTitle.background#081516
  • peekViewTitleDescription.foreground#8B81DA
  • peekViewTitleLabel.foreground#B9DFE4
  • pickerGroup.border#CEAF7D
  • pickerGroup.foreground#C1BBEC
  • progressBar.background#8A7FE3
  • selection.background#CEAF7D50
  • settings.checkboxBackground#081516
  • settings.checkboxBorder#0F0B2D
  • settings.checkboxForeground#B9DFE4
  • settings.dropdownBackground#081516
  • settings.dropdownBorder#0F0B2D
  • settings.dropdownForeground#B9DFE4
  • settings.focusedRowBackground#09071770
  • settings.focusedRowBorder#615848
  • settings.headerBorder#0F0B2D
  • settings.headerForeground#B9DFE4
  • settings.inactiveSelectedItemBorder#615848
  • settings.modifiedItemIndicator#D7A674
  • settings.numberInputBackground#081516
  • settings.numberInputBorder#615848
  • settings.numberInputForeground#B9DFE4
  • settings.rowHoverBackground#09071770
  • settings.settingsHeaderHoverForeground#B9DFE4
  • settings.textInputBackground#081516
  • settings.textInputBorder#615848
  • settings.textInputForeground#B9DFE4
  • sideBar.background#081516
  • sideBarActivityBarTop.border#0F0B2D
  • sideBarSectionHeader.background#040307
  • sideBarSectionHeader.border#0F0B2D
  • sideBarStickyScroll.background#081516
  • sideBarStickyScroll.border#0F0B2D
  • sideBarStickyScroll.shadow#0F0B2D
  • sideBarTitle.background#081516
  • sideBarTitle.foreground#B9DFE4
  • statusBar.background#CEAF7D
  • statusBar.debuggingBackground#D7A674
  • statusBar.debuggingForeground#040A0B
  • statusBar.foreground#040A0B
  • statusBar.noFolderBackground#8B81DA
  • statusBar.noFolderForeground#040A0B
  • statusBarItem.activeBackground#CEAF7Daa
  • statusBarItem.errorBackground#D17A7A
  • statusBarItem.errorForeground#040A0B
  • statusBarItem.errorHoverBackground#D17A7Aaa
  • statusBarItem.hoverBackground#CEAF7Daa
  • statusBarItem.prominentBackground#CEAF7Daa
  • statusBarItem.prominentForeground#040A0B
  • statusBarItem.prominentHoverBackground#CEAF7Daa
  • statusBarItem.prominentHoverForeground#040A0B
  • statusBarItem.remoteBackground#8A7FE3
  • statusBarItem.remoteForeground#040A0B
  • statusBarItem.remoteHoverBackground#8A7FE3aa
  • statusBarItem.warningBackground#D7A674
  • statusBarItem.warningForeground#040A0B
  • statusBarItem.warningHoverBackground#D7A674aa
  • tab.activeBackground#040307
  • tab.activeBorderTop#8A7FE3
  • tab.activeForeground#B9DFE4
  • tab.border#0F0B2D
  • tab.hoverBackground#04030780
  • tab.hoverForeground#B9DFE4
  • tab.inactiveBackground#081516
  • tab.inactiveForeground#615848
  • tab.selectedBackground#09071770
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#557AFF
  • terminal.ansiBrightBlack#3F3F3F
  • terminal.ansiBrightBlue#5A78E4
  • terminal.ansiBrightCyan#1AD5F1
  • terminal.ansiBrightGreen#7DDF22
  • terminal.ansiBrightMagenta#CE99DB
  • terminal.ansiBrightRed#FB8EA7
  • terminal.ansiBrightWhite#FFFFFE
  • terminal.ansiBrightYellow#E9DF78
  • terminal.ansiCyan#1992A4
  • terminal.ansiGreen#509511
  • terminal.ansiMagenta#9A70A4
  • terminal.ansiRed#DC5170
  • terminal.ansiWhite#FBFAF9
  • terminal.ansiYellow#8D863B
  • terminal.background#081516
  • terminal.border#0F0B2D
  • terminal.foreground#B9DFE4
  • terminal.inactiveSelectionBackground#17114070
  • terminal.selectionBackground#17114070
  • textBlockQuote.background#231C10
  • textBlockQuote.border#0F0B2D
  • textCodeBlock.background#231C10
  • textLink.activeForeground#76A6D5
  • textLink.foreground#CEAF7D
  • textPreformat.background#231C10
  • textPreformat.foreground#B9DFE4
  • textSeparator.foreground#B9DFE4
  • titleBar.activeBackground#040307
  • titleBar.activeForeground#B9DFE4
  • titleBar.inactiveBackground#040307
  • titleBar.inactiveForeground#615848
  • widget.border#0F0B2D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#B9DFE4
meta.diff, meta.diff.header#615848
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#B8B2EB
emphasisitalic
strongbold
invalid#D17A7Astrikethrough
invalid.deprecated#B9DFE4underline italic
header#B8B2EB
source.ini, source.ignore, source#8B81DA
markup.inserted#B8B2EB
markup.deleted#D17A7A
markup.changed#76A6D5
markup.error#D17A7A
markup.underlineunderline
markup.bold#D7A674bold
markup.heading#8A7FE3bold
markup.italic#8B81DAitalic
markup.inline.raw, markup.raw.restructuredtext#8A7FE3
markup.underline.link, markup.underline.link.image, markup.quote#76A6D5
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#CEAF7D
meta.separator.markdown#8A7FE3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#AFA6F2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D7A674
entity.name.class, entity.name.type.class, entity.other.inherited-class#CEAF7D
entity.name.tag, entity.other.attribute-name.parent-selector#D3CFF2
entity.other.attribute-name#CEAF7D
entity.name.function, meta.function-call, meta.method-call, meta.method#8A7FE3
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#C4EDF2
support#9D94E0
entity.name, variable.other.key#8A7FE3
entity.name.type#BCB5F2
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#C6B0E8
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#B7B0E8
entity.other.attribute-name.class.css#8A7FE3
storage.class, storage.type#CEAF7D
storage.modifier#BEB8EA
comment, punctuation.definition.comment, unused.comment, wildcard.comment#615848
constant#B8B2EB
constant.other.color#9B90EF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#8AD6E1
constant.other.date, constant.other.timestamp#B2E9F0
keyword.operator#F0DEC1
keyword.other.unit#ACA5DF
keyword.control, keyword.other.template, keyword.other.substitution#9FD8DF
keyword.other.this#B8B2EB
keyword.control.import, keyword.control.from#9ECDEB
keyword.control.new, keyword.operator.new, keyword.other.important.css#CEAF7D
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#94C9EF
meta.attribute-selector.scss#C7C1F6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#D3CFF2
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#CBB7F0
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#CEAF7D
support.constant.property-value.css, constant.numeric.css#8B81DA
keyword.control.at-rule.apply.tailwind#9ECDEB
keyword.control.at-rule.tailwind.tailwind#9FD8DF
keyword.control.at-rule.layer.tailwind#94C9EF
meta.selector#C7C1F6
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F5E5CC
punctuation.definition.constant.restructuredtext#B8B2EB
string.quoted.docstring.multi#8A7FE3
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#F5E5CC
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#CBB7F0
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#FBFAF9
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#EEEDCE
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#F6F1DF
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#F4E9CD
punctuation.definition.directive.restructuredtext#B8B2EB
variable#F5DBB2
variable.other.alias.yaml#F5DBB2underline
variable.language, variable.parameter.function.language.special#8AD6E1
variable.other.constant#EDE2AB
support.variable#F5DBB2
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E0E7B1
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D7A674
support.function, support.type.property-name#E8DBF5
storage#EBD9BC
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#8D863B
punctuation.definition.group.capture.regexp#DC5170
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#DC5170
punctuation.definition.character-class.regexp#E9DF78
punctuation.definition.group.regexp#5A78E4
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#DC5170
meta.assertion.look-ahead.regexp#5A78E4
source.json meta.structure.dictionary.json support.type.property-name.json#8A7FE3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CEAF7D
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#76A6D5
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#D7A674
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#D17A7A
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#2DA92D
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#8A7FE3
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#CEAF7D
token.info-token#76A6D5
token.warn-token#D7A674
token.error-token#D17A7A
token.debug-token#D7A674
RLabs Themes Collection by RLabs Inc. - VS Code Theme