Skip to main content
Home Theme VS Code EclipseRED This theme is for the lovers of black and also takes into account the beauty of an eclipse, the beauty found in the dark.
EclipseRED | 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.
activityBar.activeBackground #3c2b2b8e activityBar.background #000000 activityBar.border #0D0C0D activityBarBadge.background #950101 breadcrumb.background #000000 breadcrumbPicker.background #000000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded #abb2bf — punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #ff6471 — variable.other.generic-type.haskell #c674df — storage.type.haskell #d19a66
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.background
#950101
diffEditor.insertedLineBackground #950101
dropdown.background #3c2b2b8e
editor.background #000000
editor.findMatchBackground #3c2b2b8e
editor.findMatchHighlightBackground #3c2b2b8e
editor.foldBackground #3c2b2b8e
editor.foreground #f4f4f4
editor.hoverHighlightBackground #602222
editor.lineHighlightBackground #3c2b2b8e
editor.rangeHighlightBackground #3c2b2b8e
editor.selectionBackground #602222
editor.wordHighlightBackground #3c2b2b8e
editorGroupHeader.tabsBackground #000000
editorInfo.background #000000
editorPane.background #000000
editorSuggestWidget.focusHighlightForeground #950101
editorSuggestWidget.highlightForeground #950101
editorWidget.background #000000
input.background #3c2b2b8e
input.border #3c2b2b8e
inputOption.activeBorder #3c2b2b8e
inputValidation.errorBorder #3c2b2b8e
inputValidation.infoBorder #3c2b2b8e
list.activeSelectionBackground #3c2b2b8e
list.dropBackground #3c2b2b8e
list.focusAndSelectionOutline #3c2b2b8e
list.focusBackground #3c2b2b8e
list.focusOutline #3c2b2b8e
list.hoverBackground #3c2b2b8e
list.inactiveFocusBackground #3c2b2b8e
list.inactiveSelectionBackground #3c2b2b8e
listFilterWidget.background #000000
menu.border #0D0C0D
minimap.selectionHighlight #950101
notificationCenter.border #0D0C0D
notifications.background #000000
panel.background #0D0C0D
panel.border #0D0C0D
panel.dropBorder #ff0000
scrollbarSlider.activeBackground #553737
scrollbarSlider.background #3c2b2b8e
scrollbarSlider.hoverBackground #553737
sideBar.background #000000
sideBar.border #0D0C0D
sideBarSectionHeader.background #000000
sideBarTitle.foreground #f4f4f4
statusBar.background #000000
statusBar.border #0D0C0D
statusBar.debuggingBackground #950101
statusBar.noFolderBackground #950101
statusBarItem.hoverBackground #3c2b2b8e
tab.activeBackground #3c2b2b8e
tab.activeBorder #950101
tab.border #0D0C0D
tab.inactiveBackground #000000
terminal.background #000000
textLink.activeForeground #602222
textLink.foreground #950101
titleBar.activeBackground #000000
titleBar.activeForeground #f4f4f4
titleBar.border #3c2b2b8e
welcomePage.progress.background #602222
welcomePage.progress.foreground #950101
welcomePage.tileBackground #3c2b2b8e
welcomePage.tileHoverBackground #602222 support.variable.magic.python #ff6471 —
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #abb2bf —
variable.parameter.function.language.special.self.python #e5c07b —
variable.parameter.function.language.special.cls.python #e5c07b —
storage.modifier.lifetime.rust #b1b6c0 —
support.function.std.rust #61afef —
entity.name.lifetime.rust #e5c07b —
variable.language.rust #ff6471 —
support.constant.edge #c674df —
constant.other.character-class.regexp #ff6471 —
keyword.operator.word #c674df —
keyword.operator.quantifier.regexp #d19a66 —
variable.parameter.function #abb2bf —
comment markup.link #5c6370 —
markup.changed.diff #e5c07b —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #61afef —
markup.inserted.diff #98c379 —
markup.deleted.diff #ff6471 —
meta.function.c,meta.function.cpp #ff6471 —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #abb2bf —
punctuation.separator.key-value #abb2bf —
keyword.operator.expression.import #61afef —
support.constant.math #e5c07b —
support.constant.property.math #d19a66 —
variable.other.constant #e5c07b —
storage.type.annotation.java, storage.type.object.array.java #e5c07b —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #abb2bf —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #e5c07b —
keyword.operator.instanceof.java #c674df —
meta.definition.variable.name.java #ff6471 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #d19a66 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #d19a66 —
punctuation.separator.list.comma.css #abb2bf —
support.constant.color.w3c-standard-color-name.css #d19a66 —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #e5c07b —
entity.name.type.module #e5c07b —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ff6471 —
support.constant.json #d19a66 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #c674df —
support.type.object.console #ff6471 —
support.variable.property.process #d19a66 —
entity.name.function,support.function.console #61afef —
keyword.operator.misc.rust #abb2bf —
keyword.operator.sigil.rust #c674df —
keyword.operator.delete #c674df —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #ff6471 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #c674df —
punctuation.separator.delimiter #abb2bf —
punctuation.separator.c,punctuation.separator.cpp #c674df —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #c674df —
variable.parameter.function.language.python #d19a66 —
support.type.python #56b6c2 —
keyword.operator.logical.python #c674df —
variable.parameter.function.python #d19a66 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #abb2bf —
meta.function-call.generic.python #61afef —
constant.character.format.placeholder.other.python #d19a66 —
keyword.operator.assignment.compound #c674df —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #e5c07b —
variable.language #e5c07b —
token.variable.parameter.java #abb2bf —
import.storage.java #e5c07b —
token.package.keyword #c674df —
entity.name.function, meta.require, support.function.any-method, variable.function #61afef —
entity.name.type.namespace #e5c07b —
support.class, entity.name.type.class #e5c07b —
entity.name.class.identifier.namespace.type #e5c07b —
entity.name.class, variable.other.class.js, variable.other.class.ts #e5c07b —
variable.other.class.php #ff6471 —
control.elements, keyword.operator.less #d19a66 —
keyword.other.special-method #61afef —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #c674df —
token.storage.type.java #e5c07b —
support.type.property-name #abb2bf —
support.constant.property-value #abb2bf —
support.constant.font-name #d19a66 —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #d19a66 —
entity.other.attribute-name #d19a66 —
entity.other.attribute-name.id #61afef —
entity.other.attribute-name.class.css #d19a66 —
markup.heading punctuation.definition.heading, entity.name.section #61afef —
keyword.other.unit #ff6471 —
markup.bold,todo.bold #d19a66 —
punctuation.definition.bold #e5c07b —
markup.italic, punctuation.definition.italic,todo.emphasis #c674df —
entity.name.section.markdown #ff6471 —
punctuation.definition.heading.markdown #ff6471 —
punctuation.definition.list.begin.markdown #e5c07b —
markup.heading.setext #abb2bf —
punctuation.definition.bold.markdown #d19a66 —
markup.inline.raw.markdown #98c379 —
markup.inline.raw.string.markdown #98c379 —
punctuation.definition.raw.markdown #e5c07b —
punctuation.definition.list.markdown #e5c07b —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ff6471 —
beginning.punctuation.definition.list.markdown #ff6471 —
punctuation.definition.metadata.markdown #ff6471 —
markup.underline.link.markdown,markup.underline.link.image.markdown #c674df —
string.other.link.title.markdown,string.other.link.description.markdown #61afef —
markup.raw.monospace.asciidoc #98c379 —
punctuation.definition.asciidoc #e5c07b —
markup.list.asciidoc #e5c07b —
markup.link.asciidoc,markup.other.url.asciidoc #c674df —
string.unquoted.asciidoc,markup.other.url.asciidoc #61afef —
punctuation.section.embedded, variable.interpolation #ff6471 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #c674df —
invalid.illegal.bad-ampersand.html #abb2bf —
invalid.illegal.unrecognized-tag.html #ff6471 —
invalid.deprecated #ffffff —
invalid.deprecated.entity.other.attribute-name.html #d19a66 —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ff6471 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ff6471 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #98c379 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #ff6471 —
support.type.property-name.json punctuation #ff6471 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #c674df —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #c674df —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #e5c07b —
keyword.operator.error-control.php #c674df —
keyword.operator.type.php #c674df —
punctuation.section.array.begin.php #abb2bf —
punctuation.section.array.end.php #abb2bf —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #e5c07b —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #61afef —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #abb2bf —
support.constant.core.rust #d19a66 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #d19a66 —
entity.name.goto-label.php,support.other.php #61afef —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #c674df —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #c674df —
meta.function.decorator.python #61afef —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #abb2bf —
function.parameter.ruby, function.parameter.cs #abb2bf —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #d19a66 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #e5c07b —
block.scope.end,block.scope.begin #abb2bf —
entity.name.variable.local.cs #ff6471 —
token.error-token #f44747 —
token.debug-token #c674df —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #c674df —
meta.template.expression #abb2bf —
keyword.operator.module #c674df —
support.type.type.flowtype #61afef —
support.type.primitive #e5c07b —
meta.property.object #ff6471 —
variable.parameter.function.js #ff6471 —
keyword.other.template.begin #98c379 —
keyword.other.template.end #98c379 —
keyword.other.substitution.begin #98c379 —
keyword.other.substitution.end #98c379 —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #e5c07b —
keyword.operator.arithmetic.go, keyword.operator.address.go #c674df —
entity.name.package.go #e5c07b —
support.type.prelude.elm #56b6c2 —
support.constant.elm #d19a66 —
punctuation.quasi.element #c674df —
constant.character.entity #ff6471 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #e5c07b —
meta.symbol.clojure #ff6471 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #ff6471 —
meta.scope.prerequisites.makefile #ff6471 —
storage.modifier.import.groovy #e5c07b —
meta.method.groovy #61afef —
meta.definition.variable.name.groovy #ff6471 —
meta.definition.class.inherited.classes.groovy #98c379 —
support.variable.semantic.hlsl #e5c07b —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #c674df —
text.variable, text.bracketed #ff6471 —
support.type.swift, support.type.vb.asp #e5c07b —
entity.name.function.xi #e5c07b —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #ff6471 —
constant.regexp.xi #c674df —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #98c379 —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #61afef —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #5c6370 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #e5c07b —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff6471 —
meta.brace.square #abb2bf —
comment, punctuation.definition.comment #7f848e —
markup.quote.markdown #5c6370 —
punctuation.definition.block.sequence.item.yaml #abb2bf —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #56b6c2 —
entity.name.variable.parameter.cs #e5c07b —
entity.name.variable.field.cs #ff6471 —
markup.underline — underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #BE5046 —
support.other.namespace.php #abb2bf —
variable.other.object #e5c07b —
variable.other.constant.property #ff6471 —
entity.other.inherited-class #e5c07b —
variable.other.readwrite.c #ff6471 —
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php #abb2bf —
constant.numeric.decimal.asm.x86_64 #c674df —
support.other.parenthesis.regexp #d19a66 —
constant.character.escape #56b6c2 —
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 } !` ;
}