React.dev Mimic
Publisher: Alex PedroThemes in package: 1
A dark color theme mimicking the react.dev 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.activeBorder#86c3dd
- activityBar.background#1e242e
- activityBar.border#2a2f36
- activityBar.foreground#91a6bbef
- activityBarBadge.background#86c3dd
- activityBarBadge.foreground#1e242e
- badge.background#1e242e
- badge.foreground#86c3dd
- breadcrumb.background#171c24
- breadcrumb.foreground#738699dd
- button.background#86c3dd
- button.foreground#1e242e
- button.hoverBackground#7cb4cc
- contrastBorder#30353d
- debugExceptionWidget.background#151b22
- debugExceptionWidget.border#192029
- debugIcon.startForeground#00fff2
- debugToolBar.background#1c252e
- debugToolBar.border#192029
- descriptionForeground#e4e4e4
- dropdown.background#151b22
- dropdown.border#192029
- dropdown.foreground#bebebe
- dropdown.listBackground#151b22
- editor.background#16181d
- editor.findMatchBackground#017d8d
- editor.findMatchBorder#c0e1e4
- editor.findMatchHighlightBackground#017d8da8
- editor.findMatchHighlightBorder#017d8d
- editor.findRangeHighlightBackground#017d8da8
- editor.foreground#e4e4e4
- editor.hoverHighlightBackground#272b312a
- editor.lineHighlightBackground#272b312a
- editor.lineHighlightBorder#33333307
- editor.rangeHighlightBackground#272b312a
- editor.rangeHighlightBorder#272b312a
- editor.selectionBackground#214a57a8
- editor.selectionHighlightBackground#214a57a8
- editor.selectionHighlightBorder#bebebe
- editor.wordHighlightBackground#214a57a8
- editor.wordHighlightBorder#bebebe
- editorBracketMatch.background#017d8d
- editorBracketMatch.border#bebebe
- editorCodeLens.foreground#bebebe
- editorCursor.foreground#738699dd
- editorError.foreground#f18a8a
- editorGroup.border#192029
- editorGroupHeader.noTabsBackground#1e242e
- editorGroupHeader.tabsBackground#1e242e
- editorGroupHeader.tabsBorder#30353d
- editorHint.foreground#5188ff
- editorHoverWidget.background#151b22
- editorHoverWidget.border#192029
- editorIndentGuide.activeBackground1#186a83
- editorIndentGuide.background1#273138
- editorInfo.foreground#5188ff
- editorLineNumber.activeForeground#738699dd
- editorLineNumber.foreground#3c4b55
- editorLink.activeForeground#27a0c5
- editorOverviewRuler.border#738699dd
- editorRuler.foreground#bebebe
- editorSuggestWidget.background#151b22
- editorSuggestWidget.border#151b22
- editorSuggestWidget.foreground#bebebe
- editorSuggestWidget.highlightForeground#bebebe
- editorSuggestWidget.selectedBackground#214a57a8
- editorWarning.foreground#f1c88a
- editorWhitespace.foreground#272b312a
- editorWidget.background#151b22
- editorWidget.border#192029
- errorForeground#f18a8a
- extensionButton.prominentBackground#86c3dd
- extensionButton.prominentForeground#1b2029
- extensionButton.prominentHoverBackground#7cb4cc
- focusBorder#1e242e
- foreground#e4e4e4
- gitDecoration.addedResourceForeground#7fdd83
- gitDecoration.conflictingResourceForeground#ec6e6e
- gitDecoration.deletedResourceForeground#d38680
- gitDecoration.ignoredResourceForeground#3e4955dd
- gitDecoration.modifiedResourceForeground#80d3d3
- gitDecoration.untrackedResourceForeground#4f5c6bdd
- input.background#151b22
- input.border#192029
- input.foreground#bebebe
- input.placeholderForeground#bebebe
- inputOption.activeBorder#192029
- inputValidation.errorBackground#151b22
- inputValidation.errorBorder#f18a8a
- inputValidation.infoBackground#151b22
- inputValidation.infoBorder#5188ff
- inputValidation.warningBackground#151b22
- inputValidation.warningBorder#f1c88a
- list.activeSelectionBackground#212d38
- list.activeSelectionForeground#c0e1e4
- list.dropBackground#171c24
- list.errorForeground#f18a8a
- list.focusBackground#212d38
- list.focusForeground#c0e1e4
- list.highlightForeground#c0e1e4
- list.hoverBackground#212d38
- list.hoverForeground#c0e1e4
- list.inactiveFocusBackground#212d38
- list.inactiveSelectionBackground#212d38
- list.inactiveSelectionForeground#c0e1e4
- list.invalidItemForeground#f18a8a
- list.warningForeground#f1c88a
- menu.background#151b22
- menu.selectionBackground#214a57a8
- menu.selectionForeground#c0e1e4
- notificationCenter.border#192029
- notificationCenterHeader.background#151b22
- notificationCenterHeader.foreground#bebebe
- notificationLink.foreground#27a0c5
- notifications.background#151b22
- notifications.foreground#bebebe
- notificationToast.border#192029
- panel.background#171c24
- panel.border#30353d
- panelInput.border#192029
- panelTitle.activeBorder#171c24
- panelTitle.activeForeground#bebebe
- panelTitle.inactiveForeground#738699dd
- peekView.border#192029
- peekViewEditor.background#151b22
- peekViewEditor.matchHighlightBackground#017d8d
- peekViewEditorGutter.background#151b22
- peekViewResult.background#151b22
- peekViewResult.fileForeground#bebebe
- peekViewResult.lineForeground#bebebe
- peekViewResult.matchHighlightBackground#017d8d
- peekViewResult.selectionBackground#214a57a8
- peekViewResult.selectionForeground#bebebe
- peekViewTitle.background#151b22
- peekViewTitleDescription.foreground#e4e4e4
- peekViewTitleLabel.foreground#c0e1e4
- progressBar.background#27a0c5
- scrollbar.shadow#07090a23
- scrollbarSlider.activeBackground#a8a8a817
- scrollbarSlider.background#ffffff0a
- scrollbarSlider.hoverBackground#a8a8a817
- selection.background#214a57a8
- sideBar.background#171c24
- sideBar.border#30353d
- sideBar.foreground#738699dd
- sideBarSectionHeader.background#1e242e
- sideBarSectionHeader.foreground#738699dd
- sideBarTitle.foreground#c0e1e4
- statusBar.background#1e242e
- statusBar.border#30353d
- statusBar.debuggingBackground#5dabb1cc
- statusBar.debuggingBorder#274a4dcc
- statusBar.debuggingForeground#d3d3d3
- statusBar.foreground#738699dd
- statusBar.noFolderBackground#1e242e
- statusBar.noFolderBorder#30353d
- statusBar.noFolderForeground#738699dd
- statusBarItem.activeBackground#1e242e
- statusBarItem.hoverBackground#3037426e
- statusBarItem.prominentBackground#232a36
- tab.activeBackground#171c24
- tab.activeBorder#171c24
- tab.activeBorderTop#86c3dd
- tab.activeForeground#bebebe
- tab.border#30353d
- tab.hoverBackground#171c24
- tab.inactiveBackground#1e242e
- tab.inactiveForeground#738699dd
- tab.unfocusedActiveBorder#1e242e
- tab.unfocusedActiveForeground#bebebe
- tab.unfocusedHoverBackground#1e242e
- tab.unfocusedInactiveForeground#738699dd
- terminal.ansiBlack#1d232c
- terminal.ansiBlue#89a5e2
- terminal.ansiBrightBlack#6d6d6d
- terminal.ansiBrightBlue#319cbd
- terminal.ansiBrightCyan#80b1d3
- terminal.ansiBrightGreen#a5e289
- terminal.ansiBrightMagenta#cd89e2
- terminal.ansiBrightRed#fa6363
- terminal.ansiBrightWhite#a4f3fa
- terminal.ansiBrightYellow#dcb560
- terminal.ansiCyan#80d3d3
- terminal.ansiGreen#89e290
- terminal.ansiMagenta#af89e2
- terminal.ansiRed#e28989
- terminal.ansiWhite#89dbe2
- terminal.ansiYellow#e2e089
- terminal.background#171c24
- terminal.foreground#b3e0e4
- textBlockQuote.background#1e242e
- textBlockQuote.border#192029
- textCodeBlock.background#1e242e
- textLink.activeForeground#27a0c5
- textLink.foreground#27a0c5
- textPreformat.foreground#bebebe
- textSeparator.foreground#bebebe
- titleBar.activeBackground#1e242e
- titleBar.activeForeground#738699dd
- titleBar.border#30353d
- titleBar.inactiveBackground#1e242e
- titleBar.inactiveForeground#738699dd
- tree.indentGuidesStroke#737879
- welcomePage.background#1b2029
- widget.shadow#0d1014b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #757575 | — |
| meta.definition.function.js, meta.function.js, entity.name.function.js, support.class.component.js | #86d9ca | — |
| keyword.control.import.js, keyword.control.from.js, keyword.control.flow.js, keyword.control.conditional.js, keyword.control.loop.js, storage.type.function.js, variable.parameter.js, entity.other.attribute-name.js, storage.type.js, meta.var.expr.js, meta.embedded.expression.js, keyword.control.export.js, keyword.control.default.js, support.variable.property.js, constant.language.null.js | #77b7d7 | — |
| punctuation, variable.other.object.js, variable.other.readwrite.js, meta.brace, variable.other.constant.js, keyword.operator.arithmetic.js, keyword.operator.comparison.js, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.logical.js | #fff | — |
| constant.numeric.decimal.js | #c64640 | — |
| string.quoted.single.js, string.quoted.double.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js | #977cdc | — |
| entity.name.tag.js | #dfab5c | — |
| #811e18 | — |