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#EFE4F170
  • activityBar.activeBorder#230A12
  • activityBar.background#e3e3c6
  • activityBar.foreground#110712
  • activityBar.inactiveForeground#CACADA
  • activityBarBadge.background#252797
  • activityBarBadge.foreground#110712
  • activityBarTop.foreground#110712
  • badge.background#252797
  • badge.foreground#110712
  • breadcrumb.activeForeground#110712
  • breadcrumb.activeSelectionForeground#110712
  • breadcrumb.background#e3e3c6
  • breadcrumb.focusForeground#110712
  • breadcrumb.foreground#CACADA
  • breadcrumbPicker.background#e3e3c6
  • button.background#252797db
  • button.foreground#110712
  • button.hoverBackground#252797
  • button.secondaryBackground#230A12db
  • button.secondaryForeground#110712
  • button.secondaryHoverBackground#230A12
  • checkbox.background#fcf9d8
  • checkbox.foreground#110712
  • debugToolBar.background#2998FF
  • debugToolBar.foreground#E0F2F5
  • descriptionForeground#16321D
  • diffEditor.diagonalFill#2998FF
  • diffEditor.insertedLineBackground#2998FF40
  • diffEditor.insertedTextBackground#2998FF50
  • diffEditor.insertedTextBorder#2998FF
  • diffEditor.removedLineBackground#8B282840
  • diffEditor.removedTextBackground#8B282850
  • diffEditor.removedTextBorder#8B2828
  • diffEditorGutter.insertedLineBackground#2998FF
  • diffEditorGutter.removedLineBackground#8B2828
  • disabledForeground#CACADA
  • dropdown.background#d8d3b6
  • dropdown.border#CECFED
  • dropdown.foreground#110712
  • editor.background#fcf9d8
  • editor.findMatchBackground#ABD7DE70
  • editor.findMatchForeground#110712
  • editor.findMatchHighlightBackground#EFE4F170
  • editor.findMatchHighlightForeground#110712
  • editor.findRangeHighlightBackground#E5BDC970
  • editor.foldBackground#EFE4F170
  • editor.foldPlaceholderForeground#110712
  • editor.foreground#110712
  • editor.hoverHighlightBackground#EFE4F170
  • editor.inactiveSelectionBackground#E5BDC970
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#16321D
  • editor.rangeHighlightBackground#EFE4F170
  • editor.selectionBackground#E5BDC970
  • editor.selectionForeground#110712
  • editor.selectionHighlightBackground#E5BDC970
  • editor.snippetFinalTabstopHighlightBackground#EFE4F170
  • editor.snippetTabstopHighlightBackground#EFE4F170
  • editor.symbolHighlightBackground#EFE4F170
  • editor.wordHighlightBackground#EFE4F170
  • editor.wordHighlightStrongBackground#EFE4F150
  • editor.wordHighlightTextBackground#EFE4F170
  • editorCodeLens.foreground#CACADA
  • editorCursor.background#EFE4F170
  • editorCursor.foreground#230A12
  • editorError.foreground#8B2828
  • editorGroup.border#CECFED
  • editorGroup.dropBackground#d8d3b6
  • editorGroup.emptyBackground#fcf9d8
  • editorGroupHeader.border#CECFED
  • editorGroupHeader.tabsBackground#fcf9d8
  • editorGutter.addedBackground#225D22
  • editorGutter.background#fcf9d8
  • editorGutter.commentRangeForeground#CACADA
  • editorGutter.deletedBackground#8B2828
  • editorGutter.modifiedBackground#2998FF
  • editorHint.foreground#225D22
  • editorHoverWidget.background#fcf9d8
  • editorHoverWidget.border#CECFED
  • editorHoverWidget.foreground#110712
  • editorHoverWidget.highlightForeground#110712
  • editorHoverWidget.statusBarBackground#fcf9d8
  • editorIndentGuide.activeBackground1#230A12
  • editorIndentGuide.background1#EFE4F170
  • editorInfo.foreground#2998FF
  • editorLineNumber.activeForeground#230A12
  • editorLineNumber.dimmedForeground#CACADA90
  • editorLineNumber.foreground#CACADA
  • editorLink.activeForeground#2998FF
  • editorMarkerNavigation.background#e3e3c6
  • editorMarkerNavigationError.background#e3e3c6
  • editorMarkerNavigationWarning.background#e3e3c6
  • editorMultiCursor.primary.background#EFE4F170
  • editorMultiCursor.primary.foreground#230A12
  • editorMultiCursor.secondary.background#EFE4F170
  • editorMultiCursor.secondary.foreground#110712
  • editorOverviewRuler.addedForeground#225D22
  • editorOverviewRuler.border#CECFED
  • editorOverviewRuler.commentForeground#CACADA
  • editorOverviewRuler.commonContentForeground#110712
  • editorOverviewRuler.currentContentForeground#2998FF
  • editorOverviewRuler.deletedForeground#8B2828
  • editorOverviewRuler.errorForeground#8B2828
  • editorOverviewRuler.findMatchForeground#110712
  • editorOverviewRuler.incomingContentForeground#225D22
  • editorOverviewRuler.infoForeground#2998FF
  • editorOverviewRuler.modifiedForeground#2998FF
  • editorOverviewRuler.rangeHighlightForeground#EFE4F170
  • editorOverviewRuler.selectionHighlightForeground#E5BDC970
  • editorOverviewRuler.warningForeground#D96A00
  • editorOverviewRuler.wordHighlightForeground#EFE4F170
  • editorOverviewRuler.wordHighlightStrongForeground#EFE4F170
  • editorRuler.foreground#EFE4F170
  • editorSuggestWidget.background#fcf9d8
  • editorSuggestWidget.border#CECFED
  • editorSuggestWidget.focusHighlightForeground#110712
  • editorSuggestWidget.foreground#CACADA
  • editorSuggestWidget.highlightForeground#110712
  • editorSuggestWidget.selectedBackground#25279780
  • editorSuggestWidget.selectedForeground#110712
  • editorUnicodeHighlight.background#EFE4F170
  • editorWarning.foreground#D96A00
  • editorWhitespace.foreground#EFE4F170
  • editorWidget.background#fcf9d8
  • editorWidget.border#CECFED
  • editorWidget.foreground#110712
  • errorForeground#8B2828
  • extensionButton.prominentBackground#252797aa
  • extensionButton.prominentForeground#110712
  • extensionButton.prominentHoverBackground#252797
  • focusBorder#CECFED
  • foreground#110712
  • gitDecoration.addedResourceForeground#225D22
  • gitDecoration.conflictingResourceForeground#D96A00
  • gitDecoration.deletedResourceForeground#8B2828
  • gitDecoration.ignoredResourceForeground#CACADA
  • gitDecoration.modifiedResourceForeground#2998FF
  • gitDecoration.renamedResourceForeground#230A12
  • gitDecoration.untrackedResourceForeground#16321D
  • input.background#fcf9d8
  • input.border#CACADA
  • input.foreground#110712
  • input.placeholderForeground#CACADA
  • inputOption.activeBorder#230A12
  • inputValidation.errorBorder#8B2828
  • inputValidation.infoBorder#2998FF
  • inputValidation.warningBorder#D96A00
  • list.activeSelectionBackground#25279770
  • list.activeSelectionForeground#110712
  • list.dropBackground#d8d3b6
  • list.dropBetweenBackground#CECFED
  • list.errorForeground#8B2828
  • list.focusBackground#25279750
  • list.focusForeground#110712
  • list.highlightForeground#230A12
  • list.hoverBackground#25279720
  • list.hoverForeground#110712
  • list.inactiveFocusBackground#e3e3c6
  • list.inactiveSelectionBackground#25279760
  • list.inactiveSelectionForeground#16321D
  • list.warningForeground#D96A00
  • listFilterWidget.background#d8d3b6
  • listFilterWidget.noMatchesOutline#8B2828
  • listFilterWidget.outline#CECFED
  • merge.border#CECFED
  • merge.currentContentBackground#2998FF20
  • merge.currentHeaderBackground#2998FF40
  • merge.incomingContentBackground#225D2220
  • merge.incomingHeaderBackground#225D2240
  • mergeEditor.change.background#D96A00
  • notificationLink.foreground#2998FF
  • notifications.background#e3e3c6
  • notifications.border#CECFED
  • notifications.foreground#110712
  • notificationsErrorIcon.foreground#8B2828
  • notificationsInfoIcon.foreground#2998FF
  • notificationsWarningIcon.foreground#D96A00
  • panel.background#e3e3c6
  • panel.border#230A12
  • panelInput.border#CACADA
  • panelTitle.activeBorder#230A12
  • panelTitle.activeForeground#110712
  • panelTitle.inactiveForeground#CACADA
  • peekView.border#252797
  • peekViewEditor.background#fcf9d8
  • peekViewEditor.matchHighlightBackground#ABD7DE70
  • peekViewResult.background#fcf9d8
  • peekViewResult.fileForeground#110712
  • peekViewResult.lineForeground#110712
  • peekViewResult.matchHighlightBackground#EFE4F170
  • peekViewResult.selectionBackground#e3e3c6
  • peekViewResult.selectionForeground#110712
  • peekViewTitle.background#fcf9d8
  • peekViewTitleDescription.foreground#16321D
  • peekViewTitleLabel.foreground#110712
  • pickerGroup.border#252797
  • pickerGroup.foreground#265B63
  • progressBar.background#230A12
  • selection.background#25279750
  • settings.checkboxBackground#fcf9d8
  • settings.checkboxBorder#CECFED
  • settings.checkboxForeground#110712
  • settings.dropdownBackground#fcf9d8
  • settings.dropdownBorder#CECFED
  • settings.dropdownForeground#110712
  • settings.focusedRowBackground#EFE4F170
  • settings.focusedRowBorder#CACADA
  • settings.headerBorder#CECFED
  • settings.headerForeground#110712
  • settings.inactiveSelectedItemBorder#CACADA
  • settings.modifiedItemIndicator#D96A00
  • settings.numberInputBackground#fcf9d8
  • settings.numberInputBorder#CACADA
  • settings.numberInputForeground#110712
  • settings.rowHoverBackground#EFE4F170
  • settings.settingsHeaderHoverForeground#110712
  • settings.textInputBackground#fcf9d8
  • settings.textInputBorder#CACADA
  • settings.textInputForeground#110712
  • sideBar.background#fcf9d8
  • sideBarActivityBarTop.border#CECFED
  • sideBarSectionHeader.background#e3e3c6
  • sideBarSectionHeader.border#CECFED
  • sideBarStickyScroll.background#fcf9d8
  • sideBarStickyScroll.border#CECFED
  • sideBarStickyScroll.shadow#CECFED
  • sideBarTitle.background#fcf9d8
  • sideBarTitle.foreground#110712
  • statusBar.background#252797
  • statusBar.debuggingBackground#D96A00
  • statusBar.debuggingForeground#110712
  • statusBar.foreground#110712
  • statusBar.noFolderBackground#16321D
  • statusBar.noFolderForeground#E0F2F5
  • statusBarItem.activeBackground#252797aa
  • statusBarItem.errorBackground#8B2828
  • statusBarItem.errorForeground#110712
  • statusBarItem.errorHoverBackground#8B2828aa
  • statusBarItem.hoverBackground#252797aa
  • statusBarItem.prominentBackground#252797aa
  • statusBarItem.prominentForeground#E0F2F5
  • statusBarItem.prominentHoverBackground#252797aa
  • statusBarItem.prominentHoverForeground#E0F2F5
  • statusBarItem.remoteBackground#230A12
  • statusBarItem.remoteForeground#110712
  • statusBarItem.remoteHoverBackground#230A12aa
  • statusBarItem.warningBackground#D96A00
  • statusBarItem.warningForeground#110712
  • statusBarItem.warningHoverBackground#D96A00aa
  • tab.activeBackground#e3e3c6
  • tab.activeBorderTop#230A12
  • tab.activeForeground#110712
  • tab.border#CECFED
  • tab.hoverBackground#e3e3c680
  • tab.hoverForeground#110712
  • tab.inactiveBackground#fcf9d8
  • tab.inactiveForeground#CACADA
  • tab.selectedBackground#EFE4F170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#565ED0
  • terminal.ansiBrightBlack#464646
  • terminal.ansiBrightBlue#5B6AFF
  • terminal.ansiBrightCyan#00B257
  • terminal.ansiBrightGreen#00B100
  • terminal.ansiBrightMagenta#E548FF
  • terminal.ansiBrightRed#FF5B7C
  • terminal.ansiBrightWhite#878700
  • terminal.ansiBrightYellow#A48200
  • terminal.ansiCyan#00A653
  • terminal.ansiGreen#00BB00
  • terminal.ansiMagenta#E865FF
  • terminal.ansiRed#FF5474
  • terminal.ansiWhite#898900
  • terminal.ansiYellow#AA8700
  • terminal.background#fcf9d8
  • terminal.border#CECFED
  • terminal.foreground#110712
  • terminal.inactiveSelectionBackground#E5BDC970
  • terminal.selectionBackground#E5BDC970
  • textBlockQuote.background#d8d3b6
  • textBlockQuote.border#CECFED
  • textCodeBlock.background#d8d3b6
  • textLink.activeForeground#2998FF
  • textLink.foreground#252797
  • textPreformat.background#d8d3b6
  • textPreformat.foreground#110712
  • textSeparator.foreground#110712
  • titleBar.activeBackground#e3e3c6
  • titleBar.activeForeground#110712
  • titleBar.inactiveBackground#e3e3c6
  • titleBar.inactiveForeground#CACADA
  • widget.border#CECFED

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#110712
meta.diff, meta.diff.header#CACADA
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#2F6B74
emphasisitalic
strongbold
invalid#8B2828strikethrough
invalid.deprecated#110712underline italic
header#2F6B74
source.ini, source.ignore, source#16321D
markup.inserted#2F6B74
markup.deleted#8B2828
markup.changed#2998FF
markup.error#8B2828
markup.underlineunderline
markup.bold#D96A00bold
markup.heading#230A12bold
markup.italic#16321Ditalic
markup.inline.raw, markup.raw.restructuredtext#230A12
markup.underline.link, markup.underline.link.image, markup.quote#2998FF
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#252797
meta.separator.markdown#230A12
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#485832
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D96A00
entity.name.class, entity.name.type.class, entity.other.inherited-class#252797
entity.name.tag, entity.other.attribute-name.parent-selector#2A616A
entity.other.attribute-name#252797
entity.name.function, meta.function-call, meta.method-call, meta.method#230A12
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#5C2965
support#432849
entity.name, variable.other.key#230A12
entity.name.type#6F2A3F
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#542B2D
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#3A6E48
entity.other.attribute-name.class.css#230A12
storage.class, storage.type#252797
storage.modifier#52255B
comment, punctuation.definition.comment, unused.comment, wildcard.comment#CACADA
constant#2F6B74
constant.other.color#384724
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#1B3623
constant.other.date, constant.other.timestamp#30643E
keyword.operator#5A303C
keyword.other.unit#394922
keyword.control, keyword.other.template, keyword.other.substitution#285157
keyword.other.this#2F6B74
keyword.control.import, keyword.control.from#253D46
keyword.control.new, keyword.operator.new, keyword.other.important.css#252797
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#25405B
meta.attribute-selector.scss#4F672D
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#2A616A
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#2F586A
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#252797
support.constant.property-value.css, constant.numeric.css#16321D
keyword.control.at-rule.apply.tailwind#253D46
keyword.control.at-rule.tailwind.tailwind#285157
keyword.control.at-rule.layer.tailwind#25405B
meta.selector#4F672D
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#763C81
punctuation.definition.constant.restructuredtext#2F6B74
string.quoted.docstring.multi#230A12
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#763C81
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#2F586A
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#898900
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#733B6D
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#6B416D
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#702C72
punctuation.definition.directive.restructuredtext#2F6B74
variable#295056
variable.other.alias.yaml#295056underline
variable.language, variable.parameter.function.language.special#1B3623
variable.other.constant#344F6A
support.variable#295056
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#303F55
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D96A00
support.function, support.type.property-name#16AB00
storage#5B472F
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#AA8700
punctuation.definition.group.capture.regexp#FF5474
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5474
punctuation.definition.character-class.regexp#A48200
punctuation.definition.group.regexp#5B6AFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5474
meta.assertion.look-ahead.regexp#5B6AFF
source.json meta.structure.dictionary.json support.type.property-name.json#230A12
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#252797
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#2998FF
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#D96A00
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#8B2828
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#225D22
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#230A12
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#252797
token.info-token#2998FF
token.warn-token#D96A00
token.error-token#8B2828
token.debug-token#D96A00
RLabs Themes Collection by RLabs Inc. - VS Code Theme