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#1B181870
  • activityBar.activeBorder#C86A70
  • activityBar.background#100F0F
  • activityBar.foreground#F5F5F5
  • activityBar.inactiveForeground#666285
  • activityBarBadge.background#88CB80
  • activityBarBadge.foreground#0D0D0D
  • activityBarTop.foreground#F5F5F5
  • badge.background#88CB80
  • badge.foreground#0D0D0D
  • breadcrumb.activeForeground#F5F5F5
  • breadcrumb.activeSelectionForeground#F5F5F5
  • breadcrumb.background#100F0F
  • breadcrumb.focusForeground#F5F5F5
  • breadcrumb.foreground#666285
  • breadcrumbPicker.background#100F0F
  • button.background#88CB80db
  • button.foreground#0D0D0D
  • button.hoverBackground#88CB80
  • button.secondaryBackground#C86A70db
  • button.secondaryForeground#F5F5F5
  • button.secondaryHoverBackground#C86A70
  • checkbox.background#131111
  • checkbox.foreground#F5F5F5
  • debugToolBar.background#9FA6AD
  • debugToolBar.foreground#0D0D0D
  • descriptionForeground#E7E7E9
  • diffEditor.diagonalFill#9FA6AD
  • diffEditor.insertedLineBackground#9FA6AD40
  • diffEditor.insertedTextBackground#9FA6AD50
  • diffEditor.insertedTextBorder#9FA6AD
  • diffEditor.removedLineBackground#CF7D7D40
  • diffEditor.removedTextBackground#CF7D7D50
  • diffEditor.removedTextBorder#CF7D7D
  • diffEditorGutter.insertedLineBackground#9FA6AD
  • diffEditorGutter.removedLineBackground#CF7D7D
  • disabledForeground#666285
  • dropdown.background#0D0D0C
  • dropdown.border#242924
  • dropdown.foreground#F5F5F5
  • editor.background#131111
  • editor.findMatchBackground#3A394670
  • editor.findMatchForeground#F5F5F5
  • editor.findMatchHighlightBackground#1B181870
  • editor.findMatchHighlightForeground#F5F5F5
  • editor.findRangeHighlightBackground#36303070
  • editor.foldBackground#1B181870
  • editor.foldPlaceholderForeground#F5F5F5
  • editor.foreground#F5F5F5
  • editor.hoverHighlightBackground#1B181870
  • editor.inactiveSelectionBackground#36303070
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E7E7E9
  • editor.rangeHighlightBackground#1B181870
  • editor.selectionBackground#36303070
  • editor.selectionForeground#F5F5F5
  • editor.selectionHighlightBackground#36303070
  • editor.snippetFinalTabstopHighlightBackground#1B181870
  • editor.snippetTabstopHighlightBackground#1B181870
  • editor.symbolHighlightBackground#1B181870
  • editor.wordHighlightBackground#1B181870
  • editor.wordHighlightStrongBackground#1B181850
  • editor.wordHighlightTextBackground#1B181870
  • editorCodeLens.foreground#666285
  • editorCursor.background#1B181870
  • editorCursor.foreground#C86A70
  • editorError.foreground#CF7D7D
  • editorGroup.border#242924
  • editorGroup.dropBackground#0D0D0C
  • editorGroup.emptyBackground#131111
  • editorGroupHeader.border#242924
  • editorGroupHeader.tabsBackground#131111
  • editorGutter.addedBackground#4E9F4E
  • editorGutter.background#131111
  • editorGutter.commentRangeForeground#666285
  • editorGutter.deletedBackground#CF7D7D
  • editorGutter.modifiedBackground#9FA6AD
  • editorHint.foreground#4E9F4E
  • editorHoverWidget.background#131111
  • editorHoverWidget.border#242924
  • editorHoverWidget.foreground#F5F5F5
  • editorHoverWidget.highlightForeground#F5F5F5
  • editorHoverWidget.statusBarBackground#131111
  • editorIndentGuide.activeBackground1#C86A70
  • editorIndentGuide.background1#1B181870
  • editorInfo.foreground#9FA6AD
  • editorLineNumber.activeForeground#C86A70
  • editorLineNumber.dimmedForeground#66628590
  • editorLineNumber.foreground#666285
  • editorLink.activeForeground#9FA6AD
  • editorMarkerNavigation.background#100F0F
  • editorMarkerNavigationError.background#100F0F
  • editorMarkerNavigationWarning.background#100F0F
  • editorMultiCursor.primary.background#1B181870
  • editorMultiCursor.primary.foreground#C86A70
  • editorMultiCursor.secondary.background#1B181870
  • editorMultiCursor.secondary.foreground#F5F5F5
  • editorOverviewRuler.addedForeground#4E9F4E
  • editorOverviewRuler.border#242924
  • editorOverviewRuler.commentForeground#666285
  • editorOverviewRuler.commonContentForeground#F5F5F5
  • editorOverviewRuler.currentContentForeground#9FA6AD
  • editorOverviewRuler.deletedForeground#CF7D7D
  • editorOverviewRuler.errorForeground#CF7D7D
  • editorOverviewRuler.findMatchForeground#F5F5F5
  • editorOverviewRuler.incomingContentForeground#4E9F4E
  • editorOverviewRuler.infoForeground#9FA6AD
  • editorOverviewRuler.modifiedForeground#9FA6AD
  • editorOverviewRuler.rangeHighlightForeground#1B181870
  • editorOverviewRuler.selectionHighlightForeground#36303070
  • editorOverviewRuler.warningForeground#CBA780
  • editorOverviewRuler.wordHighlightForeground#1B181870
  • editorOverviewRuler.wordHighlightStrongForeground#1B181870
  • editorRuler.foreground#1B181870
  • editorSuggestWidget.background#131111
  • editorSuggestWidget.border#242924
  • editorSuggestWidget.focusHighlightForeground#F5F5F5
  • editorSuggestWidget.foreground#666285
  • editorSuggestWidget.highlightForeground#F5F5F5
  • editorSuggestWidget.selectedBackground#88CB8080
  • editorSuggestWidget.selectedForeground#F5F5F5
  • editorUnicodeHighlight.background#1B181870
  • editorWarning.foreground#CBA780
  • editorWhitespace.foreground#1B181870
  • editorWidget.background#131111
  • editorWidget.border#242924
  • editorWidget.foreground#F5F5F5
  • errorForeground#CF7D7D
  • extensionButton.prominentBackground#88CB80aa
  • extensionButton.prominentForeground#0D0D0D
  • extensionButton.prominentHoverBackground#88CB80
  • focusBorder#242924
  • foreground#F5F5F5
  • gitDecoration.addedResourceForeground#4E9F4E
  • gitDecoration.conflictingResourceForeground#CBA780
  • gitDecoration.deletedResourceForeground#CF7D7D
  • gitDecoration.ignoredResourceForeground#666285
  • gitDecoration.modifiedResourceForeground#9FA6AD
  • gitDecoration.renamedResourceForeground#C86A70
  • gitDecoration.untrackedResourceForeground#E7E7E9
  • input.background#131111
  • input.border#666285
  • input.foreground#F5F5F5
  • input.placeholderForeground#666285
  • inputOption.activeBorder#C86A70
  • inputValidation.errorBorder#CF7D7D
  • inputValidation.infoBorder#9FA6AD
  • inputValidation.warningBorder#CBA780
  • list.activeSelectionBackground#88CB8070
  • list.activeSelectionForeground#F5F5F5
  • list.dropBackground#0D0D0C
  • list.dropBetweenBackground#242924
  • list.errorForeground#CF7D7D
  • list.focusBackground#88CB8050
  • list.focusForeground#F5F5F5
  • list.highlightForeground#C86A70
  • list.hoverBackground#88CB8020
  • list.hoverForeground#F5F5F5
  • list.inactiveFocusBackground#100F0F
  • list.inactiveSelectionBackground#88CB8060
  • list.inactiveSelectionForeground#E7E7E9
  • list.warningForeground#CBA780
  • listFilterWidget.background#0D0D0C
  • listFilterWidget.noMatchesOutline#CF7D7D
  • listFilterWidget.outline#242924
  • merge.border#242924
  • merge.currentContentBackground#9FA6AD20
  • merge.currentHeaderBackground#9FA6AD40
  • merge.incomingContentBackground#4E9F4E20
  • merge.incomingHeaderBackground#4E9F4E40
  • mergeEditor.change.background#CBA780
  • notificationLink.foreground#9FA6AD
  • notifications.background#100F0F
  • notifications.border#242924
  • notifications.foreground#F5F5F5
  • notificationsErrorIcon.foreground#CF7D7D
  • notificationsInfoIcon.foreground#9FA6AD
  • notificationsWarningIcon.foreground#CBA780
  • panel.background#100F0F
  • panel.border#C86A70
  • panelInput.border#666285
  • panelTitle.activeBorder#C86A70
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#666285
  • peekView.border#88CB80
  • peekViewEditor.background#131111
  • peekViewEditor.matchHighlightBackground#3A394670
  • peekViewResult.background#131111
  • peekViewResult.fileForeground#F5F5F5
  • peekViewResult.lineForeground#F5F5F5
  • peekViewResult.matchHighlightBackground#1B181870
  • peekViewResult.selectionBackground#100F0F
  • peekViewResult.selectionForeground#F5F5F5
  • peekViewTitle.background#131111
  • peekViewTitleDescription.foreground#E7E7E9
  • peekViewTitleLabel.foreground#F5F5F5
  • pickerGroup.border#88CB80
  • pickerGroup.foreground#E0BDC0
  • progressBar.background#C86A70
  • selection.background#88CB8050
  • settings.checkboxBackground#131111
  • settings.checkboxBorder#242924
  • settings.checkboxForeground#F5F5F5
  • settings.dropdownBackground#131111
  • settings.dropdownBorder#242924
  • settings.dropdownForeground#F5F5F5
  • settings.focusedRowBackground#1B181870
  • settings.focusedRowBorder#666285
  • settings.headerBorder#242924
  • settings.headerForeground#F5F5F5
  • settings.inactiveSelectedItemBorder#666285
  • settings.modifiedItemIndicator#CBA780
  • settings.numberInputBackground#131111
  • settings.numberInputBorder#666285
  • settings.numberInputForeground#F5F5F5
  • settings.rowHoverBackground#1B181870
  • settings.settingsHeaderHoverForeground#F5F5F5
  • settings.textInputBackground#131111
  • settings.textInputBorder#666285
  • settings.textInputForeground#F5F5F5
  • sideBar.background#131111
  • sideBarActivityBarTop.border#242924
  • sideBarSectionHeader.background#100F0F
  • sideBarSectionHeader.border#242924
  • sideBarStickyScroll.background#131111
  • sideBarStickyScroll.border#242924
  • sideBarStickyScroll.shadow#242924
  • sideBarTitle.background#131111
  • sideBarTitle.foreground#F5F5F5
  • statusBar.background#88CB80
  • statusBar.debuggingBackground#CBA780
  • statusBar.debuggingForeground#0D0D0D
  • statusBar.foreground#0D0D0D
  • statusBar.noFolderBackground#E7E7E9
  • statusBar.noFolderForeground#0D0D0D
  • statusBarItem.activeBackground#88CB80aa
  • statusBarItem.errorBackground#CF7D7D
  • statusBarItem.errorForeground#0D0D0D
  • statusBarItem.errorHoverBackground#CF7D7Daa
  • statusBarItem.hoverBackground#88CB80aa
  • statusBarItem.prominentBackground#88CB80aa
  • statusBarItem.prominentForeground#0D0D0D
  • statusBarItem.prominentHoverBackground#88CB80aa
  • statusBarItem.prominentHoverForeground#0D0D0D
  • statusBarItem.remoteBackground#C86A70
  • statusBarItem.remoteForeground#F5F5F5
  • statusBarItem.remoteHoverBackground#C86A70aa
  • statusBarItem.warningBackground#CBA780
  • statusBarItem.warningForeground#0D0D0D
  • statusBarItem.warningHoverBackground#CBA780aa
  • tab.activeBackground#100F0F
  • tab.activeBorderTop#C86A70
  • tab.activeForeground#F5F5F5
  • tab.border#242924
  • tab.hoverBackground#100F0F80
  • tab.hoverForeground#F5F5F5
  • tab.inactiveBackground#131111
  • tab.inactiveForeground#666285
  • tab.selectedBackground#1B181870
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4573FF
  • terminal.ansiBrightBlack#414141
  • terminal.ansiBrightBlue#5079FB
  • terminal.ansiBrightCyan#5CE4D3
  • terminal.ansiBrightGreen#3AFF0B
  • terminal.ansiBrightMagenta#F935E8
  • terminal.ansiBrightRed#FF4628
  • terminal.ansiBrightWhite#F9F9F9
  • terminal.ansiBrightYellow#FA9267
  • terminal.ansiCyan#2B8A7E
  • terminal.ansiGreen#219A05
  • terminal.ansiMagenta#E800D4
  • terminal.ansiRed#FF1F00
  • terminal.ansiWhite#FDFDFC
  • terminal.ansiYellow#E44C0E
  • terminal.background#131111
  • terminal.border#242924
  • terminal.foreground#F5F5F5
  • terminal.inactiveSelectionBackground#36303070
  • terminal.selectionBackground#36303070
  • textBlockQuote.background#0D0D0C
  • textBlockQuote.border#242924
  • textCodeBlock.background#0D0D0C
  • textLink.activeForeground#9FA6AD
  • textLink.foreground#88CB80
  • textPreformat.background#0D0D0C
  • textPreformat.foreground#F5F5F5
  • textSeparator.foreground#F5F5F5
  • titleBar.activeBackground#100F0F
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveBackground#100F0F
  • titleBar.inactiveForeground#666285
  • widget.border#242924

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F5F5F5
meta.diff, meta.diff.header#666285
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#D5D5EC
emphasisitalic
strongbold
invalid#CF7D7Dstrikethrough
invalid.deprecated#F5F5F5underline italic
header#D5D5EC
source.ini, source.ignore, source#E7E7E9
markup.inserted#D5D5EC
markup.deleted#CF7D7D
markup.changed#9FA6AD
markup.error#CF7D7D
markup.underlineunderline
markup.bold#CBA780bold
markup.heading#C86A70bold
markup.italic#E7E7E9italic
markup.inline.raw, markup.raw.restructuredtext#C86A70
markup.underline.link, markup.underline.link.image, markup.quote#9FA6AD
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#88CB80
meta.separator.markdown#C86A70
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#DDE4C8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CBA780
entity.name.class, entity.name.type.class, entity.other.inherited-class#88CB80
entity.name.tag, entity.other.attribute-name.parent-selector#CDCBE6
entity.other.attribute-name#88CB80
entity.name.function, meta.function-call, meta.method-call, meta.method#C86A70
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#C7DEC4
support#BCDFB9
entity.name, variable.other.key#C86A70
entity.name.type#C9C8E4
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#C3B8DB
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D3E6D1
entity.other.attribute-name.class.css#C86A70
storage.class, storage.type#88CB80
storage.modifier#D7DEBF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#666285
constant#D5D5EC
constant.other.color#ABA9D6
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#D6A4A7
constant.other.date, constant.other.timestamp#DFBEC1
keyword.operator#D7C1C2
keyword.other.unit#CBD6A9
keyword.control, keyword.other.template, keyword.other.substitution#CBD7A8
keyword.other.this#D5D5EC
keyword.control.import, keyword.control.from#BED3A6
keyword.control.new, keyword.operator.new, keyword.other.important.css#88CB80
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#C7DCB7
meta.attribute-selector.scss#E2E7D0
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#CDCBE6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#C5BFDE
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#88CB80
support.constant.property-value.css, constant.numeric.css#E7E7E9
keyword.control.at-rule.apply.tailwind#BED3A6
keyword.control.at-rule.tailwind.tailwind#CBD7A8
keyword.control.at-rule.layer.tailwind#C7DCB7
meta.selector#E2E7D0
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F1F1EE
punctuation.definition.constant.restructuredtext#D5D5EC
string.quoted.docstring.multi#C86A70
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#F1F1EE
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#C5BFDE
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#FDFDFC
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#F7F8F7
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#F5F6F4
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#FAFAF9
punctuation.definition.directive.restructuredtext#D5D5EC
variable#C4C4DE
variable.other.alias.yaml#C4C4DEunderline
variable.language, variable.parameter.function.language.special#D6A4A7
variable.other.constant#D6CAE3
support.variable#C4C4DE
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#CBA780
support.function, support.type.property-name#DBE9D3
storage#BDDDBB
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E44C0E
punctuation.definition.group.capture.regexp#FF1F00
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF1F00
punctuation.definition.character-class.regexp#FA9267
punctuation.definition.group.regexp#5079FB
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF1F00
meta.assertion.look-ahead.regexp#5079FB
source.json meta.structure.dictionary.json support.type.property-name.json#C86A70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#88CB80
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#9FA6AD
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#CBA780
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#CF7D7D
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#4E9F4E
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#C86A70
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#88CB80
token.info-token#9FA6AD
token.warn-token#CBA780
token.error-token#CF7D7D
token.debug-token#CBA780
RLabs Themes Collection by RLabs Inc. - VS Code Theme