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#21272B70
  • activityBar.activeBorder#62A0D0
  • activityBar.background#2E2829
  • activityBar.foreground#D1DAE0
  • activityBar.inactiveForeground#65654B
  • activityBarBadge.background#D27A88
  • activityBarBadge.foreground#1C1B1D
  • activityBarTop.foreground#D1DAE0
  • badge.background#D27A88
  • badge.foreground#1C1B1D
  • breadcrumb.activeForeground#D1DAE0
  • breadcrumb.activeSelectionForeground#D1DAE0
  • breadcrumb.background#2E2829
  • breadcrumb.focusForeground#D1DAE0
  • breadcrumb.foreground#65654B
  • breadcrumbPicker.background#2E2829
  • button.background#D27A88db
  • button.foreground#1C1B1D
  • button.hoverBackground#D27A88
  • button.secondaryBackground#62A0D0db
  • button.secondaryForeground#1C1B1D
  • button.secondaryHoverBackground#62A0D0
  • checkbox.background#282825
  • checkbox.foreground#D1DAE0
  • debugToolBar.background#7EA6CE
  • debugToolBar.foreground#1C1B1D
  • descriptionForeground#E2E3D4
  • diffEditor.diagonalFill#7EA6CE
  • diffEditor.insertedLineBackground#7EA6CE40
  • diffEditor.insertedTextBackground#7EA6CE50
  • diffEditor.insertedTextBorder#7EA6CE
  • diffEditor.removedLineBackground#D6767640
  • diffEditor.removedTextBackground#D6767650
  • diffEditor.removedTextBorder#D67676
  • diffEditorGutter.insertedLineBackground#7EA6CE
  • diffEditorGutter.removedLineBackground#D67676
  • disabledForeground#65654B
  • dropdown.background#252C27
  • dropdown.border#382E30
  • dropdown.foreground#D1DAE0
  • editor.background#282825
  • editor.findMatchBackground#60613870
  • editor.findMatchForeground#D1DAE0
  • editor.findMatchHighlightBackground#21272B70
  • editor.findMatchHighlightForeground#D1DAE0
  • editor.findRangeHighlightBackground#34414B70
  • editor.foldBackground#21272B70
  • editor.foldPlaceholderForeground#D1DAE0
  • editor.foreground#D1DAE0
  • editor.hoverHighlightBackground#21272B70
  • editor.inactiveSelectionBackground#34414B70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E2E3D4
  • editor.rangeHighlightBackground#21272B70
  • editor.selectionBackground#34414B70
  • editor.selectionForeground#D1DAE0
  • editor.selectionHighlightBackground#34414B70
  • editor.snippetFinalTabstopHighlightBackground#21272B70
  • editor.snippetTabstopHighlightBackground#21272B70
  • editor.symbolHighlightBackground#21272B70
  • editor.wordHighlightBackground#21272B70
  • editor.wordHighlightStrongBackground#21272B50
  • editor.wordHighlightTextBackground#21272B70
  • editorCodeLens.foreground#65654B
  • editorCursor.background#21272B70
  • editorCursor.foreground#62A0D0
  • editorError.foreground#D67676
  • editorGroup.border#382E30
  • editorGroup.dropBackground#252C27
  • editorGroup.emptyBackground#282825
  • editorGroupHeader.border#382E30
  • editorGroupHeader.tabsBackground#282825
  • editorGutter.addedBackground#3FA23F
  • editorGutter.background#282825
  • editorGutter.commentRangeForeground#65654B
  • editorGutter.deletedBackground#D67676
  • editorGutter.modifiedBackground#7EA6CE
  • editorHint.foreground#3FA23F
  • editorHoverWidget.background#282825
  • editorHoverWidget.border#382E30
  • editorHoverWidget.foreground#D1DAE0
  • editorHoverWidget.highlightForeground#D1DAE0
  • editorHoverWidget.statusBarBackground#282825
  • editorIndentGuide.activeBackground1#62A0D0
  • editorIndentGuide.background1#21272B70
  • editorInfo.foreground#7EA6CE
  • editorLineNumber.activeForeground#62A0D0
  • editorLineNumber.dimmedForeground#65654B90
  • editorLineNumber.foreground#65654B
  • editorLink.activeForeground#7EA6CE
  • editorMarkerNavigation.background#2E2829
  • editorMarkerNavigationError.background#2E2829
  • editorMarkerNavigationWarning.background#2E2829
  • editorMultiCursor.primary.background#21272B70
  • editorMultiCursor.primary.foreground#62A0D0
  • editorMultiCursor.secondary.background#21272B70
  • editorMultiCursor.secondary.foreground#D1DAE0
  • editorOverviewRuler.addedForeground#3FA23F
  • editorOverviewRuler.border#382E30
  • editorOverviewRuler.commentForeground#65654B
  • editorOverviewRuler.commonContentForeground#D1DAE0
  • editorOverviewRuler.currentContentForeground#7EA6CE
  • editorOverviewRuler.deletedForeground#D67676
  • editorOverviewRuler.errorForeground#D67676
  • editorOverviewRuler.findMatchForeground#D1DAE0
  • editorOverviewRuler.incomingContentForeground#3FA23F
  • editorOverviewRuler.infoForeground#7EA6CE
  • editorOverviewRuler.modifiedForeground#7EA6CE
  • editorOverviewRuler.rangeHighlightForeground#21272B70
  • editorOverviewRuler.selectionHighlightForeground#34414B70
  • editorOverviewRuler.warningForeground#D2A67A
  • editorOverviewRuler.wordHighlightForeground#21272B70
  • editorOverviewRuler.wordHighlightStrongForeground#21272B70
  • editorRuler.foreground#21272B70
  • editorSuggestWidget.background#282825
  • editorSuggestWidget.border#382E30
  • editorSuggestWidget.focusHighlightForeground#D1DAE0
  • editorSuggestWidget.foreground#65654B
  • editorSuggestWidget.highlightForeground#D1DAE0
  • editorSuggestWidget.selectedBackground#D27A8880
  • editorSuggestWidget.selectedForeground#D1DAE0
  • editorUnicodeHighlight.background#21272B70
  • editorWarning.foreground#D2A67A
  • editorWhitespace.foreground#21272B70
  • editorWidget.background#282825
  • editorWidget.border#382E30
  • editorWidget.foreground#D1DAE0
  • errorForeground#D67676
  • extensionButton.prominentBackground#D27A88aa
  • extensionButton.prominentForeground#1C1B1D
  • extensionButton.prominentHoverBackground#D27A88
  • focusBorder#382E30
  • foreground#D1DAE0
  • gitDecoration.addedResourceForeground#3FA23F
  • gitDecoration.conflictingResourceForeground#D2A67A
  • gitDecoration.deletedResourceForeground#D67676
  • gitDecoration.ignoredResourceForeground#65654B
  • gitDecoration.modifiedResourceForeground#7EA6CE
  • gitDecoration.renamedResourceForeground#62A0D0
  • gitDecoration.untrackedResourceForeground#E2E3D4
  • input.background#282825
  • input.border#65654B
  • input.foreground#D1DAE0
  • input.placeholderForeground#65654B
  • inputOption.activeBorder#62A0D0
  • inputValidation.errorBorder#D67676
  • inputValidation.infoBorder#7EA6CE
  • inputValidation.warningBorder#D2A67A
  • list.activeSelectionBackground#D27A8870
  • list.activeSelectionForeground#D1DAE0
  • list.dropBackground#252C27
  • list.dropBetweenBackground#382E30
  • list.errorForeground#D67676
  • list.focusBackground#D27A8850
  • list.focusForeground#D1DAE0
  • list.highlightForeground#62A0D0
  • list.hoverBackground#D27A8820
  • list.hoverForeground#D1DAE0
  • list.inactiveFocusBackground#2E2829
  • list.inactiveSelectionBackground#D27A8860
  • list.inactiveSelectionForeground#E2E3D4
  • list.warningForeground#D2A67A
  • listFilterWidget.background#252C27
  • listFilterWidget.noMatchesOutline#D67676
  • listFilterWidget.outline#382E30
  • merge.border#382E30
  • merge.currentContentBackground#7EA6CE20
  • merge.currentHeaderBackground#7EA6CE40
  • merge.incomingContentBackground#3FA23F20
  • merge.incomingHeaderBackground#3FA23F40
  • mergeEditor.change.background#D2A67A
  • notificationLink.foreground#7EA6CE
  • notifications.background#2E2829
  • notifications.border#382E30
  • notifications.foreground#D1DAE0
  • notificationsErrorIcon.foreground#D67676
  • notificationsInfoIcon.foreground#7EA6CE
  • notificationsWarningIcon.foreground#D2A67A
  • panel.background#2E2829
  • panel.border#62A0D0
  • panelInput.border#65654B
  • panelTitle.activeBorder#62A0D0
  • panelTitle.activeForeground#D1DAE0
  • panelTitle.inactiveForeground#65654B
  • peekView.border#D27A88
  • peekViewEditor.background#282825
  • peekViewEditor.matchHighlightBackground#60613870
  • peekViewResult.background#282825
  • peekViewResult.fileForeground#D1DAE0
  • peekViewResult.lineForeground#D1DAE0
  • peekViewResult.matchHighlightBackground#21272B70
  • peekViewResult.selectionBackground#2E2829
  • peekViewResult.selectionForeground#D1DAE0
  • peekViewTitle.background#282825
  • peekViewTitleDescription.foreground#E2E3D4
  • peekViewTitleLabel.foreground#D1DAE0
  • pickerGroup.border#D27A88
  • pickerGroup.foreground#E1C1C7
  • progressBar.background#62A0D0
  • selection.background#D27A8850
  • settings.checkboxBackground#282825
  • settings.checkboxBorder#382E30
  • settings.checkboxForeground#D1DAE0
  • settings.dropdownBackground#282825
  • settings.dropdownBorder#382E30
  • settings.dropdownForeground#D1DAE0
  • settings.focusedRowBackground#21272B70
  • settings.focusedRowBorder#65654B
  • settings.headerBorder#382E30
  • settings.headerForeground#D1DAE0
  • settings.inactiveSelectedItemBorder#65654B
  • settings.modifiedItemIndicator#D2A67A
  • settings.numberInputBackground#282825
  • settings.numberInputBorder#65654B
  • settings.numberInputForeground#D1DAE0
  • settings.rowHoverBackground#21272B70
  • settings.settingsHeaderHoverForeground#D1DAE0
  • settings.textInputBackground#282825
  • settings.textInputBorder#65654B
  • settings.textInputForeground#D1DAE0
  • sideBar.background#282825
  • sideBarActivityBarTop.border#382E30
  • sideBarSectionHeader.background#2E2829
  • sideBarSectionHeader.border#382E30
  • sideBarStickyScroll.background#282825
  • sideBarStickyScroll.border#382E30
  • sideBarStickyScroll.shadow#382E30
  • sideBarTitle.background#282825
  • sideBarTitle.foreground#D1DAE0
  • statusBar.background#D27A88
  • statusBar.debuggingBackground#D2A67A
  • statusBar.debuggingForeground#1C1B1D
  • statusBar.foreground#1C1B1D
  • statusBar.noFolderBackground#E2E3D4
  • statusBar.noFolderForeground#1C1B1D
  • statusBarItem.activeBackground#D27A88aa
  • statusBarItem.errorBackground#D67676
  • statusBarItem.errorForeground#1C1B1D
  • statusBarItem.errorHoverBackground#D67676aa
  • statusBarItem.hoverBackground#D27A88aa
  • statusBarItem.prominentBackground#D27A88aa
  • statusBarItem.prominentForeground#1C1B1D
  • statusBarItem.prominentHoverBackground#D27A88aa
  • statusBarItem.prominentHoverForeground#1C1B1D
  • statusBarItem.remoteBackground#62A0D0
  • statusBarItem.remoteForeground#1C1B1D
  • statusBarItem.remoteHoverBackground#62A0D0aa
  • statusBarItem.warningBackground#D2A67A
  • statusBarItem.warningForeground#1C1B1D
  • statusBarItem.warningHoverBackground#D2A67Aaa
  • tab.activeBackground#2E2829
  • tab.activeBorderTop#62A0D0
  • tab.activeForeground#D1DAE0
  • tab.border#382E30
  • tab.hoverBackground#2E282980
  • tab.hoverForeground#D1DAE0
  • tab.inactiveBackground#282825
  • tab.inactiveForeground#65654B
  • tab.selectedBackground#21272B70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8581FA
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#8583FF
  • terminal.ansiBrightCyan#BFF4E8
  • terminal.ansiBrightGreen#A2ED93
  • terminal.ansiBrightMagenta#F7D5F6
  • terminal.ansiBrightRed#F9EDEB
  • terminal.ansiBrightWhite#FAFAF9
  • terminal.ansiBrightYellow#E7B3A1
  • terminal.ansiCyan#5EC8B0
  • terminal.ansiGreen#3FA32B
  • terminal.ansiMagenta#D669D4
  • terminal.ansiRed#BE8781
  • terminal.ansiWhite#F5F3F0
  • terminal.ansiYellow#D27656
  • terminal.background#282825
  • terminal.border#382E30
  • terminal.foreground#D1DAE0
  • terminal.inactiveSelectionBackground#34414B70
  • terminal.selectionBackground#34414B70
  • textBlockQuote.background#252C27
  • textBlockQuote.border#382E30
  • textCodeBlock.background#252C27
  • textLink.activeForeground#7EA6CE
  • textLink.foreground#D27A88
  • textPreformat.background#252C27
  • textPreformat.foreground#D1DAE0
  • textSeparator.foreground#D1DAE0
  • titleBar.activeBackground#2E2829
  • titleBar.activeForeground#D1DAE0
  • titleBar.inactiveBackground#2E2829
  • titleBar.inactiveForeground#65654B
  • widget.border#382E30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D1DAE0
