Skip to main content
Home Theme VS Code One Dark Dimmed Modified version of Atom One Dark theme, with same syntax colors but different panel colors
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 #495155 activityBar.foreground #d7dae0 activityBarBadge.background #528bff activityBarBadge.foreground #d7dae0 badge.background #528bff badge.foreground #d7dae0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #5C6370 — comment markup.link #5C6370 — entity.name.type #E5C07B — entity.other.inherited-class #98C379 — keyword
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
One Dark Dimmed — One Dark Dimmed
button.background
#4d78cc
button.foreground #ffffff
button.hoverBackground #6087cf
diffEditor.insertedTextBackground #00809b33
dropdown.background #353b45
dropdown.border #181a1f
editor.background #212732
editor.lineHighlightBackground #2c313a
editor.selectionBackground #3e4451
editorCursor.foreground #528bff
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #3d474d
editorHoverWidget.background #3d474d
editorHoverWidget.border #181a1f
editorIndentGuide.background #3c4049
editorLineNumber.foreground #636d83
editorSuggestWidget.background #3d474d
editorSuggestWidget.border #181a1f
editorSuggestWidget.selectedBackground #2c313a
editorWhitespace.foreground #3c4049
editorWidget.background #3d474d
extensionButton.prominentBackground #2ba143
extensionButton.prominentHoverBackground #37af4e
focusBorder #528bff
input.background #1b1d23
input.border #181a1f
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.focusBackground #2c313a
list.highlightForeground #d7dae0
list.hoverBackground #2c313a66
list.inactiveSelectionBackground #2c313a
list.inactiveSelectionForeground #d7dae0
panel.background #121722
peekView.border #528bff
peekViewEditor.background #1b1d23
peekViewResult.background #3d474d
peekViewResult.selectionBackground #2c313a
peekViewTitle.background #1b1d23
pickerGroup.border #528bff
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566680
scrollbarSlider.hoverBackground #5a637580
sideBar.background #3d474d
sideBarSectionHeader.background #495155
statusBar.background #495155
statusBar.debuggingForeground #ffffff
statusBar.foreground #9da5b4
statusBar.noFolderBackground #3d474d
statusBarItem.hoverBackground #2c313a
tab.activeBackground #212732
tab.border #3d474d
tab.inactiveBackground #3d474d
terminal.background #121722
terminal.foreground #a1abb1
titleBar.activeBackground #3d474d
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #3d474d
titleBar.inactiveForeground #9da5b4
#C678DD
keyword.other.special-method #61AFEF —
keyword.other.unit #D19A66 —
storage.type.annotation, storage.type.primitive #C678DD —
storage.modifier.package, storage.modifier.import #C0C6D1 —
constant.variable #D19A66 —
constant.character.escape #56B6C2 —
constant.other.color #56B6C2 —
constant.other.symbol #56B6C2 —
variable.interpolation #BE5046 —
variable.parameter #C0C6D1 —
string.regexp source.ruby.embedded #E5C07B —
string.other.link #E06C75 —
punctuation.definition.comment #5C6370 —
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array #C0C6D1 —
punctuation.definition.heading, punctuation.definition.identity #61AFEF —
punctuation.definition.bold #E5C07B bold
punctuation.definition.italic #C678DD italic
punctuation.section.embedded #BE5046 —
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class #C0C6D1 —
support.function.any-method #61AFEF —
entity.name.function #61AFEF —
entity.name.class, entity.name.type.class #E5C07B —
entity.name.section #61AFEF —
entity.other.attribute-name #D19A66 —
entity.other.attribute-name.id #61AFEF —
meta.method-call, meta.method #C0C6D1 —
meta.definition.variable #E06C75 —
invalid.deprecated #523D14 —
markup.italic #C678DD italic
markup.heading punctuation.definition.heading #61AFEF —
source.c keyword.operator #C678DD —
source.cpp keyword.operator #C678DD —
source.cs keyword.operator #C678DD —
source.css property-name, source.css property-value #828997 —
source.css property-name.support, source.css property-value.support #C0C6D1 —
source.gfm link entity #61AFEF —
source.go storage.type.string #C678DD —
source.ini keyword.other.definition.ini #E06C75 —
source.java storage.modifier.import #E5C07B —
source.java storage.type #E5C07B —
source.java keyword.operator.instanceof #C678DD —
source.java-properties meta.key-pair #E06C75 —
source.java-properties meta.key-pair > punctuation #C0C6D1 —
source.js keyword.operator #56B6C2 —
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void #C678DD —
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 —
source.ruby constant.other.symbol > punctuation — —
source.python keyword.operator.logical.python #C678DD —
source.python variable.parameter #D19A66 —
meta.attribute.rust #BCC199 —
storage.modifier.lifetime.rust, entity.name.lifetime.rust #33E8EC —
keyword.unsafe.rust #CC6B73 —
support.type.property-name #C0C6D1 —
string.quoted.double punctuation #98C379 —
support.type.property-name.json #E06C75 —
support.type.property-name.json punctuation #E06C75 —
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx #56B6C2 —
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator #56B6C2 —
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx #C0C6D1 —
support.variable.dom.js, support.variable.dom.ts #E06C75 —
support.variable.property.dom.js, support.variable.property.dom.ts #E06C75 —
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition #BE5046 —
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters #C0C6D1 —
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block #C0C6D1 —
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma #C0C6D1 —
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx #E06C75 —
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx #E06C75 —
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #C678DD —
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx #C678DD —
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx #C0C6D1 —
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor #C0C6D1 —
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx #C0C6D1 —
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx #D19A66 —
source.js support.variable, source.ts support.variable, source.tsx support.variable #E06C75 —
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx #D19A66 —
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx #C678DD —
source.ts keyword.operator, source.tsx keyword.operator #56B6C2 —
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #C0C6D1 —
constant.language.import-export-all.js, constant.language.import-export-all.ts #E06C75 —
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx #56B6C2 —
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx #C0C6D1 —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx #E06C75 —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #D19A66 —
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts #E06C75 —
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor #98C379 —
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator #C0C6D1 —
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx #98C379 —
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx #C0C6D1 —
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable #C0C6D1 —
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type #C0C6D1 —
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator #C0C6D1 —
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded #C0C6D1 —
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable #E5C07B —
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx #E06C75 —
constant.language.json #56B6C2 —
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx #D19A66 —
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx #56B6C2 —
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition #98C379 —
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template #98C379 —
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx #C678DD —
source.python constant.other #C0C6D1 —
source.python constant #D19A66 —
constant.character.format.placeholder.other.python storage #D19A66 —
support.variable.magic.python #E06C75 —
meta.function.parameters.python #D19A66 —
punctuation.separator.annotation.python #C0C6D1 —
punctuation.separator.parameters.python #C0C6D1 —
entity.name.variable.field.cs #E06C75 —
source.cs keyword.operator #C0C6D1 —
variable.other.readwrite.cs #C0C6D1 —
variable.other.object.cs #C0C6D1 —
variable.other.object.property.cs #C0C6D1 —
entity.name.variable.property.cs #61AFEF —
keyword.other.unsafe.rust #E06C75 —
markup.raw.block.markdown #C0C6D1 —
punctuation.definition.variable.shell #E06C75 —
support.constant.property-value.css #C0C6D1 —
punctuation.definition.constant.css #D19A66 —
punctuation.separator.key-value.scss #E06C75 —
punctuation.definition.constant.scss #D19A66 —
meta.property-list.scss punctuation.separator.key-value.scss #C0C6D1 —
storage.type.primitive.array.java #E5C07B —
entity.name.section.markdown #E06C75 —
punctuation.definition.heading.markdown #E06C75 —
markup.heading.setext #C0C6D1 —
punctuation.definition.bold.markdown #D19A66 —
markup.inline.raw.markdown #98C379 —
beginning.punctuation.definition.list.markdown #E06C75 —
markup.quote.markdown #5C6370 italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #C0C6D1 —
punctuation.definition.metadata.markdown #C678DD —
markup.underline.link.markdown, markup.underline.link.image.markdown #C678DD —
string.other.link.title.markdown, string.other.link.description.markdown #61AFEF —
punctuation.separator.variable.ruby #E06C75 —
variable.other.constant.ruby #D19A66 —
keyword.operator.other.ruby #98C379 —
punctuation.definition.variable.php #E06C75 —
token.error-token #F44747 —
token.debug-token #B267E6 —
comment, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this — italic
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive —
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 } !` ;
}
One Dark Dimmed | Coding Theme