Skip to main content
Home Theme VS Code No Chance Theme A Vscode theme that you can't change by Mikhail Avdeev
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 #202020 activityBar.border #23788b27 activityBar.foreground #00a4c8 activityBarBadge.background #196292 button.background #00a4c8 button.foreground #EEFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #546E7A — punctuation #49CCE9 — keyword.package.go, keyword.import.go, keyword.function.go #fc4c87dc — source.go, entity.name.package.go #F7ECB5 — source.makefile, meta.scope.recipe.makefile, fenced_code.block.language.markdown
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
No Chance Theme — No Chance Theme
button.hoverBackground
#196292
dropdown.background #343534
editor.background #202020
editor.findMatchBackground #00a4c8
editor.findMatchBorder #00a3c827
editor.foreground #bbbbbb
editor.selectionHighlightBackground #3d7e6d
editor.selectionHighlightBorder #3d7e6d
editorGroup.border #00a3c827
editorGroup.dropBackground #00a3c827
editorGroupHeader.border #00a3c827
editorGroupHeader.tabsBackground #343534
editorGroupHeader.tabsBorder #00a3c827
editorLineNumber.foreground #00a3c88a
editorWidget.background #343534
focusBorder #00a4c8
gitDecoration.addedResourceForeground #00a3c8
gitDecoration.conflictingResourceForeground #82aaff
gitDecoration.deletedResourceForeground #fc4c87dc
gitDecoration.ignoredResourceForeground #e06e94
gitDecoration.modifiedResourceForeground #00a3c8b0
gitDecoration.untrackedResourceForeground #91DACD
list.activeSelectionBackground #00a3c85e
list.dropBackground #00a3c81f
list.focusBackground #00a3c8
list.hoverBackground #00a3c827
menu.background #343534
minimap.background #343534
panel.background #232323
panel.border #00a3c827
panelTitle.activeForeground #EEFFFF
peekView.border #00a4c8
peekViewEditor.background #272727
scrollbarSlider.activeBackground #00a3c827
scrollbarSlider.background #084d8180
sideBar.border #00a3c827
sideBarSectionHeader.border #00a4c8
sideBarSectionHeader.foreground #00a4c8
sideBarTitle.foreground #bbbbbb
statusBar.background #00a3c869
statusBar.debuggingBackground #3d7e6d
statusBar.noFolderBackground #343534
tab.activeBackground #00a3c849
tab.activeBorderTop #00a4c8
tab.activeForeground #ffffff
tab.hoverBorder #00a4c8
tab.inactiveBackground #031e2449
terminal.border #00a4c8 markup.bold.markdown, markup.italic.markdown #91DACD —
markup.quote.markdown #fc4c87dc —
meta.embedded.block.shellscript, markup.bold.markdown, markup.italic.markdown #91DACD —
entity.name.function.target.makefile, meta.scope.target.makefile, source.makefile #91DACD —
variable, string constant.other.placeholder, variable.other.constant, meta.block variable.other, constant.other.color #ffffff —
invalid, invalid.illegal #FF5370 —
storage.type, storage.modifier, entity.name.tag, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, meta.export.default.tsx, keyword.operator.expression.instanceof, storage.modifier, keyword.operator.expression.typeof #fc4c87 —
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, keyword.operator.assignment, keyword.operator.type #25b1f3 —
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded #FFFFFF —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.type.annotation, meta.type.declaration, meta.return.type, meta.var-single-variable #49cce9 —
support.other.variable, string.other.link, variable.parameter, variable.other.object #EEFFFF —
constant.numeric, constant.character, constant.escape, keyword.other, constant.language.boolean.false, constant.language.null.js.jsx, constant.language.null.js, constant.language.null.tsx, constant.language.null.ts, constant.language.undefined.tsx, constant.language.undefined.ts, constant.language.undefined.js.jsx, constant.language.undefined.js #FF82B4 —
keyword.other.unit, support.constant #FF82B4 —
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, variable.other.object.property, variable.other.object.property, variable.other.object.property, variable.other.object.property, constant.language.boolean.true #91DACD —
meta.object-literal.key, meta.object-binding-pattern-variable, variable.other.object.property, variable.other.property #F7ECB5 —
meta.field.declaration, support.class, markup.changed.git_gutter, entity.other.inherited-class, support.type.sys-types #83f0cc —
meta.type.parameters, meta.type.declaration.ts, entity.name.type.interface, entity.other.inherited-class #ffffff —
support.type.primitive, support.variable.property #98a1df —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #7FDBCA —
variable.language #7FDBCA —
meta.tag, meta.var.expr, keyword.operator.comparison, entity.name.method.js #98a1df —
meta.class-method.js entity.name.function.js, variable.function.constructor #82AAFF —
entity.other.attribute-name #F7ECB5 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
entity.other.attribute-name.class #F7ECB5 —
source.sass keyword.control #82AAFF —
constant.character.escape #89DDFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82AAFF italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
source.json meta.structure.dictionary.json support.type.property-name.json #52E7E1 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F7ECB5 —
punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown #82b1ff —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #C792EA —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #80aefc —
markup.italic #f07178 italic
markup.bold, markup.bold string #f07178 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #f07178 bold
markup.underline #ff869a underline
markup.inline.raw.string.markdown #45c2de —
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #45c2de —
string.other.link.description.title.markdown #C792EA —
constant.other.reference.link.markdown #FFCB6B —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
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*
No Chance Theme | 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 } ! ` ;
}