Skip to main content
Red Rose Ladybug Theme 🐞 | Coding Theme
Home Theme VS Code Red Rose Ladybug Theme 🐞 A cheerful light theme with soft rose pastels, pure crimson accents and ladybug SVG file icons. Easy on the eyes, bold on style.
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 #E3141420 activityBar.activeBorder #E31414 activityBar.background #FFE5EC activityBar.border #FFCCD560 activityBar.dropBorder #E31414 activityBar.foreground #E31414 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.type.property-name.json #D11D1D — keyword.control, keyword.control.conditional #E60909 bold keyword, storage, storage.type #E04F4F italic bold entity.name.function, support.function, meta.function-call #FF4D6D bold variable, variable.other.readwrite, variable.other.object
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
Red Rose Ladybug Theme 🐞 — 🐞 Red Rose Ladybug
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
activityBar.inactiveForeground
#FFAAB8
activityBarBadge.background #E31414
activityBarBadge.foreground #FFFFFF
badge.background #E31414
badge.foreground #FFFFFF
breadcrumb.activeSelectionForeground #A4133C
breadcrumb.background #FFF6F7
breadcrumb.focusForeground #E31414
breadcrumb.foreground #FF8FA3
breadcrumbPicker.background #FFFFFF
button.background #E31414
button.border #E3141440
button.foreground #FFFFFF
button.hoverBackground #A4133C
button.secondaryBackground #FFCCD5
button.secondaryForeground #3D0A0D
button.secondaryHoverBackground #FFB3C6
button.separator #FFFFFF40
charts.blue #590D22
charts.foreground #3D0A0D
charts.green #A4133C
charts.lines #FFCCD555
charts.orange #FF4D6D
charts.purple #FF8FA3
charts.red #E31414
charts.yellow #FF758F
checkbox.background #FFF6F7
checkbox.border #FFCCD5
checkbox.foreground #E31414
checkbox.selectBackground #FFE5EC
checkbox.selectBorder #E31414
commandCenter.activeBackground #FFFFFF40
commandCenter.activeBorder #FFFFFF60
commandCenter.activeForeground #FFFFFF
commandCenter.background #FFFFFF20
commandCenter.border #FFFFFF35
commandCenter.foreground #FFFFFF
debugConsole.errorForeground #E31414
debugConsole.infoForeground #FF8FA3
debugConsole.sourceForeground #A4133C
debugConsole.warningForeground #FF758F
debugConsoleInputIcon.foreground #E31414
debugIcon.breakpointDisabledForeground #FFCCD5
debugIcon.breakpointForeground #E31414
debugIcon.breakpointUnverifiedForeground #FF8FA3
debugIcon.continueForeground #A4133C
debugIcon.disconnectForeground #FF4D6D
debugIcon.pauseForeground #FF758F
debugIcon.restartForeground #A4133C
debugIcon.startForeground #A4133C
debugIcon.stepBackForeground #FFCCD5
debugIcon.stepIntoForeground #FF758F
debugIcon.stepOutForeground #FF758F
debugIcon.stepOverForeground #FF758F
debugIcon.stopForeground #E31414
debugToolBar.background #FFE5EC
debugToolBar.border #FFCCD5
descriptionForeground #FF8FA3
diffEditor.border #FFCCD5
diffEditor.diagonalFill #FFCCD540
diffEditor.insertedLineBackground #FF758F15
diffEditor.insertedTextBackground #FF758F25
diffEditor.removedLineBackground #E3141410
diffEditor.removedTextBackground #E3141420
diffEditorGutter.insertedLineBackground #FF758F30
diffEditorGutter.removedLineBackground #E3141425
diffEditorOverview.insertedForeground #FF758F
diffEditorOverview.removedForeground #E31414
disabledForeground #FF8FA380
dropdown.background #FFFFFF
dropdown.border #FFCCD5
dropdown.foreground #3D0A0D
dropdown.listBackground #FFF6F7
editor.background #FFF6F7
editor.findMatchBackground #E3141450
editor.findMatchHighlightBackground #E3141428
editor.focusedStackFrameHighlightBackground #FF758F50
editor.foreground #3D0A0D
editor.inactiveSelectionBackground #FFCCD540
editor.lineHighlightBackground #FFE5EC95
editor.lineHighlightBorder #FFE5EC60
editor.selectionBackground #FF8FA365
editor.selectionHighlightBackground #FFC2D160
editor.stackFrameHighlightBackground #FFCCD550
editor.wordHighlightBackground #FFCCD580
editor.wordHighlightStrongBackground #FF8FA380
editorBracketHighlight.foreground1 #E31414
editorBracketHighlight.foreground2 #FF758F
editorBracketHighlight.foreground3 #A4133C
editorBracketHighlight.foreground4 #FFB3C6
editorBracketHighlight.foreground5 #FF4D6D
editorBracketHighlight.foreground6 #590D22
editorBracketHighlight.unexpectedBracket.foreground #E31414
editorBracketMatch.background #FF758F40
editorBracketMatch.border #E31414
editorCodeLens.foreground #FF8FA3
editorCursor.foreground #E31414
editorError.border #E3141440
editorError.foreground #E31414
editorGroup.border #FFCCD560
editorGroup.dropBackground #FF8FA320
editorGroupHeader.tabsBackground #FFE5EC
editorGroupHeader.tabsBorder #FFCCD560
editorGutter.background #FFF6F7
editorHint.foreground #FFCCD5
editorHoverWidget.background #FFFFFF
editorHoverWidget.border #FFCCD5
editorHoverWidget.foreground #3D0A0D
editorHoverWidget.statusBarBackground #FFF0F2
editorIndentGuide.activeBackground1 #E31414
editorIndentGuide.background1 #FFCCD570
editorInfo.foreground #FFB3C6
editorLightBulb.foreground #E31414
editorLightBulbAutoFix.foreground #A4133C
editorLineNumber.activeForeground #E31414
editorLineNumber.foreground #FFCCD5
editorLink.activeForeground #E31414
editorOverviewRuler.addedForeground #A4133C
editorOverviewRuler.border #FFCCD540
editorOverviewRuler.currentContentForeground #E31414
editorOverviewRuler.deletedForeground #FF4D6D
editorOverviewRuler.errorForeground #E31414
editorOverviewRuler.findMatchForeground #E3141466
editorOverviewRuler.infoForeground #FFB3C6
editorOverviewRuler.modifiedForeground #FF758F
editorOverviewRuler.selectionHighlightForeground #FF8FA366
editorOverviewRuler.warningForeground #FF758F
editorRuler.foreground #FFCCD560
editorSuggestWidget.background #FFFFFF
editorSuggestWidget.border #FFCCD5
editorSuggestWidget.focusHighlightForeground #A4133C
editorSuggestWidget.foreground #3D0A0D
editorSuggestWidget.highlightForeground #E31414
editorSuggestWidget.selectedBackground #FFE5EC
editorSuggestWidget.selectedForeground #E31414
editorWarning.border #FF758F40
editorWarning.foreground #FF758F
editorWhitespace.foreground #FFCCD540
errorForeground #E31414
extensionBadge.remoteBackground #A4133C
extensionBadge.remoteForeground #FFFFFF
extensionButton.prominentBackground #E31414
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #A4133C
extensionIcon.preReleaseForeground #FF758F
extensionIcon.sponsorForeground #FF4D6D
extensionIcon.starForeground #E31414
extensionIcon.verifiedForeground #A4133C
focusBorder #E3141440
foreground #3D0A0D
gitDecoration.addedResourceForeground #A4133C
gitDecoration.conflictingResourceForeground #E31414
gitDecoration.deletedResourceForeground #FF758F
gitDecoration.ignoredResourceForeground #FFCCD590
gitDecoration.modifiedResourceForeground #FF4D6D
gitDecoration.renamedResourceForeground #FF4D6D
gitDecoration.stageDeletedResourceForeground #FF758F
gitDecoration.stageModifiedResourceForeground #A4133C
gitDecoration.submoduleResourceForeground #FF8FA3
gitDecoration.untrackedResourceForeground #FF4D6D
icon.foreground #E31414
input.background #FFFFFF
input.border #FFCCD5
input.foreground #3D0A0D
input.placeholderForeground #FF8FA380
inputOption.activeBackground #FFCCD560
inputOption.activeBorder #E31414
inputOption.activeForeground #E31414
inputOption.hoverBackground #FFE5EC
inputValidation.errorBackground #FFD6D6
inputValidation.errorBorder #E31414
inputValidation.errorForeground #8B0000
inputValidation.infoBackground #FFF0F2
inputValidation.infoBorder #FF8FA3
inputValidation.infoForeground #3D0A0D
inputValidation.warningBackground #FFE5EC
inputValidation.warningBorder #FF758F
inputValidation.warningForeground #3D0A0D
list.activeSelectionBackground #E31414
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #FFFFFF
list.deemphasizedForeground #FF8FA3
list.dropBackground #FFCCD5
list.errorForeground #E31414
list.focusBackground #E31414
list.focusForeground #FFFFFF
list.focusHighlightForeground #FFFFFF
list.highlightForeground #FFFFFF
list.hoverBackground #FFE2E2
list.hoverForeground #3D0A0D
list.inactiveSelectionBackground #E31414
list.inactiveSelectionForeground #FFFFFF
list.inactiveSelectionIconForeground #FFFFFF
list.invalidItemForeground #FF758F
list.warningForeground #FF758F
menu.background #FFFFFF
menu.border #FFCCD5
menu.foreground #3D0A0D
menu.selectionBackground #FFE5EC
menu.selectionBorder #FFCCD5
menu.selectionForeground #E31414
menu.separatorBackground #FFCCD5
menubar.selectionBackground #FFFFFF20
menubar.selectionBorder #FFFFFF30
menubar.selectionForeground #FFFFFF
minimap.background #FFF0F2
minimap.errorHighlight #E31414
minimap.findMatchHighlight #E3141466
minimap.infoHighlight #FFB3C6
minimap.selectionHighlight #FF8FA366
minimap.warningHighlight #FF758F
minimapGutter.addedBackground #A4133C
minimapGutter.deletedBackground #FF4D6D
minimapGutter.modifiedBackground #FF758F
minimapSlider.activeBackground #E3141430
minimapSlider.background #FFCCD540
minimapSlider.hoverBackground #FF8FA355
notificationCenter.border #FFCCD5
notificationCenterHeader.background #FFE5EC
notificationCenterHeader.foreground #3D0A0D
notificationLink.foreground #E31414
notifications.background #FFFFFF
notifications.border #FFCCD5
notifications.foreground #3D0A0D
notificationsErrorIcon.foreground #E31414
notificationsInfoIcon.foreground #FF8FA3
notificationsWarningIcon.foreground #FF758F
notificationToast.border #FFCCD5
panel.background #FFF0F2
panel.border #FFCCD560
panel.dropBorder #E31414
panelInput.border #FFCCD5
panelSection.border #FFCCD540
panelSection.dropBackground #FF8FA320
panelTitle.activeBorder #E31414
panelTitle.activeForeground #E31414
panelTitle.inactiveForeground #FF8FA3
peekView.border #E31414
peekViewEditor.background #FFF6F7
peekViewEditor.matchHighlightBackground #FF8FA344
peekViewEditor.matchHighlightBorder #E31414
peekViewResult.background #FFF0F2
peekViewResult.fileForeground #A4133C
peekViewResult.lineForeground #3D0A0D
peekViewResult.matchHighlightBackground #FFB3C660
peekViewResult.selectionBackground #E31414
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #FFE5EC
peekViewTitleDescription.foreground #FF758F
peekViewTitleLabel.foreground #A4133C
pickerGroup.border #FFCCD5
pickerGroup.foreground #A4133C
progressBar.background #E31414
quickInput.background #FFFFFF
quickInput.foreground #3D0A0D
quickInputList.focusBackground #FFE5EC
quickInputList.focusForeground #E31414
quickInputList.focusIconForeground #E31414
quickInputTitle.background #FFE5EC
radio.activeBackground #FFE5EC
radio.activeBorder #E31414
radio.activeForeground #E31414
radio.inactiveBackground #FFF6F7
radio.inactiveBorder #FFCCD5
radio.inactiveForeground #FF8FA3
radio.inactiveHoverBackground #FFE5EC
sash.hoverBorder #E31414
scrollbar.shadow #E3141415
scrollbarSlider.activeBackground #E31414A0
scrollbarSlider.background #FFCCD580
scrollbarSlider.hoverBackground #FF8FA390
selection.background #FF8FA344
settings.checkboxBackground #FFF6F7
settings.checkboxBorder #FFCCD5
settings.checkboxForeground #E31414
settings.dropdownBackground #FFFFFF
settings.dropdownBorder #FFCCD5
settings.dropdownForeground #3D0A0D
settings.focusedRowBackground #FFF0F2
settings.headerForeground #A4133C
settings.modifiedItemIndicator #E31414
settings.numberInputBackground #FFFFFF
settings.numberInputBorder #FFCCD5
settings.numberInputForeground #3D0A0D
settings.rowHoverBackground #FFF6F7
settings.sashBorder #FFCCD5
settings.textInputBackground #FFFFFF
settings.textInputBorder #FFCCD5
settings.textInputForeground #3D0A0D
sideBar.background #FFF0F2
sideBar.border #FFCCD5
sideBar.foreground #3D0A0D
sideBarSectionHeader.background #FFD6DF
sideBarSectionHeader.border #FF8FA3
sideBarSectionHeader.foreground #4A1A24
sideBarTitle.foreground #A4133C
statusBar.background #E31414
statusBar.border #B80000
statusBar.debuggingBackground #A4133C
statusBar.debuggingBorder #8B0000
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #FFFFFF
statusBar.noFolderBackground #FF758F
statusBar.noFolderForeground #FFFFFF
statusBarItem.activeBackground #FFFFFF30
statusBarItem.errorBackground #8B0000
statusBarItem.errorForeground #FFFFFF
statusBarItem.hoverBackground #FFFFFF20
statusBarItem.prominentBackground #A4133C
statusBarItem.prominentForeground #FFFFFF
statusBarItem.prominentHoverBackground #8B0000
statusBarItem.remoteBackground #A4133C
statusBarItem.remoteForeground #FFFFFF
statusBarItem.warningBackground #FF4D6D
statusBarItem.warningForeground #FFFFFF
symbolIcon.classForeground #A4133C
symbolIcon.colorForeground #E31414
symbolIcon.constantForeground #FF4D6D
symbolIcon.constructorForeground #A4133C
symbolIcon.enumeratorForeground #FF758F
symbolIcon.enumeratorMemberForeground #FF4D6D
symbolIcon.eventForeground #E31414
symbolIcon.fieldForeground #A4133C
symbolIcon.fileForeground #FF758F
symbolIcon.folderForeground #E31414
symbolIcon.functionForeground #FF4D6D
symbolIcon.interfaceForeground #A4133C
symbolIcon.keyForeground #E31414
symbolIcon.keywordForeground #E31414
symbolIcon.methodForeground #FF4D6D
symbolIcon.moduleForeground #A4133C
symbolIcon.namespaceForeground #A4133C
symbolIcon.nullForeground #FF758F
symbolIcon.numberForeground #E31414
symbolIcon.objectForeground #A4133C
symbolIcon.operatorForeground #E31414
symbolIcon.packageForeground #FF4D6D
symbolIcon.propertyForeground #A4133C
symbolIcon.referenceForeground #FF758F
symbolIcon.snippetForeground #FF8FA3
symbolIcon.stringForeground #FF758F
symbolIcon.structForeground #A4133C
symbolIcon.textForeground #3D0A0D
symbolIcon.typeParameterForeground #A4133C
symbolIcon.unitForeground #FF4D6D
symbolIcon.variableForeground #A4133C
tab.activeBackground #FFB3C6
tab.activeBorder #FFB3C6
tab.activeBorderTop #E31414
tab.activeForeground #3D0A0D
tab.border #FFCCD540
tab.hoverBackground #FF758F
tab.hoverForeground #FFFFFF
tab.inactiveBackground #E31414
tab.inactiveForeground #FFFFFF
tab.lastPinnedBorder #FF8FA3
tab.unfocusedActiveBackground #FFB3C6
tab.unfocusedActiveBorder #FFB3C6
tab.unfocusedActiveBorderTop #E3141480
tab.unfocusedActiveForeground #3D0A0D80
tab.unfocusedInactiveBackground #E31414CC
tab.unfocusedInactiveForeground #FFFFFFAA
terminal.ansiBlack #3D0A0D
terminal.ansiBlue #590D22
terminal.ansiBrightBlack #4A1A24
terminal.ansiBrightBlue #A4133C
terminal.ansiBrightCyan #FFCCD5
terminal.ansiBrightGreen #FF758F
terminal.ansiBrightMagenta #E31414
terminal.ansiBrightRed #FF4D6D
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFB3C6
terminal.ansiCyan #FF8FA3
terminal.ansiGreen #A4133C
terminal.ansiMagenta #FF4D6D
terminal.ansiRed #E31414
terminal.ansiWhite #FFF0F2
terminal.ansiYellow #FF758F
terminal.background #FFF6F7
terminal.border #FFCCD560
terminal.foreground #3D0A0D
terminal.inactiveSelectionBackground #FFCCD530
terminal.selectionBackground #FF8FA344
terminalCursor.background #FFF6F7
terminalCursor.foreground #E31414
textBlockQuote.background #FFF0F2
textBlockQuote.border #E31414
textCodeBlock.background #FFF0F2
textLink.activeForeground #A4133C
textLink.foreground #E31414
textPreformat.background #FFF0F2
textPreformat.foreground #A4133C
textSeparator.foreground #FFCCD5
titleBar.activeBackground #E31414
titleBar.activeForeground #FFFFFF
titleBar.border #E31414
titleBar.inactiveBackground #E31414CC
titleBar.inactiveForeground #FFE5ECB0
tree.inactiveIndentGuidesStroke #FFCCD580
tree.indentGuidesStroke #FFCCD5
tree.tableColumnsBorder #FFCCD5
walkThrough.embeddedEditorBackground #FFF6F7
welcomePage.background #FFF6F7
welcomePage.progress.background #FFCCD5
welcomePage.progress.foreground #E31414
welcomePage.tileBackground #FFF0F2
welcomePage.tileHoverBackground #FFE5EC
widget.shadow #E3141415
window.activeBorder #FFE5EC
window.inactiveBorder #FFE5EC variable.parameter #FF758F italic
variable.other.property, meta.object-literal.key #A4133C italic
entity.name.type, entity.name.class, support.class #A4133C bold
string, punctuation.definition.string, string.template #FF8FA3 —
constant.numeric, constant.language #E31414 bold
comment, punctuation.definition.comment #F78B8B italic
keyword.operator, punctuation, meta.delimiter #FF9EB0 bold
entity.name.tag, meta.tag.sgml #E31414 bold
entity.other.attribute-name #FF758F italic
meta.selector, entity.name.tag.css #E31414 bold
support.type.property-name.css, meta.property-name #A4133C —
meta.property-value, support.constant.property-value #FF758F —
keyword.control.import, keyword.control.from, keyword.control.export #E31414 bold
meta.decorator, punctuation.decorator #FF4D6D italic
markup.heading #E31414 bold
markup.italic #FF758F italic
markup.underline.link #E31414 —
markup.inline.raw, markup.fenced_code.block #A4133C —
invalid, invalid.illegal #FFFFFF —
components
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
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}!`;
}
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 $