Soft Green

Name: Soft Green
Author: lainbo

Publisher: lainboThemes in package: 1

A healthier theme for your eyes

Open in VS Code GitHub

VS Code preview

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

Soft Green — Soft Green

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#eee8d5
activityBar.background#ddd6c1
activityBar.foreground#393733
activityBar.inactiveForeground#b7ae8f
activityBarBadge.background#b78d12
button.background#b78d12
button.foreground#ffffff
button.hoverBackground#d6a01d
editor.background#fffae8
editor.findMatchBackground#ff003366
editor.findMatchBorder#00539766
editor.findMatchHighlightBackground#2480672f
editor.foreground#222222
editor.lineHighlightBackground#ebe1c6
editor.selectionBackground#dcebd1
editor.selectionHighlightBackground#0077FF2f
editor.wordHighlightStrongBorder#0077FF34
editorBracketHighlight.foreground1#ff0033
editorBracketHighlight.foreground2#0033ff
editorBracketHighlight.foreground3#ed3333
editorBracketHighlight.foreground4#0077FF
editorBracketHighlight.foreground5#ff23ab
editorBracketHighlight.foreground6#9900ff
editorCursor.foreground#253d24
editorGroup.dropBackground#207f4c30
editorGroupHeader.tabsBackground#eee8d5
editorIndentGuide.background#f7f2e4
editorWhitespace.foreground#404040
editorWidget.background#eee8d5
editorWidget.border#207f4c30
focusBorder#48b2b6
list.activeSelectionBackground#ddc871
list.activeSelectionForeground#1f2623
list.filterMatchBorder#0077FF
list.focusBackground#dfca8866
list.highlightForeground#b78d12
list.hoverBackground#dfca8844
list.hoverForeground#333333
list.inactiveSelectionBackground#d6cdb0
list.inactiveSelectionForeground#223e36
panel.border#ddd6c1
sash.hoverBorder#1ba784
scrollbar.shadow#aaaaaa99
sideBar.background#eee8d5
sideBarTitle.foreground#555555
statusBar.background#eee8d5
statusBar.debuggingBackground#207f4c
statusBar.debuggingForeground#fffbe8
statusBar.foreground#555555
statusBar.noFolderBackground#eee8d5
statusBarItem.activeBackground#ded0a0
statusBarItem.hoverBackground#eae0c0
statusBarItem.prominentBackground#ddd6c1
tab.activeBackground#fffbe8
tab.activeModifiedBorder#1ba784
tab.border#eee8d5
tab.hoverForeground#111111
tab.inactiveBackground#e0d8c2
tab.inactiveForeground#595959
tab.inactiveModifiedBorder#1ba784
terminal.ansiBlack#000000
terminal.ansiBlue#eee8d5
terminal.ansiBrightBlack#6c7680
terminal.ansiBrightBlue#55b4d4
terminal.ansiBrightCyan#39cbcc
terminal.ansiBrightGreen#86b300
terminal.ansiBrightMagenta#fe76ff
terminal.ansiBrightRed#f07171
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#ff9940
terminal.ansiCyan#207f4c
terminal.ansiGreen#43b244
terminal.ansiMagenta#a37acc
terminal.ansiRed#f51818
terminal.ansiWhite#6c7880
terminal.ansiYellow#f2ae49
terminal.background#eee8d5
terminal.foreground#383838
titleBar.activeBackground#eee8d5
widget.shadow#207f4c25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#3e4b53	—
console.error	#ca0000ff	—
console.input	#00ae50ff	—
console.prompt	#b651bcff	bold
console.warning	#cd6600ff	—
console.debug	#5d6666ff	—
hyperlink	#0d1171ff	—
markup.deleted	#ffffffff	—
markup.inserted	#000000ff	—
markup.changed	#f8f8f8ff	—
markup.underline	—	underline
markup.bold	—	bold
markup.italic	—	italic
property	#934b3cff	—
comment	#b8b8b8
constant	#864bff	—
constant.other.placeholder.py	#7b0000ff	—
entity	#cc3611ff	—
entity.name.type	#6c65b0ff	—
entity.other.inherited-class	#000000ff	—
entity.name.function	#db7800ff	—
entity.name.function.argument	#a28d00ff	—
entity.name.tag	#2265ad	bold
entity.other.attribute-name	#cb2d01ff	—
keyword	#577909	bold
keyword.control	#d0104c	bold
storage	#DC1376	bold
token.storage.js,token.storage.ts	#DC1376	bold
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js	#577909	bold
meta.selector	#577909	bold
string \| punctuation.definition.string	#14909D	—
string, entity.other.inherited-class	#14909D	—
Number	#9f1bf1	—
	#9f1bf1	—
support	#3c7a03ff	—
variable	#20814D	—
variable.parameter	#ca7300	—
keyword.operator	#0f95b0
keyword.operator.logical.js,keyword.operator.logical.ts	#ca004b	—
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts	#2598da	—
invalid.deprecated	#cb2d01
invalid.illegal	#333333ff	—
string source	#080808ff	—
String constant	#696969ff	—
string variable	#234a97ff	—
string.regexp	#cf5628ff	—
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#cf5628ff	—
string.regexp constant.character.escape	#811f24ff	—
text source	#080808ff	—
function name	#ae7a00ff	—
function argument	#99a600ff	—
support.function	#ca004bff	—
support.constant	#c44f00ff	—
support.variable	#295502ff	—
entity.name.type.namespace	#b18534	—
support.class, entity.name.type.class	#b18534	—
entity.name.class.identifier.namespace.type	#b18534	—
entity.name.class	#4090f3	—
entity.name.type	#b18534	—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss	#cf8f3b	bold
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css	#cf8f3b	bold
support.type.vendored.property-name.css	#56b6c2	—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#499504	—
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts	#b18534	—
variable.other.readwrite.js,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts	#126bb2	—
support.constant.json.js,support.constant.json.ts	#cf8f3b	—
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts	#577909
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts	#577909
support.type.object.console.js,support.type.object.console.ts	#499504	—
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts	#1D79EC	—
keyword.operator.js,keyword.operator.ts	#56b6c2	—
support.type.object.dom.js,support.type.object.dom.ts	#56b6c2	—
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts,	#499504	—
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts	#41aeb6	—
markup.list	#7d451cff	—
markup.heading \| markup.heading entity.name	#142b5aff	—
markup.quote	#0b6125ff	—
Markup.italic	#080808ff	—
markup.bold	#080808ff	bold
markup.underline	#080808ff	underline
markup.link	#234a97ff	underline
markup.raw	#234a97ff	—
markup.deleted	#47565fff	—
markup.inserted	#cc0000ff	—
markup.changed	#ffffffff	—

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}!`;
}