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#1B1A0E70
  • activityBar.activeBorder#67CBC5
  • activityBar.background#080D08
  • activityBar.foreground#B7E5B3
  • activityBar.inactiveForeground#595E5E
  • activityBarBadge.background#7A80D2
  • activityBarBadge.foreground#19091B
  • activityBarTop.foreground#B7E5B3
  • badge.background#7A80D2
  • badge.foreground#19091B
  • breadcrumb.activeForeground#B7E5B3
  • breadcrumb.activeSelectionForeground#B7E5B3
  • breadcrumb.background#080D08
  • breadcrumb.focusForeground#B7E5B3
  • breadcrumb.foreground#595E5E
  • breadcrumbPicker.background#080D08
  • button.background#7A80D2db
  • button.foreground#19091B
  • button.hoverBackground#7A80D2
  • button.secondaryBackground#67CBC5db
  • button.secondaryForeground#19091B
  • button.secondaryHoverBackground#67CBC5
  • checkbox.background#070A05
  • checkbox.foreground#B7E5B3
  • debugToolBar.background#7AA6D1
  • debugToolBar.foreground#19091B
  • descriptionForeground#B3E4AF
  • diffEditor.diagonalFill#7AA6D1
  • diffEditor.insertedLineBackground#7AA6D140
  • diffEditor.insertedTextBackground#7AA6D150
  • diffEditor.insertedTextBorder#7AA6D1
  • diffEditor.removedLineBackground#D17A7A40
  • diffEditor.removedTextBackground#D17A7A50
  • diffEditor.removedTextBorder#D17A7A
  • diffEditorGutter.insertedLineBackground#7AA6D1
  • diffEditorGutter.removedLineBackground#D17A7A
  • disabledForeground#595E5E
  • dropdown.background#2A2918
  • dropdown.border#111431
  • dropdown.foreground#B7E5B3
  • editor.background#070A05
  • editor.findMatchBackground#2F482D70
  • editor.findMatchForeground#B7E5B3
  • editor.findMatchHighlightBackground#1B1A0E70
  • editor.findMatchHighlightForeground#B7E5B3
  • editor.findRangeHighlightBackground#1F213D70
  • editor.foldBackground#1B1A0E70
  • editor.foldPlaceholderForeground#B7E5B3
  • editor.foreground#B7E5B3
  • editor.hoverHighlightBackground#1B1A0E70
  • editor.inactiveSelectionBackground#1F213D70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#B3E4AF
  • editor.rangeHighlightBackground#1B1A0E70
  • editor.selectionBackground#1F213D70
  • editor.selectionForeground#B7E5B3
  • editor.selectionHighlightBackground#1F213D70
  • editor.snippetFinalTabstopHighlightBackground#1B1A0E70
  • editor.snippetTabstopHighlightBackground#1B1A0E70
  • editor.symbolHighlightBackground#1B1A0E70
  • editor.wordHighlightBackground#1B1A0E70
  • editor.wordHighlightStrongBackground#1B1A0E50
  • editor.wordHighlightTextBackground#1B1A0E70
  • editorCodeLens.foreground#595E5E
  • editorCursor.background#1B1A0E70
  • editorCursor.foreground#67CBC5
  • editorError.foreground#D17A7A
  • editorGroup.border#111431
  • editorGroup.dropBackground#2A2918
  • editorGroup.emptyBackground#070A05
  • editorGroupHeader.border#111431
  • editorGroupHeader.tabsBackground#070A05
  • editorGutter.addedBackground#39A739
  • editorGutter.background#070A05
  • editorGutter.commentRangeForeground#595E5E
  • editorGutter.deletedBackground#D17A7A
  • editorGutter.modifiedBackground#7AA6D1
  • editorHint.foreground#39A739
  • editorHoverWidget.background#070A05
  • editorHoverWidget.border#111431
  • editorHoverWidget.foreground#B7E5B3
  • editorHoverWidget.highlightForeground#B7E5B3
  • editorHoverWidget.statusBarBackground#070A05
  • editorIndentGuide.activeBackground1#67CBC5
  • editorIndentGuide.background1#1B1A0E70
  • editorInfo.foreground#7AA6D1
  • editorLineNumber.activeForeground#67CBC5
  • editorLineNumber.dimmedForeground#595E5E90
  • editorLineNumber.foreground#595E5E
  • editorLink.activeForeground#7AA6D1
  • editorMarkerNavigation.background#080D08
  • editorMarkerNavigationError.background#080D08
  • editorMarkerNavigationWarning.background#080D08
  • editorMultiCursor.primary.background#1B1A0E70
  • editorMultiCursor.primary.foreground#67CBC5
  • editorMultiCursor.secondary.background#1B1A0E70
  • editorMultiCursor.secondary.foreground#B7E5B3
  • editorOverviewRuler.addedForeground#39A739
  • editorOverviewRuler.border#111431
  • editorOverviewRuler.commentForeground#595E5E
  • editorOverviewRuler.commonContentForeground#B7E5B3
  • editorOverviewRuler.currentContentForeground#7AA6D1
  • editorOverviewRuler.deletedForeground#D17A7A
  • editorOverviewRuler.errorForeground#D17A7A
  • editorOverviewRuler.findMatchForeground#B7E5B3
  • editorOverviewRuler.incomingContentForeground#39A739
  • editorOverviewRuler.infoForeground#7AA6D1
  • editorOverviewRuler.modifiedForeground#7AA6D1
  • editorOverviewRuler.rangeHighlightForeground#1B1A0E70
  • editorOverviewRuler.selectionHighlightForeground#1F213D70
  • editorOverviewRuler.warningForeground#D1A67A
  • editorOverviewRuler.wordHighlightForeground#1B1A0E70
  • editorOverviewRuler.wordHighlightStrongForeground#1B1A0E70
  • editorRuler.foreground#1B1A0E70
  • editorSuggestWidget.background#070A05
  • editorSuggestWidget.border#111431
  • editorSuggestWidget.focusHighlightForeground#B7E5B3
  • editorSuggestWidget.foreground#595E5E
  • editorSuggestWidget.highlightForeground#B7E5B3
  • editorSuggestWidget.selectedBackground#7A80D280
  • editorSuggestWidget.selectedForeground#B7E5B3
  • editorUnicodeHighlight.background#1B1A0E70
  • editorWarning.foreground#D1A67A
  • editorWhitespace.foreground#1B1A0E70
  • editorWidget.background#070A05
  • editorWidget.border#111431
  • editorWidget.foreground#B7E5B3
  • errorForeground#D17A7A
  • extensionButton.prominentBackground#7A80D2aa
  • extensionButton.prominentForeground#19091B
  • extensionButton.prominentHoverBackground#7A80D2
  • focusBorder#111431
  • foreground#B7E5B3
  • gitDecoration.addedResourceForeground#39A739
  • gitDecoration.conflictingResourceForeground#D1A67A
  • gitDecoration.deletedResourceForeground#D17A7A
  • gitDecoration.ignoredResourceForeground#595E5E
  • gitDecoration.modifiedResourceForeground#7AA6D1
  • gitDecoration.renamedResourceForeground#67CBC5
  • gitDecoration.untrackedResourceForeground#B3E4AF
  • input.background#070A05
  • input.border#595E5E
  • input.foreground#B7E5B3
  • input.placeholderForeground#595E5E
  • inputOption.activeBorder#67CBC5
  • inputValidation.errorBorder#D17A7A
  • inputValidation.infoBorder#7AA6D1
  • inputValidation.warningBorder#D1A67A
  • list.activeSelectionBackground#7A80D270
  • list.activeSelectionForeground#B7E5B3
  • list.dropBackground#2A2918
  • list.dropBetweenBackground#111431
  • list.errorForeground#D17A7A
  • list.focusBackground#7A80D250
  • list.focusForeground#B7E5B3
  • list.highlightForeground#67CBC5
  • list.hoverBackground#7A80D220
  • list.hoverForeground#B7E5B3
  • list.inactiveFocusBackground#080D08
  • list.inactiveSelectionBackground#7A80D260
  • list.inactiveSelectionForeground#B3E4AF
  • list.warningForeground#D1A67A
  • listFilterWidget.background#2A2918
  • listFilterWidget.noMatchesOutline#D17A7A
  • listFilterWidget.outline#111431
  • merge.border#111431
  • merge.currentContentBackground#7AA6D120
  • merge.currentHeaderBackground#7AA6D140
  • merge.incomingContentBackground#39A73920
  • merge.incomingHeaderBackground#39A73940
  • mergeEditor.change.background#D1A67A
  • notificationLink.foreground#7AA6D1
  • notifications.background#080D08
  • notifications.border#111431
  • notifications.foreground#B7E5B3
  • notificationsErrorIcon.foreground#D17A7A
  • notificationsInfoIcon.foreground#7AA6D1
  • notificationsWarningIcon.foreground#D1A67A
  • panel.background#080D08
  • panel.border#67CBC5
  • panelInput.border#595E5E
  • panelTitle.activeBorder#67CBC5
  • panelTitle.activeForeground#B7E5B3
  • panelTitle.inactiveForeground#595E5E
  • peekView.border#7A80D2
  • peekViewEditor.background#070A05
  • peekViewEditor.matchHighlightBackground#2F482D70
  • peekViewResult.background#070A05
  • peekViewResult.fileForeground#B7E5B3
  • peekViewResult.lineForeground#B7E5B3
  • peekViewResult.matchHighlightBackground#1B1A0E70
  • peekViewResult.selectionBackground#080D08
  • peekViewResult.selectionForeground#B7E5B3
  • peekViewTitle.background#070A05
  • peekViewTitleDescription.foreground#B3E4AF
  • peekViewTitleLabel.foreground#B7E5B3
  • pickerGroup.border#7A80D2
  • pickerGroup.foreground#E4BCE6
  • progressBar.background#67CBC5
  • selection.background#7A80D250
  • settings.checkboxBackground#070A05
  • settings.checkboxBorder#111431
  • settings.checkboxForeground#B7E5B3
  • settings.dropdownBackground#070A05
  • settings.dropdownBorder#111431
  • settings.dropdownForeground#B7E5B3
  • settings.focusedRowBackground#1B1A0E70
  • settings.focusedRowBorder#595E5E
  • settings.headerBorder#111431
  • settings.headerForeground#B7E5B3
  • settings.inactiveSelectedItemBorder#595E5E
  • settings.modifiedItemIndicator#D1A67A
  • settings.numberInputBackground#070A05
  • settings.numberInputBorder#595E5E
  • settings.numberInputForeground#B7E5B3
  • settings.rowHoverBackground#1B1A0E70
  • settings.settingsHeaderHoverForeground#B7E5B3
  • settings.textInputBackground#070A05
  • settings.textInputBorder#595E5E
  • settings.textInputForeground#B7E5B3
  • sideBar.background#070A05
  • sideBarActivityBarTop.border#111431
  • sideBarSectionHeader.background#080D08
  • sideBarSectionHeader.border#111431
  • sideBarStickyScroll.background#070A05
  • sideBarStickyScroll.border#111431
  • sideBarStickyScroll.shadow#111431
  • sideBarTitle.background#070A05
  • sideBarTitle.foreground#B7E5B3
  • statusBar.background#7A80D2
  • statusBar.debuggingBackground#D1A67A
  • statusBar.debuggingForeground#19091B
  • statusBar.foreground#19091B
  • statusBar.noFolderBackground#B3E4AF
  • statusBar.noFolderForeground#19091B
  • statusBarItem.activeBackground#7A80D2aa
  • statusBarItem.errorBackground#D17A7A
  • statusBarItem.errorForeground#19091B
  • statusBarItem.errorHoverBackground#D17A7Aaa
  • statusBarItem.hoverBackground#7A80D2aa
  • statusBarItem.prominentBackground#7A80D2aa
  • statusBarItem.prominentForeground#19091B
  • statusBarItem.prominentHoverBackground#7A80D2aa
  • statusBarItem.prominentHoverForeground#19091B
  • statusBarItem.remoteBackground#67CBC5
  • statusBarItem.remoteForeground#19091B
  • statusBarItem.remoteHoverBackground#67CBC5aa
  • statusBarItem.warningBackground#D1A67A
  • statusBarItem.warningForeground#19091B
  • statusBarItem.warningHoverBackground#D1A67Aaa
  • tab.activeBackground#080D08
  • tab.activeBorderTop#67CBC5
  • tab.activeForeground#B7E5B3
  • tab.border#111431
  • tab.hoverBackground#080D0880
  • tab.hoverForeground#B7E5B3
  • tab.inactiveBackground#070A05
  • tab.inactiveForeground#595E5E
  • tab.selectedBackground#1B1A0E70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6E66FF
  • terminal.ansiBrightBlack#454545
  • terminal.ansiBrightBlue#736DE3
  • terminal.ansiBrightCyan#4AC3C3
  • terminal.ansiBrightGreen#70C277
  • terminal.ansiBrightMagenta#D64397
  • terminal.ansiBrightRed#D28191
  • terminal.ansiBrightWhite#FAFAF9
  • terminal.ansiBrightYellow#BD6048
  • terminal.ansiCyan#2B8C8C
  • terminal.ansiGreen#508454
  • terminal.ansiMagenta#F4018C
  • terminal.ansiRed#A96E79
  • terminal.ansiWhite#F9F8F6
  • terminal.ansiYellow#A06E62
  • terminal.background#070A05
  • terminal.border#111431
  • terminal.foreground#B7E5B3
  • terminal.inactiveSelectionBackground#1F213D70
  • terminal.selectionBackground#1F213D70
  • textBlockQuote.background#2A2918
  • textBlockQuote.border#111431
  • textCodeBlock.background#2A2918
  • textLink.activeForeground#7AA6D1
  • textLink.foreground#7A80D2
  • textPreformat.background#2A2918
  • textPreformat.foreground#B7E5B3
  • textSeparator.foreground#B7E5B3
  • titleBar.activeBackground#080D08
  • titleBar.activeForeground#B7E5B3
  • titleBar.inactiveBackground#080D08
  • titleBar.inactiveForeground#595E5E
  • widget.border#111431

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#B7E5B3
meta.diff, meta.diff.header#595E5E
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#C2E8BF
emphasisitalic
strongbold
invalid#D17A7Astrikethrough
invalid.deprecated#B7E5B3underline italic
header#C2E8BF
source.ini, source.ignore, source#B3E4AF
markup.inserted#C2E8BF
markup.deleted#D17A7A
markup.changed#7AA6D1
markup.error#D17A7A
markup.underlineunderline
markup.bold#D1A67Abold
markup.heading#67CBC5bold
markup.italic#B3E4AFitalic
markup.inline.raw, markup.raw.restructuredtext#67CBC5
markup.underline.link, markup.underline.link.image, markup.quote#7AA6D1
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7A80D2
meta.separator.markdown#67CBC5
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E8E6BF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D1A67A
entity.name.class, entity.name.type.class, entity.other.inherited-class#7A80D2
entity.name.tag, entity.other.attribute-name.parent-selector#E7C8EA
entity.other.attribute-name#7A80D2
entity.name.function, meta.function-call, meta.method-call, meta.method#67CBC5
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#C6E9C4
support#AADEA6
entity.name, variable.other.key#67CBC5
entity.name.type#B5E3DF
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#A2CDDD
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#C0C2E8
entity.other.attribute-name.class.css#67CBC5
storage.class, storage.type#7A80D2
storage.modifier#E6BCBF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#595E5E
constant#C2E8BF
constant.other.color#B0E2DF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#D193D7
constant.other.date, constant.other.timestamp#EAC7C8
keyword.operator#D0EDCF
keyword.other.unit#E3B5B7
keyword.control, keyword.other.template, keyword.other.substitution#E2E0B0
keyword.other.this#C2E8BF
keyword.control.import, keyword.control.from#D6DB9E
keyword.control.new, keyword.operator.new, keyword.other.important.css#7A80D2
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#CCDDA2
meta.attribute-selector.scss#C6E9C3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#E7C8EA
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E3B5D9
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#7A80D2
support.constant.property-value.css, constant.numeric.css#B3E4AF
keyword.control.at-rule.apply.tailwind#D6DB9E
keyword.control.at-rule.tailwind.tailwind#E2E0B0
keyword.control.at-rule.layer.tailwind#CCDDA2
meta.selector#C6E9C3
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E4CAE7
punctuation.definition.constant.restructuredtext#C2E8BF
string.quoted.docstring.multi#67CBC5
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#E4CAE7
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E3B5D9
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#F9F8F6
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#FAF5F9
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#ECD5E8
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#FFFFFF
punctuation.definition.directive.restructuredtext#C2E8BF
variable#E3B5B9
variable.other.alias.yaml#E3B5B9underline
variable.language, variable.parameter.function.language.special#D193D7
variable.other.constant#E8CDC0
support.variable#E3B5B9
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E9D3C4
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D1A67A
support.function, support.type.property-name#E5ECCB
storage#EAC7CA
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A06E62
punctuation.definition.group.capture.regexp#A96E79
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#A96E79
punctuation.definition.character-class.regexp#BD6048
punctuation.definition.group.regexp#736DE3
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#A96E79
meta.assertion.look-ahead.regexp#736DE3
source.json meta.structure.dictionary.json support.type.property-name.json#67CBC5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7A80D2
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#7AA6D1
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#D1A67A
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#D17A7A
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#39A739
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#67CBC5
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#7A80D2
token.info-token#7AA6D1
token.warn-token#D1A67A
token.error-token#D17A7A
token.debug-token#D1A67A
RLabs Themes Collection by RLabs Inc. - VS Code Theme