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#DD0031
- activityBar.background#181818
- activityBar.foreground#d4d4d4
- activityBarBadge.background#DD0031
- activityBarBadge.foreground#ffffff
- badge.background#DD0031
- badge.foreground#ffffff
- button.background#DD0031
- button.foreground#ffffff
- button.hoverBackground#8B1A29
- editor.background#1e1e1e
- editor.findMatchBackground#8B1A2966
- editor.findMatchHighlightBackground#8B1A2933
- editor.foreground#d4d4d4
- editor.selectionBackground#8B1A2955
- editor.selectionHighlightBackground#8B1A2933
- editor.wordHighlightBackground#8B1A2933
- editorCursor.foreground#DD0031
- editorIndentGuide.activeBackground1#8B1A2988
- editorLineNumber.activeForeground#DD0031
- editorLineNumber.foreground#5a5a5a
- extensionButton.prominentBackground#DD0031
- extensionButton.prominentHoverBackground#8B1A29
- focusBorder#DD0031
- gitDecoration.modifiedResourceForeground#DD0031
- list.activeSelectionBackground#8B1A2944
- list.activeSelectionForeground#ffffff
- list.highlightForeground#DD0031
- list.hoverBackground#2a2a2a
- list.inactiveSelectionBackground#8B1A2922
- panel.border#2a2a2a
- panelTitle.activeBorder#DD0031
- progressBar.background#DD0031
- scrollbarSlider.activeBackground#DD003188
- scrollbarSlider.background#4a4a4a55
- scrollbarSlider.hoverBackground#8B1A2966
- sideBar.background#1e1e1e
- sideBar.foreground#cccccc
- sideBarSectionHeader.background#181818
- sideBarTitle.foreground#cccccc
- statusBar.background#8B1A29
- statusBar.debuggingBackground#DD0031
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#8B1A29
- tab.activeBackground#1e1e1e
- tab.activeBorderTop#DD0031
- tab.activeForeground#ffffff
- tab.inactiveBackground#181818
- tab.inactiveForeground#8a8a8a
- terminal.ansiBlue#DD0031
- textLink.activeForeground#DD0031
- textLink.foreground#DD0031
- 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 | #54A27E | italic |
| string, punctuation.definition.string | #FC840C | — |
| constant.numeric, constant.language, constant.character | #8AF6C6 | — |
| keyword, keyword.control, storage, storage.type | #DD0031 | — |
| entity.name.function, support.function | #FCFC0C | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #A8EAFC | — |
| variable, variable.parameter | #128AFC | — |
| entity.name.tag, meta.tag | #DD0031 | — |
| entity.other.attribute-name | #128AFC | — |
| keyword.operator, punctuation | #5A909C | — |
| meta.decorator, punctuation.decorator | #FCFC0C | — |
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#F637E3
- activityBar.background#0F0F11
- activityBar.border#2A2A30
- activityBar.foreground#EFEFF1
- activityBar.inactiveForeground#8A8A93
- activityBarBadge.background#8514F5
- activityBarBadge.foreground#FFFFFF
- badge.background#F637E3
- badge.foreground#000000
- button.background#F637E3
- button.foreground#000000
- button.hoverBackground#9E45F7
- dropdown.background#17171A
- dropdown.foreground#EFEFF1
- editor.background#0F0F11
- editor.findMatchBackground#F637E355
- editor.findMatchHighlightBackground#F637E322
- editor.foreground#EFEFF1
- editor.lineHighlightBackground#17171A
- editor.selectionBackground#F637E344
- editor.selectionHighlightBackground#F637E322
- editor.wordHighlightBackground#F637E322
- editorBracketMatch.background#F637E322
- editorBracketMatch.border#F637E3
- editorCursor.foreground#F637E3
- editorGroup.border#2A2A30
- editorGroupHeader.tabsBackground#17171A
- editorGroupHeader.tabsBorder#2A2A30
- editorHoverWidget.background#17171A
- editorHoverWidget.border#2A2A30
- editorIndentGuide.activeBackground1#E90464
- editorIndentGuide.background1#2A2A30
- editorLineNumber.activeForeground#F637E3
- editorLineNumber.foreground#8A8A93
- editorSuggestWidget.highlightForeground#F637E3
- editorSuggestWidget.selectedBackground#F637E333
- editorWhitespace.foreground#2A2A30
- editorWidget.background#17171A
- editorWidget.border#2A2A30
- extensionButton.prominentBackground#F637E3
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#9E45F7
- focusBorder#F637E3
- gitDecoration.modifiedResourceForeground#E90464
- input.background#17171A
- input.foreground#EFEFF1
- input.placeholderForeground#8A8A93
- inputOption.activeBorder#F637E3
- list.activeSelectionBackground#F637E333
- list.activeSelectionForeground#EFEFF1
- list.focusOutline#F637E3
- list.highlightForeground#F637E3
- list.hoverBackground#17171A
- list.inactiveSelectionBackground#F637E31a
- minimap.findMatchHighlight#F637E3
- notificationLink.foreground#F637E3
- panel.background#0F0F11
- panel.border#2A2A30
- panelTitle.activeBorder#F11653
- panelTitle.activeForeground#EFEFF1
- panelTitle.inactiveForeground#8A8A93
- peekView.border#E90464
- progressBar.background#F637E3
- scrollbarSlider.activeBackground#F637E388
- scrollbarSlider.background#8A8A9344
- scrollbarSlider.hoverBackground#F637E355
- sideBar.background#0F0F11
- sideBar.border#2A2A30
- sideBar.foreground#B4B4BC
- sideBarSectionHeader.background#17171A
- sideBarSectionHeader.border#2A2A30
- sideBarTitle.foreground#B4B4BC
- statusBar.background#0F0F11
- statusBar.border#2A2A30
- statusBar.debuggingBackground#E90464
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#0F0F11
- statusBarItem.hoverBackground#F637E322
- statusBarItem.remoteBackground#E90464
- statusBarItem.remoteForeground#FFFFFF
- tab.activeBackground#0F0F11
- tab.activeBorderTop#E90464
- tab.activeForeground#EFEFF1
- tab.border#2A2A30
- tab.inactiveBackground#17171A
- tab.inactiveForeground#8A8A93
- terminal.ansiBlue#8514F5
- terminal.ansiMagenta#F637E3
- terminal.ansiRed#F11653
- terminal.foreground#EFEFF1
- terminalCursor.foreground#F637E3
- textLink.activeForeground#F637E3
- textLink.foreground#F637E3
- titleBar.activeBackground#0F0F11
- titleBar.activeForeground#B4B4BC
- titleBar.border#2A2A30
- titleBar.inactiveBackground#0F0F11
- titleBar.inactiveForeground#8A8A93
- tree.indentGuidesStroke#2A2A30
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #489C66 | italic |
| string, punctuation.definition.string | #F03618 | — |
| constant.numeric, constant.language, constant.character | #2AEA18 | — |
| keyword, keyword.control, storage, storage.type | #F637E3 | — |
| entity.name.function, support.function | #F6F6BA | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #5A8490 | — |
| variable, variable.parameter | #AEDEFC | — |
| entity.name.tag, meta.tag | #F637E3 | — |
| entity.other.attribute-name | #AEDEFC | — |
| keyword.operator, punctuation | #90C0B4 | — |
| meta.decorator, punctuation.decorator | #F6F6BA | — |
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#5C44E4
- activityBar.background#FFFFFF
- activityBar.border#D8D8DE
- activityBar.foreground#0F0F11
- activityBar.inactiveForeground#6B6B73
- activityBarBadge.background#5C44E4
- activityBarBadge.foreground#FFFFFF
- badge.background#8514F5
- badge.foreground#FFFFFF
- button.background#8514F5
- button.foreground#FFFFFF
- button.hoverBackground#5C44E4
- dropdown.background#EFEFF1
- dropdown.foreground#0F0F11
- editor.background#FFFFFF
- editor.findMatchBackground#8514F555
- editor.findMatchHighlightBackground#8514F522
- editor.foreground#0F0F11
- editor.lineHighlightBackground#EFEFF1
- editor.selectionBackground#8514F544
- editor.selectionHighlightBackground#8514F522
- editor.wordHighlightBackground#8514F522
- editorBracketMatch.background#8514F522
- editorBracketMatch.border#8514F5
- editorCursor.foreground#8514F5
- editorGroup.border#D8D8DE
- editorGroupHeader.tabsBackground#EFEFF1
- editorGroupHeader.tabsBorder#D8D8DE
- editorHoverWidget.background#EFEFF1
- editorHoverWidget.border#D8D8DE
- editorIndentGuide.activeBackground1#8514F5
- editorIndentGuide.background1#D8D8DE
- editorLineNumber.activeForeground#8514F5
- editorLineNumber.foreground#6B6B73
- editorSuggestWidget.highlightForeground#8514F5
- editorSuggestWidget.selectedBackground#8514F533
- editorWhitespace.foreground#D8D8DE
- editorWidget.background#EFEFF1
- editorWidget.border#D8D8DE
- extensionButton.prominentBackground#8514F5
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#5C44E4
- focusBorder#5C44E4
- gitDecoration.modifiedResourceForeground#8514F5
- input.background#EFEFF1
- input.foreground#0F0F11
- input.placeholderForeground#6B6B73
- inputOption.activeBorder#8514F5
- list.activeSelectionBackground#8514F533
- list.activeSelectionForeground#0F0F11
- list.focusOutline#5C44E4
- list.highlightForeground#8514F5
- list.hoverBackground#EFEFF1
- list.inactiveSelectionBackground#8514F51a
- minimap.findMatchHighlight#8514F5
- notificationLink.foreground#8514F5
- panel.background#FFFFFF
- panel.border#D8D8DE
- panelTitle.activeBorder#E90464
- panelTitle.activeForeground#0F0F11
- panelTitle.inactiveForeground#6B6B73
- peekView.border#8514F5
- progressBar.background#8514F5
- scrollbarSlider.activeBackground#8514F588
- scrollbarSlider.background#6B6B7344
- scrollbarSlider.hoverBackground#8514F555
- sideBar.background#FFFFFF
- sideBar.border#D8D8DE
- sideBar.foreground#3A3A42
- sideBarSectionHeader.background#EFEFF1
- sideBarSectionHeader.border#D8D8DE
- sideBarTitle.foreground#3A3A42
- statusBar.background#FFFFFF
- statusBar.border#D8D8DE
- statusBar.debuggingBackground#F637E3
- statusBar.debuggingForeground#000000
- statusBar.foreground#000000
- statusBar.noFolderBackground#FFFFFF
- statusBarItem.hoverBackground#8514F522
- statusBarItem.remoteBackground#F637E3
- statusBarItem.remoteForeground#000000
- tab.activeBackground#FFFFFF
- tab.activeBorderTop#8514F5
- tab.activeForeground#0F0F11
- tab.border#D8D8DE
- tab.inactiveBackground#EFEFF1
- tab.inactiveForeground#6B6B73
- terminal.ansiBlue#5C44E4
- terminal.ansiMagenta#8514F5
- terminal.ansiRed#E90464
- terminal.foreground#0F0F11
- terminalCursor.foreground#8514F5
- textLink.activeForeground#5C44E4
- textLink.foreground#8514F5
- titleBar.activeBackground#FFFFFF
- titleBar.activeForeground#3A3A42
- titleBar.border#D8D8DE
- titleBar.inactiveBackground#FFFFFF
- titleBar.inactiveForeground#6B6B73
- tree.indentGuidesStroke#D8D8DE
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #487E5A | italic |
| string, punctuation.definition.string | #9C6C24 | — |
| constant.numeric, constant.language, constant.character | #247E96 | — |
| keyword, keyword.control, storage, storage.type | #8514F5 | — |
| entity.name.function, support.function | #784806 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #006048 | — |
| variable, variable.parameter | #0C5A8A | — |
| entity.name.tag, meta.tag | #8514F5 | — |
| entity.other.attribute-name | #0C5A8A | — |
| keyword.operator, punctuation | #424854 | — |
| meta.decorator, punctuation.decorator | #784806 | — |
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#FF6B81
- activityBar.background#000000
- activityBar.border#FF6B81
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#D0D0D0
- activityBarBadge.background#FF6B81
- activityBarBadge.foreground#000000
- badge.background#FF6B81
- badge.foreground#000000
- button.background#000000
- button.border#FF6B81
- button.foreground#FFFFFF
- button.hoverBackground#FF6B8144
- button.secondaryBackground#000000
- button.secondaryForeground#FFFFFF
- button.secondaryHoverBackground#FFA8B644
- checkbox.background#000000
- checkbox.border#FF6B81
- checkbox.foreground#FFFFFF
- contrastActiveBorder#FFFFFF
- contrastBorder#FF6B81
- dropdown.background#000000
- dropdown.border#FF6B81
- dropdown.foreground#FFFFFF
- dropdown.listBackground#000000
- editor.background#000000
- editor.findMatchBackground#FF6B8166
- editor.findMatchBorder#FFFFFF
- editor.findMatchHighlightBackground#FF6B8133
- editor.findMatchHighlightBorder#FF6B81
- editor.foreground#FFFFFF
- editor.lineHighlightBorder#FF6B8188
- editor.selectionBackground#FF6B8155
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#FF6B8133
- editor.selectionHighlightBorder#FF6B81
- editor.wordHighlightBackground#FF6B8133
- editor.wordHighlightBorder#FF6B81
- editor.wordHighlightStrongBorder#FFA8B6
- editorBracketMatch.background#000000
- editorBracketMatch.border#FF6B81
- editorCursor.foreground#FF6B81
- editorGroup.border#FF6B81
- editorGroupHeader.tabsBackground#000000
- editorHoverWidget.background#000000
- editorHoverWidget.border#FF6B81
- editorIndentGuide.activeBackground1#FF6B81
- editorIndentGuide.background1#A6A6A666
- editorLineNumber.activeForeground#FF6B81
- editorLineNumber.foreground#A6A6A6
- editorOverviewRuler.border#FF6B81
- editorRuler.foreground#A6A6A6
- editorSuggestWidget.background#000000
- editorSuggestWidget.border#FF6B81
- editorSuggestWidget.foreground#FFFFFF
- editorSuggestWidget.highlightForeground#FF6B81
- editorSuggestWidget.selectedBackground#FF6B8144
- editorWhitespace.foreground#A6A6A6
- editorWidget.background#000000
- editorWidget.border#FF6B81
- editorWidget.foreground#FFFFFF
- extensionButton.prominentBackground#000000
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#FF6B8144
- focusBorder#FFFFFF
- gitDecoration.deletedResourceForeground#FF6B81
- gitDecoration.ignoredResourceForeground#A6A6A6
- gitDecoration.modifiedResourceForeground#FF6B81
- gitDecoration.untrackedResourceForeground#E0F0B0
- input.background#000000
- input.border#FF6B81
- input.foreground#FFFFFF
- input.placeholderForeground#A6A6A6
- inputOption.activeBorder#FFFFFF
- inputOption.activeForeground#FFFFFF
- inputValidation.errorBorder#FF6B81
- list.activeSelectionBackground#FF6B8144
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#FF6B8144
- list.focusForeground#FFFFFF
- list.focusOutline#FFFFFF
- list.highlightForeground#FF6B81
- list.hoverBackground#FF6B8122
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#FF6B8122
- list.inactiveSelectionForeground#FFFFFF
- menu.background#000000
- menu.border#FF6B81
- menu.foreground#FFFFFF
- menu.selectionBackground#FF6B8144
- menu.selectionForeground#FFFFFF
- menubar.selectionBackground#FF6B8144
- menubar.selectionForeground#FFFFFF
- minimap.findMatchHighlight#FF6B81
- minimapSlider.background#A6A6A644
- notificationCenterHeader.background#000000
- notifications.background#000000
- notifications.border#FF6B81
- notifications.foreground#FFFFFF
- panel.background#000000
- panel.border#FF6B81
- panelTitle.activeBorder#FF6B81
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#D0D0D0
- peekView.border#FF6B81
- peekViewEditor.background#000000
- peekViewResult.background#000000
- peekViewTitle.background#000000
- progressBar.background#FF6B81
- quickInput.background#000000
- quickInput.foreground#FFFFFF
- quickInputTitle.background#000000
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#FF6B81
- scrollbarSlider.background#A6A6A688
- scrollbarSlider.hoverBackground#FF6B81AA
- selection.background#FF6B8166
- sideBar.background#000000
- sideBar.border#FF6B81
- sideBar.foreground#FFFFFF
- sideBarSectionHeader.background#000000
- sideBarSectionHeader.border#FF6B81
- sideBarSectionHeader.foreground#FFFFFF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#000000
- statusBar.border#FF6B81
- statusBar.debuggingBackground#FF6B81
- statusBar.debuggingBorder#FFFFFF
- statusBar.debuggingForeground#000000
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#000000
- statusBar.noFolderBorder#FF6B81
- statusBar.noFolderForeground#FFFFFF
- statusBarItem.hoverBackground#FF6B8144
- statusBarItem.remoteBackground#FF6B81
- statusBarItem.remoteForeground#000000
- tab.activeBackground#000000
- tab.activeBorder#FF6B81
- tab.activeBorderTop#FF6B81
- tab.activeForeground#FFFFFF
- tab.border#FF6B81
- 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#FF6B81
- terminal.foreground#FFFFFF
- terminal.selectionBackground#FF6B8155
- terminalCursor.foreground#FF6B81
- textLink.activeForeground#FFA8B6
- textLink.foreground#FF6B81
- textPreformat.foreground#FF6B81
- titleBar.activeBackground#000000
- titleBar.activeForeground#FFFFFF
- titleBar.border#FF6B81
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#D0D0D0
- tree.indentGuidesStroke#A6A6A6
- widget.border#FF6B81
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #E0F0B0 | italic |
| string, punctuation.definition.string | #E87800 | — |
| constant.numeric, constant.language, constant.character | #98C0B8 | — |
| keyword, keyword.control, storage, storage.type | #FF6B81 | bold |
| entity.name.function, support.function | #D0E810 | — |
| entity.name.class, entity.name.type, support.class, entity.other.inherited-class | #20A0F8 | — |
| variable, variable.parameter | #B0D0F8 | — |
| entity.name.tag, meta.tag | #FF6B81 | bold |
| entity.other.attribute-name | #B0D0F8 | — |
| keyword.operator, punctuation | #FFFFFF | — |
| meta.decorator, punctuation.decorator | #D0E810 | — |