Skip to main content
Home Theme VS Code Save My Eyes Theme The dark theme thats built to not burn code into your eyes.
Save My Eyes Theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
badge.background #4a7baa badge.foreground #D7DAE0 button.background #4a7baa button.foreground #FFFFFF button.hoverBackground #6AB0F3 diffEditor.border #444444 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle string, constant.other.symbol, entity.other.inherited-class, punctuation.definition.string, markup.underline.link.image.markdown, string.other.link, markup.raw.inline, markup.inserted, markup.inserted.git_gutter, string.other.link.title.markdown, variable.parameter.url.scss #79dc91 — keyword, keyword.operator.expression.typeof, variable.language.this, storage, support.function.construct.output.php, keyword.operator.new, markup.inline.raw.string.markdown, keyword.operator.expression.import.js #64adfe — entity.other.attribute-name, entity.other.attribute-name.class.css, markup.heading punctuation.definition.heading, entity.name.section, entity.other.attribute-name.class.css, string.unquoted.alias.graphql #f9af7d — variable.other.property.php, variable.other.member.php, entity.name.function.php, meta.function-call, meta.property-value, meta.selector, entity.name.function.ts, entity.name.function.js, entity.name.function.tsx
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Save My Eyes Theme — Save My Eyes
diffEditor.insertedTextBackground
#92D19244
diffEditor.removedTextBackground #f2777a44
editor.background #2d2d2d
editor.findMatchBackground #101010
editor.findMatchBorder #FFD479
editor.findMatchHighlightBackground #cda86955
editor.foreground #b3b9c5
editor.lineHighlightBackground #202020
editor.selectionBackground #444444
editorBracketMatch.background #101010
editorBracketMatch.border #ffffff
editorCursor.foreground #ffeea6
editorError.foreground #f2777a
editorLineNumber.activeForeground #909090
editorLineNumber.foreground #606060
editorSuggestWidget.background #2d2d2d
editorSuggestWidget.border #202020
editorSuggestWidget.highlightForeground #FFD479
editorSuggestWidget.selectedBackground #202020
extensionButton.prominentBackground #FFD479
extensionButton.prominentForeground #222222
extensionButton.prominentHoverBackground #ffeea6
input.background #333333
inputOption.activeBorder #FFD479
inputValidation.warningBorder #f2777a
list.activeSelectionBackground #4a7baa66
list.focusBackground #101010
list.hoverBackground #383838
list.inactiveSelectionBackground #444444
panel.background #202020
peekView.border #333333
peekViewEditor.background #242424
peekViewEditor.matchHighlightBackground #2d2d2d
peekViewResult.background #242424
peekViewResult.matchHighlightBackground #2d2d2d
peekViewResult.selectionBackground #444444
scrollbarSlider.activeBackground #88888880
scrollbarSlider.background #44444480
scrollbarSlider.hoverBackground #66666680
sideBar.background #272727
sideBarSectionHeader.background #202020
sideBarSectionHeader.border #282828
statusBar.background #202020
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #909090
statusBar.noFolderBackground #21252B
statusBarItem.hoverBackground #111
tab.activeBackground #2d2d2d
tab.inactiveBackground #202020
terminal.ansiBlack #666666
terminal.ansiBlue #64adfe
terminal.ansiBrightBlack #777777
terminal.ansiBrightBlue #64adfe
terminal.ansiBrightCyan #62CFCF
terminal.ansiBrightGreen #79dc91
terminal.ansiBrightMagenta #b8a1e0
terminal.ansiBrightRed #e3757f
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffea7f
terminal.ansiCyan #62CFCF
terminal.ansiGreen #79dc91
terminal.ansiMagenta #b8a1e0
terminal.ansiRed #e3757f
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffea7f
terminal.background #242424
terminal.foreground #b3b9c5
terminal.selectionBackground #bbbbbb22
textLink.activeForeground #6AB0F3
textLink.foreground #6AB0F3 support.class, entity.name.type.class, meta.entity.new.name.expr, entity.name.tag.structure.any.html, meta.tag.structure.any.html, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, keyword.other.special-method, entity.name.type, entity.name.tag, support.variable.dom.js, meta.tag.structure.any.html, markup.bold, punctuation.definition.bold, entity.name.type.ts, support.variable.dom.ts, entity.name.function.graphql #b8a1e0 —
meta.type.annotation.ts, support.type.primitive.ts, entity.name.type.ts, meta.type.annotation.ts, variable.other.jsdoc #FFFFFF —
variable.parameter.ts, variable.parameter.ts, variable.parameter.tsx, entity.tag.tagbraces.nunjucks, string.unquoted.filter-pipe.nunjucks, punctuation.colon.graphql, string.unquoted.graphql #848991 —
comment, punctuation.definition.comment, punctuation.separator.key-value, punctuation.separator, meta.template.expression.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, markup.underline.link.markdown, punctuation.definition.metadata.markdown #777c85 —
punctuation.definition.variable, variable, variable.language.this.php, markup.deleted, markup.deleted.git_gutter, invalid.illegal, string.unquoted.tag-string.nunjucks #e3757f —
constant.numeric, keyword.other.unit, markup.quote #f9af7d —
support.function, constant, entity.other.attribute-name.id, markup.italic, punctuation.definition.italic, markup.changed, markup.changed.git_gutter, support.constant.property-value #ffea7f —
keyword.operator, constant.character.escape, constant.character.escape.json, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, keyword.operator, punctuation.accessor.js, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc #f9af7d —
punctuation.definition.block, meta.parameters, punctuation.definition.parameters, meta.brace.round, punctuation.definition.dictionary, constant.character.escape.backslash.regexp, punctuation.section, punctuation.terminator.statement, variable.other.property.js, support.variable.property.dom.js, punctuation.definition.parameters, punctuation.definition.array, support.type.property-name.json, entity.name.function, meta.require, support.function.any-method, meta.tag.sgml.html, punctuation.section.embedded, variable.interpolation, variable.object.property.ts, variable.object.property.tsx, meta.brace.square, punctuation.definition.array, punctuation.definition.binding-pattern.object.js, entity.name.tag.yaml, meta.selectionset.graphql #d5d8df —
entity.other.attribute-name.pseudo-class.css, constant.other.php, markup.italic.markdown, punctuation.definition.italic.markdown, string.regexp, entity.other.attribute-name.pseudo-element.css, meta.image.inline.markdown, string.other.link.description.markdown #62CFCF —
entity.name.tag.reference, meta.embedded.block.php, meta.embedded.line.php, keyword.other.phpdoc.php, meta.separator, variable.object.property.ts, variable.object.property.tsx, variable.other.property.js, support.variable.property.dom.js, support.type.property-name.json, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.instance.jsdoc, variable.graphql #abb2bf —
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*
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 }!` ;
}