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#18171170
  • activityBar.activeBorder#D9C359
  • activityBar.background#131210
  • activityBar.foreground#DACFC3
  • activityBar.inactiveForeground#69635E
  • activityBarBadge.background#D99D73
  • activityBarBadge.foreground#100F0F
  • activityBarTop.foreground#DACFC3
  • badge.background#D99D73
  • badge.foreground#100F0F
  • breadcrumb.activeForeground#DACFC3
  • breadcrumb.activeSelectionForeground#DACFC3
  • breadcrumb.background#131210
  • breadcrumb.focusForeground#DACFC3
  • breadcrumb.foreground#69635E
  • breadcrumbPicker.background#131210
  • button.background#D99D73db
  • button.foreground#100F0F
  • button.hoverBackground#D99D73
  • button.secondaryBackground#D9C359db
  • button.secondaryForeground#100F0F
  • button.secondaryHoverBackground#D9C359
  • checkbox.background#151413
  • checkbox.foreground#DACFC3
  • debugToolBar.background#77A6D4
  • debugToolBar.foreground#100F0F
  • descriptionForeground#CCC7AD
  • diffEditor.diagonalFill#77A6D4
  • diffEditor.insertedLineBackground#77A6D440
  • diffEditor.insertedTextBackground#77A6D450
  • diffEditor.insertedTextBorder#77A6D4
  • diffEditor.removedLineBackground#DD6E6E40
  • diffEditor.removedTextBackground#DD6E6E50
  • diffEditor.removedTextBorder#DD6E6E
  • diffEditorGutter.insertedLineBackground#77A6D4
  • diffEditorGutter.removedLineBackground#DD6E6E
  • disabledForeground#69635E
  • dropdown.background#2D2C25
  • dropdown.border#25231E
  • dropdown.foreground#DACFC3
  • editor.background#151413
  • editor.findMatchBackground#4D382870
  • editor.findMatchForeground#DACFC3
  • editor.findMatchHighlightBackground#18171170
  • editor.findMatchHighlightForeground#DACFC3
  • editor.findRangeHighlightBackground#372C2470
  • editor.foldBackground#18171170
  • editor.foldPlaceholderForeground#DACFC3
  • editor.foreground#DACFC3
  • editor.hoverHighlightBackground#18171170
  • editor.inactiveSelectionBackground#372C2470
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CCC7AD
  • editor.rangeHighlightBackground#18171170
  • editor.selectionBackground#372C2470
  • editor.selectionForeground#DACFC3
  • editor.selectionHighlightBackground#372C2470
  • editor.snippetFinalTabstopHighlightBackground#18171170
  • editor.snippetTabstopHighlightBackground#18171170
  • editor.symbolHighlightBackground#18171170
  • editor.wordHighlightBackground#18171170
  • editor.wordHighlightStrongBackground#18171150
  • editor.wordHighlightTextBackground#18171170
  • editorCodeLens.foreground#69635E
  • editorCursor.background#18171170
  • editorCursor.foreground#D9C359
  • editorError.foreground#DD6E6E
  • editorGroup.border#25231E
  • editorGroup.dropBackground#2D2C25
  • editorGroup.emptyBackground#151413
  • editorGroupHeader.border#25231E
  • editorGroupHeader.tabsBackground#151413
  • editorGutter.addedBackground#369636
  • editorGutter.background#151413
  • editorGutter.commentRangeForeground#69635E
  • editorGutter.deletedBackground#DD6E6E
  • editorGutter.modifiedBackground#77A6D4
  • editorHint.foreground#369636
  • editorHoverWidget.background#151413
  • editorHoverWidget.border#25231E
  • editorHoverWidget.foreground#DACFC3
  • editorHoverWidget.highlightForeground#DACFC3
  • editorHoverWidget.statusBarBackground#151413
  • editorIndentGuide.activeBackground1#D9C359
  • editorIndentGuide.background1#18171170
  • editorInfo.foreground#77A6D4
  • editorLineNumber.activeForeground#D9C359
  • editorLineNumber.dimmedForeground#69635E90
  • editorLineNumber.foreground#69635E
  • editorLink.activeForeground#77A6D4
  • editorMarkerNavigation.background#131210
  • editorMarkerNavigationError.background#131210
  • editorMarkerNavigationWarning.background#131210
  • editorMultiCursor.primary.background#18171170
  • editorMultiCursor.primary.foreground#D9C359
  • editorMultiCursor.secondary.background#18171170
  • editorMultiCursor.secondary.foreground#DACFC3
  • editorOverviewRuler.addedForeground#369636
  • editorOverviewRuler.border#25231E
  • editorOverviewRuler.commentForeground#69635E
  • editorOverviewRuler.commonContentForeground#DACFC3
  • editorOverviewRuler.currentContentForeground#77A6D4
  • editorOverviewRuler.deletedForeground#DD6E6E
  • editorOverviewRuler.errorForeground#DD6E6E
  • editorOverviewRuler.findMatchForeground#DACFC3
  • editorOverviewRuler.incomingContentForeground#369636
  • editorOverviewRuler.infoForeground#77A6D4
  • editorOverviewRuler.modifiedForeground#77A6D4
  • editorOverviewRuler.rangeHighlightForeground#18171170
  • editorOverviewRuler.selectionHighlightForeground#372C2470
  • editorOverviewRuler.warningForeground#D9A673
  • editorOverviewRuler.wordHighlightForeground#18171170
  • editorOverviewRuler.wordHighlightStrongForeground#18171170
  • editorRuler.foreground#18171170
  • editorSuggestWidget.background#151413
  • editorSuggestWidget.border#25231E
  • editorSuggestWidget.focusHighlightForeground#DACFC3
  • editorSuggestWidget.foreground#69635E
  • editorSuggestWidget.highlightForeground#DACFC3
  • editorSuggestWidget.selectedBackground#D99D7380
  • editorSuggestWidget.selectedForeground#DACFC3
  • editorUnicodeHighlight.background#18171170
  • editorWarning.foreground#D9A673
  • editorWhitespace.foreground#18171170
  • editorWidget.background#151413
  • editorWidget.border#25231E
  • editorWidget.foreground#DACFC3
  • errorForeground#DD6E6E
  • extensionButton.prominentBackground#D99D73aa
  • extensionButton.prominentForeground#100F0F
  • extensionButton.prominentHoverBackground#D99D73
  • focusBorder#25231E
  • foreground#DACFC3
  • gitDecoration.addedResourceForeground#369636
  • gitDecoration.conflictingResourceForeground#D9A673
  • gitDecoration.deletedResourceForeground#DD6E6E
  • gitDecoration.ignoredResourceForeground#69635E
  • gitDecoration.modifiedResourceForeground#77A6D4
  • gitDecoration.renamedResourceForeground#D9C359
  • gitDecoration.untrackedResourceForeground#CCC7AD
  • input.background#151413
  • input.border#69635E
  • input.foreground#DACFC3
  • input.placeholderForeground#69635E
  • inputOption.activeBorder#D9C359
  • inputValidation.errorBorder#DD6E6E
  • inputValidation.infoBorder#77A6D4
  • inputValidation.warningBorder#D9A673
  • list.activeSelectionBackground#D99D7370
  • list.activeSelectionForeground#DACFC3
  • list.dropBackground#2D2C25
  • list.dropBetweenBackground#25231E
  • list.errorForeground#DD6E6E
  • list.focusBackground#D99D7350
  • list.focusForeground#DACFC3
  • list.highlightForeground#D9C359
  • list.hoverBackground#D99D7320
  • list.hoverForeground#DACFC3
  • list.inactiveFocusBackground#131210
  • list.inactiveSelectionBackground#D99D7360
  • list.inactiveSelectionForeground#CCC7AD
  • list.warningForeground#D9A673
  • listFilterWidget.background#2D2C25
  • listFilterWidget.noMatchesOutline#DD6E6E
  • listFilterWidget.outline#25231E
  • merge.border#25231E
  • merge.currentContentBackground#77A6D420
  • merge.currentHeaderBackground#77A6D440
  • merge.incomingContentBackground#36963620
  • merge.incomingHeaderBackground#36963640
  • mergeEditor.change.background#D9A673
  • notificationLink.foreground#77A6D4
  • notifications.background#131210
  • notifications.border#25231E
  • notifications.foreground#DACFC3
  • notificationsErrorIcon.foreground#DD6E6E
  • notificationsInfoIcon.foreground#77A6D4
  • notificationsWarningIcon.foreground#D9A673
  • panel.background#131210
  • panel.border#D9C359
  • panelInput.border#69635E
  • panelTitle.activeBorder#D9C359
  • panelTitle.activeForeground#DACFC3
  • panelTitle.inactiveForeground#69635E
  • peekView.border#D99D73
  • peekViewEditor.background#151413
  • peekViewEditor.matchHighlightBackground#4D382870
  • peekViewResult.background#151413
  • peekViewResult.fileForeground#DACFC3
  • peekViewResult.lineForeground#DACFC3
  • peekViewResult.matchHighlightBackground#18171170
  • peekViewResult.selectionBackground#131210
  • peekViewResult.selectionForeground#DACFC3
  • peekViewTitle.background#151413
  • peekViewTitleDescription.foreground#CCC7AD
  • peekViewTitleLabel.foreground#DACFC3
  • pickerGroup.border#D99D73
  • pickerGroup.foreground#EBE3BC
  • progressBar.background#D9C359
  • selection.background#D99D7350
  • settings.checkboxBackground#151413
  • settings.checkboxBorder#25231E
  • settings.checkboxForeground#DACFC3
  • settings.dropdownBackground#151413
  • settings.dropdownBorder#25231E
  • settings.dropdownForeground#DACFC3
  • settings.focusedRowBackground#18171170
  • settings.focusedRowBorder#69635E
  • settings.headerBorder#25231E
  • settings.headerForeground#DACFC3
  • settings.inactiveSelectedItemBorder#69635E
  • settings.modifiedItemIndicator#D9A673
  • settings.numberInputBackground#151413
  • settings.numberInputBorder#69635E
  • settings.numberInputForeground#DACFC3
  • settings.rowHoverBackground#18171170
  • settings.settingsHeaderHoverForeground#DACFC3
  • settings.textInputBackground#151413
  • settings.textInputBorder#69635E
  • settings.textInputForeground#DACFC3
  • sideBar.background#151413
  • sideBarActivityBarTop.border#25231E
  • sideBarSectionHeader.background#131210
  • sideBarSectionHeader.border#25231E
  • sideBarStickyScroll.background#151413
  • sideBarStickyScroll.border#25231E
  • sideBarStickyScroll.shadow#25231E
  • sideBarTitle.background#151413
  • sideBarTitle.foreground#DACFC3
  • statusBar.background#D99D73
  • statusBar.debuggingBackground#D9A673
  • statusBar.debuggingForeground#100F0F
  • statusBar.foreground#100F0F
  • statusBar.noFolderBackground#CCC7AD
  • statusBar.noFolderForeground#100F0F
  • statusBarItem.activeBackground#D99D73aa
  • statusBarItem.errorBackground#DD6E6E
  • statusBarItem.errorForeground#100F0F
  • statusBarItem.errorHoverBackground#DD6E6Eaa
  • statusBarItem.hoverBackground#D99D73aa
  • statusBarItem.prominentBackground#D99D73aa
  • statusBarItem.prominentForeground#100F0F
  • statusBarItem.prominentHoverBackground#D99D73aa
  • statusBarItem.prominentHoverForeground#100F0F
  • statusBarItem.remoteBackground#D9C359
  • statusBarItem.remoteForeground#100F0F
  • statusBarItem.remoteHoverBackground#D9C359aa
  • statusBarItem.warningBackground#D9A673
  • statusBarItem.warningForeground#100F0F
  • statusBarItem.warningHoverBackground#D9A673aa
  • tab.activeBackground#131210
  • tab.activeBorderTop#D9C359
  • tab.activeForeground#DACFC3
  • tab.border#25231E
  • tab.hoverBackground#13121080
  • tab.hoverForeground#DACFC3
  • tab.inactiveBackground#151413
  • tab.inactiveForeground#69635E
  • tab.selectedBackground#18171170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#717DA7
  • terminal.ansiBrightBlack#494949
  • terminal.ansiBrightBlue#A8B5E4
  • terminal.ansiBrightCyan#E3F9F0
  • terminal.ansiBrightGreen#EEF6F0
  • terminal.ansiBrightMagenta#F7EDF3
  • terminal.ansiBrightRed#E27E88
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#F5E9E1
  • terminal.ansiCyan#56BB91
  • terminal.ansiGreen#BCC7BF
  • terminal.ansiMagenta#B492A7
  • terminal.ansiRed#CE5B66
  • terminal.ansiWhite#F9F8F6
  • terminal.ansiYellow#C2AD9F
  • terminal.background#151413
  • terminal.border#25231E
  • terminal.foreground#DACFC3
  • terminal.inactiveSelectionBackground#372C2470
  • terminal.selectionBackground#372C2470
  • textBlockQuote.background#2D2C25
  • textBlockQuote.border#25231E
  • textCodeBlock.background#2D2C25
  • textLink.activeForeground#77A6D4
  • textLink.foreground#D99D73
  • textPreformat.background#2D2C25
  • textPreformat.foreground#DACFC3
  • textSeparator.foreground#DACFC3
  • titleBar.activeBackground#131210
  • titleBar.activeForeground#DACFC3
  • titleBar.inactiveBackground#131210
  • titleBar.inactiveForeground#69635E
  • widget.border#25231E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#DACFC3
