Skip to main content
Home Theme VS Code Peaceful Dracula Theme VsCode theme based on Dracula theme with a few changes to make it more peaceful
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 #0d1624 activityBar.border #0e0e1281 activityBar.foreground #989eb3 activityBar.inactiveForeground #868d9cAA activityBarBadge.background #989eb3 activityBarBadge.foreground #101c2c tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle strong — bold header #BD93F9 — source #F8F8F2 — meta.diff, meta.diff.header #6272A4 — markup.inserted
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Peaceful Dracula Theme — Peaceful Dracula Theme
badge.background #989eb3
badge.foreground #101c2c
breadcrumbPicker.background #122033
button.background #989eb3
button.foreground #101c2c
charts.blue #78dce8
charts.foreground #FFFFFFcc
charts.green #a9dc76
charts.lines #FFFFFFcc
charts.orange #fc9867
charts.purple #e991e3
charts.red #fc6a67
charts.yellow #ffd866
contrastActiveBorder #00000000
debugExceptionWidget.background #363a4a
debugExceptionWidget.border #0e0e1281
debugToolBar.background #363a4a
descriptionForeground #FFFFFFcc
diffEditor.border #0e0e1281
diffEditor.diagonalFill #363a4a
diffEditor.insertedTextBackground #52AB6230
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #E3553530
diffEditor.removedTextBorder #00000000
dropdown.background #122033
dropdown.border #868d9caa
dropdown.foreground #FFFFFFcc
editor.background #122033
editor.findMatchBackground #989eb320
editor.findMatchBorder #989eb360
editor.findMatchHighlightBackground #989eb320
editor.findMatchHighlightBorder #989eb340
editor.foreground #FFFFFFcc
editor.hoverHighlightBackground #989eb340
editor.inactiveSelectionBackground #989eb320
editor.lineHighlightBackground #989eb30c
editor.lineHighlightBorder #989eb31a
editor.rangeHighlightBackground #989eb320
editor.selectionBackground #989eb330
editor.selectionForeground #989eb3
editor.selectionHighlightBackground #00000000
editor.selectionHighlightBorder #989eb360
editor.wordHighlightBackground #989eb320
editor.wordHighlightStrongBackground #989eb340
editorBracketHighlight.foreground1 #dde74c
editorBracketHighlight.foreground2 #1bb616
editorBracketHighlight.foreground3 #fc25f5
editorBracketHighlight.foreground4 #0ba2ff
editorBracketHighlight.foreground5 #DA70D6
editorBracketHighlight.foreground6 #87cefa
editorBracketMatch.background #989eb320
editorBracketMatch.border #989eb340
editorCodeLens.foreground #FFFFFFcc
editorCursor.foreground #ffd866
editorGroup.border #0e0e1281
editorGroup.dropBackground #989eb315
editorGroupHeader.border #00000000
editorGroupHeader.noTabsBackground #122033
editorGroupHeader.tabsBackground #101c2c
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #52AB62cc
editorGutter.background #122033
editorGutter.commentRangeForeground #363a4a
editorGutter.deletedBackground #E35535cc
editorGutter.modifiedBackground #00B3BDcc
editorHoverWidget.background #363a4a
editorHoverWidget.border #101c2c
editorIndentGuide.activeBackground1 #868d9cbb
editorIndentGuide.background1 #868d9c30
editorLineNumber.activeForeground #e1e4e8
editorLineNumber.foreground #444d56
editorLink.activeForeground #FFFFFFcc
editorMarkerNavigation.background #101c2c
editorMarkerNavigationError.background #E3553590
editorMarkerNavigationInfo.background #00B3BD90
editorMarkerNavigationWarning.background #fc6a6790
editorOverviewRuler.border #0e0e1281
editorOverviewRuler.commonContentForeground #ffd866
editorOverviewRuler.currentContentForeground #E35535
editorOverviewRuler.incomingContentForeground #52AB62
editorSuggestWidget.background #122033
editorSuggestWidget.border #0e0e1281
editorSuggestWidget.foreground #FFFFFF80
editorSuggestWidget.highlightForeground #ffd866
editorSuggestWidget.selectedBackground #989eb34d
editorWarning.border #00000000
editorWarning.foreground #ffd866
editorWhitespace.foreground #868d9c60
editorWidget.background #363a4a
editorWidget.resizeBorder #989eb350
errorForeground #E35535
extensionButton.prominentBackground #989eb39d
extensionButton.prominentForeground #101c2c
extensionButton.prominentHoverBackground #989eb3
focusBorder #989eb340
foreground #FFFFFFcc
gitDecoration.conflictingResourceForeground #989eb3
gitDecoration.deletedResourceForeground #E35535
gitDecoration.ignoredResourceForeground #868d9c
gitDecoration.modifiedResourceForeground #00B3BD
gitDecoration.untrackedResourceForeground #52AB62
icon.foreground #FFFFFFcc
input.background #00000000
input.border #989eb330
input.foreground #FFFFFF80
input.placeholderForeground #989eb3
inputOption.activeBorder #989eb3
inputValidation.errorBackground #363a4a
inputValidation.errorBorder #ffd866
inputValidation.infoBackground #363a4a
inputValidation.infoBorder #989eb3
inputValidation.warningBackground #363a4a
inputValidation.warningBorder #ffd866
list.activeSelectionBackground #989eb345
list.activeSelectionForeground #FFFFFFcc
list.dropBackground #989eb315
list.errorForeground #E35535
list.focusBackground #989eb340
list.focusForeground #FFFFFF80
list.highlightForeground #ffd866
list.hoverBackground #0e0e1260
list.hoverForeground #FFFFFFcc
list.inactiveSelectionBackground #989eb345
list.warningForeground #fc6a67
menu.background #363a4a
menu.foreground #FFFFFF80
menu.selectionBackground #989eb320
menu.selectionForeground #FFFFFF80
menu.separatorBackground #0e0e1281
menubar.selectionBackground #363a4a
menubar.selectionForeground #FFFFFF80
merge.border #0e0e1281
merge.commonContentBackground #ffd86630
merge.commonHeaderBackground #ffd86680
merge.currentContentBackground #52AB6230
merge.currentHeaderBackground #52AB6280
merge.incomingContentBackground #00B3BD30
merge.incomingHeaderBackground #00B3BD80
notificationCenterHeader.background #363a4a
notificationCenterHeader.foreground #FFFFFF80
notificationLink.foreground #ffd866
notifications.background #363a4a
notifications.border #989eb350
notifications.foreground #FFFFFF80
panel.background #101c2c
panel.border #0e0e1281
panelInput.border #868d9c
panelSection.border #0e0e1281
panelSectionHeader.background #868d9c20
panelSectionHeader.border #0e0e1281
panelSectionHeader.foreground #FFFFFFcc
panelTitle.activeBorder #52d794
panelTitle.activeForeground #989eb3
panelTitle.inactiveForeground #868d9c
peekView.border #989eb3
peekViewEditor.background #363a4a40
peekViewEditor.matchHighlightBackground #363a4a40
peekViewEditorGutter.background #363a4a40
peekViewResult.background #363a4a40
peekViewResult.fileForeground #FFFFFFcc
peekViewResult.lineForeground #FFFFFFcc
peekViewResult.matchHighlightBackground #363a4a
peekViewResult.selectionBackground #363a4a
peekViewResult.selectionForeground #FFFFFFcc
peekViewTitle.background #0e0e1281
peekViewTitleDescription.foreground #FFFFFFcc
peekViewTitleLabel.foreground #FFFFFFcc
pickerGroup.border #0e0e1281
pickerGroup.foreground #FFFFFFcc
progressBar.background #ffd866
sash.hoverBorder #989eb350
scrollbar.shadow #0e0e1281
scrollbarSlider.activeBackground #989eb360
scrollbarSlider.background #989eb340
scrollbarSlider.hoverBackground #989eb350
selection.background #989eb360
settings.headerForeground #989eb3
settings.modifiedItemIndicator #989eb3
sideBar.background #101c2c
sideBar.border #0e0e1281
sideBar.foreground #FFFFFFcc
sideBarSectionHeader.background #101c2c
sideBarSectionHeader.border #0e0e1281
sideBarSectionHeader.foreground #FFFFFFcc
sideBarTitle.foreground #868d9c
statusBar.background #101c2c
statusBar.border #0e0e1281
statusBar.debuggingBackground #989eb344
statusBar.debuggingForeground #FFFFFFcc
statusBar.foreground #00B3BDcc
statusBar.noFolderBackground #0e0e1281
statusBar.noFolderBorder #0e0e1281
statusBar.noFolderForeground #FFFFFFcc
statusBarItem.activeBackground #363a4a
statusBarItem.errorBackground #fc6a67
statusBarItem.hoverBackground #868d9c30
statusBarItem.prominentBackground #0e0e1281
statusBarItem.prominentHoverBackground #363a4a
tab.activeBackground #122033
tab.activeBorderTop #2ecfa8
tab.activeForeground #989eb3
tab.border #00000000
tab.hoverBackground #122033cc
tab.hoverBorder #00000000
tab.inactiveBackground #101c2c
tab.inactiveForeground #868d9c
tab.lastPinnedBorder #0e0e1281
tab.unfocusedActiveForeground #FFFFFFcc
tab.unfocusedHoverBackground #989eb310
tab.unfocusedHoverBorder #00000000
tab.unfocusedInactiveForeground #FFFFFFcc
terminal.ansiBlack #122033
terminal.ansiBlue #00B3BD
terminal.ansiBrightBlack #00B3BD
terminal.ansiBrightBlue #00B3BD
terminal.ansiBrightCyan #78e8c6
terminal.ansiBrightGreen #52AB62
terminal.ansiBrightMagenta #e991e3
terminal.ansiBrightRed #E35535
terminal.ansiBrightWhite #00B3BD
terminal.ansiBrightYellow #ffd866
terminal.ansiCyan #78e8c6
terminal.ansiGreen #52AB62
terminal.ansiMagenta #e991e3
terminal.ansiRed #E35535
terminal.ansiWhite #FFFFFFcc
terminal.ansiYellow #ffd866
terminal.background #101c2c
terminalCursor.background #ffd866
terminalCursor.foreground #ffd866
textBlockQuote.background #00B3BD34
textBlockQuote.border #00B3BDb9
textCodeBlock.background #00B3BD34
textLink.activeForeground #00B3BD
textLink.foreground #00B3BD
textPreformat.foreground #ffd866
textSeparator.foreground #989eb3
titleBar.activeBackground #101c2c
titleBar.activeForeground #868d9c
titleBar.border #0e0e1281
titleBar.inactiveBackground #0e0e1281
titleBar.inactiveForeground #868d9c
tree.indentGuidesStroke #868d9c70
walkThrough.embeddedEditorBackground #122033
widget.shadow #0e0e1281 #50FA7B
invalid #FF5555 underline italic
invalid.deprecated #F8F8F2 underline italic
entity.name.filename #F1FA8C —
markup.underline — underline
markup.heading #BD93F9 bold
markup.italic #F1FA8C italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext #8BE9FD —
markup.inline.raw, markup.raw.restructuredtext #50FA7B —
markup.underline.link, markup.underline.link.image #8BE9FD —
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title #FF4EB2 —
entity.name.directive.restructuredtext, markup.quote #F1FA8C italic
meta.separator.markdown #6272A4 —
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown #50FA7B —
punctuation.definition.constant.restructuredtext #BD93F9 —
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end #BD93F9 —
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end #F8F8F2 —
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end #F1FA8C —
entity.name.type.class, entity.name.class #8BE9FD
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #BD93F9 —
entity.other.inherited-class #8BE9FD —
comment, punctuation.definition.comment, unused.comment, wildcard.comment #6272A4 italic bold
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #FF4EB2 —
comment.block.documentation entity.name.type #8BE9FD —
comment.block.documentation entity.name.type punctuation.definition.bracket #8BE9FD —
comment.block.documentation variable #FFB86C —
constant, variable.other.constant #BD93F9 —
constant.character.escape, constant.character.string.escape, constant.regexp #FF4EB2 —
entity.other.attribute-name.parent-selector #FF4EB2 —
entity.other.attribute-name #50FA7B italic bold
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix #50FA7B —
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter #FFB86C italic bold
meta.decorator variable.other.readwrite, meta.decorator variable.other.property #50FA7B —
meta.decorator variable.other.object #50FA7B —
keyword, punctuation.definition.keyword #FF4EB2 —
keyword.control.new, keyword.operator.new — bold
support.function.magic, support.variable, variable.other.predefined #BD93F9 —
support.function, support.type.property-name — —
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation #FF4EB2 —
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor #F8F8F2 —
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile #FF4EB2 —
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml #8BE9FD —
constant.other.date, constant.other.timestamp #FFB86C —
variable.other.alias.yaml #50FA7B italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #FF4EB2 —
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml #8BE9FD —
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type #FFB86C —
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp #F1FA8C —
punctuation.definition.group.capture.regexp #FF4EB2 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #FF5555 —
punctuation.definition.character-class.regexp #8BE9FD —
punctuation.definition.group.regexp #FFB86C —
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp #FF5555 —
meta.assertion.look-ahead.regexp #50FA7B —
punctuation.definition.string.begin, punctuation.definition.string.end #E9F284 —
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #8BE9FE —
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape #6272A4 —
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx #F8F8F2 —
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable #FFB86C —
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable #F8F8F2
meta.selectionset.graphql variable #F1FA8C —
meta.selectionset.graphql meta.arguments variable #F8F8F2 —
entity.name.fragment.graphql, variable.fragment.graphql #8BE9FD —
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell #F8F8F2 —
source.shell variable.other #BD93F9 —
meta.scope.prerequisites.makefile #F1FA8C —
meta.attribute-selector.scss #F1FA8C —
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss #F8F8F2 —
meta.preprocessor.haskell #6272A4 —
storage.type.function, keyword.control — italic 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...
main*
Peaceful Dracula Theme | Coding Theme Button.tsx
31
~/my-project
$
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 } !` ;
}