Surfer Theme Suit

Name: Surfer Theme Suit
Author: Surfer

Publisher: SurferThemes in package: 6

Simple flat light theme

GitHub

Color themes

VS Code preview

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

Surfer Theme Suit — Surfer Light Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ebedef
activityBar.foreground#000000
badge.background#e0e4e700
breadcrumb.background#ebedef
breadcrumb.foreground#aaaaaa
editor.background#ebedef
editor.foreground#353535
editor.lineHighlightBackground#ebedef
editor.selectionBackground#abdffa
editorCursor.foreground#000000
editorGroupHeader.tabsBackground#ebedef
editorIndentGuide.background#eaeaea
editorLineNumber.foreground#bbbbbb
editorOverviewRuler.border#f8f8f8
editorRuler.foreground#dddddd
editorWidget.background#ebedef
list.hoverBackground#dbdde0
list.inactiveSelectionBackground#c7cbd1
peekView.border#dde5ebc2
scrollbar.shadow#ebedef
scrollbarSlider.activeBackground#dddddd
scrollbarSlider.background#0000000a
scrollbarSlider.hoverBackground#dddddd
sideBar.background#ebedef
sideBar.foreground#777777
sideBarSectionHeader.background#ebedef
statusBar.background#ebedef
statusBar.debuggingForeground#f8f8f8
statusBar.foreground#5670c5
statusBar.noFolderBackground#a4a9b2
statusBarItem.hoverBackground#cccccc
tab.activeBackground#c5c9d6
tab.inactiveBackground#ebedef
titleBar.activeBackground#ebedef
titleBar.activeForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#10A567	—
string	#E88501	—
keyword	#386AC3	—
keyword.operator	#386AC3	—
storage	#386AC3	—
storage.modifier.import, storage.modifier.package	#535353	—
support.function	#386AC3	—
variable.parameter	#E06C75	—
constant.numeric	#6D8600	—
constant.language	#E88501	—
constant.other	#E88501	italic
text.html.basic meta.tag.sgml.html punctuation.definition.tag.html, text.html.basic meta.tag.sgml.html meta.tag.sgml.doctype.html, text.html.basic meta.tag.sgml.html meta.tag.sgml.doctype.html string.quoted.double.doctype.identifiers-and-DTDs.html	#535353	—
text.html.basic constant.character.entity.html, text.xml constant.character.entity.xml	#E88501	—
entity.name.tag	#386AC3	—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html	#386AC3	—
entity.other.attribute-name	#6D8600	—
meta.selector.css entity.name.tag.css, meta.selector.css entity.other.attribute-name.class.css, meta.selector.css entity.other.attribute-name.id.css, meta.selector.css meta.attribute-selector.css entity.other.attribute-name.attribute.css, meta.selector.css meta.attribute-selector.css string.unquoted.attribute-value.css	#386AC3	—
meta.selector.css meta.attribute-selector.css punctuation.separator.operator.css	#535353	—
meta.selector.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-element.css	#535353	—
keyword.control.at-rule, meta.at-rule support.type.property-name	#8431C5	—
meta.at-rule support.constant	#6D8600	—
meta.at-rule keyword.operator	#386AC3	—
meta.property-name.css support.type.property-name.css	#8431C5	—
meta.property-value.css	#535353	—
meta.property-value.css support.constant, meta.property-value.css support.function, meta.property-value.css variable.parameter.misc.css, meta.property-value.css constant.other.color.rgb-value.css	#E88501
meta.property-value.css constant.numeric.css, meta.property-value.css constant.numeric.css keyword.other.unit.css, meta.at-rule constant.numeric.css keyword.other.unit.css	#6D8600	—
meta.property-value.css support.constant.color.w3c-standard-color-name.css	#386AC3	—
punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.section.property-list.css	#535353	—
variable.language.js, storage.type.js, storage.type.function.js, meta.function.json.js storage.type.function.js, meta.class.instance.constructor, keyword.operator.new keyword.operator.new.js	#386AC3	—
support.function.js, support.function.ts, support.function.dom.js, support.constant.js, entity.name.function.js, entity.name.function.ts, meta.function.json.js variable.parameter.function.js	#8431C5	—
text.xml meta.tag.preprocessor.xml punctuation.definition.tag.begin.xml, text.xml meta.tag.preprocessor.xml entity.name.tag.xml, text.xml meta.tag.preprocessor.xml entity.other.attribute-name.xml, text.xml meta.tag.preprocessor.xml string.quoted.double.xml, text.xml meta.tag.sgml.doctype.xml punctuation.definition.tag.begin.xml, text.xml meta.tag.sgml.doctype.xml keyword.doctype.xml	#535353	—
text.tex.latex constant, text.tex.latex constant.other	#386AC3
text.tex.latex string.other.math	#6D8600	—
text.tex.latex string.other.math punctuation.section.group.tex, text.tex.latex string.other.math punctuation.definition.arguments	#535353	—
text.tex.latex meta.function.section.latex entity.name.section.latex	#8431C5	—
text.tex.latex variable.parameter.function.latex	#E88501	italic
text.tex.latex constant.other.reference	#E88501
text.tex.latex meta.preamble.latex support.class.latex	#6D8600	—
source.c++ meta.preprocessor	#386AC3	—
sublimelinter.mark.error	#D02000	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.warning	#DDB700	—
markup.deleted.git_gutter	#F92672	—
markup.inserted.git_gutter	#A6E22E	—
markup.changed.git_gutter	#967EFB	—
markup.ignored.git_gutter	#565656	—
markup.untracked.git_gutter	#565656	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts	#386AC3	—
meta.template.expression.js, meta.template.expression.ts	#000000	—
support.module.node.js, support.type.object.module.js, support.module.node.js	#000000	—
var.this, variable.language.this.js, variable.language.this.ts, variable.language.this.jsx, variable.language.this.tsx	#4671BB	—
function.parameter	#E06C75	—
function.parameter	#E06C75	—
keyword.oper	#E06C75	—
keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.void	#386AC3	—
support.type.property-name.json	#386AC3	—
keyword.operator.expression.import	#386AC3	—
entity	#8431C5	—
entity.name.type.namespace	#5978F3	—
entity.name.type	#163FE4	—
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx	#42567B	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

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