Raycast Theme

Name: Raycast Theme
Author: Chen Fu

Publisher: Chen FuThemes in package: 2

A light and dark VS Code theme based on the Codex App Raycast theme resources.

Open in VS Code GitHub

Color themes

VS Code preview

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

Raycast Theme — Raycast Dark

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

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#0a0a0a
activityBar.foreground#fefefecc
activityBarBadge.background#ff6363
activityBarBadge.foreground#fefefe
breadcrumb.focusForeground#fefefecc
breadcrumb.foreground#fefefe66
button.background#ff6363
button.foreground#fefefe
commandCenter.background#151515
commandCenter.border#fefefe14
commandCenter.foreground#fefefe99
diffEditor.insertedLineBackground#59d4990D
diffEditor.insertedTextBackground#59d49915
diffEditor.removedLineBackground#ff63630D
diffEditor.removedTextBackground#ff636315
dropdown.background#101010
dropdown.listBackground#101010
editor.background#101010
editor.findMatchBackground#FF92174d
editor.findMatchHighlightBackground#FF921726
editor.foreground#fefefe
editor.lineHighlightBackground#202020
editor.lineHighlightBorder#202020
editor.selectionBackground#323232
editor.wordHighlightBackground#fefefe14
editorBracketHighlight.foreground1#C4935A
editorBracketHighlight.foreground2#9484BD
editorBracketHighlight.foreground3#6AAAB5
editorBracketHighlight.foreground4#C4935A
editorBracketHighlight.foreground5#9484BD
editorBracketHighlight.foreground6#6AAAB5
editorBracketHighlight.unexpectedBracket.foreground#ff6363
editorBracketMatch.background#fefefe14
editorBracketMatch.border#fefefe33
editorCursor.foreground#ff6363
editorError.foreground#ff6363
editorGroupHeader.tabsBackground#101010
editorGroupHeader.tabsBorder#161616
editorGutter.addedBackground#59d499
editorGutter.deletedBackground#ff6363
editorGutter.modifiedBackground#FFC531
editorIndentGuide.activeBackground1#fefefe1f
editorIndentGuide.background1#fefefe0d
editorInfo.foreground#56C2FF
editorLineNumber.activeForeground#fefefe99
editorLineNumber.foreground#fefefe33
editorOverviewRuler.errorForeground#ff6363
editorOverviewRuler.infoForeground#56C2FF
editorOverviewRuler.warningForeground#FF9217
editorWarning.foreground#FF9217
editorWhitespace.foreground#fefefe14
editorWidget.background#101010
editorWidget.border#fefefe14
focusBorder#282828
gitDecoration.addedResourceForeground#59d499
gitDecoration.conflictingResourceForeground#FF9217
gitDecoration.deletedResourceForeground#ff6363
gitDecoration.ignoredResourceForeground#fefefe33
gitDecoration.modifiedResourceForeground#FFC531
gitDecoration.untrackedResourceForeground#59d499
input.background#151515
input.border#fefefe1f
input.foreground#fefefe
input.placeholderForeground#fefefe66
list.activeSelectionBackground#fefefe1f
list.activeSelectionForeground#fefefe
list.focusBackground#181818
list.highlightForeground#ff6363
list.hoverBackground#fefefe14
list.inactiveSelectionBackground#fefefe14
minimap.background#121212
minimap.findMatchHighlight#FF921766
minimap.selectionHighlight#fefefe33
notifications.background#101010
notifications.border#fefefe14
panel.background#101010
panel.border#fefefe14
panelTitle.activeBorder#ff6363
panelTitle.activeForeground#fefefecc
panelTitle.inactiveForeground#fefefe66
peekView.border#ff6363
peekViewEditor.background#101010
peekViewResult.background#101010
peekViewTitle.background#101010
quickInput.background#101010
quickInput.foreground#fefefe
scrollbarSlider.activeBackground#fefefe2e
scrollbarSlider.background#fefefe0f
scrollbarSlider.hoverBackground#fefefe1f
sideBar.background#101010
sideBar.foreground#fefefe99
sideBarTitle.foreground#fefefecc
statusBar.background#101010
statusBar.debuggingBackground#ff6363
statusBar.debuggingForeground#fefefe
statusBar.foreground#fefefe99
tab.activeBackground#101010
tab.activeForeground#fefefe
tab.border#161616
tab.inactiveBackground#101010
tab.inactiveForeground#fefefe80
terminal.ansiBlack#000000
terminal.ansiBlue#56C2FF
terminal.ansiBrightBlack#fefefe66
terminal.ansiBrightBlue#56C2FF
terminal.ansiBrightCyan#56C2FF
terminal.ansiBrightGreen#59d499
terminal.ansiBrightMagenta#cf2f98
terminal.ansiBrightRed#ff6363
terminal.ansiBrightWhite#fefefe
terminal.ansiBrightYellow#FFC531
terminal.ansiCyan#56C2FF
terminal.ansiGreen#59d499
terminal.ansiMagenta#cf2f98
terminal.ansiRed#ff6363
terminal.ansiWhite#fefefe
terminal.ansiYellow#FFC531
terminal.background#101010
terminal.foreground#fefefecc
titleBar.activeBackground#101010
titleBar.activeForeground#fefefecc
titleBar.inactiveBackground#101010
titleBar.inactiveForeground#fefefe66
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block	#fefefe	—
emphasis	—	italic
strong, markup.heading.markdown, markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
meta.link.inline.markdown	#ff6363	underline
string, markup.fenced_code, markup.inline, string.quoted.docstring.multi.python	#ff6363	—
comment, string.quoted.docstring.multi	#666666	—
constant.numeric, constant.language, constant.other.placeholder, constant.character.format.placeholder, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support	#fefefe	—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, entity.name.tag.yaml, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression	#999999	—
variable.parameter.function	#CCCCCC	italic
support.function, entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure	#FF9217	—
entity.name.tag, support.class.component, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template	#ff6363	—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments	#999999	—
markup.underline.link, punctuation.definition.metadata.markdown	#ff6363	—
beginning.punctuation.definition.list.markdown	#ff6363	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown	#999999	—
constant.numeric.decimal, constant.language.boolean, meta.var.exp.ts	#fefefe	—
support.variable.property	#CCCCCC	—
markup.inserted	#59d499	—
markup.deleted	#ff6363	—
markup.changed	#FFC531	—