Skip to main content
Home Theme VS Code Relax Your Eyes Green A VSCode color theme that works to relieve eyestrain:)
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 #FAFAFA activityBar.foreground #121417 activityBarBadge.background #526FFF activityBarBadge.foreground #FFFFFF badge.background #526FFF badge.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment.line.double-slash punctuation.definition.comment, punctuation.definition.comment.json.comments #424600 comment.block.js, comment.block.jsx, comment.block.jsx punctuation.definition.comment.js, comment.block.jsx punctuation.definition.comment.jsx, comment.block.ts, comment.block.tsx, comment.block.ts punctuation.definition.comment.ts, comment.block.tsx punctuation.definition.comment.tsx #4E4E4E entity.name.type.instance.jsdoc, comment.block.documentation.js, punctuation.definition.block.tag.jsdoc, comment.block.documentation.js punctuation.definition.comment, comment.block.documentation.jsx, comment.block.documentation.jsx punctuation.definition.comment, comment.block.documentation.ts, comment.block.documentation.ts punctuation.definition.comment, comment.block.documentation.tsx, comment.block.documentation.tsx punctuation.definition.comment #395DA1
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Relax Your Eyes Green — Relax Your Eyes Green
button.background
#5871EF
button.foreground #FFFFFF
button.hoverBackground #6B83ED
diffEditor.insertedTextBackground #00809B33
dropdown.background #FFFFFF
dropdown.border #DBDBDC
editor.background #CAE6CA
editor.findMatchHighlightBackground #526FFF33
editor.foreground #383A42
editor.lineHighlightBackground #383A420C
editor.selectionBackground #E5E5E6
editorCursor.foreground #526FFF
editorGroupHeader.tabsBackground #EAEAEB
editorHoverWidget.background #EAEAEB
editorHoverWidget.border #DBDBDC
editorIndentGuide.activeBackground1 #626772
editorIndentGuide.background1 #383A4233
editorInlayHint.background #ddeadd
editorInlayHint.foreground #AFB2BB
editorLineNumber.activeForeground #383A42
editorLineNumber.foreground #9D9D9F
editorRuler.foreground #383A4233
editorSuggestWidget.background #EAEAEB
editorSuggestWidget.border #DBDBDC
editorSuggestWidget.selectedBackground #FFFFFF
editorWhitespace.foreground #383A4233
editorWidget.background #EAEAEB
editorWidget.border #E5E5E6
extensionButton.prominentBackground #3BBA54
extensionButton.prominentHoverBackground #4CC263
focusBorder #526FFF
input.background #FFFFFF
input.border #DBDBDC
list.activeSelectionBackground #DBDBDC
list.activeSelectionForeground #232324
list.focusBackground #DBDBDC
list.highlightForeground #121417
list.hoverBackground #DBDBDC66
list.inactiveSelectionBackground #DBDBDC
list.inactiveSelectionForeground #232324
notebook.cellEditorBackground #F5F5F5
notification.background #333333
peekView.border #526FFF
peekViewEditor.background #FFFFFF
peekViewResult.background #EAEAEB
peekViewResult.selectionBackground #DBDBDC
peekViewTitle.background #FFFFFF
pickerGroup.border #526FFF
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #EAEAEB
sideBarSectionHeader.background #FAFAFA
statusBar.background #EAEAEB
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #424243
statusBar.noFolderBackground #EAEAEB
statusBarItem.hoverBackground #DBDBDC
tab.activeBackground #FAFAFA
tab.activeForeground #121417
tab.border #DBDBDC
tab.inactiveBackground #EAEAEB
titleBar.activeBackground #EAEAEB
titleBar.activeForeground #424243
titleBar.inactiveBackground #EAEAEB
titleBar.inactiveForeground #424243 entity.name.type, entity.other.inherited-class.ts
keyword, meta.type.declaration.ts, meta.interface.ts, meta.enum.declaration.ts, storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.function.js, storage.type.function.ts, storage.modifier.async.js, storage.modifier.async.ts, constant.language.boolean, support.function.misc.css, support.function.misc.less, support.function.misc.scss, constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.less, constant.other.color.rgb-value.hex.scss, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.less, support.constant.color.w3c-standard-color-name.scss, support.type.primitive, constant.language.null.js, constant.language.undefined.js, constant.language.undefined.jsx, constant.language.null.ts, constant.language.undefined.ts, constant.language.undefined.tsx, storage.type.class, storage.modifier, variable.language.this, variable.language.super #7F0055 bold
keyword.other.unit #333333
variable.parameter #000000 —
punctuation.definition #000066
support.class.component #7F0055 bold
entity.name.tag #7F0055 bold
entity.other.attribute-name #000066
entity.other.attribute-name.class, entity.other.attribute-name.id #7f0055 bold
meta.function-call.js, meta.function-call.jx, meta.function-call.ts, meta.function-call.tsx #914C07 italic
meta.definition.variable, meta.block.ts, meta.block.js variable.other.object.js, meta.block.jsx variable.other.object.jsx, meta.block.ts variable.other.object.ts, meta.block.tsx variable.other.object.tsx, meta.var.expr.ts variable.other.object.ts #458383
meta.definition.function.js, meta.definition.method.js, meta.definition.function.jsx, meta.definition.method.jsx, meta.definition.function.ts, meta.definition.method.ts, meta.definition.function.tsx, meta.definition.method.tsx #170591 bold
meta.property-name.css, meta.property-name.scss, meta.property-name.less, meta.property-list.css, meta.property-list.scss, meta.property-list.less #000066
meta.property-value.css, meta.property-value.less, meta.property-value.scss #000000 bold
support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss #000066 —
source.directive.vue variable.other.readwrite.js, source.directive.vue variable.other.object.js, source.directive.vue variable.other.property.js, variable.other.constant.property.js, variable.other.property.js, variable.other.property.jsx, variable.other.property.ts, variable.other.property.tsx, variable.other.object.property.js, variable.other.object.property.jsx, variable.other.object.property.ts, variable.other.object.property.tsx #524c00
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block #000066
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma #000066
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx #000066 —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx #333333
meta.import.js, meta.import.jsx, meta.import.js variable.other.readwrite.alias.js, meta.import.jsx variable.other.readwrite.alias.jsx, meta.import.ts, meta.import.tsx, meta.import.ts variable.other.readwrite.alias.ts, meta.import.tsx variable.other.readwrite.alias.tsx #660E7A italic bold
meta.definition.property.js, meta.definition.property.ts, meta.definition.property.jsx, meta.definition.property.tsx #524c00
variable.other.object.js, variable.other.object.ts #660E7A bold
variable.other.enummember.ts #05314D bold
meta.object-literal.key.js, meta.object-literal.key.jsx, meta.object-literal.key.ts, meta.object-literal.key.tsx #524c00 —
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
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...
main*
Relax Your Eyes Green | Coding Theme
Button.tsx
fetchUser
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 } ! ` ;
}