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 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#f9f9f9
activityBar.foreground#030303cc
activityBarBadge.background#ff6363
activityBarBadge.foreground#FFFFFF
breadcrumb.focusForeground#030303cc
breadcrumb.foreground#03030366
button.background#ff6363
button.foreground#FFFFFF
commandCenter.background#ffffff
commandCenter.border#03030314
commandCenter.foreground#03030399
diffEditor.insertedLineBackground#006b4f0D
diffEditor.insertedTextBackground#006b4f15
diffEditor.removedLineBackground#b124240D
diffEditor.removedTextBackground#b1242415
dropdown.background#fcfcfc
dropdown.listBackground#fcfcfc
editor.background#ffffff
editor.findMatchBackground#C75D074d
editor.findMatchHighlightBackground#C75D0726
editor.foreground#030303
editor.lineHighlightBackground#fefefe
editor.lineHighlightBorder#fefefe
editor.selectionBackground#fdfdfd
editor.wordHighlightBackground#03030314
editorBracketHighlight.foreground1#8B6D3F
editorBracketHighlight.foreground2#6B5BA0
editorBracketHighlight.foreground3#4A8490
editorBracketHighlight.foreground4#8B6D3F
editorBracketHighlight.foreground5#6B5BA0
editorBracketHighlight.foreground6#4A8490
editorBracketHighlight.unexpectedBracket.foreground#b12424
editorBracketMatch.background#03030314
editorBracketMatch.border#03030333
editorCursor.foreground#ff6363
editorError.foreground#b12424
editorGroupHeader.tabsBackground#fcfcfc
editorGroupHeader.tabsBorder#fefefe
editorGutter.addedBackground#006b4f
editorGutter.deletedBackground#b12424
editorGutter.modifiedBackground#F8A300
editorIndentGuide.activeBackground1#0303031f
editorIndentGuide.background1#0303030d
editorInfo.foreground#138AF2
editorLineNumber.activeForeground#03030399
editorLineNumber.foreground#03030333
editorOverviewRuler.errorForeground#b12424
editorOverviewRuler.infoForeground#138AF2
editorOverviewRuler.warningForeground#C75D07
editorWarning.foreground#C75D07
editorWhitespace.foreground#03030314
editorWidget.background#fcfcfc
editorWidget.border#03030314
focusBorder#fcfcfc
gitDecoration.addedResourceForeground#006b4f
gitDecoration.conflictingResourceForeground#C75D07
gitDecoration.deletedResourceForeground#b12424
gitDecoration.ignoredResourceForeground#03030333
gitDecoration.modifiedResourceForeground#F8A300
gitDecoration.untrackedResourceForeground#006b4f
input.background#ffffff
input.border#0303031f
input.foreground#030303
input.placeholderForeground#03030366
list.activeSelectionBackground#0303031a
list.activeSelectionForeground#030303
list.focusBackground#fefefe
list.highlightForeground#ff6363
list.hoverBackground#0303030f
list.inactiveSelectionBackground#0303030f
minimap.background#fefefe
minimap.findMatchHighlight#C75D0766
minimap.selectionHighlight#03030333
notifications.background#fcfcfc
notifications.border#03030314
panel.background#ffffff
panel.border#03030314
panelTitle.activeBorder#ff6363
panelTitle.activeForeground#030303cc
panelTitle.inactiveForeground#03030366
peekView.border#ff6363
peekViewEditor.background#fcfcfc
peekViewResult.background#fcfcfc
peekViewTitle.background#fcfcfc
quickInput.background#fcfcfc
quickInput.foreground#030303
scrollbarSlider.activeBackground#0303032e
scrollbarSlider.background#0303030f
scrollbarSlider.hoverBackground#0303031f
sideBar.background#fcfcfc
sideBar.foreground#03030399
sideBarTitle.foreground#030303cc
statusBar.background#ffffff
statusBar.debuggingBackground#b12424
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#03030399
tab.activeBackground#ffffff
tab.activeForeground#030303
tab.border#fefefe
tab.inactiveBackground#fcfcfc
tab.inactiveForeground#03030380
terminal.ansiBlack#FFFFFF
terminal.ansiBlue#138AF2
terminal.ansiBrightBlack#03030366
terminal.ansiBrightBlue#138AF2
terminal.ansiBrightCyan#138AF2
terminal.ansiBrightGreen#006b4f
terminal.ansiBrightMagenta#9a1b6e
terminal.ansiBrightRed#b12424
terminal.ansiBrightWhite#030303
terminal.ansiBrightYellow#F8A300
terminal.ansiCyan#138AF2
terminal.ansiGreen#006b4f
terminal.ansiMagenta#9a1b6e
terminal.ansiRed#b12424
terminal.ansiWhite#030303
terminal.ansiYellow#F8A300
terminal.background#ffffff
terminal.foreground#030303cc
titleBar.activeBackground#fcfcfc
titleBar.activeForeground#030303cc
titleBar.inactiveBackground#fcfcfc
titleBar.inactiveForeground#03030366
widget.shadow#03030315

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	#030303	—
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	#C03030	—
comment, string.quoted.docstring.multi	#999999	—
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	#030303	—
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	#666666	—
variable.parameter.function	#333333	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	#C75D07	—
entity.name.tag, support.class.component, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template	#C75D07	—
string.quoted, string.template, string.regexp, string.interpolated	#C03030	—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments	#666666	—
markup.underline.link, punctuation.definition.metadata.markdown	#ff6363	—
beginning.punctuation.definition.list.markdown	#C03030	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown	#666666	—
constant.numeric.decimal, constant.language.boolean, meta.var.exp.ts	#030303	—
support.variable.property	#333333	—
markup.inserted	#006b4f	—
markup.deleted	#b12424	—
markup.changed	#F8A300	—