Skip to main content
Home Theme VS Code One for all An minimal atom one dark theme for everyone with ergonomics and eye pleasing colors
...... One for all (mha reference)
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 #1f2126 activityBar.background #1f2126 activityBar.foreground #bbbbbb activityBarBadge.background #058fff button.background #61afef button.foreground #fff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle 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 #e06c75 — variable.other.generic-type.haskell #c678dd — storage.type.haskell #d19a66 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
One for all — One theme for all darker One for all | Coding Theme
button.hoverBackground
#61afefb1
dropdown.background #26292f
editor.background #1f2126
editor.findMatchBackground #22262e
editorGroupHeader.tabsBackground #15171a
editorGutter.background #1f2126
input.background #22262e
list.activeSelectionBackground #058fff
list.activeSelectionForeground #ffffff
list.hoverBackground #1f436151
notifications.background #22262e
panel.background #1f2126
panelSection.dropBackground #1f2126
quickInput.background #22262e
sideBar.background #1f2126
sideBar.border #1f2126
sideBar.dropBackground #1f2126
sideBarSectionHeader.background #1f2126
sideBarSectionHeader.foreground #a7a7a7
sideBarTitle.foreground #bbbbbb
statusBar.background #1f2126
statusBar.debuggingBackground #1f2126
statusBar.noFolderBackground #1f2126
tab.activeBackground #1f2126
tab.inactiveBackground #25282e
tab.inactiveForeground #ffffffa8 #e06c75
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 —
storage.modifier.lifetime.rust #abb2bf —
support.function.std.rust #61afef —
entity.name.lifetime.rust #e5c07b —
variable.language.rust #e06c75 —
support.constant.edge #c678dd —
constant.other.character-class.regexp #e06c75 —
keyword.operator.quantifier.regexp #d19a66 —
punctuation.definition.string.begin,punctuation.definition.string.end #98c379 —
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 #e06c75 —
meta.function.c,meta.function.cpp #e06c75 —
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 #c678dd —
meta.definition.variable.name.java #e06c75 —
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 #e06c75 —
support.constant.json #d19a66 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #c678dd —
support.type.object.console #e06c75 —
support.variable.property.process #d19a66 —
entity.name.function,support.function.console #61afef —
keyword.operator.misc.rust #abb2bf —
keyword.operator.sigil.rust #c678dd —
keyword.operator.delete #c678dd —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #e06c75 —
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 #c678dd —
punctuation.separator.delimiter #abb2bf —
punctuation.separator.c,punctuation.separator.cpp #c678dd —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #c678dd —
variable.parameter.function.language.python #d19a66 —
support.type.python #56b6c2 —
keyword.operator.logical.python #c678dd —
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 #c678dd —
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 #c678dd —
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 #e06c75 —
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 #c678dd —
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 #e06c75 —
markup.bold,todo.bold #d19a66 —
punctuation.definition.bold #e5c07b —
markup.italic, punctuation.definition.italic,todo.emphasis #c678dd —
entity.name.section.markdown #e06c75 —
punctuation.definition.heading.markdown #e06c75 —
punctuation.definition.list.begin.markdown #e06c75 —
markup.heading.setext #abb2bf —
punctuation.definition.bold.markdown #d19a66 —
markup.inline.raw.markdown #98c379 —
markup.inline.raw.string.markdown #98c379 —
punctuation.definition.list.markdown #e06c75 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #e06c75 —
beginning.punctuation.definition.list.markdown #e06c75 —
punctuation.definition.metadata.markdown #e06c75 —
markup.underline.link.markdown,markup.underline.link.image.markdown #c678dd —
string.other.link.title.markdown,string.other.link.description.markdown #61afef —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #e06c75 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #c678dd —
invalid.illegal.bad-ampersand.html #abb2bf —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #e06c75 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #e06c75 —
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 #e06c75 —
support.type.property-name.json punctuation #e06c75 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #c678dd —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #c678dd —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #e5c07b —
keyword.operator.error-control.php #c678dd —
keyword.operator.type.php #c678dd —
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 #c678dd —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #c678dd —
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 #e06c75 —
token.error-token #f44747 —
token.debug-token #c678dd —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #c678dd —
meta.template.expression #abb2bf —
keyword.operator.module #c678dd —
support.type.type.flowtype #61afef —
support.type.primitive #e5c07b —
meta.property.object #e06c75 —
variable.parameter.function.js #e06c75 —
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 #c678dd —
entity.name.package.go #e5c07b —
support.type.prelude.elm #56b6c2 —
support.constant.elm #d19a66 —
punctuation.quasi.element #c678dd —
constant.character.entity #e06c75 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #e5c07b —
meta.symbol.clojure #e06c75 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #e06c75 —
meta.scope.prerequisites.makefile #e06c75 —
storage.modifier.import.groovy #e5c07b —
meta.method.groovy #61afef —
meta.definition.variable.name.groovy #e06c75 —
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 #c678dd —
text.variable, text.bracketed #e06c75 —
support.type.swift, support.type.vb.asp #e5c07b —
entity.name.function.xi #e5c07b —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #e06c75 —
constant.regexp.xi #c678dd —
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 #e06c75 —
meta.brace.square #abb2bf —
comment, punctuation.definition.comment #7f848e italic
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 #e06c75 —
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 #e06c75 —
entity.other.inherited-class #e5c07b —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
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 } !` ;
}