Skip to main content
Home Theme VS Code I Believe In A Thing Called Love The Darkness a theme for Visual Studio Code
I Believe In A Thing Called Love | Coding Theme
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 #080808 activityBar.dropBorder #ffffff activityBar.foreground #e5ff00 activityBar.inactiveForeground #5f5f5f activityBarBadge.background #f3c900 activityBarBadge.foreground #080808 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle strong — bold emphasis, markup.italic — italic markup.underline — underline meta.template.expression, source.groovy.embedded, variable.language.wildcard.java #E0E0E0 — header #311B92 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
I Believe In A Thing Called Love — I Believe In A Thing Called Love
badge.background #424242
badge.foreground #ffffff
banner.background #01579b
banner.foreground #ffffff
banner.iconForeground #2196f3
breadcrumb.activeSelectionForeground #bdbdbd
breadcrumb.background #212121
breadcrumb.focusForeground #bdbdbd
breadcrumb.foreground #bdbdbd
breadcrumbPicker.background #212121
button.background #ff6600
button.foreground #ffffff
button.hoverBackground #ffae00
charts.blue #0773f3
charts.foreground #bdbdbd
charts.green #2bff00
charts.lines #bdbdbd
charts.orange #ff8300
charts.purple #b765ff
charts.red #ff4c2c
charts.yellow #e5ff00
debugExceptionWidget.background #3e2723
debugExceptionWidget.border #b71c1c
diffEditor.diagonalFill #bdbdbd33
diffEditor.insertedTextBackground #8bc34a33
diffEditor.removedTextBackground #e64a1933
dropdown.background #424242
dropdown.border #50504f
dropdown.foreground #eeeeee
editor.background #000000
editor.findMatchBackground #455a64
editor.findMatchBorder #b1006f
editor.findRangeHighlightBackground #42424266
editor.foreground #bdbdbd
editor.hoverHighlightBackground #01579b40
editor.inactiveSelectionBackground #01579b
editor.lineHighlightBorder #b1006f
editor.rangeHighlightBackground #ffffff0b
editor.selectionBackground #690042
editor.selectionHighlightBackground #01579b
editor.snippetFinalTabstopHighlightBorder #616161
editor.snippetTabstopHighlightBackground #757575
editor.symbolHighlightBackground #e6510055
editorBracketHighlight.foreground1 #f700ff
editorBracketHighlight.foreground2 #0b85fb
editorBracketHighlight.foreground3 #b765ff
editorBracketHighlight.foreground4 #e5ff00
editorBracketHighlight.foreground5 #2bff00
editorBracketHighlight.foreground6 #00d9ff
editorBracketHighlight.unexpectedBracket.foreground #ff0000
editorBracketMatch.background #33691e1a
editorBracketMatch.border #757575
editorCodeLens.foreground #9e9e9e
editorCursor.foreground #d0d0d0
editorError.background #ff000048
editorError.foreground #ff3c3c
editorGhostText.foreground #ffffff56
editorGroup.border #424242
editorGroup.dropBackground #00000040
editorGroupHeader.noTabsBackground #212121
editorGroupHeader.tabsBackground #080808
editorGroupHeader.tabsBorder #ffee00
editorGutter.background #000000
editorHint.foreground #eeeeeeb3
editorHoverWidget.background #000000
editorHoverWidget.border #424242
editorHoverWidget.statusBarBackground #212121
editorIndentGuide.activeBackground #e0e0e029
editorIndentGuide.background #e0e0e029
editorInfo.foreground #00b7ff
editorInlayHint.background #424242
editorInlayHint.foreground #ffffff
editorInlayHint.parameterBackground #424242
editorInlayHint.parameterForeground #ffffff
editorInlayHint.typeBackground #424242
editorInlayHint.typeForeground #ffffff
editorLightBulb.foreground #ffca28
editorLightBulbAutoFix.foreground #64b5f6
editorLineNumber.activeForeground #00ff00
editorLineNumber.foreground #007722
editorLink.activeForeground #e5ff00
editorOverviewRuler.border #7575754d
editorOverviewRuler.commonContentForeground #616161
editorOverviewRuler.currentContentForeground #4db6ac
editorOverviewRuler.errorForeground #f44336
editorOverviewRuler.findMatchForeground #fb8c007e
editorOverviewRuler.incomingContentForeground #42a5f5
editorOverviewRuler.infoForeground #e5ff00
editorOverviewRuler.rangeHighlightForeground #0277bd99
editorOverviewRuler.selectionHighlightForeground #9e9e9ecc
editorOverviewRuler.warningForeground #ffeb3b
editorPane.background #212121
editorRuler.foreground #616161
editorSuggestWidget.background #000000
editorSuggestWidget.border #424242
editorSuggestWidget.focusHighlightForeground #e2008f
editorSuggestWidget.foreground #bdbdbd
editorSuggestWidget.highlightForeground #e5ff00
editorSuggestWidget.selectedBackground #252525
editorSuggestWidget.selectedForeground #bdbdbd
editorSuggestWidget.selectedIconForeground #e2008f
editorSuggestWidgetStatus.foreground #e5ff00
editorUnicodeHighlight.border #9e9d24
editorUnnecessaryCode.opacity #000000a0
editorWarning.foreground #e5ff00
editorWhitespace.foreground #e0e0e029
editorWidget.background #000000
editorWidget.border #424242
errorForeground #f3002b
extensionBadge.remoteBackground #0277bd
extensionBadge.remoteForeground #ffffff
focusBorder #080808
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #e4676b
gitDecoration.deletedResourceForeground #ff4c2c
gitDecoration.ignoredResourceForeground #b1abab
gitDecoration.modifiedResourceForeground #f3c900
gitDecoration.renamedResourceForeground #2bff00
gitDecoration.stageDeletedResourceForeground #ff4c2c
gitDecoration.stageModifiedResourceForeground #e5ff00
gitDecoration.submoduleResourceForeground #0773f3
gitDecoration.untrackedResourceForeground #2bff00
icon.foreground #bdbdbd
input.background #424242
input.border #50504f
input.foreground #bdbdbd
input.placeholderForeground #bdbdbd
inputOption.activeBackground #1e88e5
inputOption.activeBorder #b2b2b1
inputOption.activeForeground #ffffff
inputOption.hoverBackground #61616180
inputValidation.errorBackground #4e342e
inputValidation.errorBorder #bf360c
inputValidation.infoBackground #263238
inputValidation.infoBorder #0277bd
inputValidation.warningBackground #212121
inputValidation.warningBorder #9e9d24
keybindingLabel.background #757575
keybindingLabel.border #424242
keybindingLabel.bottomBorder #424242
keybindingLabel.foreground #bdbdbd
list.activeSelectionBackground #080808
list.activeSelectionForeground #f3c900
list.dropBackground #333332
list.errorForeground #f3002b
list.filterMatchBorder #e6510055
list.focusAndSelectionOutline #ff20a9
list.focusBackground #080808
list.focusHighlightForeground #e2008f
list.focusOutline #b1006f
list.highlightForeground #e5ff00
list.hoverBackground #272727
list.inactiveSelectionBackground #080808
list.inactiveSelectionForeground #f3c900
list.invalidItemForeground #9e9d24
list.warningForeground #f3c900
listFilterWidget.background #5d4037
listFilterWidget.noMatchesOutline #bf360c
listFilterWidget.outline #00000000
menu.background #000000
menu.border #4d4d4d
menu.foreground #8c8c8a
menu.selectionBackground #080808
menu.selectionForeground #f3c900
menu.separatorBackground #bdbdbd
menubar.selectionBackground #000000
menubar.selectionForeground #f3c900
merge.commonContentBackground #616161
merge.commonHeaderBackground #616161
merge.currentContentBackground #4db6ac80
merge.currentHeaderBackground #4db6ac80
merge.incomingContentBackground #42a5f580
merge.incomingHeaderBackground #42a5f580
minimap.background #000000
minimap.errorHighlight #f44336
minimap.findMatchHighlight #b10070e0
minimap.foregroundOpacity #000000f0
minimap.infoHighlight #308dff
minimap.selectionHighlight #01579b
minimap.selectionOccurrenceHighlight #616161
minimap.warningHighlight #ffeb3b
minimapSlider.activeBackground #bdbdbd66
minimapSlider.background #75757566
minimapSlider.hoverBackground #616161b3
notificationCenter.border #2c2c2c
notificationCenterHeader.background #212121
notificationLink.foreground #e5ff00
notifications.background #000000
notifications.border #2c2c2c
notifications.foreground #bdbdbd
notificationsErrorIcon.foreground #ff8a65
notificationsInfoIcon.foreground #e5ff00
notificationsWarningIcon.foreground #ffeb3b
notificationToast.border #2c2c2c
panel.background #080808
panel.border #3d3d3c
panel.dropBorder #eeeeee
panelSection.border #75757559
panelSection.dropBackground #61616180
panelSectionHeader.background #75757533
panelTitle.activeBorder #ff20a9
panelTitle.activeForeground #ff6600
panelTitle.inactiveForeground #e5ff00
pickerGroup.border #424242
pickerGroup.foreground #e5ff00
progressBar.background #e5ff00
quickInput.background #000000
quickInput.foreground #bdbdbd
sash.hoverBorder #e5ff00
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bdbdbd66
scrollbarSlider.background #75757566
scrollbarSlider.hoverBackground #616161b3
searchEditor.findMatchBackground #e65100a8
searchEditor.findMatchBorder #e65100a8
selection.background #ff00ea46
settings.headerForeground #f3c900
settings.modifiedItemIndicator #b1006f
sideBar.background #000000
sideBar.dropBackground #61616180
sideBar.foreground #8c8c8a
sideBarSectionHeader.background #161616
sideBarSectionHeader.foreground #b2b2b1
sideBySideEditor.horizontalBorder #424242
sideBySideEditor.verticalBorder #424242
statusBar.background #080808
statusBar.debuggingBackground #f34f00
statusBar.debuggingForeground #f8f8f2
statusBar.foreground #878787
statusBar.noFolderBackground #080808
statusBar.noFolderForeground #878787
statusBarItem.activeBackground #000000
statusBarItem.hoverBackground #000000
statusBarItem.hoverForeground #e5ff00
statusBarItem.prominentBackground #00000080
statusBarItem.prominentForeground #ffffff
statusBarItem.prominentHoverBackground #0000004d
statusBarItem.remoteBackground #000000
statusBarItem.remoteForeground #e5ff00
statusBarItem.warningBackground #afb42b
statusBarItem.warningForeground #ffffff
tab.activeBackground #000000
tab.activeBorder #080808
tab.activeBorderTop #fffb00
tab.activeForeground #ff8800
tab.activeModifiedBorder #039be5
tab.border #080808
tab.hoverBackground #080808
tab.inactiveBackground #212121
tab.inactiveForeground #ffff00
tab.inactiveModifiedBorder #039be580
tab.lastPinnedBorder #616161
tab.unfocusedActiveBorder #080808
tab.unfocusedActiveBorderTop #080808
tab.unfocusedActiveForeground #d0d0d0
tab.unfocusedActiveModifiedBorder #039be580
tab.unfocusedInactiveBackground #212121
tab.unfocusedInactiveForeground #8c8c8a
tab.unfocusedInactiveModifiedBorder #039be540
terminal.background #000000
terminal.foreground #ff8300
terminal.selectionBackground #ffffff
terminalCursor.foreground #e5ff00
textBlockQuote.background #7575751a
textBlockQuote.border #0277bd80
textCodeBlock.background #00000066
textLink.activeForeground #e5ff00
textLink.foreground #e5ff00
textPreformat.foreground #ffcc80
textSeparator.foreground #ffffff2e
titleBar.activeBackground #080808
titleBar.activeForeground #878787
titleBar.inactiveBackground #080808
titleBar.inactiveForeground #878787
toolbar.activeBackground #61616150
toolbar.hoverBackground #61616150
tree.tableColumnsBorder #bdbdbd20
tree.tableOddRowsBackground #bdbdbd
widget.shadow #0000005c punctuation.definition.quote.begin.markdown
constant.sha.git-rebase, keyword.operator.minus.exponent, keyword.operator.plus.exponent, keyword.other.unit, markup.inserted, meta.preprocessor.numeric #A5D6A7 —
variable.other.constant, variable.other.enummember #4FC3F7 —
constant.character.escape, entity.name.tag.css, 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, entity.other.attribute-name.scss, keyword.operator.quantifier.regexp, source.css.less entity.other.attribute-name.id #FFCC80 —
constant.other.placeholder, meta.definition.variable.name, meta.structure.dictionary.key.python, source.coffee.embedded, support.function.git-rebase, support.type.vendored.property-name, support.variable, variable.css, variable.other.less, variable.scss #81D4FA —
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, string.regexp #E57373 —
entity.name.operator, keyword.operator.delete, keyword.other.operator #CE93D8 —
entity.name.operator.custom-literal, keyword.control.anchor.regexp, keyword.operator.or.regexp, support.constant.handlebars #F0F4C3 —
constant.other.color.rgb-value, constant.other.rgb-value, keyword.operator.negation.regexp, markup.deleted, markup.inline.raw, meta.preprocessor.string, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.group.regexp, string.tag, string.value, support.constant.color, support.constant.font-name, support.constant.media, support.constant.media-type, support.constant.property-value, support.other.parenthesis.regexp #ffd000 —
entity.name.namespace, entity.name.scope-resolution, entity.other.attribute, entity.other.inherited-class, meta.return-type, meta.type.cast.expr, meta.type.new.expr, storage.type.annotation.java, storage.type.annotation.groovy, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, support.constant.dom, support.constant.json, support.constant.math, entity.name.label #4ecc99 —
constant.character, entity.name.function.preprocessor, entity.name.tag, keyword, keyword.operator.noexcept, markup.changed, meta.diff.header, meta.preprocessor, punctuation.definition.list.begin.markdown, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, storage.modifier, support.type.property-name, variable.language #2196F3 —
markup.bold, markup.heading #329CFF bold
comment, punctuation.definition.comment #00BA6F —
meta.embedded.assembly, string #94EF00 —
keyword - keyword.operator, keyword.control, keyword.other.fn.rust, storage, storage.type #329CFF —
entity.name.class, entity.name.type, constant.language, keyword.operator, keyword.other, meta.embedded, source.powershell, source.powershell variable.other.member, source.ruby, support.class, support.type, variable.other.member.powershell #2BFF00 —
entity.name.function, keyword.other.DML.sql, meta.body.function.definition, meta.function-call.generic.python, support.function, text #FF4C2C —
entity.name.variable, variable #FF8300 —
entity.name.type, meta.method-call.java, meta.selector.css, storage.modifier.import.java, storage.modifier.package.java #E89800 —
constant.other.enum.java, meta.method.body.java, text.xml #FFC400 —
keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, punctuation, punctuation.definition.block.sequence.item.yaml, punctuation.definition.tag, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.section.embedded, punctuation.separator.key-value.mapping.yaml, source.cpp keyword.operator.new, source.js #E5FF00 —
source.batchfile, source.go, source.perl, source.rust, source.sql, source.tsx, variable.other.object.property.cs #FFA700 —
source.python, text.html, text.log, text.txt #FF8800 —
storage.modifier.cs #0B85FB —
entity.name.type, entity.other.attribute-name, meta.object-literal.key #FFAE00 —
keyword.other.using #B765FF —
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*
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 } ! ` ;
}