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#53141370
  • activityBar.activeBorder#e99393
  • activityBar.background#263745
  • activityBar.foreground#D8E9F8
  • activityBar.inactiveForeground#A28181
  • activityBarBadge.background#ff6c61
  • activityBarBadge.foreground#1A2D3D
  • activityBarTop.foreground#D8E9F8
  • badge.background#ff6c61
  • badge.foreground#1A2D3D
  • breadcrumb.activeForeground#D8E9F8
  • breadcrumb.activeSelectionForeground#D8E9F8
  • breadcrumb.background#263745
  • breadcrumb.focusForeground#D8E9F8
  • breadcrumb.foreground#A28181
  • breadcrumbPicker.background#263745
  • button.background#ff6c61db
  • button.foreground#1A2D3D
  • button.hoverBackground#ff6c61
  • button.secondaryBackground#e99393db
  • button.secondaryForeground#1A2D3D
  • button.secondaryHoverBackground#e99393
  • checkbox.background#1E3243
  • checkbox.foreground#D8E9F8
  • debugToolBar.background#2093FF
  • debugToolBar.foreground#1A2D3D
  • descriptionForeground#E4BFBF
  • diffEditor.diagonalFill#2093FF
  • diffEditor.insertedLineBackground#2093FF40
  • diffEditor.insertedTextBackground#2093FF50
  • diffEditor.insertedTextBorder#2093FF
  • diffEditor.removedLineBackground#FF636340
  • diffEditor.removedTextBackground#FF636350
  • diffEditor.removedTextBorder#FF6363
  • diffEditorGutter.insertedLineBackground#2093FF
  • diffEditorGutter.removedLineBackground#FF6363
  • disabledForeground#A28181
  • dropdown.background#462020
  • dropdown.border#671A18
  • dropdown.foreground#D8E9F8
  • editor.background#1E3243
  • editor.findMatchBackground#2D5C8670
  • editor.findMatchForeground#D8E9F8
  • editor.findMatchHighlightBackground#53141370
  • editor.findMatchHighlightForeground#D8E9F8
  • editor.findRangeHighlightBackground#79222070
  • editor.foldBackground#53141370
  • editor.foldPlaceholderForeground#D8E9F8
  • editor.foreground#D8E9F8
  • editor.hoverHighlightBackground#53141370
  • editor.inactiveSelectionBackground#79222070
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E4BFBF
  • editor.rangeHighlightBackground#53141370
  • editor.selectionBackground#79222070
  • editor.selectionForeground#D8E9F8
  • editor.selectionHighlightBackground#79222070
  • editor.snippetFinalTabstopHighlightBackground#53141370
  • editor.snippetTabstopHighlightBackground#53141370
  • editor.symbolHighlightBackground#53141370
  • editor.wordHighlightBackground#53141370
  • editor.wordHighlightStrongBackground#53141350
  • editor.wordHighlightTextBackground#53141370
  • editorCodeLens.foreground#A28181
  • editorCursor.background#53141370
  • editorCursor.foreground#e99393
  • editorError.foreground#FF6363
  • editorGroup.border#671A18
  • editorGroup.dropBackground#462020
  • editorGroup.emptyBackground#1E3243
  • editorGroupHeader.border#671A18
  • editorGroupHeader.tabsBackground#1E3243
  • editorGutter.addedBackground#00B900
  • editorGutter.background#1E3243
  • editorGutter.commentRangeForeground#A28181
  • editorGutter.deletedBackground#FF6363
  • editorGutter.modifiedBackground#2093FF
  • editorHint.foreground#00B900
  • editorHoverWidget.background#1E3243
  • editorHoverWidget.border#671A18
  • editorHoverWidget.foreground#D8E9F8
  • editorHoverWidget.highlightForeground#D8E9F8
  • editorHoverWidget.statusBarBackground#1E3243
  • editorIndentGuide.activeBackground1#e99393
  • editorIndentGuide.background1#53141370
  • editorInfo.foreground#2093FF
  • editorLineNumber.activeForeground#e99393
  • editorLineNumber.dimmedForeground#A2818190
  • editorLineNumber.foreground#A28181
  • editorLink.activeForeground#2093FF
  • editorMarkerNavigation.background#263745
  • editorMarkerNavigationError.background#263745
  • editorMarkerNavigationWarning.background#263745
  • editorMultiCursor.primary.background#53141370
  • editorMultiCursor.primary.foreground#e99393
  • editorMultiCursor.secondary.background#53141370
  • editorMultiCursor.secondary.foreground#D8E9F8
  • editorOverviewRuler.addedForeground#00B900
  • editorOverviewRuler.border#671A18
  • editorOverviewRuler.commentForeground#A28181
  • editorOverviewRuler.commonContentForeground#D8E9F8
  • editorOverviewRuler.currentContentForeground#2093FF
  • editorOverviewRuler.deletedForeground#FF6363
  • editorOverviewRuler.errorForeground#FF6363
  • editorOverviewRuler.findMatchForeground#D8E9F8
  • editorOverviewRuler.incomingContentForeground#00B900
  • editorOverviewRuler.infoForeground#2093FF
  • editorOverviewRuler.modifiedForeground#2093FF
  • editorOverviewRuler.rangeHighlightForeground#53141370
  • editorOverviewRuler.selectionHighlightForeground#79222070
  • editorOverviewRuler.warningForeground#D2A679
  • editorOverviewRuler.wordHighlightForeground#53141370
  • editorOverviewRuler.wordHighlightStrongForeground#53141370
  • editorRuler.foreground#53141370
  • editorSuggestWidget.background#1E3243
  • editorSuggestWidget.border#671A18
  • editorSuggestWidget.focusHighlightForeground#D8E9F8
  • editorSuggestWidget.foreground#A28181
  • editorSuggestWidget.highlightForeground#D8E9F8
  • editorSuggestWidget.selectedBackground#ff6c6180
  • editorSuggestWidget.selectedForeground#D8E9F8
  • editorUnicodeHighlight.background#53141370
  • editorWarning.foreground#D2A679
  • editorWhitespace.foreground#53141370
  • editorWidget.background#1E3243
  • editorWidget.border#671A18
  • editorWidget.foreground#D8E9F8
  • errorForeground#FF6363
  • extensionButton.prominentBackground#ff6c61aa
  • extensionButton.prominentForeground#1A2D3D
  • extensionButton.prominentHoverBackground#ff6c61
  • focusBorder#671A18
  • foreground#D8E9F8
  • gitDecoration.addedResourceForeground#00B900
  • gitDecoration.conflictingResourceForeground#D2A679
  • gitDecoration.deletedResourceForeground#FF6363
  • gitDecoration.ignoredResourceForeground#A28181
  • gitDecoration.modifiedResourceForeground#2093FF
  • gitDecoration.renamedResourceForeground#e99393
  • gitDecoration.untrackedResourceForeground#E4BFBF
  • input.background#1E3243
  • input.border#A28181
  • input.foreground#D8E9F8
  • input.placeholderForeground#A28181
  • inputOption.activeBorder#e99393
  • inputValidation.errorBorder#FF6363
  • inputValidation.infoBorder#2093FF
  • inputValidation.warningBorder#D2A679
  • list.activeSelectionBackground#ff6c6170
  • list.activeSelectionForeground#D8E9F8
  • list.dropBackground#462020
  • list.dropBetweenBackground#671A18
  • list.errorForeground#FF6363
  • list.focusBackground#ff6c6150
  • list.focusForeground#D8E9F8
  • list.highlightForeground#e99393
  • list.hoverBackground#ff6c6120
  • list.hoverForeground#D8E9F8
  • list.inactiveFocusBackground#263745
  • list.inactiveSelectionBackground#ff6c6160
  • list.inactiveSelectionForeground#E4BFBF
  • list.warningForeground#D2A679
  • listFilterWidget.background#462020
  • listFilterWidget.noMatchesOutline#FF6363
  • listFilterWidget.outline#671A18
  • merge.border#671A18
  • merge.currentContentBackground#2093FF20
  • merge.currentHeaderBackground#2093FF40
  • merge.incomingContentBackground#00B90020
  • merge.incomingHeaderBackground#00B90040
  • mergeEditor.change.background#D2A679
  • notificationLink.foreground#2093FF
  • notifications.background#263745
  • notifications.border#671A18
  • notifications.foreground#D8E9F8
  • notificationsErrorIcon.foreground#FF6363
  • notificationsInfoIcon.foreground#2093FF
  • notificationsWarningIcon.foreground#D2A679
  • panel.background#263745
  • panel.border#e99393
  • panelInput.border#A28181
  • panelTitle.activeBorder#e99393
  • panelTitle.activeForeground#D8E9F8
  • panelTitle.inactiveForeground#A28181
  • peekView.border#ff6c61
  • peekViewEditor.background#1E3243
  • peekViewEditor.matchHighlightBackground#2D5C8670
  • peekViewResult.background#1E3243
  • peekViewResult.fileForeground#D8E9F8
  • peekViewResult.lineForeground#D8E9F8
  • peekViewResult.matchHighlightBackground#53141370
  • peekViewResult.selectionBackground#263745
  • peekViewResult.selectionForeground#D8E9F8
  • peekViewTitle.background#1E3243
  • peekViewTitleDescription.foreground#E4BFBF
  • peekViewTitleLabel.foreground#D8E9F8
  • pickerGroup.border#ff6c61
  • pickerGroup.foreground#F3B3AF
  • progressBar.background#e99393
  • selection.background#ff6c6150
  • settings.checkboxBackground#1E3243
  • settings.checkboxBorder#671A18
  • settings.checkboxForeground#D8E9F8
  • settings.dropdownBackground#1E3243
  • settings.dropdownBorder#671A18
  • settings.dropdownForeground#D8E9F8
  • settings.focusedRowBackground#53141370
  • settings.focusedRowBorder#A28181
  • settings.headerBorder#671A18
  • settings.headerForeground#D8E9F8
  • settings.inactiveSelectedItemBorder#A28181
  • settings.modifiedItemIndicator#D2A679
  • settings.numberInputBackground#1E3243
  • settings.numberInputBorder#A28181
  • settings.numberInputForeground#D8E9F8
  • settings.rowHoverBackground#53141370
  • settings.settingsHeaderHoverForeground#D8E9F8
  • settings.textInputBackground#1E3243
  • settings.textInputBorder#A28181
  • settings.textInputForeground#D8E9F8
  • sideBar.background#1E3243
  • sideBarActivityBarTop.border#671A18
  • sideBarSectionHeader.background#263745
  • sideBarSectionHeader.border#671A18
  • sideBarStickyScroll.background#1E3243
  • sideBarStickyScroll.border#671A18
  • sideBarStickyScroll.shadow#671A18
  • sideBarTitle.background#1E3243
  • sideBarTitle.foreground#D8E9F8
  • statusBar.background#ff6c61
  • statusBar.debuggingBackground#D2A679
  • statusBar.debuggingForeground#1A2D3D
  • statusBar.foreground#1A2D3D
  • statusBar.noFolderBackground#E4BFBF
  • statusBar.noFolderForeground#1A2D3D
  • statusBarItem.activeBackground#ff6c61aa
  • statusBarItem.errorBackground#FF6363
  • statusBarItem.errorForeground#1A2D3D
  • statusBarItem.errorHoverBackground#FF6363aa
  • statusBarItem.hoverBackground#ff6c61aa
  • statusBarItem.prominentBackground#ff6c61aa
  • statusBarItem.prominentForeground#1A2D3D
  • statusBarItem.prominentHoverBackground#ff6c61aa
  • statusBarItem.prominentHoverForeground#1A2D3D
  • statusBarItem.remoteBackground#e99393
  • statusBarItem.remoteForeground#1A2D3D
  • statusBarItem.remoteHoverBackground#e99393aa
  • statusBarItem.warningBackground#D2A679
  • statusBarItem.warningForeground#1A2D3D
  • statusBarItem.warningHoverBackground#D2A679aa
  • tab.activeBackground#263745
  • tab.activeBorderTop#e99393
  • tab.activeForeground#D8E9F8
  • tab.border#671A18
  • tab.hoverBackground#26374580
  • tab.hoverForeground#D8E9F8
  • tab.inactiveBackground#1E3243
  • tab.inactiveForeground#A28181
  • tab.selectedBackground#53141370
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4B72FF
  • terminal.ansiBrightBlack#454545
  • terminal.ansiBrightBlue#587CFF
  • terminal.ansiBrightCyan#52C2D0
  • terminal.ansiBrightGreen#33CE36
  • terminal.ansiBrightMagenta#E860E8
  • terminal.ansiBrightRed#F1CFC6
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#A17F00
  • terminal.ansiCyan#00AAC1
  • terminal.ansiGreen#1CB21F
  • terminal.ansiMagenta#E75FE7
  • terminal.ansiRed#F76E4B
  • terminal.ansiWhite#FFFFFE
  • terminal.ansiYellow#A88600
  • terminal.background#1E3243
  • terminal.border#671A18
  • terminal.foreground#D8E9F8
  • terminal.inactiveSelectionBackground#79222070
  • terminal.selectionBackground#79222070
  • textBlockQuote.background#462020
  • textBlockQuote.border#671A18
  • textCodeBlock.background#462020
  • textLink.activeForeground#2093FF
  • textLink.foreground#ff6c61
  • textPreformat.background#462020
  • textPreformat.foreground#D8E9F8
  • textSeparator.foreground#D8E9F8
  • titleBar.activeBackground#263745
  • titleBar.activeForeground#D8E9F8
  • titleBar.inactiveBackground#263745
  • titleBar.inactiveForeground#A28181
  • widget.border#671A18

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D8E9F8
meta.diff, meta.diff.header#A28181
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#CAE1F7
emphasisitalic
strongbold
invalid#FF6363strikethrough
invalid.deprecated#D8E9F8underline italic
header#CAE1F7
source.ini, source.ignore, source#E4BFBF
markup.inserted#CAE1F7
markup.deleted#FF6363
markup.changed#2093FF
markup.error#FF6363
markup.underlineunderline
markup.bold#D2A679bold
markup.heading#e99393bold
markup.italic#E4BFBFitalic
markup.inline.raw, markup.raw.restructuredtext#e99393
markup.underline.link, markup.underline.link.image, markup.quote#2093FF
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#ff6c61
meta.separator.markdown#e99393
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#F3B5B4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D2A679
entity.name.class, entity.name.type.class, entity.other.inherited-class#ff6c61
entity.name.tag, entity.other.attribute-name.parent-selector#F6C7C5
entity.other.attribute-name#ff6c61
entity.name.function, meta.function-call, meta.method-call, meta.method#e99393
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#F3B0AF
support#F1AAA7
entity.name, variable.other.key#e99393
entity.name.type#F2ACAB
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F0C09E
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#A7D0F1
entity.other.attribute-name.class.css#e99393
storage.class, storage.type#ff6c61
storage.modifier#F1A7A7
comment, punctuation.definition.comment, unused.comment, wildcard.comment#A28181
constant#CAE1F7
constant.other.color#F1ACA7
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#88BEEC
constant.other.date, constant.other.timestamp#F3B1AF
keyword.operator#F5C3C2
keyword.other.unit#EF9C9A
keyword.control, keyword.other.template, keyword.other.substitution#FF5C5C
keyword.other.this#CAE1F7
keyword.control.import, keyword.control.from#EEA495
keyword.control.new, keyword.operator.new, keyword.other.important.css#ff6c61
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#F0C09E
meta.attribute-selector.scss#F3B5B5
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F6C7C5
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#F1B5A7
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#ff6c61
support.constant.property-value.css, constant.numeric.css#E4BFBF
keyword.control.at-rule.apply.tailwind#EEA495
keyword.control.at-rule.tailwind.tailwind#FF5C5C
keyword.control.at-rule.layer.tailwind#F0C09E
meta.selector#F3B5B5
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F3D4D3
punctuation.definition.constant.restructuredtext#CAE1F7
string.quoted.docstring.multi#e99393
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#F3D4D3
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F1B5A7
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#FFFFFE
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#F4E1D7
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#F5DDDB
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#F9EBE6
punctuation.definition.directive.restructuredtext#CAE1F7
variable#F2ADAB
variable.other.alias.yaml#F2ADABunderline
variable.language, variable.parameter.function.language.special#88BEEC
variable.other.constant#F7D3CA
support.variable#F2ADAB
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#F4D4B8
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D2A679
support.function, support.type.property-name#FAE7E0
storage#F3B5B4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A88600
punctuation.definition.group.capture.regexp#F76E4B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F76E4B
punctuation.definition.character-class.regexp#A17F00
punctuation.definition.group.regexp#587CFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F76E4B
meta.assertion.look-ahead.regexp#587CFF
source.json meta.structure.dictionary.json support.type.property-name.json#e99393
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff6c61
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#2093FF
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#D2A679
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#FF6363
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#00B900
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#e99393
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#ff6c61
token.info-token#2093FF
token.warn-token#D2A679
token.error-token#FF6363
token.debug-token#D2A679
RLabs Themes Collection by RLabs Inc. - VS Code Theme