HBuilderX Soft Green Light Theme

Name: HBuilderX Soft Green Light Theme
Author: qinains

Publisher: qinainsThemes in package: 2

HBuilderX soft green light theme for Visual Studio Code

GitHub

Color themes

VS Code preview

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

HBuilderX Soft Green Light Theme — HBuilderX Soft Green Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#4ade80
activityBar.background#1e2419
activityBar.border#3d4a35
activityBar.foreground#d4d9d2
activityBarBadge.background#22c55e
breadcrumb.activeSelectionForeground#1e2419
breadcrumb.background#1e2419
breadcrumb.focusForeground#1e2419
breadcrumb.foreground#d4d9d2cc
breadcrumbPicker.background#1e2419
button.background#22c55e
button.foreground#1e2419
button.hoverBackground#16a34a
checkbox.background#252a20
checkbox.border#4ade80
checkbox.foreground#4ade80
checkbox.selectBackground#4ade80
checkbox.selectBorder#4ade80
commandCenter.activeBackground#252a20
commandCenter.background#1e2419
commandCenter.border#4ade8033
commandCenter.foreground#d4d9d2
debugConsole.errorForeground#ef4444
debugConsole.infoForeground#22c55e
debugConsole.sourceForeground#d4d9d2
debugConsole.warningForeground#f59e0b
dropdown.background#252a20
dropdown.border#3d4a35
editor.background#1e2419
editor.findMatchBackground#fbbf2480
editor.findMatchHighlightBackground#fbbf2440
editor.findRangeHighlightBackground#4b55634d
editor.foreground#d4d9d2
editor.inactiveSelectionBackground#4ade8080
editor.lineHighlightBackground#353a30
editor.selectionBackground#4ade8050
editor.selectionHighlightBackground#fbbf2460
editor.wordHighlightBackground#fef3c440
editor.wordHighlightStrongBackground#fef9cd80
editor.wordHighlightTextBackground#fef3c430
editorGroup.border#3d4a35
editorGroupHeader.tabsBackground#1e2419
editorGroupHeader.tabsBorder#4a5640
editorHoverWidget.background#252a20
editorHoverWidget.border#3d4a35
editorHoverWidget.foreground#a8b5a0
editorIndentGuide.activeBackground1#4a5640
editorIndentGuide.background1#2d3227
editorLineNumber.foreground#6b7280
editorWhitespace.foreground#d4d9d2
editorWidget.background#252a20
focusBorder#4ade80
input.background#252a20
input.border#3d4a35
input.foreground#d4d9d2
input.placeholderForeground#a8b5a0aa
inputOption.activeBorder#4ade80
list.activeSelectionBackground#4ade8030
list.activeSelectionForeground#4ade80
list.focusBackground#4ade8066
list.highlightForeground#22c55e
list.hoverBackground#2d3227
list.inactiveSelectionBackground#4ade8030
list.inactiveSelectionForeground#4ade80
notifications.background#252a20
panel.border#3d4a35
panelTitle.activeBorder#4ade80
progressBar.background#0e70c0
quickInput.background#252a20
quickInput.foreground#d4d9d2
quickInputList.focusBackground#4ade8030
quickInputList.focusForeground#4ade80
quickInputTitle.background#252a20
scrollbarSlider.activeBackground#4ade80
scrollbarSlider.background#4ade8099
scrollbarSlider.hoverBackground#4ade80
searchEditor.findMatchBackground#252a20
searchEditor.textInputBorder#3d4a35
settings.dropdownBackground#252a20
sideBar.background#1e2419
sideBar.border#3d4a35
sideBarSectionHeader.background#1e2419
sideBarTitle.foreground#a8b5a0
statusBar.background#1e2419
statusBar.debuggingBackground#4ade80
statusBar.debuggingForeground#1e2419
statusBar.foreground#a8b5a0
statusBar.noFolderBackground#252a20
statusBarItem.activeBackground#4a5640
statusBarItem.hoverBackground#3d4a35
statusBarItem.prominentBackground#3d4a35
tab.activeBackground#4ade80
tab.activeForeground#1e2419
tab.border#4a5640
tab.hoverBackground#4ade80
tab.hoverForeground#1e2419
tab.inactiveBackground#1e2419
tab.inactiveForeground#4ade80
tab.unfocusedActiveBackground#4ade80
tab.unfocusedActiveForeground#1e2419
terminal.ansiBlack#1e2419
terminal.ansiBlue#5597ef
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#7faff4
terminal.ansiBrightCyan#6fdada
terminal.ansiBrightGreen#4ade80
terminal.ansiBrightMagenta#fe9cff
terminal.ansiBrightRed#fe8885
terminal.ansiBrightWhite#f1f1f1
terminal.ansiBrightYellow#e2d301
terminal.ansiCyan#39cbcc
terminal.ansiGreen#4ade80
terminal.ansiMagenta#fe76ff
terminal.ansiRed#fd6c67
terminal.ansiWhite#bbbbbb
terminal.ansiYellow#cdcb00
terminal.background#1e2419
terminal.foreground#d4d9d2
titleBar.activeBackground#1e2419
titleBar.border#3d4a35
tree.indentGuidesStroke#3d4a35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
console.error	#ef4444	—
console.input	#22c55e	—
console.prompt	#a855f7	bold
console.warning	#f59e0b	—
console.debug	#3b82f6	—
hyperlink	#60a5fa	—
markup.deleted	#1e2419	—
markup.inserted	#d4d9d2	—
markup.changed	#252a20	—
markup.underline	—	underline
markup.bold	—	bold
markup.italic	—	italic
property	#f97316	—
comment	#6b7280	—
constant	#a855f7	—
constant.other.placeholder.py	#dc2626	—
entity	#f97316	—
entity.name.type	#8b5cf6	—
entity.other.inherited-class	#d4d9d2	—
entity.name.function	#fbbf24	—
entity.name.function.argument	#84cc16	—
entity.name.tag	#60a5fa	—
entity.other.attribute-name	#f97316	—
keyword	#4ade80	bold
keyword.control	#4ade80	—
storage	#4ade80	bold
token.storage.js,token.storage.ts	#4ade80	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	#4ade80	bold
meta.selector	#4ade80	bold
string \| punctuation.definition.string	#a8d5ba	—
string, entity.other.inherited-class	#a8d5ba	—
Number	#c4b5fd	—
support	#22c55e	—
variable	#4ade80	—
variable.parameter	#84cc16	—
keyword.operator	#4ade80	—
keyword.operator.logical.js,keyword.operator.logical.ts	#ec4899	—
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts	#22d3ee	—
invalid.deprecated	#d4d9d2	—
invalid.illegal	#d4d9d2	—
string source	#1e2419	—
String constant	#9ca3af	—
string variable	#60a5fa	—
string.regexp	#fb923c	—
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#fb923c	—
string.regexp constant.character.escape	#dc2626	—
text source	#1e2419	—
function name	#fbbf24	—
function argument	#bef264	—
support.function	#ec4899	—
support.constant	#fb923c	—
support.variable	#22c55e	—
entity.name.type.namespace	#fcd34d	—
support.class, entity.name.type.class	#fcd34d	—
entity.name.class.identifier.namespace.type	#fcd34d	—
entity.name.class	#60a5fa	—
entity.name.type	#fcd34d	—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss	#fb923c	—
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css	#fb923c	—
support.type.vendored.property-name.css	#22d3ee	—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#4ade80	—
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	#fcd34d	—
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	#4ade80	—
support.constant.json.js,support.constant.json.ts	#fb923c	—
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts	#4ade80	—
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts	#4ade80	—
support.type.object.console.js,support.type.object.console.ts	#4ade80	—
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts	#60a5fa	—
keyword.operator.js,keyword.operator.ts	#22d3ee	—

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