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#D6CCCC70
  • activityBar.activeBorder#A44142
  • activityBar.background#fff6d8
  • activityBar.foreground#1B1313
  • activityBar.inactiveForeground#DFBEBC
  • activityBarBadge.background#312E6B
  • activityBarBadge.foreground#1B1313
  • activityBarTop.foreground#1B1313
  • badge.background#312E6B
  • badge.foreground#1B1313
  • breadcrumb.activeForeground#1B1313
  • breadcrumb.activeSelectionForeground#1B1313
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#1B1313
  • breadcrumb.foreground#DFBEBC
  • breadcrumbPicker.background#fff6d8
  • button.background#312E6Bdb
  • button.foreground#1B1313
  • button.hoverBackground#312E6B
  • button.secondaryBackground#A44142db
  • button.secondaryForeground#1B1313
  • button.secondaryHoverBackground#A44142
  • checkbox.background#fffae2
  • checkbox.foreground#1B1313
  • debugToolBar.background#49739C
  • debugToolBar.foreground#1B1313
  • descriptionForeground#2F2222
  • diffEditor.diagonalFill#49739C
  • diffEditor.insertedLineBackground#49739C40
  • diffEditor.insertedTextBackground#49739C50
  • diffEditor.insertedTextBorder#49739C
  • diffEditor.removedLineBackground#80333340
  • diffEditor.removedTextBackground#80333350
  • diffEditor.removedTextBorder#803333
  • diffEditorGutter.insertedLineBackground#49739C
  • diffEditorGutter.removedLineBackground#803333
  • disabledForeground#DFBEBC
  • dropdown.background#cdc7bb
  • dropdown.border#C9C0C0
  • dropdown.foreground#1B1313
  • editor.background#fffae2
  • editor.findMatchBackground#BD999970
  • editor.findMatchForeground#1B1313
  • editor.findMatchHighlightBackground#D6CCCC70
  • editor.findMatchHighlightForeground#1B1313
  • editor.findRangeHighlightBackground#AEADC270
  • editor.foldBackground#D6CCCC70
  • editor.foldPlaceholderForeground#1B1313
  • editor.foreground#1B1313
  • editor.hoverHighlightBackground#D6CCCC70
  • editor.inactiveSelectionBackground#AEADC270
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#2F2222
  • editor.rangeHighlightBackground#D6CCCC70
  • editor.selectionBackground#AEADC270
  • editor.selectionForeground#1B1313
  • editor.selectionHighlightBackground#AEADC270
  • editor.snippetFinalTabstopHighlightBackground#D6CCCC70
  • editor.snippetTabstopHighlightBackground#D6CCCC70
  • editor.symbolHighlightBackground#D6CCCC70
  • editor.wordHighlightBackground#D6CCCC70
  • editor.wordHighlightStrongBackground#D6CCCC50
  • editor.wordHighlightTextBackground#D6CCCC70
  • editorCodeLens.foreground#DFBEBC
  • editorCursor.background#D6CCCC70
  • editorCursor.foreground#A44142
  • editorError.foreground#803333
  • editorGroup.border#C9C0C0
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#C9C0C0
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#2B542B
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#DFBEBC
  • editorGutter.deletedBackground#803333
  • editorGutter.modifiedBackground#49739C
  • editorHint.foreground#2B542B
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#C9C0C0
  • editorHoverWidget.foreground#1B1313
  • editorHoverWidget.highlightForeground#1B1313
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#A44142
  • editorIndentGuide.background1#D6CCCC70
  • editorInfo.foreground#49739C
  • editorLineNumber.activeForeground#A44142
  • editorLineNumber.dimmedForeground#DFBEBC90
  • editorLineNumber.foreground#DFBEBC
  • editorLink.activeForeground#49739C
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#D6CCCC70
  • editorMultiCursor.primary.foreground#A44142
  • editorMultiCursor.secondary.background#D6CCCC70
  • editorMultiCursor.secondary.foreground#1B1313
  • editorOverviewRuler.addedForeground#2B542B
  • editorOverviewRuler.border#C9C0C0
  • editorOverviewRuler.commentForeground#DFBEBC
  • editorOverviewRuler.commonContentForeground#1B1313
  • editorOverviewRuler.currentContentForeground#49739C
  • editorOverviewRuler.deletedForeground#803333
  • editorOverviewRuler.errorForeground#803333
  • editorOverviewRuler.findMatchForeground#1B1313
  • editorOverviewRuler.incomingContentForeground#2B542B
  • editorOverviewRuler.infoForeground#49739C
  • editorOverviewRuler.modifiedForeground#49739C
  • editorOverviewRuler.rangeHighlightForeground#D6CCCC70
  • editorOverviewRuler.selectionHighlightForeground#AEADC270
  • editorOverviewRuler.warningForeground#7D5936
  • editorOverviewRuler.wordHighlightForeground#D6CCCC70
  • editorOverviewRuler.wordHighlightStrongForeground#D6CCCC70
  • editorRuler.foreground#D6CCCC70
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#C9C0C0
  • editorSuggestWidget.focusHighlightForeground#1B1313
  • editorSuggestWidget.foreground#DFBEBC
  • editorSuggestWidget.highlightForeground#1B1313
  • editorSuggestWidget.selectedBackground#312E6B80
  • editorSuggestWidget.selectedForeground#1B1313
  • editorUnicodeHighlight.background#D6CCCC70
  • editorWarning.foreground#7D5936
  • editorWhitespace.foreground#D6CCCC70
  • editorWidget.background#fffae2
  • editorWidget.border#C9C0C0
  • editorWidget.foreground#1B1313
  • errorForeground#803333
  • extensionButton.prominentBackground#312E6Baa
  • extensionButton.prominentForeground#1B1313
  • extensionButton.prominentHoverBackground#312E6B
  • focusBorder#C9C0C0
  • foreground#1B1313
  • gitDecoration.addedResourceForeground#2B542B
  • gitDecoration.conflictingResourceForeground#7D5936
  • gitDecoration.deletedResourceForeground#803333
  • gitDecoration.ignoredResourceForeground#DFBEBC
  • gitDecoration.modifiedResourceForeground#49739C
  • gitDecoration.renamedResourceForeground#A44142
  • gitDecoration.untrackedResourceForeground#2F2222
  • input.background#fffae2
  • input.border#DFBEBC
  • input.foreground#1B1313
  • input.placeholderForeground#DFBEBC
  • inputOption.activeBorder#A44142
  • inputValidation.errorBorder#803333
  • inputValidation.infoBorder#49739C
  • inputValidation.warningBorder#7D5936
  • list.activeSelectionBackground#312E6B70
  • list.activeSelectionForeground#1B1313
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#C9C0C0
  • list.errorForeground#803333
  • list.focusBackground#312E6B50
  • list.focusForeground#1B1313
  • list.highlightForeground#A44142
  • list.hoverBackground#312E6B20
  • list.hoverForeground#1B1313
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#312E6B60
  • list.inactiveSelectionForeground#2F2222
  • list.warningForeground#7D5936
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#803333
  • listFilterWidget.outline#C9C0C0
  • merge.border#C9C0C0
  • merge.currentContentBackground#49739C20
  • merge.currentHeaderBackground#49739C40
  • merge.incomingContentBackground#2B542B20
  • merge.incomingHeaderBackground#2B542B40
  • mergeEditor.change.background#7D5936
  • notificationLink.foreground#49739C
  • notifications.background#fff6d8
  • notifications.border#C9C0C0
  • notifications.foreground#1B1313
  • notificationsErrorIcon.foreground#803333
  • notificationsInfoIcon.foreground#49739C
  • notificationsWarningIcon.foreground#7D5936
  • panel.background#fff6d8
  • panel.border#A44142
  • panelInput.border#DFBEBC
  • panelTitle.activeBorder#A44142
  • panelTitle.activeForeground#1B1313
  • panelTitle.inactiveForeground#DFBEBC
  • peekView.border#312E6B
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#BD999970
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#1B1313
  • peekViewResult.lineForeground#1B1313
  • peekViewResult.matchHighlightBackground#D6CCCC70
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#1B1313
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#2F2222
  • peekViewTitleLabel.foreground#1B1313
  • pickerGroup.border#312E6B
  • pickerGroup.foreground#731C1D
  • progressBar.background#A44142
  • selection.background#312E6B50
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#C9C0C0
  • settings.checkboxForeground#1B1313
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#C9C0C0
  • settings.dropdownForeground#1B1313
  • settings.focusedRowBackground#D6CCCC70
  • settings.focusedRowBorder#DFBEBC
  • settings.headerBorder#C9C0C0
  • settings.headerForeground#1B1313
  • settings.inactiveSelectedItemBorder#DFBEBC
  • settings.modifiedItemIndicator#7D5936
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#DFBEBC
  • settings.numberInputForeground#1B1313
  • settings.rowHoverBackground#D6CCCC70
  • settings.settingsHeaderHoverForeground#1B1313
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#DFBEBC
  • settings.textInputForeground#1B1313
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#C9C0C0
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#C9C0C0
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#C9C0C0
  • sideBarStickyScroll.shadow#C9C0C0
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#1B1313
  • statusBar.background#312E6B
  • statusBar.debuggingBackground#7D5936
  • statusBar.debuggingForeground#1B1313
  • statusBar.foreground#1B1313
  • statusBar.noFolderBackground#2F2222
  • statusBar.noFolderForeground#D2D0D0
  • statusBarItem.activeBackground#312E6Baa
  • statusBarItem.errorBackground#803333
  • statusBarItem.errorForeground#1B1313
  • statusBarItem.errorHoverBackground#803333aa
  • statusBarItem.hoverBackground#312E6Baa
  • statusBarItem.prominentBackground#312E6Baa
  • statusBarItem.prominentForeground#D2D0D0
  • statusBarItem.prominentHoverBackground#312E6Baa
  • statusBarItem.prominentHoverForeground#D2D0D0
  • statusBarItem.remoteBackground#A44142
  • statusBarItem.remoteForeground#1B1313
  • statusBarItem.remoteHoverBackground#A44142aa
  • statusBarItem.warningBackground#7D5936
  • statusBarItem.warningForeground#1B1313
  • statusBarItem.warningHoverBackground#7D5936aa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#A44142
  • tab.activeForeground#1B1313
  • tab.border#C9C0C0
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#1B1313
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#DFBEBC
  • tab.selectedBackground#D6CCCC70
  • 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#C9C0C0
  • terminal.foreground#1B1313
  • terminal.inactiveSelectionBackground#AEADC270
  • terminal.selectionBackground#AEADC270
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#C9C0C0
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#49739C
  • textLink.foreground#312E6B
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#1B1313
  • textSeparator.foreground#1B1313
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#1B1313
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#DFBEBC
  • widget.border#C9C0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#1B1313
