Skip to main content
Home Theme VS Code Touch Grass a vscode theme to help you feel like you are touching grass
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 #1E2F23 activityBar.border #1E2F2360 activityBar.foreground #88D4AB activityBarBadge.background #67B99A activityBarBadge.foreground #1E2F23 badge.background #1E2F2330 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #4AD66D — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #469D89 — constant.other.php #4AD66D —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Touch Grass — touch-grass
badge.foreground
#248277
breadcrumb.activeSelectionForeground #248277
breadcrumb.background #1E2F23
breadcrumb.focusForeground #88D4AB
breadcrumb.foreground #56AB91
breadcrumbPicker.background #1E2F23
button.background #24827750
contrastBorder #24827740
debugToolBar.background #1E2F23
diffEditor.insertedTextBackground #469D8915
diffEditor.removedTextBackground #99E2B420
dropdown.background #1E2F23
dropdown.border #99E2B410
editor.background #1E2F23
editor.findMatchBackground #1E2F23
editor.findMatchBorder #248277
editor.findMatchHighlightBackground #24827793
editor.findMatchHighlightBorder #99E2B430
editor.foreground #88D4AB
editor.lineHighlightBackground #1E2F2350
editor.selectionBackground #67B99A30
editor.selectionHighlightBackground #2482776b
editor.selectionHighlightBorder #67B99Af0
editorBracketMatch.background #1E2F23
editorBracketMatch.border #4AD66D7f
editorCursor.foreground #4AD66D
editorError.foreground #99E2B470
editorGroup.border #1E2F2330
editorGroupHeader.tabsBackground #1E2F23
editorGutter.addedBackground #469D8960
editorGutter.deletedBackground #99E2B460
editorGutter.modifiedBackground #67B99A60
editorHoverWidget.background #1E2F23
editorHoverWidget.border #99E2B410
editorIndentGuide.activeBackground #248277
editorIndentGuide.background #24827770
editorInfo.foreground #67B99A70
editorLineNumber.activeForeground #67B99A
editorLineNumber.foreground #248277c0
editorLink.activeForeground #88D4AB
editorMarkerNavigation.background #88D4AB05
editorOverviewRuler.border #1E2F23
editorOverviewRuler.errorForeground #99E2B440
editorOverviewRuler.findMatchForeground #248277
editorOverviewRuler.infoForeground #67B99A40
editorOverviewRuler.warningForeground #4AD66D70
editorRuler.foreground #248277
editorSuggestWidget.background #1E2F23
editorSuggestWidget.border #99E2B410
editorSuggestWidget.foreground #88D4AB
editorSuggestWidget.highlightForeground #4AD66D
editorSuggestWidget.selectedBackground #24827720
editorWarning.foreground #469D89
editorWhitespace.foreground #88D4AB40
editorWidget.background #1E2F23
editorWidget.border #4AD66D
editorWidget.resizeBorder #248277
extensionButton.prominentBackground #469D8990
extensionButton.prominentHoverBackground #99E2B4
focusBorder #99E2B400
gitDecoration.conflictingResourceForeground #4AD66D
gitDecoration.deletedResourceForeground #99E2B4
gitDecoration.ignoredResourceForeground #248277
gitDecoration.modifiedResourceForeground #56AB91
gitDecoration.untrackedResourceForeground #67B99A
input.background #14746F
input.border #99E2B410
input.foreground #88D4AB
input.placeholderForeground #88D4AB60
inputOption.activeBackground #88D4AB30
inputOption.activeBorder #88D4AB30
inputValidation.errorBorder #99E2B450
inputValidation.infoBorder #67B99A50
inputValidation.warningBorder #4AD66D50
list.activeSelectionBackground #1E2F23
list.activeSelectionForeground #248277
list.focusBackground #14746F
list.focusForeground #67B99A
list.highlightForeground #248277
list.hoverBackground #248277
list.hoverForeground #99E2B4
list.inactiveSelectionBackground #1E2F2330
list.inactiveSelectionForeground #248277
list.warningForeground #4AD66D
listFilterWidget.background #1E2F2330
listFilterWidget.noMatchesOutline #1E2F2330
listFilterWidget.outline #1E2F2330
menu.background #1E2F23f8
menu.border #24827750
menu.foreground #88D4AB
menu.selectionBackground #14746F
menu.selectionBorder #1E2F2330
menu.selectionForeground #88D4AB
menu.separatorBackground #88D4AB
menubar.selectionBackground #14746F
menubar.selectionBorder #24827750
menubar.selectionForeground #88D4AB
minimap.background #1E2F23
minimapGutter.addedBackground #99E2B4
minimapGutter.deletedBackground #4AD66D
minimapGutter.modifiedBackground #469D89
minimapSlider.activeBackground #469D89b0
minimapSlider.background #469D8980
minimapSlider.hoverBackground #469D89a0
notificationLink.foreground #248277
notifications.background #1E2F23
notifications.foreground #88D4AB
panel.background #1E2F23
panel.border #1E2F2360
panelTitle.activeBorder #248277
panelTitle.activeForeground #99E2B4
panelTitle.inactiveForeground #88D4AB
peekView.border #1E2F2330
peekViewEditor.background #88D4AB05
peekViewEditor.matchHighlightBackground #24827750
peekViewEditorGutter.background #88D4AB05
peekViewResult.background #88D4AB05
peekViewResult.matchHighlightBackground #24827750
peekViewResult.selectionBackground #24827770
peekViewTitle.background #88D4AB05
peekViewTitleDescription.foreground #88D4AB60
pickerGroup.foreground #248277
progressBar.background #248277
scrollbar.shadow #1E2F2300
scrollbarSlider.activeBackground #248277cc
scrollbarSlider.background #248277bb
scrollbarSlider.hoverBackground #248277ee
selection.background #248277
settings.checkboxBackground #1E2F23
settings.checkboxForeground #88D4AB
settings.dropdownBackground #1E2F23
settings.dropdownForeground #88D4AB
settings.headerForeground #248277
settings.modifiedItemIndicator #248277
settings.numberInputBackground #1E2F23
settings.numberInputForeground #88D4AB
settings.textInputBackground #1E2F23
settings.textInputForeground #88D4AB
sideBar.background #1E2F23
sideBar.border #24827750
sideBar.foreground #67B99A
sideBarSectionHeader.background #1E2F23
sideBarSectionHeader.border #1E2F2360
sideBarSectionHeader.foreground #67B99A
sideBarTitle.foreground #88D4AB
statusBar.background #10451D
statusBar.border #1E2F2360
statusBar.debuggingBackground #4AD66D
statusBar.debuggingForeground #99E2B4
statusBar.foreground #78C6A3
statusBar.noFolderBackground #1E2F23
statusBarItem.hoverBackground #24827720
statusBarItem.remoteBackground #248277
statusBarItem.remoteForeground #1E2F23
tab.activeBackground #24827750
tab.activeBorder #248277
tab.activeForeground #99E2B4
tab.activeModifiedBorder #248277
tab.border #1E2F23
tab.inactiveBackground #24827720
tab.inactiveForeground #88D4ABaf
tab.unfocusedActiveBackground #24827740
tab.unfocusedActiveBorder #248277
tab.unfocusedActiveForeground #88D4AB
tab.unfocusedInactiveBackground #24827710
tab.unfocusedInactiveForeground #88D4AB7f
terminal.ansiBlack #1E2F23
terminal.ansiBlue #67B99A
terminal.ansiBrightBlack #248277
terminal.ansiBrightBlue #67B99A
terminal.ansiBrightCyan #78C6A3
terminal.ansiBrightGreen #469D89
terminal.ansiBrightMagenta #4AD66D
terminal.ansiBrightRed #99E2B4
terminal.ansiBrightWhite #99E2B4
terminal.ansiBrightYellow #4AD66D
terminal.ansiCyan #78C6A3
terminal.ansiGreen #469D89
terminal.ansiMagenta #4AD66D
terminal.ansiRed #99E2B4
terminal.ansiWhite #99E2B4
terminal.ansiYellow #4AD66D
terminalCursor.background #1E2F23
terminalCursor.foreground #4AD66D
textLink.activeForeground #88D4AB
textLink.foreground #248277
titleBar.activeBackground #1E2F23
titleBar.activeForeground #88D4AB
titleBar.border #1E2F2360
titleBar.inactiveBackground #1E2F23
titleBar.inactiveForeground #248277
tree.indentGuidesStroke #248277
widget.shadow #1E2F2330 invalid, invalid.illegal #99E2B4 —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #A7A8AF —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #56AB91 —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #88D4AB —
punctuation.definition, string.quoted.single.scss #A7A8AF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #6D6F7C —
text.html.derivative #A7A8AF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #88D4AB —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.keyframe-list.css #4AD66D —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #56AB91
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #67B99A —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #78C6A3 —
support.other.variable, string.other.link, markup.table #88D4AB —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #4AD66D —
variable.parameter.function.language.special, variable.parameter #99E2B4 —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #469D89
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #4AD66D —
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 #56AB91 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #99E2B4 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #67B99A italic
entity.other.attribute-name, support.function #4AD66D —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #88D4AB —
source.scss keyword.control #4AD66D —
constant.character.escape #78C6A3 —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #88D4AB italic
support.type.property-name.json #88D4AB —
text.html.markdown, punctuation.definition.list_item.markdown #88D4AB —
text.html.markdown markup.inline.raw.markdown #4AD66D —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #24827750 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #56AB91 bold
markup.underline #67B99A underline
markup.quote punctuation.definition.blockquote.markdown #24827750 —
string.other.link.description.title.markdown #4AD66D —
constant.other.reference.link.markdown #4AD66D —
punctuation.definition.raw.markdown, punctuation.definition.markdown #78C6A3 —
variable.language.fenced.markdown #248277 —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #78C6A3 —
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...
main*
Touch Grass | Coding Theme Button.tsx
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 } ! ` ;
}