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#2A373270
  • activityBar.activeBorder#62D0A6
  • activityBar.background#323936
  • activityBar.foreground#DAE7E2
  • activityBar.inactiveForeground#5C746B
  • activityBarBadge.background#7AD2B0
  • activityBarBadge.foreground#2C2A2B
  • activityBarTop.foreground#DAE7E2
  • badge.background#7AD2B0
  • badge.foreground#2C2A2B
  • breadcrumb.activeForeground#DAE7E2
  • breadcrumb.activeSelectionForeground#DAE7E2
  • breadcrumb.background#323936
  • breadcrumb.focusForeground#DAE7E2
  • breadcrumb.foreground#5C746B
  • breadcrumbPicker.background#323936
  • button.background#7AD2B0db
  • button.foreground#2C2A2B
  • button.hoverBackground#7AD2B0
  • button.secondaryBackground#62D0A6db
  • button.secondaryForeground#2C2A2B
  • button.secondaryHoverBackground#62D0A6
  • checkbox.background#222524
  • checkbox.foreground#DAE7E2
  • debugToolBar.background#7EA6CE
  • debugToolBar.foreground#2C2A2B
  • descriptionForeground#C5D8D1
  • 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#5C746B
  • dropdown.background#3D3337
  • dropdown.border#38433E
  • dropdown.foreground#DAE7E2
  • editor.background#222524
  • editor.findMatchBackground#3F6E5C70
  • editor.findMatchForeground#DAE7E2
  • editor.findMatchHighlightBackground#2A373270
  • editor.findMatchHighlightForeground#DAE7E2
  • editor.findRangeHighlightBackground#3D574D70
  • editor.foldBackground#2A373270
  • editor.foldPlaceholderForeground#DAE7E2
  • editor.foreground#DAE7E2
  • editor.hoverHighlightBackground#2A373270
  • editor.inactiveSelectionBackground#3D574D70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#C5D8D1
  • editor.rangeHighlightBackground#2A373270
  • editor.selectionBackground#3D574D70
  • editor.selectionForeground#DAE7E2
  • editor.selectionHighlightBackground#3D574D70
  • editor.snippetFinalTabstopHighlightBackground#2A373270
  • editor.snippetTabstopHighlightBackground#2A373270
  • editor.symbolHighlightBackground#2A373270
  • editor.wordHighlightBackground#2A373270
  • editor.wordHighlightStrongBackground#2A373250
  • editor.wordHighlightTextBackground#2A373270
  • editorCodeLens.foreground#5C746B
  • editorCursor.background#2A373270
  • editorCursor.foreground#62D0A6
  • editorError.foreground#D67676
  • editorGroup.border#38433E
  • editorGroup.dropBackground#3D3337
  • editorGroup.emptyBackground#222524
  • editorGroupHeader.border#38433E
  • editorGroupHeader.tabsBackground#222524
  • editorGutter.addedBackground#3FA23F
  • editorGutter.background#222524
  • editorGutter.commentRangeForeground#5C746B
  • editorGutter.deletedBackground#D67676
  • editorGutter.modifiedBackground#7EA6CE
  • editorHint.foreground#3FA23F
  • editorHoverWidget.background#222524
  • editorHoverWidget.border#38433E
  • editorHoverWidget.foreground#DAE7E2
  • editorHoverWidget.highlightForeground#DAE7E2
  • editorHoverWidget.statusBarBackground#222524
  • editorIndentGuide.activeBackground1#62D0A6
  • editorIndentGuide.background1#2A373270
  • editorInfo.foreground#7EA6CE
  • editorLineNumber.activeForeground#62D0A6
  • editorLineNumber.dimmedForeground#5C746B90
  • editorLineNumber.foreground#5C746B
  • editorLink.activeForeground#7EA6CE
  • editorMarkerNavigation.background#323936
  • editorMarkerNavigationError.background#323936
  • editorMarkerNavigationWarning.background#323936
  • editorMultiCursor.primary.background#2A373270
  • editorMultiCursor.primary.foreground#62D0A6
  • editorMultiCursor.secondary.background#2A373270
  • editorMultiCursor.secondary.foreground#DAE7E2
  • editorOverviewRuler.addedForeground#3FA23F
  • editorOverviewRuler.border#38433E
  • editorOverviewRuler.commentForeground#5C746B
  • editorOverviewRuler.commonContentForeground#DAE7E2
  • editorOverviewRuler.currentContentForeground#7EA6CE
  • editorOverviewRuler.deletedForeground#D67676
  • editorOverviewRuler.errorForeground#D67676
  • editorOverviewRuler.findMatchForeground#DAE7E2
  • editorOverviewRuler.incomingContentForeground#3FA23F
  • editorOverviewRuler.infoForeground#7EA6CE
  • editorOverviewRuler.modifiedForeground#7EA6CE
  • editorOverviewRuler.rangeHighlightForeground#2A373270
  • editorOverviewRuler.selectionHighlightForeground#3D574D70
  • editorOverviewRuler.warningForeground#D2A67A
  • editorOverviewRuler.wordHighlightForeground#2A373270
  • editorOverviewRuler.wordHighlightStrongForeground#2A373270
  • editorRuler.foreground#2A373270
  • editorSuggestWidget.background#222524
  • editorSuggestWidget.border#38433E
  • editorSuggestWidget.focusHighlightForeground#DAE7E2
  • editorSuggestWidget.foreground#5C746B
  • editorSuggestWidget.highlightForeground#DAE7E2
  • editorSuggestWidget.selectedBackground#7AD2B080
  • editorSuggestWidget.selectedForeground#DAE7E2
  • editorUnicodeHighlight.background#2A373270
  • editorWarning.foreground#D2A67A
  • editorWhitespace.foreground#2A373270
  • editorWidget.background#222524
  • editorWidget.border#38433E
  • editorWidget.foreground#DAE7E2
  • errorForeground#D67676
  • extensionButton.prominentBackground#7AD2B0aa
  • extensionButton.prominentForeground#2C2A2B
  • extensionButton.prominentHoverBackground#7AD2B0
  • focusBorder#38433E
  • foreground#DAE7E2
  • gitDecoration.addedResourceForeground#3FA23F
  • gitDecoration.conflictingResourceForeground#D2A67A
  • gitDecoration.deletedResourceForeground#D67676
  • gitDecoration.ignoredResourceForeground#5C746B
  • gitDecoration.modifiedResourceForeground#7EA6CE
  • gitDecoration.renamedResourceForeground#62D0A6
  • gitDecoration.untrackedResourceForeground#C5D8D1
  • input.background#222524
  • input.border#5C746B
  • input.foreground#DAE7E2
  • input.placeholderForeground#5C746B
  • inputOption.activeBorder#62D0A6
  • inputValidation.errorBorder#D67676
  • inputValidation.infoBorder#7EA6CE
  • inputValidation.warningBorder#D2A67A
  • list.activeSelectionBackground#7AD2B070
  • list.activeSelectionForeground#DAE7E2
  • list.dropBackground#3D3337
  • list.dropBetweenBackground#38433E
  • list.errorForeground#D67676
  • list.focusBackground#7AD2B050
  • list.focusForeground#DAE7E2
  • list.highlightForeground#62D0A6
  • list.hoverBackground#7AD2B020
  • list.hoverForeground#DAE7E2
  • list.inactiveFocusBackground#323936
  • list.inactiveSelectionBackground#7AD2B060
  • list.inactiveSelectionForeground#C5D8D1
  • list.warningForeground#D2A67A
  • listFilterWidget.background#3D3337
  • listFilterWidget.noMatchesOutline#D67676
  • listFilterWidget.outline#38433E
  • merge.border#38433E
  • merge.currentContentBackground#7EA6CE20
  • merge.currentHeaderBackground#7EA6CE40
  • merge.incomingContentBackground#3FA23F20
  • merge.incomingHeaderBackground#3FA23F40
  • mergeEditor.change.background#D2A67A
  • notificationLink.foreground#7EA6CE
  • notifications.background#323936
  • notifications.border#38433E
  • notifications.foreground#DAE7E2
  • notificationsErrorIcon.foreground#D67676
  • notificationsInfoIcon.foreground#7EA6CE
  • notificationsWarningIcon.foreground#D2A67A
  • panel.background#323936
  • panel.border#62D0A6
  • panelInput.border#5C746B
  • panelTitle.activeBorder#62D0A6
  • panelTitle.activeForeground#DAE7E2
  • panelTitle.inactiveForeground#5C746B
  • peekView.border#7AD2B0
  • peekViewEditor.background#222524
  • peekViewEditor.matchHighlightBackground#3F6E5C70
  • peekViewResult.background#222524
  • peekViewResult.fileForeground#DAE7E2
  • peekViewResult.lineForeground#DAE7E2
  • peekViewResult.matchHighlightBackground#2A373270
  • peekViewResult.selectionBackground#323936
  • peekViewResult.selectionForeground#DAE7E2
  • peekViewTitle.background#222524
  • peekViewTitleDescription.foreground#C5D8D1
  • peekViewTitleLabel.foreground#DAE7E2
  • pickerGroup.border#7AD2B0
  • pickerGroup.foreground#EDABC4
  • progressBar.background#62D0A6
  • selection.background#7AD2B050
  • settings.checkboxBackground#222524
  • settings.checkboxBorder#38433E
  • settings.checkboxForeground#DAE7E2
  • settings.dropdownBackground#222524
  • settings.dropdownBorder#38433E
  • settings.dropdownForeground#DAE7E2
  • settings.focusedRowBackground#2A373270
  • settings.focusedRowBorder#5C746B
  • settings.headerBorder#38433E
  • settings.headerForeground#DAE7E2
  • settings.inactiveSelectedItemBorder#5C746B
  • settings.modifiedItemIndicator#D2A67A
  • settings.numberInputBackground#222524
  • settings.numberInputBorder#5C746B
  • settings.numberInputForeground#DAE7E2
  • settings.rowHoverBackground#2A373270
  • settings.settingsHeaderHoverForeground#DAE7E2
  • settings.textInputBackground#222524
  • settings.textInputBorder#5C746B
  • settings.textInputForeground#DAE7E2
  • sideBar.background#222524
  • sideBarActivityBarTop.border#38433E
  • sideBarSectionHeader.background#323936
  • sideBarSectionHeader.border#38433E
  • sideBarStickyScroll.background#222524
  • sideBarStickyScroll.border#38433E
  • sideBarStickyScroll.shadow#38433E
  • sideBarTitle.background#222524
  • sideBarTitle.foreground#DAE7E2
  • statusBar.background#7AD2B0
  • statusBar.debuggingBackground#D2A67A
  • statusBar.debuggingForeground#2C2A2B
  • statusBar.foreground#2C2A2B
  • statusBar.noFolderBackground#C5D8D1
  • statusBar.noFolderForeground#2C2A2B
  • statusBarItem.activeBackground#7AD2B0aa
  • statusBarItem.errorBackground#D67676
  • statusBarItem.errorForeground#2C2A2B
  • statusBarItem.errorHoverBackground#D67676aa
  • statusBarItem.hoverBackground#7AD2B0aa
  • statusBarItem.prominentBackground#7AD2B0aa
  • statusBarItem.prominentForeground#2C2A2B
  • statusBarItem.prominentHoverBackground#7AD2B0aa
  • statusBarItem.prominentHoverForeground#2C2A2B
  • statusBarItem.remoteBackground#62D0A6
  • statusBarItem.remoteForeground#2C2A2B
  • statusBarItem.remoteHoverBackground#62D0A6aa
  • statusBarItem.warningBackground#D2A67A
  • statusBarItem.warningForeground#2C2A2B
  • statusBarItem.warningHoverBackground#D2A67Aaa
  • tab.activeBackground#323936
  • tab.activeBorderTop#62D0A6
  • tab.activeForeground#DAE7E2
  • tab.border#38433E
  • tab.hoverBackground#32393680
  • tab.hoverForeground#DAE7E2
  • tab.inactiveBackground#222524
  • tab.inactiveForeground#5C746B
  • tab.selectedBackground#2A373270
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#A376F1
  • terminal.ansiBrightBlack#434343
  • terminal.ansiBrightBlue#BC9AF6
  • terminal.ansiBrightCyan#0CF0AD
  • terminal.ansiBrightGreen#33FF25
  • terminal.ansiBrightMagenta#F677F3
  • terminal.ansiBrightRed#F57A79
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#BBB219
  • terminal.ansiCyan#08A677
  • terminal.ansiGreen#09A800
  • terminal.ansiMagenta#F707F1
  • terminal.ansiRed#E96665
  • terminal.ansiWhite#F7F6F5
  • terminal.ansiYellow#958D11
  • terminal.background#222524
  • terminal.border#38433E
  • terminal.foreground#DAE7E2
  • terminal.inactiveSelectionBackground#3D574D70
  • terminal.selectionBackground#3D574D70
  • textBlockQuote.background#3D3337
  • textBlockQuote.border#38433E
  • textCodeBlock.background#3D3337
  • textLink.activeForeground#7EA6CE
  • textLink.foreground#7AD2B0
  • textPreformat.background#3D3337
  • textPreformat.foreground#DAE7E2
  • textSeparator.foreground#DAE7E2
  • titleBar.activeBackground#323936
  • titleBar.activeForeground#DAE7E2
  • titleBar.inactiveBackground#323936
  • titleBar.inactiveForeground#5C746B
  • widget.border#38433E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#DAE7E2
