Skip to main content
Home Theme VS Code Dark Owl+ Theme inspired from 'Dark Owl' and VS Code's 'Dark+ (default dark)'
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 #01090e activityBar.border #044377 activityBar.foreground #5f7e97 activityBarBadge.background #007ACC activityBarBadge.foreground #ffffff badge.background #5f7e97 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file — italic markup.deleted.diff — italic markup.inserted.diff — italic comment — italic punctuation.accessor, keyword — italic storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#ffffff
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #A599E9
breadcrumbPicker.background #001122
button.background #7e57c2cc
button.foreground #ffffffcc
button.hoverBackground #7e57c2
contrastBorder #122d42
debugExceptionWidget.background #01090e
debugExceptionWidget.border #5f7e97
debugToolBar.background #01090e
diffEditor.insertedTextBackground #99b76d23
diffEditor.insertedTextBorder #c5e47833
diffEditor.removedTextBackground #ef535033
diffEditor.removedTextBorder #ef53504d
dropdown.background #01090e
dropdown.border #5f7e97
dropdown.foreground #ffffffcc
editor.background #1E1E1E
editor.findMatchBackground #5f7e9779
editor.findMatchHighlightBackground #1085bb5d
editor.foreground #D4D4D4
editor.hoverHighlightBackground #7e57c25a
editor.inactiveSelectionBackground #3A3D41
editor.lineHighlightBackground #0003
editor.rangeHighlightBackground #7e57c25a
editor.selectionBackground #1d3b53
editor.selectionHighlightBackground #ADD6FF26
editor.wordHighlightBackground #f6bbe533
editor.wordHighlightStrongBackground #e2a2f433
editorBracketMatch.background #5f7e974d
editorCodeLens.foreground #5e82ceb4
editorCursor.foreground #80a4c2
editorError.foreground #EF5350
editorGroup.border #043862
editorGroup.dropBackground #6a85b473
editorGroup.emptyBackground #01090e
editorGroupHeader.border #02223b
editorGroupHeader.noTabsBackground #01090e
editorGroupHeader.tabsBackground #01090e
editorGroupHeader.tabsBorder #02223b
editorGutter.addedBackground #9CCC65
editorGutter.background #01090e
editorGutter.deletedBackground #EF5350
editorGutter.modifiedBackground #e2b93d
editorHoverWidget.background #01090e
editorHoverWidget.border #5f7e97
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorLineNumber.activeForeground #e4e9f2
editorLineNumber.foreground #4b6479
editorMarkerNavigation.background #0b2942
editorMarkerNavigationError.background #EF5350
editorMarkerNavigationWarning.background #FFCA28
editorOverviewRuler.border #011727
editorOverviewRuler.commonContentForeground #7e57c2
editorOverviewRuler.currentContentForeground #7e57c2
editorOverviewRuler.incomingContentForeground #7e57c2
editorRuler.foreground #5e81ce52
editorSuggestWidget.background #2C3043
editorSuggestWidget.border #2B2F40
editorSuggestWidget.foreground #d6deeb
editorSuggestWidget.highlightForeground #ffffff
editorSuggestWidget.selectedBackground #5f7e97
editorWarning.foreground #b39554
editorWidget.background #021320
editorWidget.border #5f7e97
errorForeground #EF5350
extensionButton.prominentBackground #7e57c2cc
extensionButton.prominentForeground #ffffffcc
extensionButton.prominentHoverBackground #7e57c2
focusBorder #122d42
foreground #d6deeb
gitDecoration.conflictingResourceForeground #ffeb95cc
gitDecoration.deletedResourceForeground #EF5350
gitDecoration.ignoredResourceForeground #395a75
gitDecoration.modifiedResourceForeground #fccd11
gitDecoration.untrackedResourceForeground #72e53c
input.background #0b253a
input.border #5f7e97
input.foreground #ffffffcc
input.placeholderForeground #A6A6A6
inputOption.activeBorder #ffffffcc
inputValidation.errorBackground #AB0300F2
inputValidation.errorBorder #EF5350
inputValidation.infoBackground #00589EF2
inputValidation.infoBorder #64B5F6
inputValidation.warningBackground #675700F2
inputValidation.warningBorder #FFCA28
list.activeSelectionBackground #234d708c
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #FFF
list.dropBackground #383B3D
list.focusBackground #010d18
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #01090e
list.hoverForeground #ffffff
list.inactiveSelectionBackground #0e293f
list.inactiveSelectionForeground #5f7e97
list.invalidItemForeground #975f94
menu.background #303031
menu.foreground #CCCCCC
merge.currentHeaderBackground #5f7e97
merge.incomingHeaderBackground #7e57c25a
notificationCenter.border #262a39
notificationLink.foreground #80CBC4
notifications.background #01111d
notifications.border #262a39
notifications.foreground #ffffffcc
notificationToast.border #262a39
panel.background #000508
panel.border #043862
panelTitle.activeBorder #5f7e97
panelTitle.activeForeground #ffffffcc
panelTitle.inactiveForeground #d6deeb80
peekView.border #5f7e97
peekViewEditor.background #01090e
peekViewEditor.matchHighlightBackground #7e57c25a
peekViewResult.background #01090e
peekViewResult.fileForeground #5f7e97
peekViewResult.lineForeground #5f7e97
peekViewResult.matchHighlightBackground #ffffffcc
peekViewResult.selectionBackground #2E3250
peekViewResult.selectionForeground #5f7e97
peekViewTitle.background #01090e
peekViewTitleDescription.foreground #697098
peekViewTitleLabel.foreground #5f7e97
pickerGroup.border #01090e
pickerGroup.foreground #d1aaff
ports.iconRunningProcessForeground #369432
scrollbar.shadow #032d4e80
scrollbarSlider.activeBackground #032d4e80
scrollbarSlider.background #01172780
scrollbarSlider.hoverBackground #02223b80
selection.background #4373c2
sideBar.background #01090e
sideBar.border #043862
sideBar.foreground #aebcd6
sideBarSectionHeader.background #0000
sideBarSectionHeader.border #ccc3
sideBarSectionHeader.foreground #bbc7dd
sideBarTitle.foreground #BBBBBB
statusBar.background #01090e
statusBar.border #262A39
statusBar.debuggingBackground #202431
statusBar.debuggingBorder #1F2330
statusBar.foreground #5f7e97
statusBar.noFolderBackground #01090e
statusBar.noFolderBorder #25293A
statusBarItem.activeBackground #202431
statusBarItem.hoverBackground #202431
statusBarItem.prominentBackground #202431
statusBarItem.prominentHoverBackground #202431
statusBarItem.remoteBackground #16825D
statusBarItem.remoteForeground #FFF
tab.activeBackground #011727
tab.activeBorder #0570c7
tab.activeBorderTop #02223b
tab.activeForeground #e4e9f2
tab.border #02223b
tab.inactiveBackground #01090e
tab.inactiveForeground #aebcd6
tab.lastPinnedBorder #ccc3
tab.unfocusedActiveBorder #02223b
tab.unfocusedActiveForeground #5f7e97
tab.unfocusedInactiveForeground #5f7e97
terminal.ansiBlack #01090e
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #575656
terminal.ansiBrightBlue #82AAFF
terminal.ansiBrightCyan #7fdbca
terminal.ansiBrightGreen #22da6e
terminal.ansiBrightMagenta #C792EA
terminal.ansiBrightRed #EF5350
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffeb95
terminal.ansiCyan #21c7a8
terminal.ansiGreen #22da6e
terminal.ansiMagenta #C792EA
terminal.ansiRed #EF5350
terminal.ansiWhite #ffffff
terminal.ansiYellow #c5e478
terminal.selectionBackground #1b90dd4d
terminalCursor.background #234d70
textCodeBlock.background #4f4f4f
titleBar.activeBackground #01090e
titleBar.activeForeground #eeefff
titleBar.inactiveBackground #010e1a
walkThrough.embeddedEditorBackground #01090e
widget.shadow #01090e entity.name.function — italic
entity.other.attribute-name — italic
keyword.operator.relational — italic
meta.delimiter.period — italic
entity.name.tag.doctype, meta.tag.sgml.doctype — italic
variable.other.object.property — italic
entity.name.function — italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx — italic
source.elixir .punctuation.binary.elixir — italic
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go — italic
meta.tag.sgml.doctype.html — italic
variable.other.object.js — italic
markup.italic.markdown — italic
markup.quote.markdown — italic
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file — italic
markup.deleted.diff — italic
markup.inserted.diff — italic
punctuation.accessor, keyword — italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx — italic
entity.name.function — italic
entity.other.attribute-name — italic
keyword.operator.relational — italic
meta.delimiter.period — italic
entity.name.tag.doctype, meta.tag.sgml.doctype — italic
variable.other.object.property — italic
entity.name.function — italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx — italic
source.elixir .punctuation.binary.elixir — italic
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go — italic
meta.tag.sgml.doctype.html — italic
variable.other.object.js — italic
markup.italic.markdown — italic
markup.quote.markdown — italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #DCDCAA —
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, constant.other.placeholder #9CDCFE —
variable.other.constant, variable.other.enummember #4FC1FF —
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 —
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file — italic
markup.deleted.diff — italic
markup.inserted.diff — italic
punctuation.accessor, keyword — italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx — italic
entity.name.function — italic
entity.other.attribute-name — italic
keyword.operator.relational — italic
meta.delimiter.period — italic
entity.name.tag.doctype, meta.tag.sgml.doctype — italic
variable.other.object.property — italic
entity.name.function — italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx — italic
source.elixir .punctuation.binary.elixir — italic
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go — italic
meta.tag.sgml.doctype.html — italic
variable.other.object.js — italic
markup.italic.markdown — italic
markup.quote.markdown — italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #DCDCAA —
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, constant.other.placeholder #9CDCFE —
variable.other.constant, variable.other.enummember #4FC1FF —
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 —
meta.embedded, source.groovy.embedded #D4D4D4 —
constant.language #569cd6 —
constant.numeric, 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.scss #d7ba7d —
markup.underline — underline
markup.heading #569cd6 bold
markup.strikethrough — strikethrough
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, 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 —
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*
Dark Owl+ | 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 } !` ;
}