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#D0DCD370
  • activityBar.activeBorder#888500
  • activityBar.background#fff6d8
  • activityBar.foreground#281A28
  • activityBar.inactiveForeground#A6AA9F
  • activityBarBadge.background#2A3F13
  • activityBarBadge.foreground#281A28
  • activityBarTop.foreground#281A28
  • badge.background#2A3F13
  • badge.foreground#281A28
  • breadcrumb.activeForeground#281A28
  • breadcrumb.activeSelectionForeground#281A28
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#281A28
  • breadcrumb.foreground#A6AA9F
  • breadcrumbPicker.background#fff6d8
  • button.background#2A3F13db
  • button.foreground#281A28
  • button.hoverBackground#2A3F13
  • button.secondaryBackground#888500db
  • button.secondaryForeground#281A28
  • button.secondaryHoverBackground#888500
  • checkbox.background#fffae2
  • checkbox.foreground#281A28
  • debugToolBar.background#3B73AB
  • debugToolBar.foreground#281A28
  • descriptionForeground#313B26
  • diffEditor.diagonalFill#3B73AB
  • diffEditor.insertedLineBackground#3B73AB40
  • diffEditor.insertedTextBackground#3B73AB50
  • diffEditor.insertedTextBorder#3B73AB
  • diffEditor.removedLineBackground#8E252540
  • diffEditor.removedTextBackground#8E252550
  • diffEditor.removedTextBorder#8E2525
  • diffEditorGutter.insertedLineBackground#3B73AB
  • diffEditorGutter.removedLineBackground#8E2525
  • disabledForeground#A6AA9F
  • dropdown.background#cdc7bb
  • dropdown.border#CFCEC4
  • dropdown.foreground#281A28
  • editor.background#fffae2
  • editor.findMatchBackground#C7B79970
  • editor.findMatchForeground#281A28
  • editor.findMatchHighlightBackground#D0DCD370
  • editor.findMatchHighlightForeground#281A28
  • editor.findRangeHighlightBackground#B0CAB570
  • editor.foldBackground#D0DCD370
  • editor.foldPlaceholderForeground#281A28
  • editor.foreground#281A28
  • editor.hoverHighlightBackground#D0DCD370
  • editor.inactiveSelectionBackground#B0CAB570
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#313B26
  • editor.rangeHighlightBackground#D0DCD370
  • editor.selectionBackground#B0CAB570
  • editor.selectionForeground#281A28
  • editor.selectionHighlightBackground#B0CAB570
  • editor.snippetFinalTabstopHighlightBackground#D0DCD370
  • editor.snippetTabstopHighlightBackground#D0DCD370
  • editor.symbolHighlightBackground#D0DCD370
  • editor.wordHighlightBackground#D0DCD370
  • editor.wordHighlightStrongBackground#D0DCD350
  • editor.wordHighlightTextBackground#D0DCD370
  • editorCodeLens.foreground#A6AA9F
  • editorCursor.background#D0DCD370
  • editorCursor.foreground#888500
  • editorError.foreground#8E2525
  • editorGroup.border#CFCEC4
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#CFCEC4
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#245C24
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#A6AA9F
  • editorGutter.deletedBackground#8E2525
  • editorGutter.modifiedBackground#3B73AB
  • editorHint.foreground#245C24
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#CFCEC4
  • editorHoverWidget.foreground#281A28
  • editorHoverWidget.highlightForeground#281A28
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#888500
  • editorIndentGuide.background1#D0DCD370
  • editorInfo.foreground#3B73AB
  • editorLineNumber.activeForeground#888500
  • editorLineNumber.dimmedForeground#A6AA9F90
  • editorLineNumber.foreground#A6AA9F
  • editorLink.activeForeground#3B73AB
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#D0DCD370
  • editorMultiCursor.primary.foreground#888500
  • editorMultiCursor.secondary.background#D0DCD370
  • editorMultiCursor.secondary.foreground#281A28
  • editorOverviewRuler.addedForeground#245C24
  • editorOverviewRuler.border#CFCEC4
  • editorOverviewRuler.commentForeground#A6AA9F
  • editorOverviewRuler.commonContentForeground#281A28
  • editorOverviewRuler.currentContentForeground#3B73AB
  • editorOverviewRuler.deletedForeground#8E2525
  • editorOverviewRuler.errorForeground#8E2525
  • editorOverviewRuler.findMatchForeground#281A28
  • editorOverviewRuler.incomingContentForeground#245C24
  • editorOverviewRuler.infoForeground#3B73AB
  • editorOverviewRuler.modifiedForeground#3B73AB
  • editorOverviewRuler.rangeHighlightForeground#D0DCD370
  • editorOverviewRuler.selectionHighlightForeground#B0CAB570
  • editorOverviewRuler.warningForeground#895929
  • editorOverviewRuler.wordHighlightForeground#D0DCD370
  • editorOverviewRuler.wordHighlightStrongForeground#D0DCD370
  • editorRuler.foreground#D0DCD370
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#CFCEC4
  • editorSuggestWidget.focusHighlightForeground#281A28
  • editorSuggestWidget.foreground#A6AA9F
  • editorSuggestWidget.highlightForeground#281A28
  • editorSuggestWidget.selectedBackground#2A3F1380
  • editorSuggestWidget.selectedForeground#281A28
  • editorUnicodeHighlight.background#D0DCD370
  • editorWarning.foreground#895929
  • editorWhitespace.foreground#D0DCD370
  • editorWidget.background#fffae2
  • editorWidget.border#CFCEC4
  • editorWidget.foreground#281A28
  • errorForeground#8E2525
  • extensionButton.prominentBackground#2A3F13aa
  • extensionButton.prominentForeground#281A28
  • extensionButton.prominentHoverBackground#2A3F13
  • focusBorder#CFCEC4
  • foreground#281A28
  • gitDecoration.addedResourceForeground#245C24
  • gitDecoration.conflictingResourceForeground#895929
  • gitDecoration.deletedResourceForeground#8E2525
  • gitDecoration.ignoredResourceForeground#A6AA9F
  • gitDecoration.modifiedResourceForeground#3B73AB
  • gitDecoration.renamedResourceForeground#888500
  • gitDecoration.untrackedResourceForeground#313B26
  • input.background#fffae2
  • input.border#A6AA9F
  • input.foreground#281A28
  • input.placeholderForeground#A6AA9F
  • inputOption.activeBorder#888500
  • inputValidation.errorBorder#8E2525
  • inputValidation.infoBorder#3B73AB
  • inputValidation.warningBorder#895929
  • list.activeSelectionBackground#2A3F1370
  • list.activeSelectionForeground#281A28
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#CFCEC4
  • list.errorForeground#8E2525
  • list.focusBackground#2A3F1350
  • list.focusForeground#281A28
  • list.highlightForeground#888500
  • list.hoverBackground#2A3F1320
  • list.hoverForeground#281A28
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#2A3F1360
  • list.inactiveSelectionForeground#313B26
  • list.warningForeground#895929
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#8E2525
  • listFilterWidget.outline#CFCEC4
  • merge.border#CFCEC4
  • merge.currentContentBackground#3B73AB20
  • merge.currentHeaderBackground#3B73AB40
  • merge.incomingContentBackground#245C2420
  • merge.incomingHeaderBackground#245C2440
  • mergeEditor.change.background#895929
  • notificationLink.foreground#3B73AB
  • notifications.background#fff6d8
  • notifications.border#CFCEC4
  • notifications.foreground#281A28
  • notificationsErrorIcon.foreground#8E2525
  • notificationsInfoIcon.foreground#3B73AB
  • notificationsWarningIcon.foreground#895929
  • panel.background#fff6d8
  • panel.border#888500
  • panelInput.border#A6AA9F
  • panelTitle.activeBorder#888500
  • panelTitle.activeForeground#281A28
  • panelTitle.inactiveForeground#A6AA9F
  • peekView.border#2A3F13
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#C7B79970
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#281A28
  • peekViewResult.lineForeground#281A28
  • peekViewResult.matchHighlightBackground#D0DCD370
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#281A28
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#313B26
  • peekViewTitleLabel.foreground#281A28
  • pickerGroup.border#2A3F13
  • pickerGroup.foreground#585732
  • progressBar.background#888500
  • selection.background#2A3F1350
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#CFCEC4
  • settings.checkboxForeground#281A28
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#CFCEC4
  • settings.dropdownForeground#281A28
  • settings.focusedRowBackground#D0DCD370
  • settings.focusedRowBorder#A6AA9F
  • settings.headerBorder#CFCEC4
  • settings.headerForeground#281A28
  • settings.inactiveSelectedItemBorder#A6AA9F
  • settings.modifiedItemIndicator#895929
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#A6AA9F
  • settings.numberInputForeground#281A28
  • settings.rowHoverBackground#D0DCD370
  • settings.settingsHeaderHoverForeground#281A28
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#A6AA9F
  • settings.textInputForeground#281A28
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#CFCEC4
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#CFCEC4
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#CFCEC4
  • sideBarStickyScroll.shadow#CFCEC4
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#281A28
  • statusBar.background#2A3F13
  • statusBar.debuggingBackground#895929
  • statusBar.debuggingForeground#281A28
  • statusBar.foreground#281A28
  • statusBar.noFolderBackground#313B26
  • statusBar.noFolderForeground#D5D7D6
  • statusBarItem.activeBackground#2A3F13aa
  • statusBarItem.errorBackground#8E2525
  • statusBarItem.errorForeground#281A28
  • statusBarItem.errorHoverBackground#8E2525aa
  • statusBarItem.hoverBackground#2A3F13aa
  • statusBarItem.prominentBackground#2A3F13aa
  • statusBarItem.prominentForeground#D5D7D6
  • statusBarItem.prominentHoverBackground#2A3F13aa
  • statusBarItem.prominentHoverForeground#D5D7D6
  • statusBarItem.remoteBackground#888500
  • statusBarItem.remoteForeground#281A28
  • statusBarItem.remoteHoverBackground#888500aa
  • statusBarItem.warningBackground#895929
  • statusBarItem.warningForeground#281A28
  • statusBarItem.warningHoverBackground#895929aa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#888500
  • tab.activeForeground#281A28
  • tab.border#CFCEC4
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#281A28
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#A6AA9F
  • tab.selectedBackground#D0DCD370
  • 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#CFCEC4
  • terminal.foreground#281A28
  • terminal.inactiveSelectionBackground#B0CAB570
  • terminal.selectionBackground#B0CAB570
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#CFCEC4
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#3B73AB
  • textLink.foreground#2A3F13
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#281A28
  • textSeparator.foreground#281A28
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#281A28
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#A6AA9F
  • widget.border#CFCEC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#281A28
