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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E9E9E9
activityBar.foreground#2E2E2E
activityBar.inactiveForeground#7A7A7A
activityBarBadge.background#E53935
activityBarBadge.foreground#F2F2F2
badge.background#E2E2E2
badge.foreground#2E2E2E
button.background#E53935
button.foreground#F2F2F2
button.hoverBackground#EF5350
button.secondaryBackground#E2E2E2
button.secondaryForeground#2E2E2E
button.secondaryHoverBackground#DADADA
disabledForeground#7A7A7A
editor.background#F2F2F2
editor.findMatchBackground#DADADA
editor.findMatchHighlightBackground#E1E1E1
editor.findRangeHighlightBackground#E6E6E6
editor.foreground#2E2E2E
editor.inactiveSelectionBackground#E539351A
editor.selectionBackground#E5393526
editor.selectionHighlightBackground#E6E6E6
editor.wordHighlightBackground#E6E6E6
editor.wordHighlightStrongBackground#E2E2E2
editorBracketHighlight.foreground1#3A3A3A
editorBracketHighlight.foreground2#4A4A4A
editorBracketHighlight.foreground3#2E2E2E
editorBracketHighlight.foreground4#5A5A5A
editorBracketHighlight.foreground5#6A6A6A
editorBracketHighlight.foreground6#E53935
editorBracketHighlight.unexpectedBracket.foreground#E53935
editorBracketMatch.background#E6E6E6
editorBracketMatch.border#E53935
editorCursor.foreground#2E2E2E
editorError.foreground#C62828
editorGroupHeader.tabsBackground#EFEFEF
editorIndentGuide.activeBackground#CFCFCF
editorIndentGuide.background#DEDEDE
editorInfo.foreground#5E5E5E
editorLineHighlightBackground#ECECEC
editorLineNumber.activeForeground#5E5E5E
editorLineNumber.foreground#8C8C8C
editorWarning.foreground#B26A00
editorWhitespace.foreground#D6D6D6
errorForeground#C62828
focusBorder#E53935
foreground#2E2E2E
gitDecoration.addedResourceForeground#2E7D32
gitDecoration.deletedResourceForeground#C62828
gitDecoration.ignoredResourceForeground#7A7A7A
gitDecoration.modifiedResourceForeground#2E2E2E
gitDecoration.untrackedResourceForeground#2E7D32
input.background#E8E8E8
input.border#E8E8E8
input.foreground#2E2E2E
input.placeholderForeground#7A7A7A
list.activeSelectionBackground#E2E2E2
list.activeSelectionForeground#2E2E2E
list.highlightForeground#E53935
list.hoverBackground#E8E8E8
list.inactiveSelectionBackground#E6E6E6
panel.background#EFEFEF
panel.border#EFEFEF
panelTitle.activeBorder#DEDEDE
panelTitle.activeForeground#2E2E2E
panelTitle.inactiveForeground#6A6A6A
pickerGroup.border#E8E8E8
pickerGroup.foreground#5E5E5E
progressBar.background#E53935
quickInput.background#E8E8E8
quickInput.foreground#2E2E2E
scrollbarSlider.activeBackground#0000002A
scrollbarSlider.background#00000014
scrollbarSlider.hoverBackground#0000001F
sideBar.background#ECECEC
sideBar.border#ECECEC
sideBar.foreground#2E2E2E
sideBarSectionHeader.background#ECECEC
sideBarSectionHeader.foreground#2E2E2E
statusBar.background#E9E9E9
statusBar.debuggingBackground#E2E2E2
statusBar.debuggingForeground#2E2E2E
statusBar.foreground#2E2E2E
statusBar.noFolderBackground#E9E9E9
tab.activeBackground#F2F2F2
tab.activeBorderTop#E53935
tab.activeForeground#2E2E2E
tab.border#EFEFEF
tab.inactiveBackground#EFEFEF
tab.inactiveForeground#6A6A6A
terminal.background#EFEFEF
terminal.foreground#2E2E2E
terminalCursor.foreground#2E2E2E
titleBar.activeBackground#E9E9E9
titleBar.activeForeground#2E2E2E
titleBar.inactiveBackground#E9E9E9
titleBar.inactiveForeground#7A7A7A

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	#2E2E2E	bold
entity.name.function, entity.name.method, support.function, variable.function, meta.function-call, meta.method-call	#2E2E2E	—
variable, meta.definition.variable.name, support.variable, variable.other.property, meta.object-literal.key, meta.property-name	#2E2E2E	—
variable.parameter, meta.parameter	#3A3A3A	italic
string, constant.other.symbol, constant.other.key	#3A3A3A	—
constant.numeric, constant.language.boolean, constant.language, constant.language.null, support.constant	#3A3A3A	—
keyword.operator.comparison, keyword.operator.arrow, storage.type.function.arrow	#E53935	—
keyword.operator, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition	#5A5A5A	—
invalid, invalid.illegal	#C62828	—