Skip to main content
Home Theme VS Code Atomicc A very dark theme with a clean and minimal UI structure, vibrant syntax and green terminal.
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 #00000000 activityBar.activeBorder #00000000 activityBar.background #111111 activityBar.border #00000000 activityBar.foreground #CCCCCC activityBar.inactiveForeground #555555 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, comment storage.type, comment variable, comment support.variable, comment support.class, comment support.type, comment entity.name.type, comment entity.name.class, comment keyword.operator, comment: comment, comment.line.double-slash, comment entity.name.class, comment entity.name.type, comment keyword.operator, comment support.class, comment support.type, comment support.variable, comment variable, Double-Slashed Comment #888888 — string #32D698 — string.quoted #32D698 — support.constant.math
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background #4C6EFF
activityBarBadge.foreground #FFFFFF
activityBarTop.activeBackground #00000000
activityBarTop.activeBorder #00000000
activityBarTop.background #111111
activityBarTop.border #00000000
activityBarTop.foreground #EEEEEE
activityBarTop.inactiveForeground #555555
badge.background #4C6EFF
badge.foreground #FFFFFF
breadcrumb.activeSelectionForeground #CCCCCC
breadcrumb.background #191919
breadcrumb.focusForeground #CCCCCC
breadcrumb.foreground #CCCCCC80
button.background #555555
button.foreground #EEEEEE
button.hoverBackground #4C6EFF
button.secondaryBackground #222222
button.secondaryForeground #EEEEEE
button.secondaryHoverBackground #555555
checkbox.background #191919
checkbox.border #00000000
checkbox.foreground #CCCCCC
debugExceptionWidget.background #000000
debugExceptionWidget.border #00000000
debugToolBar.background #000000
debugToolBar.border #00000000
diffEditor.border #333333
diffEditor.insertedTextBackground #A4F64430
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #FF482930
diffEditor.removedTextBorder #00000000
dropdown.background #191919
dropdown.border #00000000
dropdown.foreground #CCCCCC
editor.background #000000
editor.findMatchBackground #00000000
editor.findMatchBorder #CCCCCC
editor.findMatchForeground #FFFFFF
editor.findMatchHighlightBackground #4C6EFF50
editor.findMatchHighlightBorder #00000000
editor.findMatchHighlightForeground #FFFFFF
editor.findRangeHighlightBackground #222222
editor.findRangeHighlightBorder #00000000
editor.foldBackground #4C6EFF50
editor.foreground #CCCCCC
editor.hoverHighlightBackground #EEEEEE30
editor.inactiveSelectionBackground #EEEEEE30
editor.lineHighlightBackground #222222
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #4C6EFF50
editor.rangeHighlightBorder #00000000
editor.selectionBackground #CCCCCC40
editor.selectionHighlightBackground #CCCCCC50
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #EEEEEE30
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #EEEEEE30
editor.wordHighlightStrongBorder #00000000
editorBracketMatch.background #CCCCCC30
editorBracketMatch.border #CCCCCC
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #CCCCCC
editorError.background #FF482950
editorError.border #00000000
editorError.foreground #FF4829
editorGroup.border #222222
editorGroup.emptyBackground #000000
editorGroupHeader.border #222222
editorGroupHeader.tabsBackground #111111
editorGroupHeader.tabsBorder #222222
editorGutter.addedBackground #A4F644
editorGutter.background #000000
editorGutter.commentRangeForeground #555555
editorGutter.deletedBackground #FF4829
editorGutter.foldingControlForeground #555555
editorGutter.modifiedBackground #4C6EFF
editorHoverWidget.background #191919
editorHoverWidget.border #333333
editorHoverWidget.foreground #CCCCCC
editorIndentGuide.activeBackground #555555
editorIndentGuide.background #222222
editorInfo.background #4C6EFF50
editorInfo.border #00000000
editorInfo.foreground #4C6EFF
editorLineNumber.activeForeground #CCCCCC
editorLineNumber.foreground #555555
editorLink.activeForeground #4C6EFF
editorMarkerNavigation.background #191919
editorMarkerNavigationError.background #FF4829
editorMarkerNavigationInfo.background #4C6EFF
editorMarkerNavigationWarning.background #FFD319
editorOverviewRuler.background #000000
editorOverviewRuler.border #00000000
editorRuler.foreground #555555
editorSuggestWidget.background #191919
editorSuggestWidget.border #333333
editorSuggestWidget.foreground #CCCCCC
editorSuggestWidget.highlightForeground #4C6EFF
editorSuggestWidget.selectedBackground #CCCCCC20
editorWarning.background #FFD31950
editorWarning.border #00000000
editorWarning.foreground #FFD319
editorWhitespace.foreground #CCCCCC30
editorWidget.background #191919
editorWidget.foreground #CCCCCC
editorWidget.resizeBorder #00000000
focusBorder #00000000
foreground #CCCCCC
gitDecoration.addedResourceForeground #A4F644
gitDecoration.conflictingResourceForeground #8C1EFF
gitDecoration.deletedResourceForeground #FF4829
gitDecoration.ignoredResourceForeground #555555
gitDecoration.modifiedResourceForeground #FFD319
gitDecoration.stageDeletedResourceForeground #FF4829
gitDecoration.stageModifiedResourceForeground #FFD319
gitDecoration.submoduleResourceForeground #4C6EFF
gitDecoration.untrackedResourceForeground #FF2975
icon.foreground #CCCCCC
input.background #222222
input.border #00000000
input.foreground #CCCCCC
input.placeholderForeground #666666
list.activeSelectionBackground #222222
list.activeSelectionForeground #FFFFFF
list.dropBackground #222222
list.focusBackground #191919
list.focusForeground #EEEEEE
list.highlightForeground #4C6EFF
list.hoverBackground #222222
list.hoverForeground #CCCCCC
list.inactiveSelectionBackground #222222
list.inactiveSelectionForeground #FFFFFF
listFilterWidget.background #4C6EFF
listFilterWidget.noMatchesOutline #00000000
listFilterWidget.outline #00000000
menu.background #191919
menu.border #00000000
menu.foreground #CCCCCC
menu.selectionBackground #55555550
menu.selectionBorder #00000000
menu.selectionForeground #CCCCCC
menu.separatorBackground #333333
menubar.selectionBackground #55555550
menubar.selectionBorder #00000000
menubar.selectionForeground #CCCCCC
merge.commonContentBackground #19191960
merge.commonHeaderBackground #19191990
merge.currentContentBackground #4C6EFF60
merge.currentHeaderBackground #4C6EFF90
merge.incomingContentBackground #8C1EFF60
merge.incomingHeaderBackground #8C1EFF90
minimap.background #111111
minimap.errorHighlight #FF4829
minimap.findMatchHighlight #4C6EFF90
minimap.selectionHighlight #4C6EFF50
minimap.warningHighlight #FFD319
minimapGutter.addedBackground #A4F644
minimapGutter.deletedBackground #FF4829
minimapGutter.modifiedBackground #4C6EFF
minimapSlider.activeBackground #00000080
minimapSlider.background #00000080
minimapSlider.hoverBackground #00000080
notificationCenter.border #333333
notificationCenterHeader.background #222222
notificationCenterHeader.foreground #CCCCCC
notifications.background #191919
notifications.border #333333
notifications.foreground #CCCCCC
notificationsErrorIcon.foreground #FF4829
notificationsInfoIcon.foreground #4C6EFF
notificationsWarningIcon.foreground #FFD319
notificationToast.border #333333
outputView.background #000000
panel.background #111111
panel.border #222222
panelInput.border #00000000
panelSection.border #00000000
panelTitle.activeBorder #00000000
panelTitle.activeForeground #EEEEEE
panelTitle.border #222222
panelTitle.inactiveForeground #666666
peekView.border #333333
peekViewEditor.background #191919
peekViewEditor.matchHighlightBackground #FFD31930
peekViewEditor.matchHighlightBorder #FFD319
peekViewEditorGutter.background #191919
peekViewResult.background #222222
peekViewResult.fileForeground #EEEEEE
peekViewResult.lineForeground #CCCCCC
peekViewResult.matchHighlightBackground #FFD31930
peekViewResult.selectionBackground #CCCCCC20
peekViewResult.selectionForeground #EEEEEE
peekViewTitle.background #4C6EFF
peekViewTitleDescription.foreground #EEEEEE
peekViewTitleLabel.foreground #FFFFFF
pickerGroup.border #333333
pickerGroup.foreground #CCCCCC
progressBar.background #4C6EFF
quickInput.background #191919
quickInput.foreground #CCCCCC
quickInputList.focusBackground #4C6EFF
quickInputList.focusForeground #FFFFFF
scrollbar.shadow #000000
scrollbarSlider.activeBackground #222222
scrollbarSlider.background #222222
scrollbarSlider.hoverBackground #222222
selection.background #CCCCCC50
settings.focusedRowBackground #FFFFFF07
settings.headerForeground #CCCCCC
sideBar.background #111111
sideBar.border #222222
sideBar.dropBackground #222222
sideBar.foreground #CCCCCC
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #222222
sideBarSectionHeader.foreground #EEEEEE
sideBarTitle.background #111111
sideBarTitle.border #00000000
sideBarTitle.foreground #EEEEEE
statusBar.background #111111
statusBar.border #222222
statusBar.debuggingBackground #4C6EFF
statusBar.debuggingBorder #00000000
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #CCCCCC
statusBar.noFolderBackground #191919
statusBar.noFolderBorder #222222
statusBar.noFolderForeground #CCCCCC
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #222222
statusBarItem.remoteBackground #111111
statusBarItem.remoteForeground #CCCCCC
tab.activeBackground #000000
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #EEEEEE
tab.border #00000000
tab.hoverBackground #000000
tab.hoverBorder #00000000
tab.hoverForeground #CCCCCC
tab.inactiveBackground #111111
tab.inactiveForeground #777777
terminal.ansiBlack #000000
terminal.ansiBlue #4C6EFF
terminal.ansiBrightBlack #555555
terminal.ansiBrightBlue #6F8BFF
terminal.ansiBrightCyan #81D8FF
terminal.ansiBrightGreen #A4F644
terminal.ansiBrightMagenta #F564FF
terminal.ansiBrightRed #FF6C53
terminal.ansiBrightWhite #EEEEEE
terminal.ansiBrightYellow #FFE05E
terminal.ansiCyan #4CC8FF
terminal.ansiGreen #A4F644
terminal.ansiMagenta #F222FF
terminal.ansiRed #CD3131
terminal.ansiWhite #CCCCCC
terminal.ansiYellow #FFD319
terminal.background #000000
terminal.border #222222
terminal.foreground #2FA43D
terminal.selectionBackground #CCCCCC30
terminalCursor.background #000000
terminalCursor.foreground #2FA43D
textLink.foreground #4C6EFF
titleBar.activeBackground #191919
titleBar.activeForeground #CCCCCC
titleBar.border #00000000
titleBar.inactiveBackground #191919
titleBar.inactiveForeground #CCCCCC
tree.inactiveIndentGuidesStroke #333333
tree.indentGuidesStroke #555555
walkThrough.embeddedEditorBackground #00000050
widget.shadow #000000 #F3F359
constant.numeric, constant.character.numeric #F09030 —
constant.language, punctuation.definition.constant, variable.other.constant #F887FF —
constant.character, constant.other #F887FF —
constant.character.escape #F09030 —
string.regexp, string.regexp keyword.other #F887FF —
meta.function punctuation.separator.comma #EEEEEE —
punctuation.accessor, keyword #EB0869 —
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js #EB0869 —
entity.name.class, meta.class entity.name.type.class #F3F359 —
entity.other.inherited-class #06FBCF italic
entity.name.function #F887FF —
variable.parameter #B60DFC —
punctuation.definition.tag, meta.tag #F887FF —
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html #EB0869 —
entity.other.attribute-name #F3F359 —
entity.name.tag.custom #F3F359 —
support.function, support.constant #F887FF —
support.constant.meta.property-value #F887FF —
support.type, support.class #F3F359 —
support.variable.dom #F3F359 —
invalid.deprecated #EEEEEE —
keyword.operator.relational #EB0869 —
keyword.operator.assignment #EB0869 —
comment.line.double-slash #777777 —
constant.language.null #EB0869 —
meta.delimiter.period #EB0869 —
punctuation.definition.string #32D698 —
constant.language.boolean #EB0869 —
variable.parameter.function #F887FF —
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag #F887FF —
meta.property-list entity.name.tag.reference #EB0869 —
constant.other.color.rgb-value punctuation.definition.constant #F09030 —
constant.other.color #F3F359 —
keyword.other.unit #F3F359 —
entity.other.attribute-name.id #FAD430 —
meta.property-name #F887FF —
entity.name.tag.doctype, meta.tag.sgml.doctype #EB0869 —
punctuation.definition.parameters #32D698 —
keyword.control.operator #F887FF —
keyword.operator.logical #EB0869 —
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance #EB0869 —
variable.other.property, variable.other.object.property #F887FF —
entity.name.function #F887FF —
keyword.operator.comparison #EB0869 —
support.constant, keyword.other.special-method, keyword.other.new #F887FF —
invalid.unimplemented #EEEEEE —
variable.language #EB0869 —
support.variable.property #F887FF —
variable.function #F887FF —
variable.interpolation #EC5F67 —
meta.function-call #F887FF —
punctuation.section.embedded #D3423E —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #EEEEEE —
punctuation.terminator #EB0869 —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #32D698 —
string.template meta.template.expression #D3423E —
string.template punctuation.definition.string #FFFFFF —
variable.assignment.coffee #F887FF —
variable.parameter.function.coffee #EEEEEE —
variable.assignment.coffee #F887FF —
variable.other.readwrite.cs #EEEEEE —
entity.name.type.class.cs, storage.type.cs #87E1FF —
entity.name.type.namespace.cs #CCCCCC —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css #EB0869 —
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #EB0869 —
meta.attribute-selector.css entity.other.attribute-name.attribute #F09030 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #F887FF —
source.elixir entity.name.function #F3F359 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #F887FF —
source.elixir punctuation.definition.string #F887FF —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #F3F359 —
source.elixir .punctuation.binary.elixir #EB0869 —
source.go meta.function-call.go #EEEEEE —
entity.other.attribute-name.id.html #F3F359 —
punctuation.definition.tag.html #F887FF —
meta.tag.sgml.doctype.html #EB0869 —
meta.class entity.name.type.class.js #F09030 —
meta.method.declaration storage.type.js #F887FF
meta.js punctuation.definition.js #EEEEEE —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #EEEEEE —
variable.other.jsdoc, variable.other.phpdoc #78CCF0 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #EEEEEE —
variable.parameter.function.js #B60DFC —
variable.other.readwrite.js #FFFFFF —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #FFFFFF —
variable.js, variable.other.js #FFFFFF —
entity.name.type.js, entity.name.type.module.js #F09030 —
support.type.property-name.json #32D698 —
support.constant.json #F3F359 —
meta.structure.dictionary.value.json string.quoted.double #F887FF —
string.quoted.double.json punctuation.definition.string.json #F887FF —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #EB0869 —
variable.other.ruby #FFFFFF —
constant.language.symbol.hashkey.ruby #F887FF —
entity.name.tag.less #EB0869 —
keyword.other.unit.css #F3F359 —
meta.attribute-selector.less entity.other.attribute-name.attribute #F09030 —
markup.heading.markdown #F887FF —
markup.italic.markdown #EB0869 italic
markup.bold.markdown #F3F359 bold
markup.quote.markdown #777777 italic
markup.inline.raw.markdown #F887FF —
markup.underline.link.markdown, markup.underline.link.image.markdown #EB0869 —
string.other.link.title.markdown, string.other.link.description.markdown #FFFFFF —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #F887FF —
punctuation.definition.metadata.markdown #EB0869 —
beginning.punctuation.definition.list.markdown #F887FF —
variable.other.php #FFFFFF —
support.class.php #F09030 —
meta.function-call.php punctuation #FFFFFF —
variable.other.global.php #F3F359 —
variable.other.global.php punctuation.definition.variable #F3F359 —
constant.language.python #EB0869 —
variable.parameter.function.python, meta.function-call.arguments.python #B60DFC —
meta.function-call.python, meta.function-call.generic.python #CCCCCC —
punctuation.python #FFFFFF —
entity.name.function.decorator.python #F3F359 —
source.python variable.language.special #F887FF —
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #FFFFFF —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #F887FF —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #FFFFFF —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #F09030 —
entity.name.tag.scss, entity.name.tag.sass #EB0869 —
keyword.other.unit.scss, keyword.other.unit.sass #F3F359 —
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #FFFFFF —
entity.name.type.ts, entity.name.type.tsx #78CCF0 —
support.class.node.ts, support.class.node.tsx #F887FF —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #FFFFFF —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #FFFFFF —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #F887FF —
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx #F887FF —
entity.name.tag.yaml #F887FF —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, punctuation.definintion.string, punctuation —
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 } ! ` ;
}
Atomicc | Coding Theme