meta.diff, meta.diff.header#DFBEBC
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#6C1918
emphasisitalic
strongbold
invalid#803333strikethrough
invalid.deprecated#1B1313underline italic
header#6C1918
source.ini, source.ignore, source#2F2222
markup.inserted#6C1918
markup.deleted#803333
markup.changed#49739C
markup.error#803333
markup.underlineunderline
markup.bold#7D5936bold
markup.heading#A44142bold
markup.italic#2F2222italic
markup.inline.raw, markup.raw.restructuredtext#A44142
markup.underline.link, markup.underline.link.image, markup.quote#49739C
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#312E6B
meta.separator.markdown#A44142
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#792021
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7D5936
entity.name.class, entity.name.type.class, entity.other.inherited-class#312E6B
entity.name.tag, entity.other.attribute-name.parent-selector#832120
entity.other.attribute-name#312E6B
entity.name.function, meta.function-call, meta.method-call, meta.method#A44142
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#29256F
support#5C1615
entity.name, variable.other.key#A44142
entity.name.type#711F1E
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#5F321C
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#26226D
entity.other.attribute-name.class.css#A44142
storage.class, storage.type#312E6B
storage.modifier#631D1D
comment, punctuation.definition.comment, unused.comment, wildcard.comment#DFBEBC
constant#6C1918
constant.other.color#621918
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#5D1314
constant.other.date, constant.other.timestamp#221E71
keyword.operator#662D2E
keyword.other.unit#171452
keyword.control, keyword.other.template, keyword.other.substitution#430F0F
keyword.other.this#6C1918
keyword.control.import, keyword.control.from#48291E
keyword.control.new, keyword.operator.new, keyword.other.important.css#312E6B
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#5E3717
meta.attribute-selector.scss#792021
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#832120
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#67291E
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#312E6B
support.constant.property-value.css, constant.numeric.css#2F2222
keyword.control.at-rule.apply.tailwind#48291E
keyword.control.at-rule.tailwind.tailwind#430F0F
keyword.control.at-rule.layer.tailwind#5E3717
meta.selector#792021
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7C5050
punctuation.definition.constant.restructuredtext#6C1918
string.quoted.docstring.multi#A44142
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#7C5050
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#67291E
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#FF6A1D
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#82594F
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#66453D
punctuation.definition.directive.restructuredtext#6C1918
variable#6B2524
variable.other.alias.yaml#6B2524underline
variable.language, variable.parameter.function.language.special#5D1314
variable.other.constant#7C4C27
support.variable#6B2524
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#6D4A27
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#7D5936
support.function, support.type.property-name#8A4B28
storage#241F75
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#A44142
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#312E6B
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#49739C
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#7D5936
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#803333
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#2B542B
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#A44142
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#312E6B
token.info-token#49739C
token.warn-token#7D5936
token.error-token#803333
token.debug-token#7D5936
RLabs Themes Collection by RLabs Inc. - VS Code Theme