Skip to main content
Home Theme VS Code Cosy Orange Themes A collection of warm, low-saturation, low-contrast orange dark theme.
Cosy Orange Themes | 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 #171717 activityBar.border #cccccc1f activityBar.foreground #c1a08d activityBar.inactiveForeground #c1a08d5a activityBarBadge.background #d77e3c activityBarBadge.foreground #1b1b1b tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle text, meta.paragraph #f5d7c2e0 — comment, punctuation.definition.comment #947A83FF italic variable, variable.parameter, string constant.other.placeholder, string meta.interpolation, meta.block variable.other, meta.function.call.rust, meta.method-call.java, meta.object.member, support.other.variable, support.variable, string.other.link, string.other.link.title.markdown, entity.other.attribute-name, meta.tag, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, source.json meta.structure.dictionary.json support.type.property-name.json #E0AA8FFF — constant.language, support.constant, constant.character, constant.escape, constant.keyword, constant.other.caps, constant.other.php, constant.other.class, constant.other.option, variable.other.constant, source.sass keyword.control, constant.other.reference.link.markdown
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Cosy Orange Themes — Cosy Orange Theme
activityWarningBadge.background #cf1e33
badge.background #3b3835
badge.foreground #f5d7c2
breadcrumb.focusForeground #ffe1cb
button.background #c77332
button.foreground #1b1b1b
button.hoverBackground #e9893f
button.secondaryBackground #343638
button.secondaryForeground #f5d7c2
button.secondaryHoverBackground #3c3e41
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #f5d7c2
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #f5d7c2
editor.background #1b1b1b
editor.findMatchBackground #ea5c004d
editor.findMatchBorder #98621a
editor.findMatchHighlightBackground #6e573d89
editor.findMatchHighlightBorder #f5d7c200
editor.findRangeHighlightBackground #413a3a66
editor.findRangeHighlightBorder #f5d7c200
editor.foldBackground #8f4c2a90
editor.foreground #f5d7c2
editor.hoverHighlightBackground #c45b2739
editor.inactiveSelectionBackground #9d775823
editor.lineHighlightBackground #f5d7c20b
editor.lineHighlightBorder #f5d7c211
editor.rangeHighlightBackground #f5d7c20b
editor.rangeHighlightBorder #f5d7c200
editor.selectionBackground #9d77584a
editor.selectionHighlightBackground #6e573d89
editor.selectionHighlightBorder #98621a
editor.wordHighlightBackground #c45b275c
editorBracketHighlight.foreground1 #ffbb54
editorBracketHighlight.foreground2 #c3529d
editorBracketHighlight.foreground3 #4497bb
editorBracketMatch.background #2d2d2d
editorBracketMatch.border #888888
editorCodeLens.foreground #666666
editorCursor.background #000000
editorCursor.foreground #d6bfaf
editorError.background #B73A3400
editorError.border #f5d7c200
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #1b1b1b
editorGroupHeader.border #fb6e0700
editorGroupHeader.tabsBackground #171717
editorGroupHeader.tabsBorder #cccccc1f
editorGutter.addedBackground #566e21
editorGutter.background #1b1b1b
editorGutter.commentGlyphForeground #865151
editorGutter.commentRangeForeground #e9893f
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #1b1b1b
editorHoverWidget.border #454545
editorHoverWidget.foreground #f5d7c2
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #f5d7c2f0
editorLineNumber.foreground #685b52
editorLink.activeForeground #db6e14
editorMarkerNavigation.background #171717
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #ffbb54
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorStickyScroll.shadow #121212
editorSuggestWidget.background #1b1b1b
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #f5d7c2
editorSuggestWidget.highlightForeground #fb6e07
editorSuggestWidget.selectedBackground #dc732875
editorSuggestWidget.selectedForeground #f5d7c2
editorWarning.background #A9904000
editorWarning.border #f5d7c200
editorWarning.foreground #ffbb54
editorWhitespace.foreground #e3e4e229
editorWidget.background #1b1b1b
editorWidget.foreground #f5d7c2
editorWidget.resizeBorder #5F5F5F
focusBorder #b2611e8b
foreground #f5d7c2
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #f5d7c2
input.background #292725
input.border #5f4e44
input.foreground #f5d7c2
input.placeholderForeground #a18c7f
inputOption.activeBackground #be5305
inputOption.activeBorder #007acc00
inputOption.activeForeground #f5d7c2
list.activeSelectionBackground #a9571d81
list.activeSelectionForeground #f5d7c2
list.dropBackground #3d3a38
list.focusBackground #fb6e073e
list.focusForeground #f5d7c2
list.highlightForeground #d86614
list.hoverBackground #232323
list.hoverForeground #c97a40
list.inactiveSelectionBackground #ba61224d
list.inactiveSelectionForeground #f5d7c2e8
list.warningForeground #dcb13a
listFilterWidget.background #fb6e073a
listFilterWidget.noMatchesOutline #fb6e07a9
listFilterWidget.outline #fb6e073e
menu.background #1b1b1b
menu.border #00000032
menu.foreground #f5d7c2
menu.selectionBackground #2f2b27
menu.selectionForeground #eb7d2ee0
menu.separatorBackground #2e2e2e
menubar.selectionBackground #2f2b27
menubar.selectionForeground #f5d7c2
minimap.background #1b1b1b
minimap.errorHighlight #f48771
minimap.findMatchHighlight #ff73006d
minimap.selectionHighlight #fb6e072e
minimap.warningHighlight #ffbb54
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #f5d7c2
notifications.background #1b1b1b
notifications.border #303031
notifications.foreground #f5d7c2
notificationsErrorIcon.foreground #db6060
notificationsInfoIcon.foreground #649ed1
notificationsWarningIcon.foreground #ffbb54
notificationToast.border #474747
panel.background #1b1b1b
panel.border #282828
panelTitle.activeBorder #ba692e
panelTitle.activeForeground #d96d1e
panelTitle.inactiveForeground #a18c7f
peekView.border #454545
peekViewEditor.background #271f1c
peekViewEditor.matchHighlightBackground #ea5c004d
peekViewEditor.matchHighlightBorder #98621a
peekViewEditorGutter.background #1b1513d2
peekViewResult.background #181818
peekViewResult.fileForeground #f5d7c2
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #fb6e0748
peekViewResult.selectionForeground #f5d7c2
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #f5d7c2b3
peekViewTitleLabel.foreground #d7d7d7
pickerGroup.border #3f3f46
pickerGroup.foreground #a14b0d
progressBar.background #e9893f
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #94949458
scrollbarSlider.hoverBackground #646464b3
selection.background #fc690076
sideBar.background #1b1b1b
sideBar.border #cccccc1f
sideBar.dropBackground #3d3a38
sideBar.foreground #c1a08dca
sideBarSectionHeader.background #232323
sideBarSectionHeader.border #fb6e0700
sideBarSectionHeader.foreground #f5d7c2
sideBarTitle.foreground #c1a08dca
statusBar.background #282828
statusBar.border #3c3836
statusBar.debuggingBackground #e9893f
statusBar.debuggingBorder #28282800
statusBar.debuggingForeground #282828
statusBar.foreground #f5d7c2
statusBar.noFolderBackground #282828
statusBar.noFolderBorder #28282800
statusBarItem.remoteBackground #282626
statusBarItem.remoteForeground #f5d7c2
tab.activeBackground #1b1b1b
tab.activeBorder #1b1b1b
tab.activeBorderTop #d56819
tab.activeForeground #f5d7c2
tab.hoverBackground #242424
tab.inactiveBackground #1b1b1b
tab.inactiveForeground #a18c7f
tab.unfocusedActiveForeground #847468
tab.unfocusedInactiveForeground #685b52
terminal.ansiBlack #3c3836
terminal.ansiBlue #458588
terminal.ansiBrightBlack #928374
terminal.ansiBrightBlue #83a598
terminal.ansiBrightCyan #8ec07c
terminal.ansiBrightGreen #b8bb26
terminal.ansiBrightMagenta #d3869b
terminal.ansiBrightRed #fb4934
terminal.ansiBrightWhite #ebdbb2
terminal.ansiBrightYellow #ffcd57
terminal.ansiCyan #689d6a
terminal.ansiGreen #98971a
terminal.ansiMagenta #b16286
terminal.ansiRed #cc241d
terminal.ansiWhite #a89984
terminal.ansiYellow #d79921
terminal.foreground #f5d7c2
textLink.activeForeground #a74e0e
textLink.foreground #e17c35
textPreformat.foreground #ff6a00
titleBar.activeBackground #1b1b1b
titleBar.activeForeground #bda595
titleBar.border #cccccc1f
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c source.css support.constant, support.constant.property-value, constant.other.color, meta.property-value.css #ACA4B7FF —
invalid, invalid.illegal #EB4747FF —
entity.name.tag, keyword, keyword.operator.new, meta.tag.sgml, markup.deleted.git_gutter, storage.type, storage.modifier, variable.language #de8872 —
meta.brace, meta.object.member meta.brace, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation variable, punctuation variable.parameter, keyword.other.template, keyword.other.substitution #9F6F63FF —
keyword.operator, punctuation.separator.statement, storage.modifier.reference, meta.separator, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.section.embedded #4C928BFF —
entity.name.function, entity.name.method.js, entity.name.module.js, keyword.other.special-method, meta.class-method.js entity.name.function.js, meta.function-call, support.function, variable.function, variable.function.constructor, variable.import.parameter.js, variable.other.class.js, markup.underline.link, meta.global-method #e29c52 —
constant.numeric, keyword.other.unit #98B080FF —
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #DF8D53FF —
markup.inline.raw.string.markdown, string.regexp, text.html.markdown markup.inline.raw.markdown #E7AA7EFF —
entity.name, entity.other.attribute-name.class, entity.other.inherited-class, markup.changed.git_gutter, meta.use, storage.type.annotation, storage.type.java, storage.modifier.import.java, storage.modifier.package.java, support.class, support.other.namespace.use.php, support.other.namespace.php, support.type, support.type.sys-types, meta.void #c8424d —
*url*, *link*, *uri*, markup.underline — underline
heading.1.markdown punctuation.definition.heading #FF9980FF —
heading.2.markdown punctuation.definition.heading #EA876FFF —
heading.3.markdown punctuation.definition.heading #C76C57FF —
heading.4.markdown punctuation.definition.heading #BA604AFF —
heading.5.markdown punctuation.definition.heading #A85B48FF —
heading.6.markdown punctuation.definition.heading #945747FF —
heading.1.markdown entity.name — bold
heading.2.markdown entity.name #DE658BF2 bold
heading.4.markdown entity.name #E36189F2 —
heading.5.markdown entity.name #DA6A8CE6 —
heading.6.markdown entity.name #D07390D9 —
markup.italic, markup.quote — italic
markup.bold, markup.bold string — bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string — italic bold
string.other.link.description.title.markdown #CEC1A6FF —
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 } ! ` ;
}