Skip to main content
Home Theme VS Code Cassidy Dark Theme A clean, modern, dark theme originally inspired by Monokai
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 #292929 activityBar.activeBorder #efddac80 activityBar.activeFocusBorder #383838 activityBar.background #333333 activityBar.border #292929 activityBar.dropBorder #636363 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.bold.markdown — bold comment, invalid, variable.language.this, entity.name.section.markdown, markup.italic.markdown, keyword.operator.return-value.php, keyword.other.type.php, meta.function.php support.class.php, keyword.operator.type.annotation.ts, support.type.primitive.ts — italic markup.bold.markdown markup.italic.markdown — bold italic markup.strikethrough.markdown — strikethrough meta.method-call entity.name.function, support.function, entity.helper.apacheconf, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, text.html, meta.element.structure.svg.text.html, meta.jsx.children, text.xml
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Cassidy Dark Theme — Cassidy Dark
activityBar.foreground
#c4c4c4
activityBar.inactiveForeground #636363
activityBarBadge.background #efddac
activityBarBadge.foreground #121212
badge.background #4d4d4d
badge.foreground #f8f8f8
button.background #006fd9
checkbox.background #ffffff26
checkbox.foreground #f8f8f8
descriptionForeground #f8f8f8
diffEditor.insertedLineBackground #a2cd8b1a
diffEditor.insertedTextBackground #a2cd8b33
diffEditor.removedLineBackground #ef91821a
diffEditor.removedTextBackground #ef918233
diffEditorGutter.insertedLineBackground #a2cd8b1a
diffEditorGutter.removedLineBackground #ef91821a
diffEditorOverview.insertedForeground #a2cd8b4d
diffEditorOverview.removedForeground #ef91824d
dropdown.background #383838
dropdown.foreground #f8f8f8
dropdown.listBackground #333333
editor.background #242424
editor.findMatchBackground #d6aaeacc
editor.findMatchForeground #000000b3
editor.findMatchHighlightBackground #d6aaea80
editor.findMatchHighlightForeground #000000e6
editor.findRangeHighlightBackground #d6aaea1a
editor.foldBackground #d6aaea1a
editor.foreground #c4c4c4
editor.hoverHighlightBackground #ffffff33
editor.inactiveSelectionBackground #006fd94d
editor.lineHighlightBackground #161616
editor.rangeHighlightBackground #d6aaea26
editor.selectionBackground #006fd980
editor.selectionHighlightBackground #62a1f066
editor.wordHighlightBackground #ffffff33
editor.wordHighlightStrongBackground #fcb7cb40
editor.wordHighlightTextBackground #ffffff33
editorBracketMatch.border #636363
editorCursor.background #383838
editorCursor.foreground #929292
editorError.foreground #ef9182
editorGhostText.background #1f1f1f
editorGhostText.foreground #7a7a7a
editorGroup.border #121212
editorGroup.dropBackground #f8f8f833
editorGroupHeader.noTabsBackground #292929
editorGroupHeader.tabsBackground #2e2e2e
editorGutter.addedBackground #a2cd8b99
editorGutter.deletedBackground #ef9182cc
editorGutter.foldingControlForeground #7a7a7a
editorGutter.modifiedBackground #efddaccc
editorHint.foreground #efddac
editorHoverWidget.background #383838
editorIndentGuide.activeBackground1 #4d4d4d
editorIndentGuide.background1 #383838
editorInfo.foreground #92c1fd
editorLightBulb.foreground #d7bb70
editorLightBulbAutoFix.foreground #92c1fd
editorLineNumber.activeForeground #ababab
editorLineNumber.foreground #4d4d4d
editorLink.activeForeground #efddac
editorOverviewRuler.addedForeground #a2cd8b99
editorOverviewRuler.background #0000000d
editorOverviewRuler.border #0000001a
editorOverviewRuler.bracketMatchForeground #7a7a7ae6
editorOverviewRuler.deletedForeground #ef918299
editorOverviewRuler.errorForeground #ef9182e6
editorOverviewRuler.findMatchForeground #d6aaea80
editorOverviewRuler.infoForeground #92c1fde6
editorOverviewRuler.modifiedForeground #efddac99
editorOverviewRuler.selectionHighlightForeground #62a1f066
editorOverviewRuler.warningForeground #eeae7be6
editorOverviewRuler.wordHighlightForeground #ffffff33
editorOverviewRuler.wordHighlightStrongForeground #fcb7cb80
editorOverviewRuler.wordHighlightTextForeground #ffffff33
editorRuler.foreground #eeae7b1a
editorStickyScroll.background #292929
editorStickyScrollHover.background #161616
editorUnicodeHighlight.background #eeae7b4d
editorUnicodeHighlight.border #eeae7b80
editorUnnecessaryCode.opacity #00000099
editorWarning.foreground #eeae7b
editorWhitespace.foreground #383838
editorWidget.background #333333
editorWidget.border #383838
editorWidget.foreground #c4c4c4
editorWidget.resizeBorder #424242
errorForeground #db6656
focusBorder #ffffff1a
foreground #c4c4c4
gitDecoration.addedResourceForeground #a2cd8b
gitDecoration.conflictingResourceForeground #eeae7b
gitDecoration.deletedResourceForeground #ef9182
gitDecoration.ignoredResourceForeground #929292
gitDecoration.modifiedResourceForeground #efddac
gitDecoration.renamedResourceForeground #92c1fd
gitDecoration.stageDeletedResourceForeground #ef9182
gitDecoration.stageModifiedResourceForeground #efddac
gitDecoration.untrackedResourceForeground #a2cd8b
icon.foreground #929292
input.background #383838
input.border #424242
input.foreground #f8f8f8
input.placeholderForeground #636363
inputOption.activeBackground #4d4d4d
inputOption.activeBorder #636363
inputOption.activeForeground #efddac
list.activeSelectionBackground #ffffff33
list.activeSelectionForeground #f8f8f8
list.errorForeground #ef9182
list.focusAndSelectionOutline #ffffff00
list.focusForeground #f8f8f8
list.focusOutline #ffffff33
list.hoverBackground #ffffff1a
list.hoverForeground #f8f8f8
list.inactiveSelectionBackground #ffffff0d
list.inactiveSelectionForeground #f8f8f8
list.warningForeground #eeae7b
panel.background #2e2e2e
panel.border #383838
panel.dropBorder #636363
panelTitle.activeBorder #2e2e2e
panelTitle.activeForeground #efddac
panelTitle.inactiveForeground #636363
peekView.border #383838
peekViewTitle.background #333333
peekViewTitleDescription.foreground #929292
peekViewTitleLabel.foreground #f8f8f8
problemsErrorIcon.foreground #ef9182
problemsInfoIcon.foreground #92c1fd
problemsWarningIcon.foreground #eeae7b
progressBar.background #a2cd8b
sash.hoverBorder #ffffff1a
scrollbar.shadow #1f1f1f
scrollbarSlider.activeBackground #7a7a7a66
scrollbarSlider.background #7a7a7a40
scrollbarSlider.hoverBackground #7a7a7a4d
selection.background #62a1f080
settings.modifiedItemIndicator #efddac
sideBar.background #292929
sideBar.border #292929
sideBar.dropBackground #2e2e2e
sideBar.foreground #c4c4c4
sideBarSectionHeader.background #333333
sideBarSectionHeader.border #292929
sideBarSectionHeader.foreground #929292
sideBarStickyScroll.background #2e2e2e
sideBarTitle.foreground #7a7a7a
sideBySideEditor.horizontalBorder #121212
sideBySideEditor.verticalBorder #121212
statusBar.background #383838
statusBar.debuggingBackground #eeae7b
statusBar.debuggingForeground #121212
statusBar.foreground #929292
statusBar.noFolderBackground #383838
statusBar.noFolderForeground #929292
tab.activeBackground #242424
tab.activeForeground #f8f8f8
tab.border #242424
tab.hoverForeground #f8f8f8
tab.inactiveBackground #2e2e2e
tab.inactiveForeground #929292
tab.lastPinnedBorder #121212
tab.unfocusedActiveBorderTop #242424
tab.unfocusedActiveForeground #929292
tab.unfocusedHoverForeground #f8f8f8
tab.unfocusedInactiveForeground #636363
terminal.ansiBlack #383838
terminal.ansiBlue #62a1f0
terminal.ansiBrightBlack #636363
terminal.ansiBrightBlue #92c1fd
terminal.ansiBrightCyan #89dfdf
terminal.ansiBrightGreen #79b158
terminal.ansiBrightMagenta #fcb7cb
terminal.ansiBrightRed #db6656
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #eeae7b
terminal.ansiCyan #35c5c5
terminal.ansiGreen #a2cd8b
terminal.ansiMagenta #d6aaea
terminal.ansiRed #ef9182
terminal.ansiWhite #f8f8f8
terminal.ansiYellow #efddac
terminal.background #242424
terminal.foreground #c4c4c4
terminalOverviewRuler.border #242424
textBlockQuote.background #ffffff12
textBlockQuote.border #ffffff24
textCodeBlock.background #ffffff1a
textLink.activeForeground #efddac
textLink.foreground #92c1fd
textPreformat.background #ffffff1a
textPreformat.foreground #d7bb70
titleBar.activeBackground #383838
titleBar.activeForeground #929292
titleBar.inactiveBackground #2e2e2e
titleBar.inactiveForeground #636363
toolbar.activeBackground #f8f8f833
toolbar.hoverBackground #f8f8f81a
tree.indentGuidesStroke #383838
tree.tableColumnsBorder #333333
tree.tableOddRowsBackground #1f1f1f
widget.border #ffffff05
widget.shadow #1f1f1f #f8f8f8
variable.other.object, meta.scope #d1d1d1 —
meta.embedded.block, support.constant.property, support.variable, entity.other.attribute-name #c4c4c4 —
entity.name, meta.at-rule.keyframes.body, meta.block, meta.brace, meta.embedded.line, punctuation, meta.function.calc.css, meta.property-list, meta.separator.markdown, markup.strikethrough.markdown, comment keyword, comment keyword.operator.nullable-type.php, comment support.class, keyword.other.phpdoc.php, keyword.operator.return-value.php, meta.embedded.block.php, meta.embedded.line.php, string.quoted.double.php punctuation.definition.variable.php, meta.function.method.with-arguments.ruby storage.type, meta.expression.assignment.modified.shell, meta.tag, meta.parameter-expansion #929292 —
comment, comment constant, comment entity.name.type, comment keyword, comment meta.tag.inline, comment punctuation, comment storage, comment storage.modifier, comment storage.type, comment support, comment variable, punctuation.definition.comment, source.embedded #7a7a7a —
invalid, markup.underline.link #636363 —
storage.type, string.path.apacheconf, meta.attribute.unrecognized.xmlns.html string, meta.attribute.unrecognized.xmlns:xlink.html string, meta.function.url string.quoted.double, meta.function.url string.quoted.single, meta.attribute.href string, meta.attribute.src.html string, meta.attribute.srcset.html string, log.date, meta.link.reference, meta.link.reference constant, meta.link.reference string, string.other.link.title.markdown, variable.parameter.url #92c1fd —
keyword.other.type.php, meta.other.type.phpdoc.php, keyword.operator.nullable-type.php, meta.function.php storage.type.php, meta.function.php support.class.php, meta.function.parameter.typehinted.php support, meta.other.type.phpdoc.php support.class, keyword.operator.type.annotation.ts, support.type.primitive.ts #a9c0de —
markup.strikethrough.markdown string.other.link.title.markdown #92c1fd80 —
entity.name.type, entity.name.function, keyword.other.special-method, meta.attribute.style string, meta.property-name, meta.property-value support.function, support, entity.tag.apacheconf, meta.at-rule support.function, meta.property-value, keyword.other.definition, support.function.basic_functions, entity.other.inherited-class.php, entity.other.alias.php, meta.function-call.generic.python, support.function.builtin.shell, entity.name.tag.yaml #89dfdf —
entity.name.label, entity.other.attribute-name.class, meta.attribute.class string, meta.object-literal, support.variable.property, variable.other.constant.property, variable.other.property, variable.other.object.property, entity.mime-type.apacheconf, entity.name.section.markdown, markup.heading.markdown string.other.link.title.markdown, markup.heading.markdown meta.other.valid-ampersand.markdown, punctuation.definition.heading.markdown, variable.other.property.php punctuation.definition.variable.php, constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, entity.name.command, entity.name.section.group-title, entity.other.attribute-name.parent-selector-suffix.css punctuation #a2cd8b —
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation, meta.attribute.id string, variable.parameter, string.replacement.apacheconf, entity.other.keyframe-offset, meta.at-rule.keyframes, support.constant.container-name.container.css, variable.parameter.misc.css, log.warning, meta.function.parameters.php variable, meta.function.parameters.php punctuation.definition.variable, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.at-rule.keyframes entity.name.function, entity.other.attribute-name.scss #eeae7b —
punctuation.definition.variable, variable, string.quoted.double.php variable.other.php punctuation.definition.variable.php, meta.function-call.arguments.python, variable.other.assignment.shell #fcb7cb —
constant, keyword.other.unit, entity.status.apacheconf, support.constant.boolean.container.css, constant punctuation.definition.entity, meta.attribute.async.html entity.other.attribute-name, meta.attribute.crossorigin entity.other.attribute-name, meta.attribute.defer.html entity.other.attribute-name, source.ini, variable.other.constant.object.js, entity.name.type.namespace.php, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp, meta.group.regexp, meta.group.assertion.regexp, string.regexp, string.regexp constant, string.regexp keyword, string.regexp punctuation, constant.other.option, meta.arithmetic.shell, keyword.operator.logical.shell, keyword.operator.expansion.shell, punctuation.definition.constant.xml #d6aaea —
entity.other.attribute-name.namespace #bd84d7 —
entity.name.tag, keyword, storage.modifier, log.error, entity.name.goto-label.php, punctuation.separator.statement.and.shell #ef9182 —
string, meta.attribute-selector entity.other.attribute-name, string.other.link.description.markdown, string.quoted.single.php, string.quoted.double.php, meta.attribute-selector.scss, meta.tag.sgml.doctype.xml #efddac —
markup.inline.raw.string.markdown #d7bb70 —
source.dockerfile string #f8f8f8 —
source.dockerfile keyword.other.special-method #89dfdf —
source.dockerfile entity.name #a2cd8b —
source.dockerfile constant.other.option #eeae7b —
punctuation.separator.statement.and.shell.dockerfile #ef9182 —
source.nginx constant.character #929292 —
source.nginx constant.language.module #92c1fd —
source.nginx constant.language #89dfdf —
source.nginx constant.language.directive.module.main #ef9182 —
comment.rainbow4, invalid.rainbow10 —
markup.bold.rainbow9 #f8f8f8 —
constant.numeric.rainbow7 #92c1fd —
variable.parameter.rainbow6 #eeae7b —
entity.name.type.rainbow8 #fcb7cb —
entity.name.function.rainbow3 #d6aaea —
invalid.rainbow10 #ef9182 —
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 } ! ` ;
}
Cassidy Dark Theme | Coding Theme