Frontend Themes
Publisher: StraightRightThemes in package: 26
A curated collection of VSCode themes, based on colors of frontend frameworks
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.activeBorder#61DAFB
- activityBar.background#181818
- activityBar.foreground#d4d4d4
- activityBarBadge.background#61DAFB
- activityBarBadge.foreground#000000
- badge.background#61DAFB
- badge.foreground#000000
- button.background#61DAFB
- button.foreground#000000
- button.hoverBackground#2E8CA8
- editor.background#1e1e1e
- editor.findMatchBackground#2E8CA866
- editor.findMatchHighlightBackground#2E8CA833
- editor.foreground#d4d4d4
- editor.selectionBackground#2E8CA855
- editor.selectionHighlightBackground#2E8CA833
- editor.wordHighlightBackground#2E8CA833
- editorCursor.foreground#61DAFB
- editorIndentGuide.activeBackground1#2E8CA888
- editorLineNumber.activeForeground#61DAFB
- editorLineNumber.foreground#5a5a5a
- extensionButton.prominentBackground#61DAFB
- extensionButton.prominentHoverBackground#2E8CA8
- focusBorder#61DAFB
- gitDecoration.modifiedResourceForeground#61DAFB
- list.activeSelectionBackground#2E8CA844
- list.activeSelectionForeground#ffffff
- list.highlightForeground#61DAFB
- list.hoverBackground#2a2a2a
- list.inactiveSelectionBackground#2E8CA822
- panel.border#2a2a2a
- panelTitle.activeBorder#61DAFB
- progressBar.background#61DAFB
- scrollbarSlider.activeBackground#61DAFB88
- scrollbarSlider.background#4a4a4a55
- scrollbarSlider.hoverBackground#2E8CA866
- sideBar.background#1e1e1e
- sideBar.foreground#cccccc
- sideBarSectionHeader.background#181818
- sideBarTitle.foreground#cccccc
- statusBar.background#2E8CA8
- statusBar.debuggingBackground#61DAFB
- statusBar.debuggingForeground#000000
- statusBar.foreground#000000
- statusBar.noFolderBackground#2E8CA8
- tab.activeBackground#1e1e1e
- tab.activeBorderTop#61DAFB
- tab.activeForeground#ffffff
- tab.inactiveBackground#181818
- tab.inactiveForeground#8a8a8a
- terminal.ansiBlue#61DAFB
- textLink.activeForeground#61DAFB
- textLink.foreground#61DAFB
- titleBar.activeBackground#181818
- titleBar.activeForeground#cccccc
- titleBar.inactiveBackground#1e1e1e
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #90DE0C | italic |
| string, punctuation.definition.string | #C6AE9C | — |
| constant.numeric, constant.language, constant.character | #6CA242 | — |
| keyword, keyword.control, storage, storage.type | #61DAFB | — |
| entity.name.function, support.function | #FCF6B4 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #A2FCF0 | — |
| variable, variable.parameter | #488AFC | — |
| entity.name.tag, meta.tag | #61DAFB | — |
| entity.other.attribute-name | #488AFC | — |
| keyword.operator, punctuation | #BA90A8 | — |
| meta.decorator, punctuation.decorator | #FCF6B4 | — |
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#61DAFB
- activityBar.background#000000
- activityBar.border#61DAFB
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#D0D0D0
- activityBarBadge.background#61DAFB
- activityBarBadge.foreground#000000
- badge.background#61DAFB
- badge.foreground#000000
- button.background#000000
- button.border#61DAFB
- button.foreground#FFFFFF
- button.hoverBackground#61DAFB44
- button.secondaryBackground#000000
- button.secondaryForeground#FFFFFF
- button.secondaryHoverBackground#A8E9FD44
- checkbox.background#000000
- checkbox.border#61DAFB
- checkbox.foreground#FFFFFF
- contrastActiveBorder#FFFFFF
- contrastBorder#61DAFB
- dropdown.background#000000
- dropdown.border#61DAFB
- dropdown.foreground#FFFFFF
- dropdown.listBackground#000000
- editor.background#000000
- editor.findMatchBackground#61DAFB66
- editor.findMatchBorder#FFFFFF
- editor.findMatchHighlightBackground#61DAFB33
- editor.findMatchHighlightBorder#61DAFB
- editor.foreground#FFFFFF
- editor.lineHighlightBorder#61DAFB88
- editor.selectionBackground#61DAFB55
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#61DAFB33
- editor.selectionHighlightBorder#61DAFB
- editor.wordHighlightBackground#61DAFB33
- editor.wordHighlightBorder#61DAFB
- editor.wordHighlightStrongBorder#A8E9FD
- editorBracketMatch.background#000000
- editorBracketMatch.border#61DAFB
- editorCursor.foreground#61DAFB
- editorGroup.border#61DAFB
- editorGroupHeader.tabsBackground#000000
- editorHoverWidget.background#000000
- editorHoverWidget.border#61DAFB
- editorIndentGuide.activeBackground1#61DAFB
- editorIndentGuide.background1#A6A6A666
- editorLineNumber.activeForeground#61DAFB
- editorLineNumber.foreground#A6A6A6
- editorOverviewRuler.border#61DAFB
- editorRuler.foreground#A6A6A6
- editorSuggestWidget.background#000000
- editorSuggestWidget.border#61DAFB
- editorSuggestWidget.foreground#FFFFFF
- editorSuggestWidget.highlightForeground#61DAFB
- editorSuggestWidget.selectedBackground#61DAFB44
- editorWhitespace.foreground#A6A6A6
- editorWidget.background#000000
- editorWidget.border#61DAFB
- editorWidget.foreground#FFFFFF
- extensionButton.prominentBackground#000000
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#61DAFB44
- focusBorder#FFFFFF
- gitDecoration.deletedResourceForeground#FF6B81
- gitDecoration.ignoredResourceForeground#A6A6A6
- gitDecoration.modifiedResourceForeground#61DAFB
- gitDecoration.untrackedResourceForeground#60A878
- input.background#000000
- input.border#61DAFB
- input.foreground#FFFFFF
- input.placeholderForeground#A6A6A6
- inputOption.activeBorder#FFFFFF
- inputOption.activeForeground#FFFFFF
- inputValidation.errorBorder#61DAFB
- list.activeSelectionBackground#61DAFB44
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#61DAFB44
- list.focusForeground#FFFFFF
- list.focusOutline#FFFFFF
- list.highlightForeground#61DAFB
- list.hoverBackground#61DAFB22
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#61DAFB22
- list.inactiveSelectionForeground#FFFFFF
- menu.background#000000
- menu.border#61DAFB
- menu.foreground#FFFFFF
- menu.selectionBackground#61DAFB44
- menu.selectionForeground#FFFFFF
- menubar.selectionBackground#61DAFB44
- menubar.selectionForeground#FFFFFF
- minimap.findMatchHighlight#61DAFB
- minimapSlider.background#A6A6A644
- notificationCenterHeader.background#000000
- notifications.background#000000
- notifications.border#61DAFB
- notifications.foreground#FFFFFF
- panel.background#000000
- panel.border#61DAFB
- panelTitle.activeBorder#61DAFB
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#D0D0D0
- peekView.border#61DAFB
- peekViewEditor.background#000000
- peekViewResult.background#000000
- peekViewTitle.background#000000
- progressBar.background#61DAFB
- quickInput.background#000000
- quickInput.foreground#FFFFFF
- quickInputTitle.background#000000
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#61DAFB
- scrollbarSlider.background#A6A6A688
- scrollbarSlider.hoverBackground#61DAFBAA
- selection.background#61DAFB66
- sideBar.background#000000
- sideBar.border#61DAFB
- sideBar.foreground#FFFFFF
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#61DAFB
- sideBarSectionHeader.foreground#FFFFFF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#000000
- statusBar.border#61DAFB
- statusBar.debuggingBackground#61DAFB
- statusBar.debuggingBorder#FFFFFF
- statusBar.debuggingForeground#000000
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#000000
- statusBar.noFolderBorder#61DAFB
- statusBar.noFolderForeground#FFFFFF
- statusBarItem.hoverBackground#61DAFB44
- statusBarItem.remoteBackground#61DAFB
- statusBarItem.remoteForeground#000000
- tab.activeBackground#000000
- tab.activeBorder#61DAFB
- tab.activeBorderTop#61DAFB
- tab.activeForeground#FFFFFF
- tab.border#61DAFB
- tab.inactiveBackground#000000
- tab.inactiveForeground#D0D0D0
- tab.unfocusedActiveForeground#FFFFFF
- tab.unfocusedInactiveForeground#D0D0D0
- terminal.ansiBlack#999999
- terminal.ansiBlue#61DAFB
- terminal.ansiBrightBlack#C4C4C4
- terminal.ansiBrightBlue#A8E9FD
- terminal.ansiBrightCyan#8FE3D3
- terminal.ansiBrightGreen#9AEBC6
- terminal.ansiBrightMagenta#DCC6FF
- terminal.ansiBrightRed#FFA8B6
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#F0F0C8
- terminal.ansiCyan#4EC9B0
- terminal.ansiGreen#4FD69A
- terminal.ansiMagenta#C5A3FF
- terminal.ansiRed#FF6B81
- terminal.ansiWhite#E6E6E6
- terminal.ansiYellow#DCDCAA
- terminal.background#000000
- terminal.border#61DAFB
- terminal.foreground#FFFFFF
- terminal.selectionBackground#61DAFB55
- terminalCursor.foreground#61DAFB
- textLink.activeForeground#A8E9FD
- textLink.foreground#61DAFB
- textPreformat.foreground#61DAFB
- titleBar.activeBackground#000000
- titleBar.activeForeground#FFFFFF
- titleBar.border#61DAFB
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#D0D0D0
- tree.indentGuidesStroke#A6A6A6
- widget.border#61DAFB
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #60A878 | italic |
| string, punctuation.definition.string | #E87800 | — |
| constant.numeric, constant.language, constant.character | #88E8A0 | — |
| keyword, keyword.control, storage, storage.type | #61DAFB | bold |
| entity.name.function, support.function | #F0F038 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #88C0B8 | — |
| variable, variable.parameter | #8090F8 | — |
| entity.name.tag, meta.tag | #61DAFB | bold |
| entity.other.attribute-name | #8090F8 | — |
| keyword.operator, punctuation | #FFFFFF | — |
| meta.decorator, punctuation.decorator | #F0F038 | — |
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#005A73
- activityBar.background#FFFFFF
- activityBar.border#005A73
- activityBar.foreground#000000
- activityBar.inactiveForeground#2B2B2B
- activityBarBadge.background#005A73
- activityBarBadge.foreground#FFFFFF
- badge.background#005A73
- badge.foreground#FFFFFF
- button.background#FFFFFF
- button.border#005A73
- button.foreground#000000
- button.hoverBackground#005A7344
- button.secondaryBackground#FFFFFF
- button.secondaryForeground#000000
- button.secondaryHoverBackground#003D4F44
- checkbox.background#FFFFFF
- checkbox.border#005A73
- checkbox.foreground#000000
- contrastActiveBorder#000000
- contrastBorder#005A73
- dropdown.background#FFFFFF
- dropdown.border#005A73
- dropdown.foreground#000000
- dropdown.listBackground#FFFFFF
- editor.background#FFFFFF
- editor.findMatchBackground#005A7366
- editor.findMatchBorder#000000
- editor.findMatchHighlightBackground#005A7333
- editor.findMatchHighlightBorder#005A73
- editor.foreground#000000
- editor.lineHighlightBorder#005A7388
- editor.selectionBackground#005A7355
- editor.selectionForeground#000000
- editor.selectionHighlightBackground#005A7333
- editor.selectionHighlightBorder#005A73
- editor.wordHighlightBackground#005A7333
- editor.wordHighlightBorder#005A73
- editor.wordHighlightStrongBorder#003D4F
- editorBracketMatch.background#FFFFFF
- editorBracketMatch.border#005A73
- editorCursor.foreground#005A73
- editorGroup.border#005A73
- editorGroupHeader.tabsBackground#FFFFFF
- editorHoverWidget.background#FFFFFF
- editorHoverWidget.border#005A73
- editorIndentGuide.activeBackground1#005A73
- editorIndentGuide.background1#59595966
- editorLineNumber.activeForeground#005A73
- editorLineNumber.foreground#595959
- editorOverviewRuler.border#005A73
- editorRuler.foreground#595959
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.border#005A73
- editorSuggestWidget.foreground#000000
- editorSuggestWidget.highlightForeground#005A73
- editorSuggestWidget.selectedBackground#005A7344
- editorWhitespace.foreground#595959
- editorWidget.background#FFFFFF
- editorWidget.border#005A73
- editorWidget.foreground#000000
- extensionButton.prominentBackground#FFFFFF
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#005A7344
- focusBorder#000000
- gitDecoration.deletedResourceForeground#8F0000
- gitDecoration.ignoredResourceForeground#595959
- gitDecoration.modifiedResourceForeground#005A73
- gitDecoration.untrackedResourceForeground#204020
- input.background#FFFFFF
- input.border#005A73
- input.foreground#000000
- input.placeholderForeground#595959
- inputOption.activeBorder#000000
- inputOption.activeForeground#000000
- inputValidation.errorBorder#005A73
- list.activeSelectionBackground#005A7344
- list.activeSelectionForeground#000000
- list.focusBackground#005A7344
- list.focusForeground#000000
- list.focusOutline#000000
- list.highlightForeground#005A73
- list.hoverBackground#005A7322
- list.hoverForeground#000000
- list.inactiveSelectionBackground#005A7322
- list.inactiveSelectionForeground#000000
- menu.background#FFFFFF
- menu.border#005A73
- menu.foreground#000000
- menu.selectionBackground#005A7344
- menu.selectionForeground#000000
- menubar.selectionBackground#005A7344
- menubar.selectionForeground#000000
- minimap.findMatchHighlight#005A73
- minimapSlider.background#59595944
- notificationCenterHeader.background#FFFFFF
- notifications.background#FFFFFF
- notifications.border#005A73
- notifications.foreground#000000
- panel.background#FFFFFF
- panel.border#005A73
- panelTitle.activeBorder#005A73
- panelTitle.activeForeground#000000
- panelTitle.inactiveForeground#2B2B2B
- peekView.border#005A73
- peekViewEditor.background#FFFFFF
- peekViewResult.background#FFFFFF
- peekViewTitle.background#FFFFFF
- progressBar.background#005A73
- quickInput.background#FFFFFF
- quickInput.foreground#000000
- quickInputTitle.background#FFFFFF
- scrollbar.shadow#FFFFFF
- scrollbarSlider.activeBackground#005A73
- scrollbarSlider.background#59595988
- scrollbarSlider.hoverBackground#005A73AA
- selection.background#005A7366
- sideBar.background#FFFFFF
- sideBar.border#005A73
- sideBar.foreground#000000
- sideBarSectionHeader.background#FFFFFF
- sideBarSectionHeader.border#005A73
- sideBarSectionHeader.foreground#000000
- sideBarTitle.foreground#000000
- statusBar.background#FFFFFF
- statusBar.border#005A73
- statusBar.debuggingBackground#005A73
- statusBar.debuggingBorder#000000
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#000000
- statusBar.noFolderBackground#FFFFFF
- statusBar.noFolderBorder#005A73
- statusBar.noFolderForeground#000000
- statusBarItem.hoverBackground#005A7344
- statusBarItem.remoteBackground#005A73
- statusBarItem.remoteForeground#FFFFFF
- tab.activeBackground#FFFFFF
- tab.activeBorder#005A73
- tab.activeBorderTop#005A73
- tab.activeForeground#000000
- tab.border#005A73
- tab.inactiveBackground#FFFFFF
- tab.inactiveForeground#2B2B2B
- tab.unfocusedActiveForeground#000000
- tab.unfocusedInactiveForeground#2B2B2B
- terminal.ansiBlack#000000
- terminal.ansiBlue#003D4F
- terminal.ansiBrightBlack#4D4D4D
- terminal.ansiBrightBlue#005A73
- terminal.ansiBrightCyan#17607A
- terminal.ansiBrightGreen#006100
- terminal.ansiBrightMagenta#5B2D8E
- terminal.ansiBrightRed#B30000
- terminal.ansiBrightWhite#000000
- terminal.ansiBrightYellow#6B5220
- terminal.ansiCyan#0E5A73
- terminal.ansiGreen#005A00
- terminal.ansiMagenta#4A2475
- terminal.ansiRed#8F0000
- terminal.ansiWhite#4D4D4D
- terminal.ansiYellow#634C1C
- terminal.background#FFFFFF
- terminal.border#005A73
- terminal.foreground#000000
- terminal.selectionBackground#005A7355
- terminalCursor.foreground#005A73
- textLink.activeForeground#003D4F
- textLink.foreground#005A73
- textPreformat.foreground#005A73
- titleBar.activeBackground#FFFFFF
- titleBar.activeForeground#000000
- titleBar.border#005A73
- titleBar.inactiveBackground#FFFFFF
- titleBar.inactiveForeground#2B2B2B
- tree.indentGuidesStroke#595959
- widget.border#005A73
- widget.shadow#FFFFFF
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #184218 | italic |
| string, punctuation.definition.string | #4800A8 | — |
| constant.numeric, constant.language, constant.character | #3C6042 | — |
| keyword, keyword.control, storage, storage.type | #005A73 | bold |
| entity.name.function, support.function | #5A5A0C | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #12605A | — |
| variable, variable.parameter | #2430FC | — |
| entity.name.tag, meta.tag | #005A73 | bold |
| entity.other.attribute-name | #2430FC | — |
| keyword.operator, punctuation | #302A42 | — |
| meta.decorator, punctuation.decorator | #5A5A0C | — |
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#61DAFB
- activityBar.background#f3f3f3
- activityBar.foreground#1e1e1e
- activityBarBadge.background#61DAFB
- activityBarBadge.foreground#000000
- badge.background#61DAFB
- badge.foreground#000000
- button.background#61DAFB
- button.foreground#000000
- button.hoverBackground#2E8CA8
- editor.background#ffffff
- editor.findMatchBackground#2E8CA855
- editor.findMatchHighlightBackground#2E8CA822
- editor.foreground#1e1e1e
- editor.selectionBackground#2E8CA833
- editor.selectionHighlightBackground#2E8CA822
- editor.wordHighlightBackground#2E8CA822
- editorCursor.foreground#61DAFB
- editorIndentGuide.activeBackground1#2E8CA866
- editorLineNumber.activeForeground#61DAFB
- editorLineNumber.foreground#a0a0a0
- extensionButton.prominentBackground#61DAFB
- extensionButton.prominentHoverBackground#2E8CA8
- focusBorder#61DAFB
- gitDecoration.modifiedResourceForeground#2E8CA8
- list.activeSelectionBackground#2E8CA833
- list.activeSelectionForeground#1e1e1e
- list.highlightForeground#2E8CA8
- list.hoverBackground#eeeeee
- list.inactiveSelectionBackground#2E8CA81a
- panel.border#e0e0e0
- panelTitle.activeBorder#61DAFB
- progressBar.background#61DAFB
- scrollbarSlider.activeBackground#61DAFB66
- scrollbarSlider.background#64646455
- scrollbarSlider.hoverBackground#2E8CA844
- sideBar.background#f8f8f8
- sideBar.foreground#3a3a3a
- sideBarSectionHeader.background#f3f3f3
- sideBarTitle.foreground#3a3a3a
- statusBar.background#61DAFB
- statusBar.debuggingBackground#2E8CA8
- statusBar.debuggingForeground#000000
- statusBar.foreground#000000
- statusBar.noFolderBackground#2E8CA8
- tab.activeBackground#ffffff
- tab.activeBorderTop#61DAFB
- tab.activeForeground#1e1e1e
- tab.inactiveBackground#ececec
- tab.inactiveForeground#7a7a7a
- terminal.ansiBlue#2E8CA8
- textLink.activeForeground#2E8CA8
- textLink.foreground#2E8CA8
- titleBar.activeBackground#f3f3f3
- titleBar.activeForeground#3a3a3a
- titleBar.inactiveBackground#ffffff
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #488400 | italic |
| string, punctuation.definition.string | #6C3C9C | — |
| constant.numeric, constant.language, constant.character | #4E7E54 | — |
| keyword, keyword.control, storage, storage.type | #2E8CA8 | — |
| entity.name.function, support.function | #5A5412 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #248478 | — |
| variable, variable.parameter | #7E4EFC | — |
| entity.name.tag, meta.tag | #2E8CA8 | — |
| entity.other.attribute-name | #7E4EFC | — |
| keyword.operator, punctuation | #484842 | — |
| meta.decorator, punctuation.decorator | #5A5412 | — |