Skip to main content
Home Theme VS Code Uniform Dark+ Theme Color theme that unifies Visual Studio Code's default dark theme, designed for Visual Studio Code.
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 #252526 activityBarBadge.background #007acc editor.background #252526 editor.foreground #d4d4d4 editor.inactiveSelectionBackground #3a3d41 editor.selectionHighlightBackground #add6ff26 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #D4D4D4 — emphasis — italic strong — bold header #000080 — comment #6A9955 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Uniform Dark+ Theme — Uniform Dark+
editorGroupHeader.tabsBackground #252526
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
focusBorder #252526
input.placeholderForeground #a6a6a6
list.dropBackground #383b3d
menu.background #252526
menu.foreground #cccccc
settings.numberInputBackground #292929
settings.textInputBackground #292929
sideBar.background #252526
sideBarSectionHeader.background #252526
sideBarTitle.foreground #bbbbbb
statusBar.background #252526
statusBar.debuggingBackground #252526
statusBar.noFolderBackground #252526
statusBarItem.remoteBackground #252526
statusBarItem.remoteForeground #ffffff
tab.activeBorder #ffffff
tab.border #252526
tab.inactiveBackground #252526
titleBar.activeBackground #252526
titleBar.inactiveBackground #252526 constant.language #569CD6 —
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #B5CEA8 —
entity.name.tag.css #D7BA7D —
entity.other.attribute-name #9CDCFE —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #D7BA7D —
markup.underline — underline
markup.heading #569CD6 bold
punctuation.definition.quote.begin.markdown #6A9955 —
punctuation.definition.list.begin.markdown #6796E6 —
markup.inline.raw #CE9178 —
punctuation.definition.tag #808080 —
meta.preprocessor, entity.name.function.preprocessor #569CD6 —
meta.preprocessor.string #CE9178 —
meta.preprocessor.numeric #B5CEA8 —
meta.structure.dictionary.key.python #9CDCFE —
storage.modifier, keyword.operator.noexcept #569CD6 —
string, entity.name.operator.custom-literal.string, meta.embedded.assembly #CE9178 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #569CD6 —
meta.template.expression #D4D4D4 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #9CDCFE —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #569CD6 —
keyword.other.unit #B5CEA8 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #569CD6 —
support.function.git-rebase #9CDCFE —
constant.sha.git-rebase #B5CEA8 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #D4D4D4 —
variable.language #569CD6 —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #DCDCAA —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #4EC9B0 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #4EC9B0 —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C586C0 —
variable, meta.definition.variable.name, support.variable, entity.name.variable #9CDCFE —
meta.object-literal.key #9CDCFE —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #CE9178 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #CE9178 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #D16969 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #DCDCAA —
keyword.operator.quantifier.regexp #D7BA7D —
constant.character #569CD6 —
constant.character.escape #D7BA7D —
entity.name.label #C8C8C8 —
token.error-token #F44747 —
token.debug-token #B267E6 —
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*
Uniform Dark+ 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 } !` ;
}