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#42B883
- activityBar.background#181818
- activityBar.foreground#d4d4d4
- activityBarBadge.background#42B883
- activityBarBadge.foreground#000000
- badge.background#42B883
- badge.foreground#000000
- button.background#42B883
- button.foreground#000000
- button.hoverBackground#2F835C
- editor.background#1e1e1e
- editor.findMatchBackground#2C7A5666
- editor.findMatchHighlightBackground#2C7A5633
- editor.foreground#d4d4d4
- editor.selectionBackground#2C7A5655
- editor.selectionHighlightBackground#2C7A5633
- editor.wordHighlightBackground#2C7A5633
- editorCursor.foreground#42B883
- editorIndentGuide.activeBackground1#2C7A5688
- editorLineNumber.activeForeground#42B883
- editorLineNumber.foreground#5a5a5a
- extensionButton.prominentBackground#42B883
- extensionButton.prominentHoverBackground#2C7A56
- focusBorder#42B883
- gitDecoration.modifiedResourceForeground#42B883
- list.activeSelectionBackground#2C7A5644
- list.activeSelectionForeground#ffffff
- list.highlightForeground#42B883
- list.hoverBackground#2a2a2a
- list.inactiveSelectionBackground#2C7A5622
- panel.border#2a2a2a
- panelTitle.activeBorder#42B883
- progressBar.background#42B883
- scrollbarSlider.activeBackground#42B88388
- scrollbarSlider.background#4a4a4a55
- scrollbarSlider.hoverBackground#2C7A5666
- sideBar.background#1e1e1e
- sideBar.foreground#cccccc
- sideBarSectionHeader.background#181818
- sideBarTitle.foreground#cccccc
- statusBar.background#2C7A56
- statusBar.debuggingBackground#42B883
- statusBar.debuggingForeground#000000
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#2C7A56
- tab.activeBackground#1e1e1e
- tab.activeBorderTop#42B883
- tab.activeForeground#ffffff
- tab.inactiveBackground#181818
- tab.inactiveForeground#8a8a8a
- terminal.ansiBlue#42B883
- textLink.activeForeground#42B883
- textLink.foreground#42B883
- 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 | #B4FCB4 | italic |
| string, punctuation.definition.string | #F6BA30 | — |
| constant.numeric, constant.language, constant.character | #C6F0EA | — |
| keyword, keyword.control, storage, storage.type | #42B883 | — |
| entity.name.function, support.function | #C67E24 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #1896F6 | — |
| variable, variable.parameter | #7ED2FC | — |
| entity.name.tag, meta.tag | #42B883 | — |
| entity.other.attribute-name | #7ED2FC | — |
| keyword.operator, punctuation | #7296A2 | — |
| meta.decorator, punctuation.decorator | #C67E24 | — |
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#4FD69A
- activityBar.background#000000
- activityBar.border#4FD69A
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#D0D0D0
- activityBarBadge.background#4FD69A
- activityBarBadge.foreground#000000
- badge.background#4FD69A
- badge.foreground#000000
- button.background#000000
- button.border#4FD69A
- button.foreground#FFFFFF
- button.hoverBackground#4FD69A44
- button.secondaryBackground#000000
- button.secondaryForeground#FFFFFF
- button.secondaryHoverBackground#9AEBC644
- checkbox.background#000000
- checkbox.border#4FD69A
- checkbox.foreground#FFFFFF
- contrastActiveBorder#FFFFFF
- contrastBorder#4FD69A
- dropdown.background#000000
- dropdown.border#4FD69A
- dropdown.foreground#FFFFFF
- dropdown.listBackground#000000
- editor.background#000000
- editor.findMatchBackground#4FD69A66
- editor.findMatchBorder#FFFFFF
- editor.findMatchHighlightBackground#4FD69A33
- editor.findMatchHighlightBorder#4FD69A
- editor.foreground#FFFFFF
- editor.lineHighlightBorder#4FD69A88
- editor.selectionBackground#4FD69A55
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#4FD69A33
- editor.selectionHighlightBorder#4FD69A
- editor.wordHighlightBackground#4FD69A33
- editor.wordHighlightBorder#4FD69A
- editor.wordHighlightStrongBorder#9AEBC6
- editorBracketMatch.background#000000
- editorBracketMatch.border#4FD69A
- editorCursor.foreground#4FD69A
- editorGroup.border#4FD69A
- editorGroupHeader.tabsBackground#000000
- editorHoverWidget.background#000000
- editorHoverWidget.border#4FD69A
- editorIndentGuide.activeBackground1#4FD69A
- editorIndentGuide.background1#A6A6A666
- editorLineNumber.activeForeground#4FD69A
- editorLineNumber.foreground#A6A6A6
- editorOverviewRuler.border#4FD69A
- editorRuler.foreground#A6A6A6
- editorSuggestWidget.background#000000
- editorSuggestWidget.border#4FD69A
- editorSuggestWidget.foreground#FFFFFF
- editorSuggestWidget.highlightForeground#4FD69A
- editorSuggestWidget.selectedBackground#4FD69A44
- editorWhitespace.foreground#A6A6A6
- editorWidget.background#000000
- editorWidget.border#4FD69A
- editorWidget.foreground#FFFFFF
- extensionButton.prominentBackground#000000
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#4FD69A44
- focusBorder#FFFFFF
- gitDecoration.deletedResourceForeground#FF6B81
- gitDecoration.ignoredResourceForeground#A6A6A6
- gitDecoration.modifiedResourceForeground#4FD69A
- gitDecoration.untrackedResourceForeground#60A890
- input.background#000000
- input.border#4FD69A
- input.foreground#FFFFFF
- input.placeholderForeground#A6A6A6
- inputOption.activeBorder#FFFFFF
- inputOption.activeForeground#FFFFFF
- inputValidation.errorBorder#4FD69A
- list.activeSelectionBackground#4FD69A44
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#4FD69A44
- list.focusForeground#FFFFFF
- list.focusOutline#FFFFFF
- list.highlightForeground#4FD69A
- list.hoverBackground#4FD69A22
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#4FD69A22
- list.inactiveSelectionForeground#FFFFFF
- menu.background#000000
- menu.border#4FD69A
- menu.foreground#FFFFFF
- menu.selectionBackground#4FD69A44
- menu.selectionForeground#FFFFFF
- menubar.selectionBackground#4FD69A44
- menubar.selectionForeground#FFFFFF
- minimap.findMatchHighlight#4FD69A
- minimapSlider.background#A6A6A644
- notificationCenterHeader.background#000000
- notifications.background#000000
- notifications.border#4FD69A
- notifications.foreground#FFFFFF
- panel.background#000000
- panel.border#4FD69A
- panelTitle.activeBorder#4FD69A
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#D0D0D0
- peekView.border#4FD69A
- peekViewEditor.background#000000
- peekViewResult.background#000000
- peekViewTitle.background#000000
- progressBar.background#4FD69A
- quickInput.background#000000
- quickInput.foreground#FFFFFF
- quickInputTitle.background#000000
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#4FD69A
- scrollbarSlider.background#A6A6A688
- scrollbarSlider.hoverBackground#4FD69AAA
- selection.background#4FD69A66
- sideBar.background#000000
- sideBar.border#4FD69A
- sideBar.foreground#FFFFFF
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#4FD69A
- sideBarSectionHeader.foreground#FFFFFF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#000000
- statusBar.border#4FD69A
- statusBar.debuggingBackground#4FD69A
- statusBar.debuggingBorder#FFFFFF
- statusBar.debuggingForeground#000000
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#000000
- statusBar.noFolderBorder#4FD69A
- statusBar.noFolderForeground#FFFFFF
- statusBarItem.hoverBackground#4FD69A44
- statusBarItem.remoteBackground#4FD69A
- statusBarItem.remoteForeground#000000
- tab.activeBackground#000000
- tab.activeBorder#4FD69A
- tab.activeBorderTop#4FD69A
- tab.activeForeground#FFFFFF
- tab.border#4FD69A
- 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#4FD69A
- terminal.foreground#FFFFFF
- terminal.selectionBackground#4FD69A55
- terminalCursor.foreground#4FD69A
- textLink.activeForeground#9AEBC6
- textLink.foreground#4FD69A
- textPreformat.foreground#4FD69A
- titleBar.activeBackground#000000
- titleBar.activeForeground#FFFFFF
- titleBar.border#4FD69A
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#D0D0D0
- tree.indentGuidesStroke#A6A6A6
- widget.border#4FD69A
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #60A890 | italic |
| string, punctuation.definition.string | #F8B800 | — |
| constant.numeric, constant.language, constant.character | #70A0B0 | — |
| keyword, keyword.control, storage, storage.type | #4FD69A | bold |
| entity.name.function, support.function | #B89048 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #78E0F8 | — |
| variable, variable.parameter | #6098F0 | — |
| entity.name.tag, meta.tag | #4FD69A | bold |
| entity.other.attribute-name | #6098F0 | — |
| keyword.operator, punctuation | #FFFFFF | — |
| meta.decorator, punctuation.decorator | #B89048 | — |
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#00593B
- activityBar.background#FFFFFF
- activityBar.border#00593B
- activityBar.foreground#000000
- activityBar.inactiveForeground#2B2B2B
- activityBarBadge.background#00593B
- activityBarBadge.foreground#FFFFFF
- badge.background#00593B
- badge.foreground#FFFFFF
- button.background#FFFFFF
- button.border#00593B
- button.foreground#000000
- button.hoverBackground#00593B44
- button.secondaryBackground#FFFFFF
- button.secondaryForeground#000000
- button.secondaryHoverBackground#003D2844
- checkbox.background#FFFFFF
- checkbox.border#00593B
- checkbox.foreground#000000
- contrastActiveBorder#000000
- contrastBorder#00593B
- dropdown.background#FFFFFF
- dropdown.border#00593B
- dropdown.foreground#000000
- dropdown.listBackground#FFFFFF
- editor.background#FFFFFF
- editor.findMatchBackground#00593B66
- editor.findMatchBorder#000000
- editor.findMatchHighlightBackground#00593B33
- editor.findMatchHighlightBorder#00593B
- editor.foreground#000000
- editor.lineHighlightBorder#00593B88
- editor.selectionBackground#00593B55
- editor.selectionForeground#000000
- editor.selectionHighlightBackground#00593B33
- editor.selectionHighlightBorder#00593B
- editor.wordHighlightBackground#00593B33
- editor.wordHighlightBorder#00593B
- editor.wordHighlightStrongBorder#003D28
- editorBracketMatch.background#FFFFFF
- editorBracketMatch.border#00593B
- editorCursor.foreground#00593B
- editorGroup.border#00593B
- editorGroupHeader.tabsBackground#FFFFFF
- editorHoverWidget.background#FFFFFF
- editorHoverWidget.border#00593B
- editorIndentGuide.activeBackground1#00593B
- editorIndentGuide.background1#59595966
- editorLineNumber.activeForeground#00593B
- editorLineNumber.foreground#595959
- editorOverviewRuler.border#00593B
- editorRuler.foreground#595959
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.border#00593B
- editorSuggestWidget.foreground#000000
- editorSuggestWidget.highlightForeground#00593B
- editorSuggestWidget.selectedBackground#00593B44
- editorWhitespace.foreground#595959
- editorWidget.background#FFFFFF
- editorWidget.border#00593B
- editorWidget.foreground#000000
- extensionButton.prominentBackground#FFFFFF
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#00593B44
- focusBorder#000000
- gitDecoration.deletedResourceForeground#8F0000
- gitDecoration.ignoredResourceForeground#595959
- gitDecoration.modifiedResourceForeground#00593B
- gitDecoration.untrackedResourceForeground#486000
- input.background#FFFFFF
- input.border#00593B
- input.foreground#000000
- input.placeholderForeground#595959
- inputOption.activeBorder#000000
- inputOption.activeForeground#000000
- inputValidation.errorBorder#00593B
- list.activeSelectionBackground#00593B44
- list.activeSelectionForeground#000000
- list.focusBackground#00593B44
- list.focusForeground#000000
- list.focusOutline#000000
- list.highlightForeground#00593B
- list.hoverBackground#00593B22
- list.hoverForeground#000000
- list.inactiveSelectionBackground#00593B22
- list.inactiveSelectionForeground#000000
- menu.background#FFFFFF
- menu.border#00593B
- menu.foreground#000000
- menu.selectionBackground#00593B44
- menu.selectionForeground#000000
- menubar.selectionBackground#00593B44
- menubar.selectionForeground#000000
- minimap.findMatchHighlight#00593B
- minimapSlider.background#59595944
- notificationCenterHeader.background#FFFFFF
- notifications.background#FFFFFF
- notifications.border#00593B
- notifications.foreground#000000
- panel.background#FFFFFF
- panel.border#00593B
- panelTitle.activeBorder#00593B
- panelTitle.activeForeground#000000
- panelTitle.inactiveForeground#2B2B2B
- peekView.border#00593B
- peekViewEditor.background#FFFFFF
- peekViewResult.background#FFFFFF
- peekViewTitle.background#FFFFFF
- progressBar.background#00593B
- quickInput.background#FFFFFF
- quickInput.foreground#000000
- quickInputTitle.background#FFFFFF
- scrollbar.shadow#FFFFFF
- scrollbarSlider.activeBackground#00593B
- scrollbarSlider.background#59595988
- scrollbarSlider.hoverBackground#00593BAA
- selection.background#00593B66
- sideBar.background#FFFFFF
- sideBar.border#00593B
- sideBar.foreground#000000
- sideBarSectionHeader.background#FFFFFF
- sideBarSectionHeader.border#00593B
- sideBarSectionHeader.foreground#000000
- sideBarTitle.foreground#000000
- statusBar.background#FFFFFF
- statusBar.border#00593B
- statusBar.debuggingBackground#00593B
- statusBar.debuggingBorder#000000
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#000000
- statusBar.noFolderBackground#FFFFFF
- statusBar.noFolderBorder#00593B
- statusBar.noFolderForeground#000000
- statusBarItem.hoverBackground#00593B44
- statusBarItem.remoteBackground#00593B
- statusBarItem.remoteForeground#FFFFFF
- tab.activeBackground#FFFFFF
- tab.activeBorder#00593B
- tab.activeBorderTop#00593B
- tab.activeForeground#000000
- tab.border#00593B
- tab.inactiveBackground#FFFFFF
- tab.inactiveForeground#2B2B2B
- tab.unfocusedActiveForeground#000000
- tab.unfocusedInactiveForeground#2B2B2B
- terminal.ansiBlack#000000
- terminal.ansiBlue#001080
- terminal.ansiBrightBlack#4D4D4D
- terminal.ansiBrightBlue#002DA8
- terminal.ansiBrightCyan#17607A
- terminal.ansiBrightGreen#00593B
- terminal.ansiBrightMagenta#5B2D8E
- terminal.ansiBrightRed#B30000
- terminal.ansiBrightWhite#000000
- terminal.ansiBrightYellow#6B5220
- terminal.ansiCyan#0E5A73
- terminal.ansiGreen#003D28
- terminal.ansiMagenta#4A2475
- terminal.ansiRed#8F0000
- terminal.ansiWhite#4D4D4D
- terminal.ansiYellow#634C1C
- terminal.background#FFFFFF
- terminal.border#00593B
- terminal.foreground#000000
- terminal.selectionBackground#00593B55
- terminalCursor.foreground#00593B
- textLink.activeForeground#003D28
- textLink.foreground#00593B
- textPreformat.foreground#00593B
- titleBar.activeBackground#FFFFFF
- titleBar.activeForeground#000000
- titleBar.border#00593B
- titleBar.inactiveBackground#FFFFFF
- titleBar.inactiveForeground#2B2B2B
- tree.indentGuidesStroke#595959
- widget.border#00593B
- widget.shadow#FFFFFF
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #486012 | italic |
| string, punctuation.definition.string | #4206AE | — |
| constant.numeric, constant.language, constant.character | #306060 | — |
| keyword, keyword.control, storage, storage.type | #00593B | bold |
| entity.name.function, support.function | #3C3C0C | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #2A5A8A | — |
| variable, variable.parameter | #2430FC | — |
| entity.name.tag, meta.tag | #00593B | bold |
| entity.other.attribute-name | #2430FC | — |
| keyword.operator, punctuation | #2A2A48 | — |
| meta.decorator, punctuation.decorator | #3C3C0C | — |
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#42B883
- activityBar.background#f3f3f3
- activityBar.foreground#1e1e1e
- activityBarBadge.background#42B883
- activityBarBadge.foreground#000000
- badge.background#42B883
- badge.foreground#000000
- button.background#42B883
- button.foreground#000000
- button.hoverBackground#2F835C
- editor.background#ffffff
- editor.findMatchBackground#2C7A5655
- editor.findMatchHighlightBackground#2C7A5622
- editor.foreground#1e1e1e
- editor.selectionBackground#2C7A5633
- editor.selectionHighlightBackground#2C7A5622
- editor.wordHighlightBackground#2C7A5622
- editorCursor.foreground#42B883
- editorIndentGuide.activeBackground1#2C7A5666
- editorLineNumber.activeForeground#42B883
- editorLineNumber.foreground#a0a0a0
- extensionButton.prominentBackground#42B883
- extensionButton.prominentHoverBackground#2C7A56
- focusBorder#42B883
- gitDecoration.modifiedResourceForeground#2C7A56
- list.activeSelectionBackground#2C7A5633
- list.activeSelectionForeground#1e1e1e
- list.highlightForeground#2C7A56
- list.hoverBackground#eeeeee
- list.inactiveSelectionBackground#2C7A561a
- panel.border#e0e0e0
- panelTitle.activeBorder#42B883
- progressBar.background#42B883
- scrollbarSlider.activeBackground#42B88366
- scrollbarSlider.background#64646455
- scrollbarSlider.hoverBackground#2C7A5644
- sideBar.background#f8f8f8
- sideBar.foreground#3a3a3a
- sideBarSectionHeader.background#f3f3f3
- sideBarTitle.foreground#3a3a3a
- statusBar.background#42B883
- statusBar.debuggingBackground#2C7A56
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#000000
- statusBar.noFolderBackground#2F835C
- tab.activeBackground#ffffff
- tab.activeBorderTop#42B883
- tab.activeForeground#1e1e1e
- tab.inactiveBackground#ececec
- tab.inactiveForeground#7a7a7a
- terminal.ansiBlue#2C7A56
- textLink.activeForeground#2C7A56
- textLink.foreground#2C7A56
- 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 | #607E0C | italic |
| string, punctuation.definition.string | #783CFC | — |
| constant.numeric, constant.language, constant.character | #006C66 | — |
| keyword, keyword.control, storage, storage.type | #2C7A56 | — |
| entity.name.function, support.function | #5A540C | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #2A7E96 | — |
| variable, variable.parameter | #00549C | — |
| entity.name.tag, meta.tag | #2C7A56 | — |
| entity.other.attribute-name | #00549C | — |
| keyword.operator, punctuation | #304E36 | — |
| meta.decorator, punctuation.decorator | #5A540C | — |