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#0A1D2470
  • activityBar.activeBorder#74A9BE
  • activityBar.background#070E0C
  • activityBar.foreground#F8FBFC
  • activityBar.inactiveForeground#4C675F
  • activityBarBadge.background#C9A283
  • activityBarBadge.foreground#22160C
  • activityBarTop.foreground#F8FBFC
  • badge.background#C9A283
  • badge.foreground#22160C
  • breadcrumb.activeForeground#F8FBFC
  • breadcrumb.activeSelectionForeground#F8FBFC
  • breadcrumb.background#070E0C
  • breadcrumb.focusForeground#F8FBFC
  • breadcrumb.foreground#4C675F
  • breadcrumbPicker.background#070E0C
  • button.background#C9A283db
  • button.foreground#22160C
  • button.hoverBackground#C9A283
  • button.secondaryBackground#74A9BEdb
  • button.secondaryForeground#22160C
  • button.secondaryHoverBackground#74A9BE
  • checkbox.background#19110B
  • checkbox.foreground#F8FBFC
  • debugToolBar.background#84A6C8
  • debugToolBar.foreground#22160C
  • descriptionForeground#F2E7DE
  • diffEditor.diagonalFill#84A6C8
  • diffEditor.insertedLineBackground#84A6C840
  • diffEditor.insertedTextBackground#84A6C850
  • diffEditor.insertedTextBorder#84A6C8
  • diffEditor.removedLineBackground#E16B6B40
  • diffEditor.removedTextBackground#E16B6B50
  • diffEditor.removedTextBorder#E16B6B
  • diffEditorGutter.insertedLineBackground#84A6C8
  • diffEditorGutter.removedLineBackground#E16B6B
  • disabledForeground#4C675F
  • dropdown.background#193038
  • dropdown.border#172A31
  • dropdown.foreground#F8FBFC
  • editor.background#19110B
  • editor.findMatchBackground#23584970
  • editor.findMatchForeground#F8FBFC
  • editor.findMatchHighlightBackground#0A1D2470
  • editor.findMatchHighlightForeground#F8FBFC
  • editor.findRangeHighlightBackground#4B2E1670
  • editor.foldBackground#0A1D2470
  • editor.foldPlaceholderForeground#F8FBFC
  • editor.foreground#F8FBFC
  • editor.hoverHighlightBackground#0A1D2470
  • editor.inactiveSelectionBackground#4B2E1670
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#F2E7DE
  • editor.rangeHighlightBackground#0A1D2470
  • editor.selectionBackground#4B2E1670
  • editor.selectionForeground#F8FBFC
  • editor.selectionHighlightBackground#4B2E1670
  • editor.snippetFinalTabstopHighlightBackground#0A1D2470
  • editor.snippetTabstopHighlightBackground#0A1D2470
  • editor.symbolHighlightBackground#0A1D2470
  • editor.wordHighlightBackground#0A1D2470
  • editor.wordHighlightStrongBackground#0A1D2450
  • editor.wordHighlightTextBackground#0A1D2470
  • editorCodeLens.foreground#4C675F
  • editorCursor.background#0A1D2470
  • editorCursor.foreground#74A9BE
  • editorError.foreground#E16B6B
  • editorGroup.border#172A31
  • editorGroup.dropBackground#193038
  • editorGroup.emptyBackground#19110B
  • editorGroupHeader.border#172A31
  • editorGroupHeader.tabsBackground#19110B
  • editorGutter.addedBackground#31A631
  • editorGutter.background#19110B
  • editorGutter.commentRangeForeground#4C675F
  • editorGutter.deletedBackground#E16B6B
  • editorGutter.modifiedBackground#84A6C8
  • editorHint.foreground#31A631
  • editorHoverWidget.background#19110B
  • editorHoverWidget.border#172A31
  • editorHoverWidget.foreground#F8FBFC
  • editorHoverWidget.highlightForeground#F8FBFC
  • editorHoverWidget.statusBarBackground#19110B
  • editorIndentGuide.activeBackground1#74A9BE
  • editorIndentGuide.background1#0A1D2470
  • editorInfo.foreground#84A6C8
  • editorLineNumber.activeForeground#74A9BE
  • editorLineNumber.dimmedForeground#4C675F90
  • editorLineNumber.foreground#4C675F
  • editorLink.activeForeground#84A6C8
  • editorMarkerNavigation.background#070E0C
  • editorMarkerNavigationError.background#070E0C
  • editorMarkerNavigationWarning.background#070E0C
  • editorMultiCursor.primary.background#0A1D2470
  • editorMultiCursor.primary.foreground#74A9BE
  • editorMultiCursor.secondary.background#0A1D2470
  • editorMultiCursor.secondary.foreground#F8FBFC
  • editorOverviewRuler.addedForeground#31A631
  • editorOverviewRuler.border#172A31
  • editorOverviewRuler.commentForeground#4C675F
  • editorOverviewRuler.commonContentForeground#F8FBFC
  • editorOverviewRuler.currentContentForeground#84A6C8
  • editorOverviewRuler.deletedForeground#E16B6B
  • editorOverviewRuler.errorForeground#E16B6B
  • editorOverviewRuler.findMatchForeground#F8FBFC
  • editorOverviewRuler.incomingContentForeground#31A631
  • editorOverviewRuler.infoForeground#84A6C8
  • editorOverviewRuler.modifiedForeground#84A6C8
  • editorOverviewRuler.rangeHighlightForeground#0A1D2470
  • editorOverviewRuler.selectionHighlightForeground#4B2E1670
  • editorOverviewRuler.warningForeground#C9A682
  • editorOverviewRuler.wordHighlightForeground#0A1D2470
  • editorOverviewRuler.wordHighlightStrongForeground#0A1D2470
  • editorRuler.foreground#0A1D2470
  • editorSuggestWidget.background#19110B
  • editorSuggestWidget.border#172A31
  • editorSuggestWidget.focusHighlightForeground#F8FBFC
  • editorSuggestWidget.foreground#4C675F
  • editorSuggestWidget.highlightForeground#F8FBFC
  • editorSuggestWidget.selectedBackground#C9A28380
  • editorSuggestWidget.selectedForeground#F8FBFC
  • editorUnicodeHighlight.background#0A1D2470
  • editorWarning.foreground#C9A682
  • editorWhitespace.foreground#0A1D2470
  • editorWidget.background#19110B
  • editorWidget.border#172A31
  • editorWidget.foreground#F8FBFC
  • errorForeground#E16B6B
  • extensionButton.prominentBackground#C9A283aa
  • extensionButton.prominentForeground#22160C
  • extensionButton.prominentHoverBackground#C9A283
  • focusBorder#172A31
  • foreground#F8FBFC
  • gitDecoration.addedResourceForeground#31A631
  • gitDecoration.conflictingResourceForeground#C9A682
  • gitDecoration.deletedResourceForeground#E16B6B
  • gitDecoration.ignoredResourceForeground#4C675F
  • gitDecoration.modifiedResourceForeground#84A6C8
  • gitDecoration.renamedResourceForeground#74A9BE
  • gitDecoration.untrackedResourceForeground#F2E7DE
  • input.background#19110B
  • input.border#4C675F
  • input.foreground#F8FBFC
  • input.placeholderForeground#4C675F
  • inputOption.activeBorder#74A9BE
  • inputValidation.errorBorder#E16B6B
  • inputValidation.infoBorder#84A6C8
  • inputValidation.warningBorder#C9A682
  • list.activeSelectionBackground#C9A28370
  • list.activeSelectionForeground#F8FBFC
  • list.dropBackground#193038
  • list.dropBetweenBackground#172A31
  • list.errorForeground#E16B6B
  • list.focusBackground#C9A28350
  • list.focusForeground#F8FBFC
  • list.highlightForeground#74A9BE
  • list.hoverBackground#C9A28320
  • list.hoverForeground#F8FBFC
  • list.inactiveFocusBackground#070E0C
  • list.inactiveSelectionBackground#C9A28360
  • list.inactiveSelectionForeground#F2E7DE
  • list.warningForeground#C9A682
  • listFilterWidget.background#193038
  • listFilterWidget.noMatchesOutline#E16B6B
  • listFilterWidget.outline#172A31
  • merge.border#172A31
  • merge.currentContentBackground#84A6C820
  • merge.currentHeaderBackground#84A6C840
  • merge.incomingContentBackground#31A63120
  • merge.incomingHeaderBackground#31A63140
  • mergeEditor.change.background#C9A682
  • notificationLink.foreground#84A6C8
  • notifications.background#070E0C
  • notifications.border#172A31
  • notifications.foreground#F8FBFC
  • notificationsErrorIcon.foreground#E16B6B
  • notificationsInfoIcon.foreground#84A6C8
  • notificationsWarningIcon.foreground#C9A682
  • panel.background#070E0C
  • panel.border#74A9BE
  • panelInput.border#4C675F
  • panelTitle.activeBorder#74A9BE
  • panelTitle.activeForeground#F8FBFC
  • panelTitle.inactiveForeground#4C675F
  • peekView.border#C9A283
  • peekViewEditor.background#19110B
  • peekViewEditor.matchHighlightBackground#23584970
  • peekViewResult.background#19110B
  • peekViewResult.fileForeground#F8FBFC
  • peekViewResult.lineForeground#F8FBFC
  • peekViewResult.matchHighlightBackground#0A1D2470
  • peekViewResult.selectionBackground#070E0C
  • peekViewResult.selectionForeground#F8FBFC
  • peekViewTitle.background#19110B
  • peekViewTitleDescription.foreground#F2E7DE
  • peekViewTitleLabel.foreground#F8FBFC
  • pickerGroup.border#C9A283
  • pickerGroup.foreground#B6E2D6
  • progressBar.background#74A9BE
  • selection.background#C9A28350
  • settings.checkboxBackground#19110B
  • settings.checkboxBorder#172A31
  • settings.checkboxForeground#F8FBFC
  • settings.dropdownBackground#19110B
  • settings.dropdownBorder#172A31
  • settings.dropdownForeground#F8FBFC
  • settings.focusedRowBackground#0A1D2470
  • settings.focusedRowBorder#4C675F
  • settings.headerBorder#172A31
  • settings.headerForeground#F8FBFC
  • settings.inactiveSelectedItemBorder#4C675F
  • settings.modifiedItemIndicator#C9A682
  • settings.numberInputBackground#19110B
  • settings.numberInputBorder#4C675F
  • settings.numberInputForeground#F8FBFC
  • settings.rowHoverBackground#0A1D2470
  • settings.settingsHeaderHoverForeground#F8FBFC
  • settings.textInputBackground#19110B
  • settings.textInputBorder#4C675F
  • settings.textInputForeground#F8FBFC
  • sideBar.background#19110B
  • sideBarActivityBarTop.border#172A31
  • sideBarSectionHeader.background#070E0C
  • sideBarSectionHeader.border#172A31
  • sideBarStickyScroll.background#19110B
  • sideBarStickyScroll.border#172A31
  • sideBarStickyScroll.shadow#172A31
  • sideBarTitle.background#19110B
  • sideBarTitle.foreground#F8FBFC
  • statusBar.background#C9A283
  • statusBar.debuggingBackground#C9A682
  • statusBar.debuggingForeground#22160C
  • statusBar.foreground#22160C
  • statusBar.noFolderBackground#F2E7DE
  • statusBar.noFolderForeground#22160C
  • statusBarItem.activeBackground#C9A283aa
  • statusBarItem.errorBackground#E16B6B
  • statusBarItem.errorForeground#22160C
  • statusBarItem.errorHoverBackground#E16B6Baa
  • statusBarItem.hoverBackground#C9A283aa
  • statusBarItem.prominentBackground#C9A283aa
  • statusBarItem.prominentForeground#22160C
  • statusBarItem.prominentHoverBackground#C9A283aa
  • statusBarItem.prominentHoverForeground#22160C
  • statusBarItem.remoteBackground#74A9BE
  • statusBarItem.remoteForeground#22160C
  • statusBarItem.remoteHoverBackground#74A9BEaa
  • statusBarItem.warningBackground#C9A682
  • statusBarItem.warningForeground#22160C
  • statusBarItem.warningHoverBackground#C9A682aa
  • tab.activeBackground#070E0C
  • tab.activeBorderTop#74A9BE
  • tab.activeForeground#F8FBFC
  • tab.border#172A31
  • tab.hoverBackground#070E0C80
  • tab.hoverForeground#F8FBFC
  • tab.inactiveBackground#19110B
  • tab.inactiveForeground#4C675F
  • tab.selectedBackground#0A1D2470
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5973EC
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#95A6FA
  • terminal.ansiBrightCyan#069FCB
  • terminal.ansiBrightGreen#6BFF81
  • terminal.ansiBrightMagenta#FF5EF2
  • terminal.ansiBrightRed#ED678F
  • terminal.ansiBrightWhite#FAF9F8
  • terminal.ansiBrightYellow#F9FF76
  • terminal.ansiCyan#008AB3
  • terminal.ansiGreen#1ABA32
  • terminal.ansiMagenta#E20BD0
  • terminal.ansiRed#E8356A
  • terminal.ansiWhite#FAFAF9
  • terminal.ansiYellow#A1A718
  • terminal.background#19110B
  • terminal.border#172A31
  • terminal.foreground#F8FBFC
  • terminal.inactiveSelectionBackground#4B2E1670
  • terminal.selectionBackground#4B2E1670
  • textBlockQuote.background#193038
  • textBlockQuote.border#172A31
  • textCodeBlock.background#193038
  • textLink.activeForeground#84A6C8
  • textLink.foreground#C9A283
  • textPreformat.background#193038
  • textPreformat.foreground#F8FBFC
  • textSeparator.foreground#F8FBFC
  • titleBar.activeBackground#070E0C
  • titleBar.activeForeground#F8FBFC
  • titleBar.inactiveBackground#070E0C
  • titleBar.inactiveForeground#4C675F
  • widget.border#172A31

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F8FBFC
meta.diff, meta.diff.header#4C675F
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#C7E5F0
emphasisitalic
strongbold
invalid#E16B6Bstrikethrough
invalid.deprecated#F8FBFCunderline italic
header#C7E5F0
source.ini, source.ignore, source#F2E7DE
markup.inserted#C7E5F0
markup.deleted#E16B6B
markup.changed#84A6C8
markup.error#E16B6B
markup.underlineunderline
markup.bold#C9A682bold
markup.heading#74A9BEbold
markup.italic#F2E7DEitalic
markup.inline.raw, markup.raw.restructuredtext#74A9BE
markup.underline.link, markup.underline.link.image, markup.quote#84A6C8
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#C9A283
meta.separator.markdown#74A9BE
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ECDCD0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C9A682
entity.name.class, entity.name.type.class, entity.other.inherited-class#C9A283
entity.name.tag, entity.other.attribute-name.parent-selector#C7DDE6
entity.other.attribute-name#C9A283
entity.name.function, meta.function-call, meta.method-call, meta.method#74A9BE
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#CADFE7
support#E6BE9E
entity.name, variable.other.key#74A9BE
entity.name.type#EAD4C2
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E3DBB0
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#ECDFD5
entity.other.attribute-name.class.css#74A9BE
storage.class, storage.type#C9A283
storage.modifier#B9E4D8
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4C675F
constant#C7E5F0
constant.other.color#9DE2CF
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E6C4A8
constant.other.date, constant.other.timestamp#B8E5D9
keyword.operator#D9F2EB
keyword.other.unit#E6C1A2
keyword.control, keyword.other.template, keyword.other.substitution#84C7E1
keyword.other.this#C7E5F0
keyword.control.import, keyword.control.from#9CB7D8
keyword.control.new, keyword.operator.new, keyword.other.important.css#C9A283
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#B4C1DF
meta.attribute-selector.scss#BBDFEC
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#C7DDE6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#CBD6E1
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#C9A283
support.constant.property-value.css, constant.numeric.css#F2E7DE
keyword.control.at-rule.apply.tailwind#9CB7D8
keyword.control.at-rule.tailwind.tailwind#84C7E1
keyword.control.at-rule.layer.tailwind#B4C1DF
meta.selector#BBDFEC
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#BEE1EF
punctuation.definition.constant.restructuredtext#C7E5F0
string.quoted.docstring.multi#74A9BE
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#BEE1EF
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#CBD6E1
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#FAFAF9
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#C7DDEF
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#FBFCFE
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#F8FAFC
punctuation.definition.directive.restructuredtext#C7E5F0
variable#C2DCE5
variable.other.alias.yaml#C2DCE5underline
variable.language, variable.parameter.function.language.special#E6C4A8
variable.other.constant#D3E0F2
support.variable#C2DCE5
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C1C6EC
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C9A682
support.function, support.type.property-name#ECE8CB
storage#BBE7DB
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A1A718
punctuation.definition.group.capture.regexp#E8356A
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E8356A
punctuation.definition.character-class.regexp#F9FF76
punctuation.definition.group.regexp#95A6FA
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E8356A
meta.assertion.look-ahead.regexp#95A6FA
source.json meta.structure.dictionary.json support.type.property-name.json#74A9BE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C9A283
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#84A6C8
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#C9A682
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#E16B6B
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#31A631
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#74A9BE
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#C9A283
token.info-token#84A6C8
token.warn-token#C9A682
token.error-token#E16B6B
token.debug-token#C9A682
RLabs Themes Collection by RLabs Inc. - VS Code Theme