meta.diff, meta.diff.header#69635E
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F2ECCE
emphasisitalic
strongbold
invalid#DD6E6Estrikethrough
invalid.deprecated#DACFC3underline italic
header#F2ECCE
source.ini, source.ignore, source#CCC7AD
markup.inserted#F2ECCE
markup.deleted#DD6E6E
markup.changed#77A6D4
markup.error#DD6E6E
markup.underlineunderline
markup.bold#D9A673bold
markup.heading#D9C359bold
markup.italic#CCC7ADitalic
markup.inline.raw, markup.raw.restructuredtext#D9C359
markup.underline.link, markup.underline.link.image, markup.quote#77A6D4
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D99D73
meta.separator.markdown#D9C359
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EEDBC8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D9A673
entity.name.class, entity.name.type.class, entity.other.inherited-class#D99D73
entity.name.tag, entity.other.attribute-name.parent-selector#EBD4BC
entity.other.attribute-name#D99D73
entity.name.function, meta.function-call, meta.method-call, meta.method#D9C359
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E4D2B9
support#E6BFA2
entity.name, variable.other.key#D9C359
entity.name.type#E7C8B1
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E0D1A3
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F2E6D9
entity.other.attribute-name.class.css#D9C359
storage.class, storage.type#D99D73
storage.modifier#E6C8B3
comment, punctuation.definition.comment, unused.comment, wildcard.comment#69635E
constant#F2ECCE
constant.other.color#E2C69C
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E9C7A5
constant.other.date, constant.other.timestamp#ECDAC0
keyword.operator#DECFBA
keyword.other.unit#E6CCA8
keyword.control, keyword.other.template, keyword.other.substitution#E6BFA2
keyword.other.this#F2ECCE
keyword.control.import, keyword.control.from#E7D6B1
keyword.control.new, keyword.operator.new, keyword.other.important.css#D99D73
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E4D3A0
meta.attribute-selector.scss#E7CCB1
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EBD4BC
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EBE0C2
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#D99D73
support.constant.property-value.css, constant.numeric.css#CCC7AD
keyword.control.at-rule.apply.tailwind#E7D6B1
keyword.control.at-rule.tailwind.tailwind#E6BFA2
keyword.control.at-rule.layer.tailwind#E4D3A0
meta.selector#E7CCB1
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E5E2D7
punctuation.definition.constant.restructuredtext#F2ECCE
string.quoted.docstring.multi#D9C359
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#E5E2D7
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EBE0C2
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#F9F8F6
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#E0E3D4
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#FDFDFC
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#F5F5EF
punctuation.definition.directive.restructuredtext#F2ECCE
variable#E6D5BC
variable.other.alias.yaml#E6D5BCunderline
variable.language, variable.parameter.function.language.special#E9C7A5
variable.other.constant#E7E1BB
support.variable#E6D5BC
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E9E8C9
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D9A673
support.function, support.type.property-name#F1EDD5
storage#E7CCB1
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#C2AD9F
punctuation.definition.group.capture.regexp#CE5B66
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CE5B66
punctuation.definition.character-class.regexp#F5E9E1
punctuation.definition.group.regexp#A8B5E4
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CE5B66
meta.assertion.look-ahead.regexp#A8B5E4
source.json meta.structure.dictionary.json support.type.property-name.json#D9C359
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D99D73
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#77A6D4
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#D9A673
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#DD6E6E
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#369636
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#D9C359
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#D99D73
token.info-token#77A6D4
token.warn-token#D9A673
token.error-token#DD6E6E
token.debug-token#D9A673
RLabs Themes Collection by RLabs Inc. - VS Code Theme