meta.diff, meta.diff.header#5C746B
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#CCF5E5
emphasisitalic
strongbold
invalid#D67676strikethrough
invalid.deprecated#DAE7E2underline italic
header#CCF5E5
source.ini, source.ignore, source#C5D8D1
markup.inserted#CCF5E5
markup.deleted#D67676
markup.changed#7EA6CE
markup.error#D67676
markup.underlineunderline
markup.bold#D2A67Abold
markup.heading#62D0A6bold
markup.italic#C5D8D1italic
markup.inline.raw, markup.raw.restructuredtext#62D0A6
markup.underline.link, markup.underline.link.image, markup.quote#7EA6CE
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7AD2B0
meta.separator.markdown#62D0A6
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#F2CAD9
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#7AD2B0
entity.name.tag, entity.other.attribute-name.parent-selector#F0BCD0
entity.other.attribute-name#7AD2B0
entity.name.function, meta.function-call, meta.method-call, meta.method#62D0A6
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#C5EDDD
support#90E9C7
entity.name, variable.other.key#62D0A6
entity.name.type#ECB1C8
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E49D9A
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EAB8CB
entity.other.attribute-name.class.css#62D0A6
storage.class, storage.type#7AD2B0
storage.modifier#EEBFD1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5C746B
constant#CCF5E5
constant.other.color#A3EBCF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#EFA9C4
constant.other.date, constant.other.timestamp#C1F0DE
keyword.operator#E2BBCA
keyword.other.unit#9FEACD
keyword.control, keyword.other.template, keyword.other.substitution#E57BA4
keyword.other.this#CCF5E5
keyword.control.import, keyword.control.from#DBA4AF
keyword.control.new, keyword.operator.new, keyword.other.important.css#7AD2B0
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E99B9C
meta.attribute-selector.scss#C1F0DE
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F0BCD0
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EFC3C7
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#7AD2B0
support.constant.property-value.css, constant.numeric.css#C5D8D1
keyword.control.at-rule.apply.tailwind#DBA4AF
keyword.control.at-rule.tailwind.tailwind#E57BA4
keyword.control.at-rule.layer.tailwind#E99B9C
meta.selector#C1F0DE
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D6E6E0
punctuation.definition.constant.restructuredtext#CCF5E5
string.quoted.docstring.multi#62D0A6
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#D6E6E0
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EFC3C7
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#F7F6F5
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#E6EFEF
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#E2EEED
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#D5E7E4
punctuation.definition.directive.restructuredtext#CCF5E5
variable#B9E9D7
variable.other.alias.yaml#B9E9D7underline
variable.language, variable.parameter.function.language.special#EFA9C4
variable.other.constant#B8EAE7
support.variable#B9E9D7
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#B3E5E2
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#F1CCCB
storage#EDB5CB
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#958D11
punctuation.definition.group.capture.regexp#E96665
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E96665
punctuation.definition.character-class.regexp#BBB219
punctuation.definition.group.regexp#BC9AF6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E96665
meta.assertion.look-ahead.regexp#BC9AF6
source.json meta.structure.dictionary.json support.type.property-name.json#62D0A6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7AD2B0
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#62D0A6
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#7AD2B0
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