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#D9CACE70
  • activityBar.activeBorder#1C1C87
  • activityBar.background#fff6d8
  • activityBar.foreground#1E1320
  • activityBar.inactiveForeground#ad9676
  • activityBarBadge.background#D17600
  • activityBarBadge.foreground#D2D0D2
  • activityBarTop.foreground#1E1320
  • badge.background#D17600
  • badge.foreground#D2D0D2
  • breadcrumb.activeForeground#1E1320
  • breadcrumb.activeSelectionForeground#1E1320
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#1E1320
  • breadcrumb.foreground#ad9676
  • breadcrumbPicker.background#fff6d8
  • button.background#D17600db
  • button.foreground#D2D0D2
  • button.hoverBackground#D17600
  • button.secondaryBackground#1C1C87db
  • button.secondaryForeground#1E1320
  • button.secondaryHoverBackground#1C1C87
  • checkbox.background#fffae2
  • checkbox.foreground#1E1320
  • debugToolBar.background#3473B2
  • debugToolBar.foreground#1E1320
  • descriptionForeground#171726
  • diffEditor.diagonalFill#3473B2
  • diffEditor.insertedLineBackground#3473B240
  • diffEditor.insertedTextBackground#3473B250
  • diffEditor.insertedTextBorder#3473B2
  • diffEditor.removedLineBackground#941E1E40
  • diffEditor.removedTextBackground#941E1E50
  • diffEditor.removedTextBorder#941E1E
  • diffEditorGutter.insertedLineBackground#3473B2
  • diffEditorGutter.removedLineBackground#941E1E
  • disabledForeground#ad9676
  • dropdown.background#cdc7bb
  • dropdown.border#CBC5BE
  • dropdown.foreground#1E1320
  • editor.background#fffae2
  • editor.findMatchBackground#C7AF8F70
  • editor.findMatchForeground#1E1320
  • editor.findMatchHighlightBackground#D9CACE70
  • editor.findMatchHighlightForeground#1E1320
  • editor.findRangeHighlightBackground#A8C3C770
  • editor.foldBackground#D9CACE70
  • editor.foldPlaceholderForeground#1E1320
  • editor.foreground#1E1320
  • editor.hoverHighlightBackground#D9CACE70
  • editor.inactiveSelectionBackground#A8C3C770
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#171726
  • editor.rangeHighlightBackground#D9CACE70
  • editor.selectionBackground#A8C3C770
  • editor.selectionForeground#1E1320
  • editor.selectionHighlightBackground#A8C3C770
  • editor.snippetFinalTabstopHighlightBackground#D9CACE70
  • editor.snippetTabstopHighlightBackground#D9CACE70
  • editor.symbolHighlightBackground#D9CACE70
  • editor.wordHighlightBackground#D9CACE70
  • editor.wordHighlightStrongBackground#D9CACE50
  • editor.wordHighlightTextBackground#D9CACE70
  • editorCodeLens.foreground#ad9676
  • editorCursor.background#D9CACE70
  • editorCursor.foreground#1C1C87
  • editorError.foreground#941E1E
  • editorGroup.border#CBC5BE
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#CBC5BE
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#205F20
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#ad9676
  • editorGutter.deletedBackground#941E1E
  • editorGutter.modifiedBackground#3473B2
  • editorHint.foreground#205F20
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#CBC5BE
  • editorHoverWidget.foreground#1E1320
  • editorHoverWidget.highlightForeground#1E1320
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#1C1C87
  • editorIndentGuide.background1#D9CACE70
  • editorInfo.foreground#3473B2
  • editorLineNumber.activeForeground#1C1C87
  • editorLineNumber.dimmedForeground#ad967690
  • editorLineNumber.foreground#ad9676
  • editorLink.activeForeground#3473B2
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#D9CACE70
  • editorMultiCursor.primary.foreground#1C1C87
  • editorMultiCursor.secondary.background#D9CACE70
  • editorMultiCursor.secondary.foreground#1E1320
  • editorOverviewRuler.addedForeground#205F20
  • editorOverviewRuler.border#CBC5BE
  • editorOverviewRuler.commentForeground#ad9676
  • editorOverviewRuler.commonContentForeground#1E1320
  • editorOverviewRuler.currentContentForeground#3473B2
  • editorOverviewRuler.deletedForeground#941E1E
  • editorOverviewRuler.errorForeground#941E1E
  • editorOverviewRuler.findMatchForeground#1E1320
  • editorOverviewRuler.incomingContentForeground#205F20
  • editorOverviewRuler.infoForeground#3473B2
  • editorOverviewRuler.modifiedForeground#3473B2
  • editorOverviewRuler.rangeHighlightForeground#D9CACE70
  • editorOverviewRuler.selectionHighlightForeground#A8C3C770
  • editorOverviewRuler.warningForeground#8F5923
  • editorOverviewRuler.wordHighlightForeground#D9CACE70
  • editorOverviewRuler.wordHighlightStrongForeground#D9CACE70
  • editorRuler.foreground#D9CACE70
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#CBC5BE
  • editorSuggestWidget.focusHighlightForeground#1E1320
  • editorSuggestWidget.foreground#ad9676
  • editorSuggestWidget.highlightForeground#1E1320
  • editorSuggestWidget.selectedBackground#D1760080
  • editorSuggestWidget.selectedForeground#1E1320
  • editorUnicodeHighlight.background#D9CACE70
  • editorWarning.foreground#8F5923
  • editorWhitespace.foreground#D9CACE70
  • editorWidget.background#fffae2
  • editorWidget.border#CBC5BE
  • editorWidget.foreground#1E1320
  • errorForeground#941E1E
  • extensionButton.prominentBackground#D17600aa
  • extensionButton.prominentForeground#D2D0D2
  • extensionButton.prominentHoverBackground#D17600
  • focusBorder#CBC5BE
  • foreground#1E1320
  • gitDecoration.addedResourceForeground#205F20
  • gitDecoration.conflictingResourceForeground#8F5923
  • gitDecoration.deletedResourceForeground#941E1E
  • gitDecoration.ignoredResourceForeground#ad9676
  • gitDecoration.modifiedResourceForeground#3473B2
  • gitDecoration.renamedResourceForeground#1C1C87
  • gitDecoration.untrackedResourceForeground#171726
  • input.background#fffae2
  • input.border#ad9676
  • input.foreground#1E1320
  • input.placeholderForeground#ad9676
  • inputOption.activeBorder#1C1C87
  • inputValidation.errorBorder#941E1E
  • inputValidation.infoBorder#3473B2
  • inputValidation.warningBorder#8F5923
  • list.activeSelectionBackground#D1760070
  • list.activeSelectionForeground#1E1320
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#CBC5BE
  • list.errorForeground#941E1E
  • list.focusBackground#D1760050
  • list.focusForeground#1E1320
  • list.highlightForeground#1C1C87
  • list.hoverBackground#D1760020
  • list.hoverForeground#1E1320
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#D1760060
  • list.inactiveSelectionForeground#171726
  • list.warningForeground#8F5923
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#941E1E
  • listFilterWidget.outline#CBC5BE
  • merge.border#CBC5BE
  • merge.currentContentBackground#3473B220
  • merge.currentHeaderBackground#3473B240
  • merge.incomingContentBackground#205F2020
  • merge.incomingHeaderBackground#205F2040
  • mergeEditor.change.background#8F5923
  • notificationLink.foreground#3473B2
  • notifications.background#fff6d8
  • notifications.border#CBC5BE
  • notifications.foreground#1E1320
  • notificationsErrorIcon.foreground#941E1E
  • notificationsInfoIcon.foreground#3473B2
  • notificationsWarningIcon.foreground#8F5923
  • panel.background#fff6d8
  • panel.border#1C1C87
  • panelInput.border#ad9676
  • panelTitle.activeBorder#1C1C87
  • panelTitle.activeForeground#1E1320
  • panelTitle.inactiveForeground#ad9676
  • peekView.border#D17600
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#C7AF8F70
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#1E1320
  • peekViewResult.lineForeground#1E1320
  • peekViewResult.matchHighlightBackground#D9CACE70
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#1E1320
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#171726
  • peekViewTitleLabel.foreground#1E1320
  • pickerGroup.border#D17600
  • pickerGroup.foreground#226D37
  • progressBar.background#1C1C87
  • selection.background#D1760050
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#CBC5BE
  • settings.checkboxForeground#1E1320
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#CBC5BE
  • settings.dropdownForeground#1E1320
  • settings.focusedRowBackground#D9CACE70
  • settings.focusedRowBorder#ad9676
  • settings.headerBorder#CBC5BE
  • settings.headerForeground#1E1320
  • settings.inactiveSelectedItemBorder#ad9676
  • settings.modifiedItemIndicator#8F5923
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#ad9676
  • settings.numberInputForeground#1E1320
  • settings.rowHoverBackground#D9CACE70
  • settings.settingsHeaderHoverForeground#1E1320
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#ad9676
  • settings.textInputForeground#1E1320
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#CBC5BE
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#CBC5BE
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#CBC5BE
  • sideBarStickyScroll.shadow#CBC5BE
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#1E1320
  • statusBar.background#D17600
  • statusBar.debuggingBackground#8F5923
  • statusBar.debuggingForeground#1E1320
  • statusBar.foreground#D2D0D2
  • statusBar.noFolderBackground#171726
  • statusBar.noFolderForeground#D2D0D2
  • statusBarItem.activeBackground#D17600aa
  • statusBarItem.errorBackground#941E1E
  • statusBarItem.errorForeground#1E1320
  • statusBarItem.errorHoverBackground#941E1Eaa
  • statusBarItem.hoverBackground#D17600aa
  • statusBarItem.prominentBackground#D17600aa
  • statusBarItem.prominentForeground#D2D0D2
  • statusBarItem.prominentHoverBackground#D17600aa
  • statusBarItem.prominentHoverForeground#D2D0D2
  • statusBarItem.remoteBackground#1C1C87
  • statusBarItem.remoteForeground#1E1320
  • statusBarItem.remoteHoverBackground#1C1C87aa
  • statusBarItem.warningBackground#8F5923
  • statusBarItem.warningForeground#1E1320
  • statusBarItem.warningHoverBackground#8F5923aa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#1C1C87
  • tab.activeForeground#1E1320
  • tab.border#CBC5BE
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#1E1320
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#ad9676
  • tab.selectedBackground#D9CACE70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3E2473
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#5A13EC
  • terminal.ansiBrightCyan#00A06C
  • terminal.ansiBrightGreen#4BA100
  • terminal.ansiBrightMagenta#C273FF
  • terminal.ansiBrightRed#FF564F
  • terminal.ansiBrightWhite#868600
  • terminal.ansiBrightYellow#7D8600
  • terminal.ansiCyan#107E5B
  • terminal.ansiGreen#4CA000
  • terminal.ansiMagenta#7C10D5
  • terminal.ansiRed#FF625B
  • terminal.ansiWhite#DB6B00
  • terminal.ansiYellow#6C7220
  • terminal.background#fffae2
  • terminal.border#CBC5BE
  • terminal.foreground#1E1320
  • terminal.inactiveSelectionBackground#A8C3C770
  • terminal.selectionBackground#A8C3C770
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#CBC5BE
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#3473B2
  • textLink.foreground#D17600
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#1E1320
  • textSeparator.foreground#1E1320
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#1E1320
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#ad9676
  • widget.border#CBC5BE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#1E1320
