React Dark Theme
Publisher: AlonsoThemes in package: 1
A dark theme inspired by React website, offering comfortable coding.
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.
- activityBarBadge.background#1290BA
- breadcrumb.background#16181D
- button.background#0F7799
- button.hoverBackground#1290BA
- editor.background#16181D
- editor.findMatchHighlightBackground#15a5d555
- editor.foreground#FFFFFF
- editorGutter.background#16181D
- editorLink.activeForeground#33BDEB
- editorSuggestWidget.highlightForeground#16B0E3
- editorSuggestWidget.selectedBackground#073A4A
- focusBorder#1397C3
- inputOption.activeBackground#1397C366
- list.activeSelectionBackground#0B566F
- list.focusBackground#073A4A
- list.highlightForeground#16B0E3
- menu.selectionBackground#0B566F
- peekView.border#1290BA
- peekViewEditor.background#05242E
- peekViewEditorGutter.background#05242E
- pickerGroup.foreground#4AC4ED
- progressBar.background#1290BA
- selection.background#1290BA
- statusBar.background#252526
- statusBar.debuggingBackground#252526
- statusBar.noFolderBackground#252526
- statusBarItem.remoteBackground#149ECA
- tab.activeBackground#16181D
- textLink.foreground#4AC4ED
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment.line, comment.block, comment.block.documentation, punctuation.definition.comment | #757575 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.integer.binary, constant.numeric.integer.octal, constant.numeric.integer.decimal, constant.numeric.integer.hexadecimal, constant.numeric.integer.other, constant.numeric.float, constant.numeric.float.binary, constant.numeric.float.octal, constant.numeric.float.decimal, constant.numeric.float.hexadecimal, constant.numeric.float.other, constant.numeric.complex, constant.numeric.complex.real, constant.numeric.complex.imaginary, constant.language, constant.character.escape, constant.other.placeholder, constant.other | #C64640 | — |
| entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, entity.name.impl, entity.name.type, entity.name.class.forward-decl, entity.other.inherited-class, entity.name.namespace, entity.name.constant, entity.name.label, entity.name.tag, entity.other.attribute-name | #FFFFFF | — |
| entity.name.function, entity.name.function.constructor, entity.name.function.destructor | #86D9CA | — |
| entity.name.tag.html | #86D9CA | — |
| entity.name.tag.js, entity.name.tag.tsx | #DFAB5C | — |
| entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.tsx | #77B7D7 | — |
| entity.name.tag.css, entity.name.tag.less | #86D9CA | — |
| invalid.illegal, invalid.deprecated | #EF4444 | — |
| keyword.control, keyword.control.conditional, keyword.control.import, punctuation.definition.keyword, keyword.other, keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.word | #77B7D7 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.word | #FFFFFF | — |
| markup.bold, markup.italic, markup.underline, markup.inserted, markup.deleted, markup.underline.link, markup.raw.inline, markup.raw.block, markup.other | #77B7D7 | — |
| markup.heading | #77B7D7 | bold |
| markup.list.unnumbered, markup.list.numbered, markup.quote | #FFFFFF | — |
| markup.inline | #DFAB5C | — |
| punctuation.definition.annotation, punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.braces.begin, punctuation.section.braces.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.section.brackets.begin, punctuation.section.brackets.end, punctuation.definition.generic.begin, punctuation.definition.generic.end | #FFFFFF | — |
| punctuation.separator, punctuation.terminator, punctuation.separator.continuation, punctuation.accessor | #FFFFFF | — |
| storage.type, storage.modifier, storage.type.function, keyword.declaration.function, storage.type.class, keyword.declaration.class, storage.type.struct, keyword.declaration.struct, storage.type.enum, keyword.declaration.enum, storage.type.union, keyword.declaration.union, storage.type.trait, keyword.declaration.trait, storage.type.interface, keyword.declaration.interface, storage.type.impl, keyword.declaration.impl, storage.type, keyword.declaration.type | #77B7D7 | — |
| storage.type.function.arrow | #FFFFFF | — |
| string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, punctuation.definition.string.begin, punctuation.definition.string.end, string.unquoted, string.regexp, punctuation.section.interpolation.begin, punctuation.section.interpolation.end, source.*language-suffix*.embedded | #977CDC | — |
| string.quoted.single.json, string.quoted.double.json, string.quoted.triple.json, string.quoted.other.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.unquoted.json, string.regexp.json, punctuation.section.interpolation.begin.json, punctuation.section.interpolation.end.json | #FFFFFF | — |
| support.function, support.module, support.class | #86D9CA | — |
| support.constant | #C64640 | — |
| support.type | #FFFFFF | — |
| support.type.property-name | #77B7D7 | — |
| text.html, text.xml | #FFFFFF | — |
| variable.other, punctuation.definition.variable, variable.other, variable.other.member, variable.function, variable.annotation, punctuation.definition.annotation, variable.object | #77B7D7 | — |
| variable.other.readwrite, variable.other.constant, variable.other.object, variable.language, variable.parameter | #FFFFFF | — |