Skip to main content
Home Theme VS Code Carnation Carnation is a dark theme for VS Code with three variants: Carnation, Carnation Flat, and Carnation Frameless.
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 activityBar.activeBorder #F05454 activityBar.activeFocusBorder activityBar.background #1A1E23 activityBar.border #3747578D activityBar.dropBorder #F054544C tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #768390 — constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity #6cb6ff — entity.name, meta.export.default, meta.definition.variable #f69d50 — variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression #adbac7 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground
#ADB5BDFF
activityBar.inactiveForeground #374757
activityBarBadge.background #54A2F0FF
activityBarBadge.foreground #000000
badge.background #54A2F0FF
badge.foreground #000000
breadcrumb.activeSelectionForeground #FFFFFF
breadcrumb.background
breadcrumb.focusForeground #DDDDDD
breadcrumb.foreground #71757B
breadcrumbPicker.background #1A1E23
button.background #54F0A2FF
button.border
button.foreground #000000
button.hoverBackground
button.secondaryBackground #374757
button.secondaryForeground #FFFFFF
button.secondaryHoverBackground
button.separator
checkbox.background
checkbox.border #3747578D
checkbox.foreground #54F0A2FF
debugToolBar.background #1A1E23
dropdown.background #1A1E23
dropdown.border #3747578D
dropdown.foreground #DDDDDD
dropdown.listBackground #1A1E23
editor.background #222831
editor.findMatchHighlightBackground
editor.findRangeHighlightBackground
editor.foreground #DDDDDD
editor.lineHighlightBackground #3747578D
editor.lineHighlightBorder
editor.selectionBackground #374757
editor.selectionForeground
editor.selectionHighlightBackground
editor.wordHighlightBackground
editor.wordHighlightStrongBackground
editorCursor.foreground #DDDDDD
editorGroup.border #3747578D
editorGroup.dropBackground #F054544C
editorGroupHeader.tabsBackground #1A1E23
editorGroupHeader.tabsBorder
editorHoverWidget.background #1A1E23
editorHoverWidget.border #3747578D
editorHoverWidget.foreground
editorHoverWidget.highlightForeground
editorHoverWidget.statusBarBackground
editorIndentGuide.activeBackground #374757
editorIndentGuide.background #37475759
editorLineNumber.activeForeground #ADB5BDFF
editorLineNumber.foreground #374757
editorSuggestWidget.background
editorSuggestWidget.border #3747578D
editorSuggestWidget.focusHighlightForeground
editorSuggestWidget.foreground
editorSuggestWidget.highlightForeground
editorSuggestWidget.selectedBackground
editorSuggestWidget.selectedForeground
editorSuggestWidget.selectedIconForeground
editorSuggestWidgetStatus.foreground
editorUnnecessaryCode.border #3747578D
editorUnnecessaryCode.opacity
editorWidget.background #222831
editorWidget.border #3747578D
editorWidget.foreground #DDDDDD
editorWidget.resizeBorder
focusBorder #374757
foreground #DDDDDD
input.background #1A1E23
input.border #3747578D
input.foreground #DDDDDD
input.placeholderForeground #71757B
inputOption.activeBackground #F05454
inputOption.activeborder #3747578D
inputOption.activeForeground #FFFFFF
inputOption.hoverBackground #374757
inputValidation.errorBackground #F05454
inputValidation.errorBorder #F05454
inputValidation.errorForeground #FFFFFF
inputValidation.infoBackground #374757
inputValidation.infoborder #3747578D
inputValidation.infoForeground #FFFFFF
inputValidation.warningBackground #F0A254FF
inputValidation.warningBorder #F0A254FF
inputValidation.warningForeground #000000
list.activeSelectionBackground #374757
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #FFFFFF
list.deemphasizedForeground
list.dropBackground #F054544C
list.errorForeground
list.filterMatchBackground #F054544C
list.filterMatchBorder
list.focusAndSelectionOutline #374757
list.focusBackground #37475773
list.focusForeground #FFFFFF
list.focusHighlightForeground #F05454
list.focusOutline #374757
list.highlightForeground #F05454
list.hoverBackground #37475759
list.hoverForeground #FFFFFF
list.inactiveFocusBackground #37475759
list.inactiveFocusOutline
list.inactiveSelectionBackground #3747578D
list.inactiveSelectionForeground #FFFFFF
list.inactiveSelectionIconForeground
list.invalidItemForeground
list.warningForeground
listFilterWidget.background #222831
listFilterWidget.noMatchesOutline
listFilterWidget.outline
listFilterWidget.shadow
notificationCenter.border #3747578D
notificationCenterHeader.background #1A1E23
notificationCenterHeader.foreground #DDDDDD
notificationLink.foreground #F05454
notifications.background #222831
notifications.border #3747578D
notifications.foreground #DDDDDD
notificationsErrorIcon.foreground #F05454
notificationsInfoIcon.foreground #54A2F0FF
notificationsWarningIcon.foreground #F0A254FF
notificationToast.border #3747578D
panel.background #1A1E23
panel.border #3747578D
panel.dropBorder #F054544C
panelSection.border #3747578D
panelSection.dropBackground #F054544C
panelSectionHeader.background #222831
panelSectionHeader.foreground #DDDDDD
panelTitle.activeBorder #F05454
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #71757B
peekView.border #3747578D
peekViewEditor.background #1A1E23
peekViewEditor.matchHighlightBackground #3747578D
peekViewResult.background #37475773
peekViewTitle.background #37475773
pickerGroup.border #3747578D
pickerGroup.foreground #ADB5BDFF
progressBar.background #F05454
quickInput.background #222831
quickInput.foreground #DDDDDD
quickInputList.focusBackground #374757
quickInputList.focusForeground #FFFFFF
quickInputList.focusIconForeground #FFFFFF
scrollbarSlider.activeBackground #3747578D
scrollbarSlider.background #37475759
scrollbarSlider.hoverBackground #37475773
searchEditor.findMatchBackground
selection.background #3747578D
settings.modifiedItemIndicator #F05454
sideBar.background #1A1E23
sideBar.border #3747578D
sideBar.dropBackground #F054544C
sideBar.foreground #ADB5BDFF
sideBarSectionHeader.background #1A1E23
sideBarSectionHeader.border #3747578D
sideBarSectionHeader.foreground #ADB5BDFF
sideBarTitle.foreground #DDDDDD
statusBar.background #222831
statusBar.border #3747578D
statusBar.debuggingBackground #F05454
statusBar.debuggingForeground #DDDDDD
statusBar.foreground #ADB5BDFF
statusBar.noFolderBackground #374757
statusBar.noFolderForeground #DDDDDD
statusBarItem.activeBackground
statusBarItem.compactHoverBackground
statusBarItem.errorBackground
statusBarItem.errorForeground
statusBarItem.hoverBackground
statusBarItem.remoteBackground #222831
statusBarItem.remoteForeground #FFFFFF
statusBarItem.warningBackground
statusBarItem.warningForeground
tab.activeBackground #222831
tab.activeBorder #222831
tab.activeBorderTop #F05454
tab.activeForeground #FFFFFF
tab.border #3747578D
tab.inactiveBackground #1A1E23
tab.inactiveForeground #71757B
tab.lastPinnedBorder
tab.unfocusedActiveBorder
tab.unfocusedActiveBorderTop #374757
tab.unfocusedActiveForeground #DDDDDD
tab.unfocusedHoverForeground #FFFFFF
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.background
terminal.border #3747578D
terminal.dropBackground
terminal.findMatchBackground
terminal.findMatchBorder
terminal.findMatchHighlightBackground
terminal.findMatchHighlightBorder
terminal.foreground
terminal.inactiveSelectionBackground
terminal.selectionBackground #374757
terminal.selectionForeground
terminal.tab.activeBorder #F05454
terminalCommandDecoration.defaultBackground
terminalCommandDecoration.errorBackground
terminalCommandDecoration.successBackground
terminalCursor.background
terminalCursor.foreground
terminalOverviewRuler.cursorForeground
terminalOverviewRuler.findMatchForeground
textBlockQuote.background
textLink.activeForeground #FFFFFF
textLink.foreground #54A2F0FF
textPreformat.foreground
titleBar.activeBackground #222831
titleBar.activeForeground #FFFFFF
titleBar.border #3747578D
titleBar.inactiveBackground #1A1E23
titleBar.inactiveForeground #71757B
tree.indentGuidesStroke #374757
tree.tableColumnsBorder
tree.tableOddRowsBackground
welcomePage.tileBackground #37475759 entity.name.function #dcbdfb —
entity.name.tag, support.class.component #8ddb8c —
storage, storage.type #f47067 —
storage.modifier.package, storage.modifier.import, storage.type.java #adbac7 —
string, string punctuation.section.embedded source #96d0ff —
meta.property-name #6cb6ff —
invalid.broken #ff938a italic
invalid.deprecated #ff938a italic
invalid.illegal #ff938a italic
invalid.unimplemented #ff938a italic
carriage-return #cdd9e5 italic underline
source.regexp, string.regexp #96d0ff —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #96d0ff —
string.regexp constant.character.escape #8ddb8c bold
support.type.property-name.json #8ddb8c —
meta.module-reference #6cb6ff —
punctuation.definition.list.begin.markdown #f69d50 —
markup.heading, markup.heading entity.name #6cb6ff bold
markup.italic #adbac7 italic
markup.underline — underline
markup.strikethrough — strikethrough
markup.inline.raw #6cb6ff —
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #ff938a —
punctuation.section.embedded #f47067 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #8ddb8c —
markup.changed, punctuation.definition.changed #f69d50 —
markup.ignored, markup.untracked #2d333b —
meta.diff.range #dcbdfb bold
meta.separator #6cb6ff bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #768390 —
brackethighlighter.unmatched #ff938a —
constant.other.reference.link, string.other.link #96d0ff underline
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}!`;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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}!`;
}
Carnation | Coding Theme