Mountains and Rivers Theme

Name: Mountains and Rivers Theme
Author: yshwaker

Publisher: yshwakerThemes in package: 2

Light and dark VS Code themes inspired by the painting A Thousand Li of Rivers and Mountains

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Mountains and Rivers Theme — Mountains and Rivers

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ebeae6
activityBar.border#dad9d5
activityBar.foreground#252525
activityBar.inactiveForeground#515151e1
activityBarBadge.background#346D91
activityBarBadge.foreground#ffffff
badge.background#c4c4c4
badge.foreground#333333
breadcrumb.activeSelectionForeground#4e4e4e
breadcrumb.background#f4f3f2
breadcrumb.focusForeground#4e4e4e
breadcrumb.foreground#616161cc
button.background#346D91
button.foreground#ffffff
button.hoverBackground#25526f
button.secondaryBackground#5f6a79
button.secondaryForeground#ffffff
button.secondaryHoverBackground#4c5561
checkbox.background#ffffff
checkbox.border#00000000
checkbox.foreground#616161
debugExceptionWidget.background#f3f3f3
debugExceptionWidget.border#d5d5d5
debugToolBar.background#f3f3f3
debugToolBar.border#d5d5d5
diffEditor.border#d7d7d7
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#f5898933
dropdown.background#ffffff
dropdown.border#00000000
dropdown.foreground#616161
editor.background#F8F6F5
editor.findMatchBackground#736d6666
editor.findMatchBorder#00000010
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#b4b4b44d
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#add6ff4d
editor.foreground#1E2128
editor.hoverHighlightBackground#add6ff26
editor.inactiveSelectionBackground#e5ebf188
editor.lineHighlightBackground#ffffff0A
editor.lineHighlightBorder#eeeeee
editor.rangeHighlightBackground#fdff0033
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#e2e8ee
editor.selectionHighlightBackground#cbddff80
editor.selectionHighlightBorder#495f7704
editor.wordHighlightBackground#57575740
editor.wordHighlightStrongBackground#0e639c40
editorBracketHighlight.foreground1#b84778
editorBracketHighlight.foreground2#78b847
editorBracketHighlight.foreground3#4778b8
editorBracketHighlight.foreground4#b84778
editorBracketHighlight.foreground5#78b847
editorBracketHighlight.foreground6#4778b8
editorBracketMatch.background#0064001a
editorBracketMatch.border#b9b9b9
editorCodeLens.foreground#999999
editorCursor.background#454545
editorCursor.foreground#cbb99d
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#e51400
editorGroup.border#e7e7e7
editorGroup.emptyBackground#f4f3f2
editorGroupHeader.tabsBackground#f3f3f3
editorGutter.addedBackground#81b88b
editorGutter.background#f4f3f2
editorGutter.commentRangeForeground#424242
editorGutter.deletedBackground#ca4b51
editorGutter.foldingControlForeground#424242
editorGutter.modifiedBackground#66afe0
editorHoverWidget.background#f3f3f3
editorHoverWidget.border#c8c8c8
editorHoverWidget.foreground#616161
editorIndentGuide.activeBackground1#a9aaab
editorIndentGuide.background1#d3d3d3
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#75beff
editorLineNumber.activeForeground#0b216f
editorLineNumber.foreground#237893
editorLink.activeForeground#0000ff
editorMarkerNavigation.background#ffffff
editorMarkerNavigationError.background#e51400
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#e9a700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#d3d3d3
editorSuggestWidget.background#e7e7e5
editorSuggestWidget.border#c8c8c8
editorSuggestWidget.focusHighlightForeground#ffffff
editorSuggestWidget.foreground#4f4f4f
editorSuggestWidget.highlightForeground#3b3b3b
editorSuggestWidget.selectedBackground#64788d
editorSuggestWidget.selectedForeground#d2dde8
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#e9a700
editorWhitespace.foreground#33333333
editorWidget.background#f3f3f3
editorWidget.foreground#616161
editorWidget.resizeBorder#c7c7c7
focusBorder#346D91
foreground#616161
gitDecoration.addedResourceForeground#587c0c
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#ad0707
gitDecoration.ignoredResourceForeground#8e8e90
gitDecoration.modifiedResourceForeground#895503
gitDecoration.stageDeletedResourceForeground#ad0707
gitDecoration.stageModifiedResourceForeground#895503
gitDecoration.submoduleResourceForeground#1258a7
gitDecoration.untrackedResourceForeground#007100
icon.foreground#616161
input.background#ffffff
input.border#00000000
input.foreground#616161
input.placeholderForeground#767676
inputOption.activeBackground#0090f133
inputOption.activeBorder#007acc00
inputOption.activeForeground#000000
list.activeSelectionBackground#00000044
list.activeSelectionForeground#ffffff
list.dropBackground#f9f9f9
list.focusBackground#d6ebff
list.focusForeground#616161
list.highlightForeground#0066bf
list.hoverBackground#e8e8e8
list.hoverForeground#616161
list.inactiveSelectionBackground#dfded9
list.inactiveSelectionForeground#616161
listFilterWidget.background#efc1ad
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#ffffff
menu.border#00000085
menu.foreground#616161
menu.selectionBackground#0060c0
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#888888
menubar.selectionBackground#0000001a
menubar.selectionForeground#333333
merge.commonContentBackground#E5E5E588
merge.commonHeaderBackground#BFBFBF88
merge.currentContentBackground#DBF4EF88
merge.currentHeaderBackground#a4e3d688
merge.incomingContentBackground#DBECFF88
merge.incomingHeaderBackground#A6CFFF88
minimap.background#f4f3f2
minimap.errorHighlight#e51400
minimap.findMatchHighlight#736d6666
minimap.selectionHighlight#e2e8ee88
minimap.warningHighlight#e9a700
minimapGutter.addedBackground#81b88b
minimapGutter.deletedBackground#ca4b51
minimapGutter.modifiedBackground#66afe0
notificationCenter.border#d5d5d5
notificationCenterHeader.background#e7e7e7
notificationCenterHeader.foreground#616161
notifications.background#f3f3f3
notifications.border#e7e7e7
notifications.foreground#616161
notificationsErrorIcon.foreground#e51400
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#e9a700
notificationToast.border#d5d5d5
panel.background#f2f2ed
panel.border#80808059
panelSection.border#80808059
panelTitle.activeBorder#424242
panelTitle.activeForeground#424242
panelTitle.inactiveForeground#424242bf
peekView.border#007acc
peekViewEditor.background#f2f8fc
peekViewEditor.matchHighlightBackground#f5d802de
peekViewEditor.matchHighlightBorder#dbc417
peekViewEditorGutter.background#f2f8fc
peekViewResult.background#f3f3f3
peekViewResult.fileForeground#1e1e1e
peekViewResult.lineForeground#646465
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#6c6c6c
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#616161e6
peekViewTitleLabel.foreground#333333
pickerGroup.border#cccedb
pickerGroup.foreground#346D91
progressBar.background#346D91
scrollbar.shadow#beae9d
scrollbarSlider.activeBackground#0000006a
scrollbarSlider.background#64646444
scrollbarSlider.hoverBackground#6464647a
selection.background#dde9f5
settings.focusedRowBackground#ffffff07
settings.headerForeground#616161
sideBar.background#ebeae6
sideBar.dropBackground#f9f9f9
sideBar.foreground#616161
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#61616130
sideBarSectionHeader.foreground#616161
sideBarTitle.foreground#6f6f6f
statusBar.background#ebeae6
statusBar.border#dad9d5
statusBar.debuggingBackground#cc6633
statusBar.debuggingForeground#ffffff
statusBar.foreground#252525
statusBar.noFolderBackground#68217a
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#346D91
statusBarItem.remoteForeground#ffffff
tab.activeBackground#f4f3f2
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#333333
tab.border#a1a1a13e
tab.inactiveBackground#e4e3df
tab.inactiveForeground#333333b3
terminal.ansiBlack#000000
terminal.ansiBlue#0451a5
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#0451a5
terminal.ansiBrightCyan#0598bc
terminal.ansiBrightGreen#14ce14
terminal.ansiBrightMagenta#bc05bc
terminal.ansiBrightRed#cd3131
terminal.ansiBrightWhite#a5a5a5
terminal.ansiBrightYellow#b5ba00
terminal.ansiCyan#0598bc
terminal.ansiGreen#00bc00
terminal.ansiMagenta#bc05bc
terminal.ansiRed#cd3131
terminal.ansiWhite#555555
terminal.ansiYellow#949800
terminal.border#80808059
terminal.foreground#333333
terminal.selectionBackground#00000040
terminalCursor.background#fcfeff
terminalCursor.foreground#5a5a52
textLink.foreground#006ab1
titleBar.activeBackground#dddddd
titleBar.activeForeground#333333
titleBar.border#00000000
titleBar.inactiveBackground#dddddd99
titleBar.inactiveForeground#33333399
tree.indentGuidesStroke#a9a9a9
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000029

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string, constant.numeric, string punctuation.section.embedded source, attribute.value, string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#304831	—
keyword.operator	#4E7435	—
property, meta.property-name, meta.object-literal.key, attribute.name, variable.other.property, entity.other.attribute-name, entity.name.function, support.variable.property, invalid.deprecated.entity.other.attribute-name.html	#474D78	—
keyword.control	#91102A	italic
entity.name.tag, support.type.property-name	#4E7435	—
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null	#346D91	—
support.class	#95262D	—
comment, punctuation.definition.comment, string.comment	#77858E	italic