meta.diff, meta.diff.header#ad9676
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#1E5C67
emphasisitalic
strongbold
invalid#941E1Estrikethrough
invalid.deprecated#1E1320underline italic
header#1E5C67
source.ini, source.ignore, source#171726
markup.inserted#1E5C67
markup.deleted#941E1E
markup.changed#3473B2
markup.error#941E1E
markup.underlineunderline
markup.bold#8F5923bold
markup.heading#1C1C87bold
markup.italic#171726italic
markup.inline.raw, markup.raw.restructuredtext#1C1C87
markup.underline.link, markup.underline.link.image, markup.quote#3473B2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D17600
meta.separator.markdown#1C1C87
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00B431
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8F5923
entity.name.class, entity.name.type.class, entity.other.inherited-class#D17600
entity.name.tag, entity.other.attribute-name.parent-selector#0099B5
entity.other.attribute-name#D17600
entity.name.function, meta.function-call, meta.method-call, meta.method#1C1C87
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#6A4F2A
support#184B53
entity.name, variable.other.key#1C1C87
entity.name.type#212164
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#2F1D53
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#772C41
entity.other.attribute-name.class.css#1C1C87
storage.class, storage.type#D17600
storage.modifier#592262
comment, punctuation.definition.comment, unused.comment, wildcard.comment#ad9676
constant#1E5C67
constant.other.color#4A3417
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#131348
constant.other.date, constant.other.timestamp#73263C
keyword.operator#00AF30
keyword.other.unit#563C1A
keyword.control, keyword.other.template, keyword.other.substitution#123F1F
keyword.other.this#1E5C67
keyword.control.import, keyword.control.from#224936
keyword.control.new, keyword.operator.new, keyword.other.important.css#D17600
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#1A5644
meta.attribute-selector.scss#6B2777
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#0099B5
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#21475E
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#D17600
support.constant.property-value.css, constant.numeric.css#171726
keyword.control.at-rule.apply.tailwind#224936
keyword.control.at-rule.tailwind.tailwind#123F1F
keyword.control.at-rule.layer.tailwind#1A5644
meta.selector#6B2777
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#589A00
punctuation.definition.constant.restructuredtext#1E5C67
string.quoted.docstring.multi#1C1C87
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#589A00
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#21475E
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#DB6B00
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#4D6142
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#4F6642
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#3EA700
punctuation.definition.directive.restructuredtext#1E5C67
variable#29663A
variable.other.alias.yaml#29663Aunderline
variable.language, variable.parameter.function.language.special#131348
variable.other.constant#27684E
support.variable#29663A
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#2A655E
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#8F5923
support.function, support.type.property-name#00A976
storage#65256F
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#6C7220
punctuation.definition.group.capture.regexp#FF625B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF625B
punctuation.definition.character-class.regexp#7D8600
punctuation.definition.group.regexp#5A13EC
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF625B
meta.assertion.look-ahead.regexp#5A13EC
source.json meta.structure.dictionary.json support.type.property-name.json#1C1C87
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D17600
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#3473B2
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#8F5923
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#941E1E
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#205F20
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#1C1C87
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#D17600
token.info-token#3473B2
token.warn-token#8F5923
token.error-token#941E1E
token.debug-token#8F5923
RLabs Themes Collection by RLabs Inc. - VS Code Theme