meta.diff, meta.diff.header#A6AA9F
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#516237
emphasisitalic
strongbold
invalid#8E2525strikethrough
invalid.deprecated#281A28underline italic
header#516237
source.ini, source.ignore, source#313B26
markup.inserted#516237
markup.deleted#8E2525
markup.changed#3B73AB
markup.error#8E2525
markup.underlineunderline
markup.bold#895929bold
markup.heading#888500bold
markup.italic#313B26italic
markup.inline.raw, markup.raw.restructuredtext#888500
markup.underline.link, markup.underline.link.image, markup.quote#3B73AB
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2A3F13
meta.separator.markdown#888500
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#355A3C
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#895929
entity.name.class, entity.name.type.class, entity.other.inherited-class#2A3F13
entity.name.tag, entity.other.attribute-name.parent-selector#516539
entity.other.attribute-name#2A3F13
entity.name.function, meta.function-call, meta.method-call, meta.method#888500
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#39515B
support#263C45
entity.name, variable.other.key#888500
entity.name.type#354F5A
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#2C3449
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#53623C
entity.other.attribute-name.class.css#888500
storage.class, storage.type#2A3F13
storage.modifier#4B5936
comment, punctuation.definition.comment, unused.comment, wildcard.comment#A6AA9F
constant#516237
constant.other.color#2C4E33
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#3A203C
constant.other.date, constant.other.timestamp#334C57
keyword.operator#434E37
keyword.other.unit#394829
keyword.control, keyword.other.template, keyword.other.substitution#263C45
keyword.other.this#516237
keyword.control.import, keyword.control.from#27313A
keyword.control.new, keyword.operator.new, keyword.other.important.css#2A3F13
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#2C384E
meta.attribute-selector.scss#50452F
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#516539
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#4A633B
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#2A3F13
support.constant.property-value.css, constant.numeric.css#313B26
keyword.control.at-rule.apply.tailwind#27313A
keyword.control.at-rule.tailwind.tailwind#263C45
keyword.control.at-rule.layer.tailwind#2C384E
meta.selector#50452F
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4E5A5F
punctuation.definition.constant.restructuredtext#516237
string.quoted.docstring.multi#888500
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#4E5A5F
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#4A633B
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#57606B
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#4F5963
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#4F5963
punctuation.definition.directive.restructuredtext#516237
variable#354B54
variable.other.alias.yaml#354B54underline
variable.language, variable.parameter.function.language.special#3A203C
variable.other.constant#344055
support.variable#354B54
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#363D53
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#895929
support.function, support.type.property-name#00A651
storage#545331
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#888500
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2A3F13
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#3B73AB
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#895929
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#8E2525
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#245C24
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#888500
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#2A3F13
token.info-token#3B73AB
token.warn-token#895929
token.error-token#8E2525
token.debug-token#895929
RLabs Themes Collection by RLabs Inc. - VS Code Theme