Graphite Red

Name: Graphite Red
Author: Sr4kkk

Publisher: Sr4kkkThemes in package: 2

Low-contrast user interface with red accents (Dark + Light)

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Graphite Red — Graphite Red

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1C1C1C
activityBar.foreground#CFCFCF
activityBar.inactiveForeground#7E7E7E
activityBarBadge.background#E53935
activityBarBadge.foreground#212121
badge.background#2A2A2A
badge.foreground#D4D4D4
button.background#E53935
button.foreground#212121
button.hoverBackground#EF5350
button.secondaryBackground#2A2A2A
button.secondaryForeground#D4D4D4
button.secondaryHoverBackground#303030
disabledForeground#8A8A8A
editor.background#212121
editor.findMatchBackground#3A3A3A
editor.findMatchHighlightBackground#323232
editor.findRangeHighlightBackground#2A2A2A
editor.foreground#D4D4D4
editor.inactiveSelectionBackground#E5393522
editor.selectionBackground#E5393533
editor.selectionHighlightBackground#2A2A2A
editor.wordHighlightBackground#2A2A2A
editor.wordHighlightStrongBackground#2D2D2D
editorBracketHighlight.foreground1#BDBDBD
editorBracketHighlight.foreground2#C7C7C7
editorBracketHighlight.foreground3#D4D4D4
editorBracketHighlight.foreground4#AFAFAF
editorBracketHighlight.foreground5#9A9A9A
editorBracketHighlight.foreground6#E53935
editorBracketHighlight.unexpectedBracket.foreground#E53935
editorBracketMatch.background#2A2A2A
editorBracketMatch.border#E53935
editorCursor.foreground#D4D4D4
editorError.foreground#E57373
editorGroupHeader.tabsBackground#1F1F1F
editorIndentGuide.activeBackground#3A3A3A
editorIndentGuide.background#2A2A2A
editorInfo.foreground#A6A6A6
editorLineHighlightBackground#242424
editorLineNumber.activeForeground#A6A6A6
editorLineNumber.foreground#7E7E7E
editorWarning.foreground#E0A96D
editorWhitespace.foreground#2B2B2B
errorForeground#E57373
focusBorder#E53935
foreground#D4D4D4
gitDecoration.addedResourceForeground#9CCC65
gitDecoration.deletedResourceForeground#E57373
gitDecoration.ignoredResourceForeground#7E7E7E
gitDecoration.modifiedResourceForeground#D4D4D4
gitDecoration.untrackedResourceForeground#9CCC65
input.background#242424
input.border#242424
input.foreground#D4D4D4
input.placeholderForeground#8A8A8A
list.activeSelectionBackground#2A2A2A
list.activeSelectionForeground#D4D4D4
list.highlightForeground#E53935
list.hoverBackground#242424
list.inactiveSelectionBackground#252525
panel.background#1F1F1F
panel.border#1F1F1F
panelTitle.activeBorder#2A2A2A
panelTitle.activeForeground#D4D4D4
panelTitle.inactiveForeground#9A9A9A
pickerGroup.border#242424
pickerGroup.foreground#A6A6A6
progressBar.background#E53935
quickInput.background#242424
quickInput.foreground#D4D4D4
scrollbarSlider.activeBackground#FFFFFF2A
scrollbarSlider.background#FFFFFF14
scrollbarSlider.hoverBackground#FFFFFF1F
sideBar.background#1E1E1E
sideBar.border#1E1E1E
sideBar.foreground#CFCFCF
sideBarSectionHeader.background#1E1E1E
sideBarSectionHeader.foreground#CFCFCF
statusBar.background#1C1C1C
statusBar.debuggingBackground#2A2A2A
statusBar.debuggingForeground#D4D4D4
statusBar.foreground#CFCFCF
statusBar.noFolderBackground#1C1C1C
tab.activeBackground#212121
tab.activeBorderTop#E53935
tab.activeForeground#D4D4D4
tab.border#1F1F1F
tab.inactiveBackground#1F1F1F
tab.inactiveForeground#9A9A9A
terminal.background#1F1F1F
terminal.foreground#D4D4D4
terminalCursor.foreground#D4D4D4
titleBar.activeBackground#1C1C1C
titleBar.activeForeground#CFCFCF
titleBar.inactiveBackground#1C1C1C
titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#606060	italic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.throw, keyword.control.trycatch, keyword.control.exception, keyword.control.import, keyword.control.export, keyword.control.async, keyword.control.await, storage.type.class	#E53935	—
entity.name.type, entity.name.class, support.type, support.class	#DADADA	bold
entity.name.function, entity.name.method, support.function, variable.function, meta.function-call, meta.method-call	#E0E0E0	—
variable, meta.definition.variable.name, support.variable, variable.other.property, meta.object-literal.key, meta.property-name	#D4D4D4	—
variable.parameter, meta.parameter	#CFCFCF	italic
string, constant.other.symbol, constant.other.key	#E0E0E0	—
constant.numeric, constant.language.boolean, constant.language, constant.language.null, support.constant	#E0E0E0	—
keyword.operator.comparison, keyword.operator.arrow, storage.type.function.arrow	#E53935	—
keyword.operator, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition	#BDBDBD	—
invalid, invalid.illegal	#E57373	—