React Theme
Publisher: MoonThemes in package: 1
A color theme actually faithful to React's website.
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.background#20232a
- activityBar.foreground#f8f8f2
- activityBarBadge.background#fac863
- activityBarBadge.foreground#1a1a1a
- badge.background#fac863
- badge.foreground#1a1a1a
- breadcrumb.activeSelectionForeground#f8f8f2
- breadcrumb.background#23272e
- breadcrumb.focusForeground#f8f8f2
- breadcrumb.foreground#fac863
- breadcrumbPicker.background#191a21
- button.background#44475a
- button.foreground#f8f8f2
- contrastBorder#00000040
- debugToolBar.background#23272e
- diffEditor.insertedTextBackground#99c79460
- diffEditor.removedTextBackground#ec5f6770
- dropdown.background#343746
- dropdown.border#191a21
- dropdown.foreground#f8f8f2
- editor.background#23272e
- editor.findMatchBackground#353b45
- editor.findMatchHighlightBackground#353b45
- editor.lineHighlightBackground#00000040
- editor.selectionBackground#6699cc70
- editor.selectionHighlightBackground#d8dee941
- editorBracketMatch.background#252b39
- editorBracketMatch.border#c5a5c5
- editorCodeLens.foreground#6272a4
- editorGroupHeader.tabsBackground#23272e
- editorGutter.addedBackground#50fa7b80
- editorGutter.deletedBackground#ff555580
- editorGutter.modifiedBackground#8be9fd80
- editorHoverWidget.background#23272e
- editorLineNumber.foreground#999999
- editorRuler.foreground#424450
- editorSuggestWidget.background#21222c
- editorSuggestWidget.foreground#f8f8f2
- editorSuggestWidget.selectedBackground#44475a
- editorWarning.foreground#8be9fd
- editorWidget.background#21222c
- focusBorder#23272e
- foreground#f8f8f2
- gitDecoration.conflictingResourceForeground#fc929e
- gitDecoration.deletedResourceForeground#ffb86c
- gitDecoration.ignoredResourceForeground#44475a
- gitDecoration.modifiedResourceForeground#ffb86c
- gitDecoration.untrackedResourceForeground#8dc891
- input.background#282a36
- input.border#000000
- input.foreground#eeffff
- input.placeholderForeground#eeffff60
- inputOption.activeBorder#bd93f9
- inputValidation.errorBorder#ff5370
- inputValidation.infoBorder#82aaff
- inputValidation.warningBorder#ffcb6b
- list.activeSelectionBackground#44475a
- list.activeSelectionForeground#f8f8f2
- list.dropBackground#44475a
- list.errorForeground#f8f8f2
- list.focusBackground#44475a75
- list.highlightForeground#8be9fd
- list.hoverBackground#44475a75
- list.inactiveSelectionBackground#44475a75
- list.warningForeground#f8f8f2
- panel.background#23272e
- panel.border#00000040
- panelTitle.activeForeground#f8f8f2
- panelTitle.inactiveForeground#6272a4
- progressBar.background#61dafb
- settings.checkboxBackground#21222c
- settings.checkboxBorder#191a21
- settings.checkboxForeground#f8f8f2
- settings.dropdownBackground#21222c
- settings.dropdownBorder#191a21
- settings.dropdownForeground#f8f8f2
- settings.headerForeground#f8f8f2
- settings.modifiedItemIndicator#ffb86c
- settings.numberInputBackground#21222c
- settings.numberInputBorder#191a21
- settings.numberInputForeground#f8f8f2
- settings.textInputBackground#21222c
- settings.textInputBorder#191a21
- settings.textInputForeground#f8f8f2
- sideBar.background#23272e
- sideBar.foreground#bbbbbb
- sideBarSectionHeader.background#23272e50
- statusBar.background#20232a
- statusBar.debuggingBackground#FAC863
- statusBar.noFolderBackground#20232a
- tab.activeBorder#dddddd
- tab.inactiveBackground#23272e
- tab.inactiveForeground#eeeeee
- terminal.ansiBlack#21222c
- terminal.ansiBlue#bd93f9
- terminal.ansiBrightBlack#6272a4
- terminal.ansiBrightBlue#d6acff
- terminal.ansiBrightCyan#a4ffff
- terminal.ansiBrightGreen#69ff94
- terminal.ansiBrightMagenta#ff92df
- terminal.ansiBrightRed#ff6e6e
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffffa5
- terminal.ansiCyan#8be9fd
- terminal.ansiGreen#50fa7b
- terminal.ansiMagenta#ff79c6
- terminal.ansiRed#ff5555
- terminal.ansiWhite#f8f8f2
- terminal.ansiYellow#f1fa8c
- terminal.background#23272e
- terminal.foreground#f8f8f2
- titleBar.activeBackground#20232a
- titleBar.inactiveBackground#23272e
- walkThrough.embeddedEditorBackground#21222c
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.quoted.docstring | #b2b2b2 | — |
| keyword, storage.type.class | #c5a5c5 | — |
| function | #79b6f2 | — |
| variable, meta.jsx.children | #d7deea | — |
| type, support.type, support.type.property-name.json.comments | #fac863 | — |
| variable.other.constant | #8be9ee | — |
| markup.heading.1 punctuation.definition.heading | #ff0000 | — |
| constant.character.entity | #d67c9b | — |
| entity.name.exception | #d67c9b | — |
| entity.name.function, support.function, support.class.builtin, keyword.other.name-of-parameter | #79b6f2 | — |
| entity.name.tag | #fc929e | — |
| support.class, support.class.component, constant.numeric, support.variable.property.dom | #fc929e | — |
| entity.other.inherited-class, entity.name.type | #fac863 | — |
| storage.modifier, storage.type | #c5a5c5 | — |
| constructor | #79b6f2 | — |
| variable.language, entity.other.attribute-name, constant.language.undefined, constant.language.null | #c5a5c5 | |
| constant.language.boolean | #ff8b50 | — |
| variable.parameter, variable.other.constant, variable.other.readwrite, meta.object-literal.key | #d7deea | — |
| punctuation, punctuation.definition.tag, punctuation.section.embedded, meta.brace.round, meta.array.literal | #88c6be | — |
| keyword.operator | #d7deea | — |
| source.python | #ffffff | — |
| constant.language.python | #f99157 | — |
| source.lua | #ffffff | — |
| comment | #B2B2B2 | — |
| punctuation.terminator.statement | #88C6BE | — |
| punctuation.definition.comment | #B2B2B2 | — |
| string.quoted | #8dc891 | — |
| constant.other.object.key | #D8DEE9 | — |
| meta.embedded.assembly | #8dc891 | — |
| keyword - keyword.operator | #c5a5c5 | — |
| keyword.operator.new | #c5a5c5 | — |
| keyword.control | #c5a5c5 | — |
| storage | #c5a5c5 | — |
| storage.type | #c5a5c5 | — |
| constant.numeric | #5a9bcf | — |
| entity.name.type | #FAC863 | — |
| entity.name.class | #88C6BE | — |
| support.type | #D8DEE9 | — |
| support.class | #88C6BE | — |
| entity.name.function | #79b6f2 | — |
| support.function | #79b6f2 | — |
| entity.name.variable | #fc929e | — |
| meta.class, entity.name.class, entity.name.type.class, entity.other.inherited-class, meta.field.declaration | #F9C76B | — |
| variable.other.readwrite, meta.function.parameters, meta.function.method | #D8DEE9 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...