Skip to main content
Home Theme VS Code The Astral Themes Collection A collection of color schemas, inspired by the Google Gemini code snippets hightlighting and the Dark+ theme of VSCode.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #151617 activityBar.border #424852 activityBar.foreground #bcb28d activityBarBadge.background #424852 descriptionForeground #bcb28d editor.background #1C1C1D tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source.shell #D4CEBB — comment, punctuation.definition.comment, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.definition.tag #6B6B6B — support.type.object.module, keyword.other.type.php, entity.name.class, keyword.operator.logical.shell, keyword.control, keyword.blade, storage.type.type, storage.type, storage.type.function, punctuation.definition.block.tag, storage.modifier, keyword.other.use.php, keyword.other.phpdoc.php, meta.at-rule.include.scss, meta.at-rule.mixin.scss, variable.language.super, keyword.other.using.directive.cpp, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.assignment, keyword.operator.or.regexp, storage.modifier.reference.cpp, keyword.operator.bitwise.cpp #D2A8FF —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
The Astral Themes Collection — (Legacy) Astroid Theme
editor.findMatchBorder
#bcb28d66
editor.findMatchHighlightBackground #2c5a65
editor.findRangeHighlightBackground #2c5a65
editor.foreground #bcb28d
editor.lineHighlightBackground #5252522A
editor.lineHighlightBorder #5252522A
editor.selectionBackground #ED4C7630
editor.selectionHighlightBackground #2c5a65
editor.wordHighlightBackground #2c5a65
editorCursor.foreground #bcb28d
editorError.foreground #ED4C76
editorGroupHeader.tabsBackground #151617
editorGutter.addedBackground #4EC9B0
editorGutter.background #1C1C1D
editorGutter.deletedBackground #ED4C76
editorGutter.modifiedBackground #b18ed5
editorHoverWidget.background #151617
editorIndentGuide.background1 #2f3033
editorLineNumber.foreground #666
editorLink.activeForeground #999
editorWarning.foreground #E9BB5E
errorForeground #E03C8A
focusBorder #40627C
foreground #bcb28d
gitDecoration.addedResourceForeground #4EC9B0
gitDecoration.deletedResourceForeground #ED4C76
gitDecoration.modifiedResourceForeground #b18ed5
list.errorForeground #ED4C76
list.warningForeground #E9BB5E
panel.background #151617
selection.background #58b2dc
sideBar.background #151617
sideBar.foreground #D4CEBB
sideBarSectionHeader.background #151617
sideBarSectionHeader.foreground #999
sideBarTitle.foreground #999
statusBar.background #151617
statusBar.border #424852
statusBar.debuggingBackground #bcb28d
statusBar.debuggingForeground #1f2023
statusBar.foreground #bcb28d
statusBar.noFolderBackground #1f2023
statusBar.noFolderForeground #bcb28d
tab.activeBackground #151617
tab.activeBorder #F28773
tab.activeForeground #D4CEBB
tab.inactiveBackground #151617
tab.inactiveForeground #666
terminal.ansiBlack #2c5a65
terminal.ansiBlue #58b2dc
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #58b2dc
terminal.ansiBrightCyan #93a1a1
terminal.ansiBrightGreen #5c8490
terminal.ansiBrightMagenta #646695
terminal.ansiBrightRed #e6844f
terminal.ansiBrightWhite #fdf6e3
terminal.ansiBrightYellow #657b83
terminal.ansiCyan #69b0ac
terminal.ansiGreen #24936e
terminal.ansiMagenta #e03c8a
terminal.ansiRed #E03C8A
terminal.ansiWhite #eee8d5
terminal.ansiYellow #e6844f
terminal.background #151617
terminal.foreground #bcb28d
terminalCursor.background #eee8d5
terminalCursor.foreground #657b83
titleBar.activeBackground #151617
titleBar.activeForeground #666
titleBar.inactiveBackground #151617
titleBar.inactiveForeground #666 constant.language.boolean, constant.language, entity.name.section.group-title.ini, constant.numeric.decimal, support.type.builtin, support.type.primitive, string.regexp, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.name.tag.html, entity.name.tag.localname.xml
entity.name.function, punctuation.decorator, support.function.builtin.shell, meta.scope.logical-expression.shell, keyword.other.unit.percentage.css, variable.other.bracket.shell, keyword.cmake, keyword.operator.wordlike.cpp, keyword.operator.functionlike.cpp, keyword.other.definition.ini #E96192 —
support.constant.property-value.css, support.constant.font-name.css, keyword.other.unit.suffix.floating-point.cpp, entity.name.scope-resolution.cpp, variable.parameter, variable.other.object, entity.name.type.class.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.type.cpp, entity.name.type.alias, entity.name.type.instance, entity.other.inherited-class, support.class, entity.name.type, entity.name.tag, string.quoted.double.html, meta.attribute.name.html #F28773 —
constant.character.escape #3A857C —
variable.language.this #F28773 italic
meta.import, variable.other.readwrite, meta.definition.variable, support.type.property-name, meta.object-literal.key, meta.function-call, variable.other.constant.object, variable.other.constant, variable.other.enummember, support.type.property-name.css, variable.other.php, meta.jsx.children.tsx, punctuation.definition.block, keyword.operator.increment, meta.brace.square, meta.brace.round, variable.scss, source.ignore, variable.other.normal.shell, variable.other.positional.shell, text, source.cmake, source.ini, support.variable, meta.function-call.ts #D4CEBB —
entity.other.attribute-name, keyword.operator.new, support.other.namespace.php, variable.other.readwrite.cpp, entity.name.scope-resolution.template.call.cpp, meta.body.function.definition.cpp, variable.object.property, variable.other.object.property, variable.other.property #C1BEB0 —
keyword.operator.class.php, punctuation.terminator.statement, punctuation.terminator.expression, punctuation.separator, punctuation.definition.typeparameters.end, punctuation.definition.typeparameters.begin, keyword.operator.type, punctuation.definition.bracket.curly, entity.name.function.operator.member.cpp, entity.name.function.operator.cpp #808080 —
export interface User { id : string ; name : string ; role : "admin" | "member" ; tags : string [] ; } /** * Fetch user data by ID * @param id * @returns User object or null if ID is invalid */ export async function fetchUser ( id : string ) : Promise < User | null > { if ( ! id) { return null ; } const response = await fetch ( `/api/users/${ id }` , { method : "GET" , headers : { Accept : "application/json" } , }) ; if ( ! response . ok ) { throw new Error ( `HTTP ${ response . status }` ) ; } return ( await response . json ()) as User ; } function greet ( user : User ) : string { // Simple greeting function that uses the user's name return `Hello, ${ user . name }!` ; }
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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*
The Astral Themes Collection | Coding Theme Button.tsx
31
$
export interface User { id : string ; name : string ; role : "admin" | "member" ; tags : string [] ; } /** * Fetch user data by ID * @param id * @returns User object or null if ID is invalid */ export async function fetchUser ( id : string ) : Promise < User | null > { if ( ! id) { return null ; } const response = await fetch ( `/api/users/${ id }` , { method : "GET" , headers : { Accept : "application/json" } , }) ; if ( ! response . ok ) { throw new Error ( `HTTP ${ response . status }` ) ; } return ( await response . json ()) as User ; } function greet ( user : User ) : string { // Simple greeting function that uses the user's name return `Hello, ${ user . name }!` ; }