meta.diff, meta.diff.header#65654B
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E6CBD0
emphasisitalic
strongbold
invalid#D67676strikethrough
invalid.deprecated#D1DAE0underline italic
header#E6CBD0
source.ini, source.ignore, source#E2E3D4
markup.inserted#E6CBD0
markup.deleted#D67676
markup.changed#7EA6CE
markup.error#D67676
markup.underlineunderline
markup.bold#D2A67Abold
markup.heading#62A0D0bold
markup.italic#E2E3D4italic
markup.inline.raw, markup.raw.restructuredtext#62A0D0
markup.underline.link, markup.underline.link.image, markup.quote#7EA6CE
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D27A88
meta.separator.markdown#62A0D0
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E3E3C9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D2A67A
entity.name.class, entity.name.type.class, entity.other.inherited-class#D27A88
entity.name.tag, entity.other.attribute-name.parent-selector#C5E2CC
entity.other.attribute-name#D27A88
entity.name.function, meta.function-call, meta.method-call, meta.method#62A0D0
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E2CBCF
support#C1A2D3
entity.name, variable.other.key#62A0D0
entity.name.type#BFDEC6
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#BCDCD1
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#E3E4CD
entity.other.attribute-name.class.css#62A0D0
storage.class, storage.type#D27A88
storage.modifier#D7C6E1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#65654B
constant#E6CBD0
constant.other.color#B0C7D8
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#9DD2A9
constant.other.date, constant.other.timestamp#C9D8E3
keyword.operator#E3E9ED
keyword.other.unit#B7CCDC
keyword.control, keyword.other.template, keyword.other.substitution#DDDEBA
keyword.other.this#E6CBD0
keyword.control.import, keyword.control.from#C3CCAD
keyword.control.new, keyword.operator.new, keyword.other.important.css#D27A88
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#C2D7AD
meta.attribute-selector.scss#CCDAE5
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#C5E2CC
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#CAE3D7
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#D27A88
support.constant.property-value.css, constant.numeric.css#E2E3D4
keyword.control.at-rule.apply.tailwind#C3CCAD
keyword.control.at-rule.tailwind.tailwind#DDDEBA
keyword.control.at-rule.layer.tailwind#C2D7AD
meta.selector#CCDAE5
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#EBEDEF
punctuation.definition.constant.restructuredtext#E6CBD0
string.quoted.docstring.multi#62A0D0
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#EBEDEF
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#CAE3D7
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#F5F3F0
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#DDDFE4
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#EEEFF2
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#F0F2F4
punctuation.definition.directive.restructuredtext#E6CBD0
variable#C1DCC7
variable.other.alias.yaml#C1DCC7underline
variable.language, variable.parameter.function.language.special#9DD2A9
variable.other.constant#CDE4DB
support.variable#C1DCC7
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C8DFDB
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D2A67A
support.function, support.type.property-name#E3EAD7
storage#DCCCE5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D27656
punctuation.definition.group.capture.regexp#BE8781
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#BE8781
punctuation.definition.character-class.regexp#E7B3A1
punctuation.definition.group.regexp#8583FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#BE8781
meta.assertion.look-ahead.regexp#8583FF
source.json meta.structure.dictionary.json support.type.property-name.json#62A0D0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D27A88
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#7EA6CE
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#D2A67A
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#D67676
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#3FA23F
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#62A0D0
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#D27A88
token.info-token#7EA6CE
token.warn-token#D2A67A
token.error-token#D67676
token.debug-token#D2A67A
RLabs Themes Collection by RLabs Inc. - VS Code Theme