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#14193970
  • activityBar.activeBorder#6DC5B0
  • activityBar.background#21243B
  • activityBar.foreground#B7E1D7
  • activityBar.inactiveForeground#4F636A
  • activityBarBadge.background#8FAFBD
  • activityBarBadge.foreground#132F28
  • activityBarTop.foreground#B7E1D7
  • badge.background#8FAFBD
  • badge.foreground#132F28
  • breadcrumb.activeForeground#B7E1D7
  • breadcrumb.activeSelectionForeground#B7E1D7
  • breadcrumb.background#21243B
  • breadcrumb.focusForeground#B7E1D7
  • breadcrumb.foreground#4F636A
  • breadcrumbPicker.background#21243B
  • button.background#8FAFBDdb
  • button.foreground#132F28
  • button.hoverBackground#8FAFBD
  • button.secondaryBackground#6DC5B0db
  • button.secondaryForeground#132F28
  • button.secondaryHoverBackground#6DC5B0
  • checkbox.background#141624
  • checkbox.foreground#B7E1D7
  • debugToolBar.background#85A6C7
  • debugToolBar.foreground#132F28
  • descriptionForeground#E1B2C9
  • diffEditor.diagonalFill#85A6C7
  • diffEditor.insertedLineBackground#85A6C740
  • diffEditor.insertedTextBackground#85A6C750
  • diffEditor.insertedTextBorder#85A6C7
  • diffEditor.removedLineBackground#C5868640
  • diffEditor.removedTextBackground#C5868650
  • diffEditor.removedTextBorder#C58686
  • diffEditorGutter.insertedLineBackground#85A6C7
  • diffEditorGutter.removedLineBackground#C58686
  • disabledForeground#4F636A
  • dropdown.background#4A2C3A
  • dropdown.border#263840
  • dropdown.foreground#B7E1D7
  • editor.background#141624
  • editor.findMatchBackground#2D586C70
  • editor.findMatchForeground#B7E1D7
  • editor.findMatchHighlightBackground#14193970
  • editor.findMatchHighlightForeground#B7E1D7
  • editor.findRangeHighlightBackground#264A5A70
  • editor.foldBackground#14193970
  • editor.foldPlaceholderForeground#B7E1D7
  • editor.foreground#B7E1D7
  • editor.hoverHighlightBackground#14193970
  • editor.inactiveSelectionBackground#264A5A70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E1B2C9
  • editor.rangeHighlightBackground#14193970
  • editor.selectionBackground#264A5A70
  • editor.selectionForeground#B7E1D7
  • editor.selectionHighlightBackground#264A5A70
  • editor.snippetFinalTabstopHighlightBackground#14193970
  • editor.snippetTabstopHighlightBackground#14193970
  • editor.symbolHighlightBackground#14193970
  • editor.wordHighlightBackground#14193970
  • editor.wordHighlightStrongBackground#14193950
  • editor.wordHighlightTextBackground#14193970
  • editorCodeLens.foreground#4F636A
  • editorCursor.background#14193970
  • editorCursor.foreground#6DC5B0
  • editorError.foreground#C58686
  • editorGroup.border#263840
  • editorGroup.dropBackground#4A2C3A
  • editorGroup.emptyBackground#141624
  • editorGroupHeader.border#263840
  • editorGroupHeader.tabsBackground#141624
  • editorGutter.addedBackground#3CA33C
  • editorGutter.background#141624
  • editorGutter.commentRangeForeground#4F636A
  • editorGutter.deletedBackground#C58686
  • editorGutter.modifiedBackground#85A6C7
  • editorHint.foreground#3CA33C
  • editorHoverWidget.background#141624
  • editorHoverWidget.border#263840
  • editorHoverWidget.foreground#B7E1D7
  • editorHoverWidget.highlightForeground#B7E1D7
  • editorHoverWidget.statusBarBackground#141624
  • editorIndentGuide.activeBackground1#6DC5B0
  • editorIndentGuide.background1#14193970
  • editorInfo.foreground#85A6C7
  • editorLineNumber.activeForeground#6DC5B0
  • editorLineNumber.dimmedForeground#4F636A90
  • editorLineNumber.foreground#4F636A
  • editorLink.activeForeground#85A6C7
  • editorMarkerNavigation.background#21243B
  • editorMarkerNavigationError.background#21243B
  • editorMarkerNavigationWarning.background#21243B
  • editorMultiCursor.primary.background#14193970
  • editorMultiCursor.primary.foreground#6DC5B0
  • editorMultiCursor.secondary.background#14193970
  • editorMultiCursor.secondary.foreground#B7E1D7
  • editorOverviewRuler.addedForeground#3CA33C
  • editorOverviewRuler.border#263840
  • editorOverviewRuler.commentForeground#4F636A
  • editorOverviewRuler.commonContentForeground#B7E1D7
  • editorOverviewRuler.currentContentForeground#85A6C7
  • editorOverviewRuler.deletedForeground#C58686
  • editorOverviewRuler.errorForeground#C58686
  • editorOverviewRuler.findMatchForeground#B7E1D7
  • editorOverviewRuler.incomingContentForeground#3CA33C
  • editorOverviewRuler.infoForeground#85A6C7
  • editorOverviewRuler.modifiedForeground#85A6C7
  • editorOverviewRuler.rangeHighlightForeground#14193970
  • editorOverviewRuler.selectionHighlightForeground#264A5A70
  • editorOverviewRuler.warningForeground#C5A687
  • editorOverviewRuler.wordHighlightForeground#14193970
  • editorOverviewRuler.wordHighlightStrongForeground#14193970
  • editorRuler.foreground#14193970
  • editorSuggestWidget.background#141624
  • editorSuggestWidget.border#263840
  • editorSuggestWidget.focusHighlightForeground#B7E1D7
  • editorSuggestWidget.foreground#4F636A
  • editorSuggestWidget.highlightForeground#B7E1D7
  • editorSuggestWidget.selectedBackground#8FAFBD80
  • editorSuggestWidget.selectedForeground#B7E1D7
  • editorUnicodeHighlight.background#14193970
  • editorWarning.foreground#C5A687
  • editorWhitespace.foreground#14193970
  • editorWidget.background#141624
  • editorWidget.border#263840
  • editorWidget.foreground#B7E1D7
  • errorForeground#C58686
  • extensionButton.prominentBackground#8FAFBDaa
  • extensionButton.prominentForeground#132F28
  • extensionButton.prominentHoverBackground#8FAFBD
  • focusBorder#263840
  • foreground#B7E1D7
  • gitDecoration.addedResourceForeground#3CA33C
  • gitDecoration.conflictingResourceForeground#C5A687
  • gitDecoration.deletedResourceForeground#C58686
  • gitDecoration.ignoredResourceForeground#4F636A
  • gitDecoration.modifiedResourceForeground#85A6C7
  • gitDecoration.renamedResourceForeground#6DC5B0
  • gitDecoration.untrackedResourceForeground#E1B2C9
  • input.background#141624
  • input.border#4F636A
  • input.foreground#B7E1D7
  • input.placeholderForeground#4F636A
  • inputOption.activeBorder#6DC5B0
  • inputValidation.errorBorder#C58686
  • inputValidation.infoBorder#85A6C7
  • inputValidation.warningBorder#C5A687
  • list.activeSelectionBackground#8FAFBD70
  • list.activeSelectionForeground#B7E1D7
  • list.dropBackground#4A2C3A
  • list.dropBetweenBackground#263840
  • list.errorForeground#C58686
  • list.focusBackground#8FAFBD50
  • list.focusForeground#B7E1D7
  • list.highlightForeground#6DC5B0
  • list.hoverBackground#8FAFBD20
  • list.hoverForeground#B7E1D7
  • list.inactiveFocusBackground#21243B
  • list.inactiveSelectionBackground#8FAFBD60
  • list.inactiveSelectionForeground#E1B2C9
  • list.warningForeground#C5A687
  • listFilterWidget.background#4A2C3A
  • listFilterWidget.noMatchesOutline#C58686
  • listFilterWidget.outline#263840
  • merge.border#263840
  • merge.currentContentBackground#85A6C720
  • merge.currentHeaderBackground#85A6C740
  • merge.incomingContentBackground#3CA33C20
  • merge.incomingHeaderBackground#3CA33C40
  • mergeEditor.change.background#C5A687
  • notificationLink.foreground#85A6C7
  • notifications.background#21243B
  • notifications.border#263840
  • notifications.foreground#B7E1D7
  • notificationsErrorIcon.foreground#C58686
  • notificationsInfoIcon.foreground#85A6C7
  • notificationsWarningIcon.foreground#C5A687
  • panel.background#21243B
  • panel.border#6DC5B0
  • panelInput.border#4F636A
  • panelTitle.activeBorder#6DC5B0
  • panelTitle.activeForeground#B7E1D7
  • panelTitle.inactiveForeground#4F636A
  • peekView.border#8FAFBD
  • peekViewEditor.background#141624
  • peekViewEditor.matchHighlightBackground#2D586C70
  • peekViewResult.background#141624
  • peekViewResult.fileForeground#B7E1D7
  • peekViewResult.lineForeground#B7E1D7
  • peekViewResult.matchHighlightBackground#14193970
  • peekViewResult.selectionBackground#21243B
  • peekViewResult.selectionForeground#B7E1D7
  • peekViewTitle.background#141624
  • peekViewTitleDescription.foreground#E1B2C9
  • peekViewTitleLabel.foreground#B7E1D7
  • pickerGroup.border#8FAFBD
  • pickerGroup.foreground#C1C5E2
  • progressBar.background#6DC5B0
  • selection.background#8FAFBD50
  • settings.checkboxBackground#141624
  • settings.checkboxBorder#263840
  • settings.checkboxForeground#B7E1D7
  • settings.dropdownBackground#141624
  • settings.dropdownBorder#263840
  • settings.dropdownForeground#B7E1D7
  • settings.focusedRowBackground#14193970
  • settings.focusedRowBorder#4F636A
  • settings.headerBorder#263840
  • settings.headerForeground#B7E1D7
  • settings.inactiveSelectedItemBorder#4F636A
  • settings.modifiedItemIndicator#C5A687
  • settings.numberInputBackground#141624
  • settings.numberInputBorder#4F636A
  • settings.numberInputForeground#B7E1D7
  • settings.rowHoverBackground#14193970
  • settings.settingsHeaderHoverForeground#B7E1D7
  • settings.textInputBackground#141624
  • settings.textInputBorder#4F636A
  • settings.textInputForeground#B7E1D7
  • sideBar.background#141624
  • sideBarActivityBarTop.border#263840
  • sideBarSectionHeader.background#21243B
  • sideBarSectionHeader.border#263840
  • sideBarStickyScroll.background#141624
  • sideBarStickyScroll.border#263840
  • sideBarStickyScroll.shadow#263840
  • sideBarTitle.background#141624
  • sideBarTitle.foreground#B7E1D7
  • statusBar.background#8FAFBD
  • statusBar.debuggingBackground#C5A687
  • statusBar.debuggingForeground#132F28
  • statusBar.foreground#132F28
  • statusBar.noFolderBackground#E1B2C9
  • statusBar.noFolderForeground#132F28
  • statusBarItem.activeBackground#8FAFBDaa
  • statusBarItem.errorBackground#C58686
  • statusBarItem.errorForeground#132F28
  • statusBarItem.errorHoverBackground#C58686aa
  • statusBarItem.hoverBackground#8FAFBDaa
  • statusBarItem.prominentBackground#8FAFBDaa
  • statusBarItem.prominentForeground#132F28
  • statusBarItem.prominentHoverBackground#8FAFBDaa
  • statusBarItem.prominentHoverForeground#132F28
  • statusBarItem.remoteBackground#6DC5B0
  • statusBarItem.remoteForeground#132F28
  • statusBarItem.remoteHoverBackground#6DC5B0aa
  • statusBarItem.warningBackground#C5A687
  • statusBarItem.warningForeground#132F28
  • statusBarItem.warningHoverBackground#C5A687aa
  • tab.activeBackground#21243B
  • tab.activeBorderTop#6DC5B0
  • tab.activeForeground#B7E1D7
  • tab.border#263840
  • tab.hoverBackground#21243B80
  • tab.hoverForeground#B7E1D7
  • tab.inactiveBackground#141624
  • tab.inactiveForeground#4F636A
  • tab.selectedBackground#14193970
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9666FC
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#A981FF
  • terminal.ansiBrightCyan#10FF9C
  • terminal.ansiBrightGreen#91EF78
  • terminal.ansiBrightMagenta#DB00FF
  • terminal.ansiBrightRed#FF998E
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#FCFDB2
  • terminal.ansiCyan#10935D
  • terminal.ansiGreen#419A2A
  • terminal.ansiMagenta#D500FF
  • terminal.ansiRed#F13824
  • terminal.ansiWhite#EFEEEA
  • terminal.ansiYellow#D5D743
  • terminal.background#141624
  • terminal.border#263840
  • terminal.foreground#B7E1D7
  • terminal.inactiveSelectionBackground#264A5A70
  • terminal.selectionBackground#264A5A70
  • textBlockQuote.background#4A2C3A
  • textBlockQuote.border#263840
  • textCodeBlock.background#4A2C3A
  • textLink.activeForeground#85A6C7
  • textLink.foreground#8FAFBD
  • textPreformat.background#4A2C3A
  • textPreformat.foreground#B7E1D7
  • textSeparator.foreground#B7E1D7
  • titleBar.activeBackground#21243B
  • titleBar.activeForeground#B7E1D7
  • titleBar.inactiveBackground#21243B
  • titleBar.inactiveForeground#4F636A
  • widget.border#263840

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#B7E1D7
meta.diff, meta.diff.header#4F636A
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E2C0D1
emphasisitalic
strongbold
invalid#C58686strikethrough
invalid.deprecated#B7E1D7underline italic
header#E2C0D1
source.ini, source.ignore, source#E1B2C9
markup.inserted#E2C0D1
markup.deleted#C58686
markup.changed#85A6C7
markup.error#C58686
markup.underlineunderline
markup.bold#C5A687bold
markup.heading#6DC5B0bold
markup.italic#E1B2C9italic
markup.inline.raw, markup.raw.restructuredtext#6DC5B0
markup.underline.link, markup.underline.link.image, markup.quote#85A6C7
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8FAFBD
meta.separator.markdown#6DC5B0
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#DEC9D3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C5A687
entity.name.class, entity.name.type.class, entity.other.inherited-class#8FAFBD
entity.name.tag, entity.other.attribute-name.parent-selector#D8EEE9
entity.other.attribute-name#8FAFBD
entity.name.function, meta.function-call, meta.method-call, meta.method#6DC5B0
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#CFE7E1
support#BBD8D1
entity.name, variable.other.key#6DC5B0
entity.name.type#DFC3D1
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DAA9B4
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#BCC1E1
entity.other.attribute-name.class.css#6DC5B0
storage.class, storage.type#8FAFBD
storage.modifier#BBDDD5
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4F636A
constant#E2C0D1
constant.other.color#DBB7C9
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#B0CCD9
constant.other.date, constant.other.timestamp#C2DBD5
keyword.operator#E7F0F4
keyword.other.unit#BBCFD8
keyword.control, keyword.other.template, keyword.other.substitution#9FA6D0
keyword.other.this#E2C0D1
keyword.control.import, keyword.control.from#AAA9D0
keyword.control.new, keyword.operator.new, keyword.other.important.css#8FAFBD
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#B9B4D5
meta.attribute-selector.scss#E4CDD8
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#D8EEE9
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#D0E1E1
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#8FAFBD
support.constant.property-value.css, constant.numeric.css#E1B2C9
keyword.control.at-rule.apply.tailwind#AAA9D0
keyword.control.at-rule.tailwind.tailwind#9FA6D0
keyword.control.at-rule.layer.tailwind#B9B4D5
meta.selector#E4CDD8
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D3E8E3
punctuation.definition.constant.restructuredtext#E2C0D1
string.quoted.docstring.multi#6DC5B0
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#D3E8E3
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D0E1E1
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#EFEEEA
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#EAF4F5
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#D8E9E9
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#F2F8F8
punctuation.definition.directive.restructuredtext#E2C0D1
variable#BABFDE
variable.other.alias.yaml#BABFDEunderline
variable.language, variable.parameter.function.language.special#B0CCD9
variable.other.constant#DAD4E8
support.variable#BABFDE
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#D8D2E5
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C5A687
support.function, support.type.property-name#E4D3D4
storage#C4C8DE
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D5D743
punctuation.definition.group.capture.regexp#F13824
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F13824
punctuation.definition.character-class.regexp#FCFDB2
punctuation.definition.group.regexp#A981FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F13824
meta.assertion.look-ahead.regexp#A981FF
source.json meta.structure.dictionary.json support.type.property-name.json#6DC5B0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8FAFBD
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#85A6C7
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#C5A687
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#C58686
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#3CA33C
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#6DC5B0
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#8FAFBD
token.info-token#85A6C7
token.warn-token#C5A687
token.error-token#C58686
token.debug-token#C5A687
RLabs Themes Collection by RLabs Inc. - VS Code Theme