Skip to main content
Home Theme VS Code YSTM-COLORS Светлая тема в бежевых тонах. Сверстана с учетом предыдущего опыта и уставшего зрения.
YSTM-COLORS | 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.activeBackground #413030 activityBar.activeBorder #c5ff17 activityBar.background #3a3030 activityBar.border #2e2626 activityBar.foreground #adadad activityBar.inactiveForeground #7d5757 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment, string.quoted.docstring.multi.python #abb3bb — constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity, support.constant.property-value.css #42639f bold entity.name, meta.export.default, meta.definition.variable #953800 — variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background
#ffcbe2
activityBarBadge.foreground #15202b
activityBarTop.foreground #677676
badge.background #ffdede
badge.foreground #000000
breadcrumb.activeSelectionForeground #3d3d3d
breadcrumb.background #fff4f4
breadcrumb.focusForeground #3d3d3d
breadcrumb.foreground #616161cc
breadcrumbPicker.background #ffffff
button.background #2194d6
button.foreground #ffffff
button.hoverBackground #0062a3
button.secondaryBackground #5f6a79
button.secondaryForeground #ffffff
button.secondaryHoverBackground #4c5561
checkbox.background #f1ffee
checkbox.border #c6c6c6
checkbox.foreground #616161
debugConsole.errorForeground #cf222e
debugConsole.infoForeground #57606a
debugConsole.sourceForeground #9a6700
debugConsole.warningForeground #7d4e00
debugConsoleInputIcon.foreground #6639ba
debugExceptionWidget.background #000000
debugExceptionWidget.border #d5d5d5
debugIcon.breakpointForeground #cf222e
debugTokenExpression.boolean #116329
debugTokenExpression.error #a40e26
debugTokenExpression.name #0550ae
debugTokenExpression.number #116329
debugTokenExpression.string #0a3069
debugTokenExpression.value #0a3069
debugToolBar.background #ffffff
debugToolBar.border #d5d5d5
descriptionForeground #57606a
diffEditor.border #ffffff
diffEditor.insertedLineBackground #91d8959a
diffEditor.insertedTextBackground #ffffff6e
diffEditor.removedLineBackground #ffc8c59b
diffEditor.removedTextBackground #ff7f7f6e
diffEditor.removedTextBorder #00000000
dropdown.background #ffffff
dropdown.border #f0f8ff
dropdown.foreground #616161
dropdown.listBackground #f0fdff
editor.background #fffff4
editor.findMatchBackground #ddffd6b0
editor.findMatchBorder #ffa0a0
editor.findMatchForeground #b30000
editor.findMatchHighlightBackground #ffb5b555
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #b4b4b41e
editor.findRangeHighlightBorder #bcbcbc0a
editor.focusedStackFrameHighlightBackground #4ac26b66
editor.foldBackground #fff2c877
editor.foreground #7c7c7c
editor.hoverHighlightBackground #add6ff64
editor.inactiveSelectionBackground #e5ebf122
editor.inlineValuesBackground #7e646418
editor.lineHighlightBackground #0000000a
editor.lineHighlightBorder #eeeeee
editor.linkedEditingBackground #0969da12
editor.rangeHighlightBackground #fdff0033
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #f0eadd
editor.selectionHighlightBackground #c9b49522
editor.selectionHighlightBorder #ffd0d0
editor.stackFrameHighlightBackground #d4a72c66
editor.wordHighlightBackground #57575740
editor.wordHighlightBorder #afb8c199
editor.wordHighlightStrongBackground #0e639c40
editor.wordHighlightStrongBorder #afb8c199
editorBracketHighlight.foreground1 #0969da
editorBracketHighlight.foreground2 #1a7f37
editorBracketHighlight.foreground3 #9a6700
editorBracketHighlight.foreground4 #cf222e
editorBracketHighlight.foreground5 #bf3989
editorBracketHighlight.foreground6 #8250df
editorBracketHighlight.unexpectedBracket.foreground #57606a
editorBracketMatch.background #00ff0062
editorBracketMatch.border #b9b9b9
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #cf7d7d
editorError.background #ff00001f
editorError.border #ffc7c7c9
editorError.foreground #ff796d
editorGroup.border #ffd5d5
editorGroup.emptyBackground #fffaf5
editorGroupHeader.tabsBackground #f3f3f3
editorGroupHeader.tabsBorder #fffafa
editorGutter.addedBackground #81b88b
editorGutter.background #fffff4
editorGutter.commentRangeForeground #b6b6b6
editorGutter.deletedBackground #ca4b51
editorGutter.foldingControlForeground #808080
editorGutter.modifiedBackground #66afe0
editorHoverWidget.background #fffff8
editorHoverWidget.border #9cbedfa1
editorHoverWidget.foreground #777777
editorIndentGuide.activeBackground1 #939393
editorIndentGuide.background1 #d3d3d3
editorInfo.background #4490bf00
editorInfo.border #4490bf00
editorInfo.foreground #75beff
editorInlayHint.background #afb8c133
editorInlayHint.foreground #57606a
editorInlayHint.typeBackground #afb8c133
editorInlayHint.typeForeground #57606a
editorLineNumber.activeForeground #000000
editorLineNumber.foreground #c7c7c7
editorLink.activeForeground #0062be
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #ff3f2d
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #e9a700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #ffeeee
editorSuggestWidget.background #fffafa
editorSuggestWidget.focusHighlightForeground #ffffff
editorSuggestWidget.foreground #806c54
editorSuggestWidget.highlightForeground #737271
editorSuggestWidget.selectedBackground #a4831d
editorWarning.background #a9904000
editorWarning.border #ffffff00
editorWarning.foreground #e9a700
editorWhitespace.foreground #cccccc
editorWidget.background #f0f0f0
editorWidget.foreground #555555
editorWidget.resizeBorder #c7c7c7
errorForeground #cf222e
focusBorder #ffcece00
foreground #8e8e8e
gitDecoration.addedResourceForeground #5a8400
gitDecoration.conflictingResourceForeground #ffc2c2
gitDecoration.deletedResourceForeground #a96c6c
gitDecoration.ignoredResourceForeground #c6c6c6
gitDecoration.modifiedResourceForeground #9f934e
gitDecoration.stageDeletedResourceForeground #b0b0b0
gitDecoration.stageModifiedResourceForeground #d7a85e
gitDecoration.submoduleResourceForeground #93bae6
gitDecoration.untrackedResourceForeground #7eba7e
icon.foreground #ff6613
input.background #ffffff
input.border #ead0d0b6
input.foreground #616161
input.placeholderForeground #767676
inputOption.activeBackground #0090f133
inputOption.activeBorder #007acc00
inputOption.activeForeground #000000
keybindingLabel.foreground #24292f
list.activeSelectionBackground #000000
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #00cd18
list.dropBackground #000000
list.focusBackground #fffac2
list.focusForeground #000000
list.focusHighlightForeground #b5c1ff
list.focusOutline #ffb9b9
list.highlightForeground #0066bf
list.hoverBackground #7773731c
list.hoverForeground #787553
list.inactiveFocusBackground #fffcda
list.inactiveSelectionBackground #adceff6a
list.inactiveSelectionForeground #000000
listFilterWidget.background #000000
listFilterWidget.noMatchesOutline #363636
listFilterWidget.outline #00000000
menu.background #fff3f3
menu.border #ffcaca85
menu.foreground #7b5858
menu.selectionBackground #ff8282
menu.selectionBorder #ff7676
menu.selectionForeground #ffffff
menu.separatorBackground #d5d5d5
menubar.selectionBackground #0000001a
menubar.selectionForeground #ffb300
merge.commonContentBackground #e5e5e5
merge.commonHeaderBackground #bfbfbf
merge.currentContentBackground #f4dbdb
merge.currentHeaderBackground #e3a4a4
merge.incomingContentBackground #dbecff
merge.incomingHeaderBackground #a6cfff
minimap.background #fffaf5
minimap.errorHighlight #ff3f2d
minimap.findMatchHighlight #ffffff
minimap.selectionHighlight #f0eadd
minimap.warningHighlight #e9a700
minimapGutter.addedBackground #81b88b
minimapGutter.deletedBackground #ca4b51
minimapGutter.modifiedBackground #66afe0
notebook.cellBorderColor #ffebeb
notebook.focusedEditorBorder #939393
notebook.outputContainerBorderColor #ffcbcb
notificationCenter.border #d5d5d5
notificationCenterHeader.background #e7e7e7
notificationCenterHeader.foreground #616161
notifications.background #f3f3f3
notifications.border #e7e7e7
notifications.foreground #616161
notificationsErrorIcon.foreground #ff3f2d
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #e9a700
notificationToast.border #d5d5d5
panel.background #ffffff
panel.border #986d00
panel.dropBorder #fa0000
panelInput.border #d0d7de
panelSection.border #80808059
panelTitle.activeBorder #424242
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #996666
peekView.border #e8d5a8
peekViewEditor.background #fcffda
peekViewEditor.matchHighlightBackground #ffe100de
peekViewEditor.matchHighlightBorder #ffe62e
peekViewEditorGutter.background #f9f4d1
peekViewResult.background #f9f1d3
peekViewResult.fileForeground #1e1e1e
peekViewResult.lineForeground #ababab
peekViewResult.matchHighlightBackground #ffffff7e
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #6c6c6c
peekViewTitle.background #ffdfc2
peekViewTitleDescription.foreground #883131e6
peekViewTitleLabel.foreground #131313
pickerGroup.border #c4c4c4
pickerGroup.foreground #555555
ports.iconRunningProcessForeground #a718c4
problemsErrorIcon.foreground #ff796d
problemsInfoIcon.foreground #75beff
problemsWarningIcon.foreground #e9a700
progressBar.background #ff8400
quickInput.background #ffffff
quickInput.foreground #24292f
sash.hoverBorder #1f6fd0
scrollbar.shadow #b2b2b2
scrollbarSlider.activeBackground #00000099
scrollbarSlider.background #97c10054
scrollbarSlider.hoverBackground #646464b3
search.resultsInfoForeground #a6af9d
selection.background #ffdfdffb
settings.checkboxBackground #f6ffeb
settings.checkboxBorder #ccc
settings.dropdownBackground #fffff5
settings.dropdownBorder #d1cab9
settings.dropdownListBorder #ff5353
settings.focusedRowBackground #ffffff07
settings.headerForeground #9d9090
settings.modifiedItemIndicator #ff5353
sideBar.background #fff9f9
sideBar.border #ffdbdb
sideBar.dropBackground #000000
sideBar.foreground #79786c
sideBarSectionHeader.background #d36c6c2c
sideBarSectionHeader.border #4f4e4e4e
sideBarSectionHeader.foreground #4d3f3d
sideBarTitle.foreground #828282
statusBar.background #503e2b
statusBar.border #3b3b3b
statusBar.debuggingBackground #980000
statusBar.debuggingForeground #ffffff
statusBar.focusBorder #0969da80
statusBar.foreground #ffffff
statusBar.noFolderBackground #86592d
statusBar.noFolderBorder #545454
statusBar.noFolderForeground #e8e8e8
statusBarItem.activeBackground #ffffff25
statusBarItem.focusBorder #0969da
statusBarItem.hoverBackground #ffffff1f
statusBarItem.prominentBackground #afb8c133
statusBarItem.remoteBackground #a718c4
statusBarItem.remoteForeground #ffffff
symbolIcon.arrayForeground #9b5c34
symbolIcon.booleanForeground #7da1d0
symbolIcon.classForeground #977b69
symbolIcon.colorForeground #ff6262
symbolIcon.constantForeground #4471be
symbolIcon.constructorForeground #bf009f
symbolIcon.enumeratorForeground #c57979
symbolIcon.enumeratorMemberForeground #c2adad
symbolIcon.eventForeground #57606a
symbolIcon.fieldForeground #c57979
symbolIcon.fileForeground #7d4e00
symbolIcon.folderForeground #7d4e00
symbolIcon.functionForeground #2b77c9
symbolIcon.interfaceForeground #c57979
symbolIcon.keyForeground #c2adad
symbolIcon.keywordForeground #d3d399
symbolIcon.methodForeground #8e51ff
symbolIcon.moduleForeground #b08b8b
symbolIcon.namespaceForeground #a40e26
symbolIcon.nullForeground #8e6e6e
symbolIcon.numberForeground #1d843c
symbolIcon.objectForeground #c57979
symbolIcon.operatorForeground #c2adad
symbolIcon.packageForeground #c57979
symbolIcon.propertyForeground #84a3ac
symbolIcon.referenceForeground #c2adad
symbolIcon.snippetForeground #c2adad
symbolIcon.stringForeground #6c6565
symbolIcon.structForeground #c57979
symbolIcon.textForeground #a1a10b
symbolIcon.typeParameterForeground #c0bbbb
symbolIcon.unitForeground #c2adad
symbolIcon.variableForeground #876939
tab.activeBackground #fff4f4
tab.activeBorder #ff000000
tab.activeBorderTop #58c200
tab.activeForeground #333333
tab.activeModifiedBorder #d81010
tab.border #cdcdcd
tab.hoverBackground #ebebeb
tab.inactiveBackground #e0e0e0
tab.inactiveForeground #626262
tab.unfocusedActiveBorder #ffffff
tab.unfocusedActiveBorderTop #d0d7de
tab.unfocusedHoverBackground #eaeef280
terminal.ansiBlack #000000
terminal.ansiBlue #4c92de
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #2ea92e
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #b5ba00
terminal.ansiCyan #0598bc
terminal.ansiGreen #007b00
terminal.ansiMagenta #bc05bc
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #949800
terminal.border #80808059
terminal.findMatchBackground #ddffd6b3
terminal.findMatchHighlightBorder #ffcfcf
terminal.foreground #333333
terminal.selectionBackground #fac0c040
terminalCommandDecoration.errorBackground #ff4534
terminalCommandDecoration.successBackground #00c421
terminalCursor.background #ffffff
terminalCursor.foreground #6f3e09
textBlockQuote.background #f6f8fa
textBlockQuote.border #d0d7de
textCodeBlock.background #afb8c133
textLink.activeForeground #d19a00
textLink.foreground #006ab1
textPreformat.foreground #57606a
textSeparator.foreground #d8dee4
titleBar.activeBackground #3a2800
titleBar.activeForeground #e7e7e7
titleBar.border #dea7a78b
titleBar.inactiveBackground #cdcdcdb0
titleBar.inactiveForeground #e7e7e799
tree.indentGuidesStroke #918181d7
walkThrough.embeddedEditorBackground #ffffff
widget.shadow #00000033 #24292F
entity.name.function #8250DF —
entity.name.tag, support.class.component #ff6b6b —
string.template.js #6c992e italic
keyword, punctuation.definition.string.begin, punctuation.definition.string.end #CF222E —
meta.function.color.css, meta.function.gradient.css, meta.property-value.css #de00bc —
support.function.misc.css, source.css #4394ff —
storage, storage.type #CF222E —
storage.modifier.package, storage.modifier.import, storage.type.java #24292F —
string, string punctuation.section.embedded source #966a46 —
meta.property-name #0550AE —
invalid.broken #82071E italic
invalid.deprecated #82071E italic
invalid.illegal #82071E italic
invalid.unimplemented #82071E italic
carriage-return #F6F8FA italic underline
source.regexp, string.regexp #0A3069 —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #0A3069 —
string.regexp constant.character.escape #116329 bold
support.type.property-name.json #116329 —
meta.module-reference #0550AE —
punctuation.definition.list.begin.markdown #953800 —
markup.heading, markup.heading entity.name #c7353c bold
markup.italic #24292F italic
markup.underline — underline
markup.strikethrough — strikethrough
markup.inline.raw #0550AE —
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #82071E —
punctuation.section.embedded #CF222E —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #116329 —
markup.changed, punctuation.definition.changed #953800 —
markup.ignored, markup.untracked #EAEEF2 —
meta.diff.range #8250DF bold
meta.separator #0550AE bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #57606A —
brackethighlighter.unmatched #82071E —
constant.other.reference.link, string.other.link #0A3069 underline
token.error-token #CD3131 —
token.debug-token #800080 —
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
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...
main*
Button.tsx
fetchUser
31
~/my-project
$
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 }!` ;
}