Fresh and Sober Color Theme

Name: Fresh and Sober Color Theme
Author: Marco87Dev

Publisher: Marco87DevThemes in package: 4

This is a theme inspired by relaxation and freshness, for a code that is beautiful to look at, easy to read and pleasant to write.

GitHub

Color themes

VS Code preview

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

Fresh and Sober Color Theme — Fresh and Sober Color Theme (Legacy Light)

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.activeBackground#35353535
activityBar.activeBorder#41ACEE
activityBar.activeFocusBorder#353535
activityBar.background#DDDDDD
activityBar.border#DDDDDD
activityBar.dropBorder#353535
activityBar.foreground#353535
activityBar.inactiveForeground#35353555
activityBarBadge.background#41ACEE
activityBarBadge.foreground#FFFFFF
badge.background#41ACEE
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#353535
breadcrumb.background#DDDDDD
breadcrumb.focusForeground#353535
breadcrumb.foreground#35353575
breadcrumbPicker.background#DDDDDD
button.background#235997
button.foreground#FFFFFF
button.hoverBackground#41ACEE
checkbox.background#41ACEE
checkbox.foreground#FFFFFF
dropdown.background#EEEEEE
dropdown.foreground#353535
editor.background#DDDDDD
editor.foldBackground#353535
editor.foreground#353535
editor.lineHighlightBackground#FFFFFF70
editor.selectionBackground#FFFFFF85
editor.selectionHighlightBackground#35353520
editor.selectionHighlightBorder#35353555
editorCursor.foreground#000000
editorHoverWidget.background#EEEEEE
editorHoverWidget.foreground#353535
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#35353540
editorWidget.background#EEEEEE
list.hoverBackground#41ACEE
list.hoverForeground#FFFFFF
minimap.background#DDDDDD
sideBar.background#EEEEEE
sideBar.foreground#353535
widget.shadow#DDDDDD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name, entity.other.inherited-class, support.class, support.type.sys-types, support.type	#788BFD	bold
comment.block.documentation, punctuation.definition.comment	#88846F	—
comment.line.double-slash	#88846FBD	—
constant.character.escape, constant.character, constant.escape, constant.language, constant.numeric, constant.other.key, constant.other.symbol, string constant.other.placeholder, support.constant	#50B1FE	—
keyword.control	#63CEA0	—
keyword.declaration	#38CEEA	—
entity.name.function	#B98913
keyword.other.import	#50B1FE	—
keyword.operator.arithmetic	#78CEFE	—
keyword.operator.assignment	#707070	—
keyword.operator.closure, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary	#50B1FE	—
punctuation, punctuation.comma, punctuation.dot, punctuation.terminator	#757575	—
storage.modifier	#FF7BB3	—
string.interpolated.double, string.interpolated.single, string.interpolated, string.quoted.double	#78CEFE	—
string.interpolated.expression	#959595	—
storage.type.annotation, storage.type.primitive	#38CEEA	italic
variable.language	#FFB269	bold
meta.block variable.other, support.other.variable, variable.name.source, variable	#000000	—
variable.parameter	#757575	—
support.class.dart	#788BFD	bold
comment.block.documentation.dart	#88846F	—
comment.line.double-slash.dart	#88846FBD	—
constant.numeric.dart	#50B1FE	—
keyword.control.dart	#63CEA0	—
keyword.declaration.dart	#38CEEA	—
entity.name.function.dart	#B98913
keyword.other.import.dart	#50B1FE	—
keyword.operator.arithmetic.dart	#78CEFE	—
keyword.operator.assignment.dart	#707070	—
keyword.operator.closure.dart, keyword.operator.comparison.dart, keyword.operator.logical.dart, keyword.operator.ternary.dart	#50B1FE	—
punctuation.comma.dart, punctuation.dot.dart, punctuation.terminator.dart	#757575	—
storage.modifier.dart	#FF7BB3	—
string.interpolated.double.dart, string.interpolated.single.dart, string.interpolated.triple.single.dart, string.interpolated, string.quoted.double, string.quoted.single.dart	#78CEFE	—
string.interpolated.expression.dart	#858585	—
storage.type.annotation.dart, storage.type.primitive.dart	#38CEEA	italic
variable.language.dart	#FFB269	bold
variable.name.source.dart	#000000	—
variable.parameter.dart	#757575	—
meta.method.groovy	#B98913	—
punctuation.definition.method-parameters.begin.groovy, punctuation.definition.method-parameters.end.groovy	#353535	—
punctuation.definition.string.begin.groovy, punctuation.definition.string.end.groovy, string.quoted.double.groovy, string.quoted.single.groovy	#78CEFE	—
source.groovy.embedded.source, variable.other.interpolated.groovy	#757575	—
source.json meta.structure.dictionary.json support.type.property-name.json	#B98913
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#78CEFE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF7BB3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFB269
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#788BFD
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#63CEA0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#B98913
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#78CEFE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF7BB3
meta.function.begin-document.latex punctuation.definition.arguments.begin.latex, meta.function.begin-document.latex punctuation.definition.arguments.end.latex, meta.function.begin-document.latex support.function.be.latex punctuation.definition.function.latex, meta.function.begin-document.latex support.function.be.latex, meta.function.end-document.latex punctuation.definition.arguments.begin.latex, meta.function.end-document.latex punctuation.definition.arguments.end.latex, meta.function.end-document.latex support.function.be.latex punctuation.definition.function.latex, meta.function.end-document.latex support.function.be.latex	#788BFD	—
meta.function.begin-document.latex variable.parameter.function.latex, meta.function.end-document.latex variable.parameter.function.latex	#788BFD	bold
markup.bold.textbf.latex, punctuation.definition.textbf.begin.latex, punctuation.definition.textbf.end.latex, support.function.textbf.latex punctuation.definition.function.latex, support.function.textbf.latex	#353535	bold
support.class.latex	#788BFD	bold
punctuation.definition.comment.tex	#959595	bold
comment.line.percentage.tex	#959595	—
markup.italic.emph.latex, markup.italic.textit.latex, punctuation.definition.emph.begin.latex, punctuation.definition.emph.end.latex, punctuation.definition.textit.begin.latex, punctuation.definition.textit.end.latex, support.function.emph.latex punctuation.definition.function.latex, support.function.emph.latex, support.function.textit.latex punctuation.definition.function.latex, support.function.textit.latex	#353535	italic
meta.function.environment.general.latex punctuation.definition.arguments.begin.latex, meta.function.environment.general.latex punctuation.definition.arguments.end.latex, meta.function.environment.list.latex punctuation.definition.arguments.begin.latex, meta.function.environment.list.latex punctuation.definition.arguments.end.latex, support.function.be.latex punctuation.definition.function.latex, support.function.be.latex	#63CEA0	—
meta.function.environment.general.latex variable.parameter.function.latex, meta.function.environment.list.latex variable.parameter.function.latex	#63CEA0	bold
constant.character.escape.tex punctuation.definition.keyword.tex, punctuation.definition.function.tex, support.function.general.tex	#50B1FE	—
keyword.control.include.latex punctuation.definition.function.latex, keyword.control.include.latex, meta.include.latex punctuation.definition.arguments.begin.latex, meta.include.latex punctuation.definition.arguments.end.latex	#B98913	—
keyword.control.preamble.latex punctuation.definition.function.latex, keyword.control.preamble.latex	#63CEA0	—
meta.preamble.latex punctuation.definition.arguments.begin.latex, meta.preamble.latex punctuation.definition.arguments.end.latex	#353535	—
meta.preamble.latex meta.parameter.optional.latex punctuation.definition.optional.arguments.begin.latex, meta.preamble.latex meta.parameter.optional.latex punctuation.definition.optional.arguments.end.latex, meta.preamble.latex meta.parameter.optional.latex variable.parameter.function.latex	#707070	—
keyword.control.ref.latex punctuation.definition.keyword.latex, keyword.control.ref.latex, meta.reference.label.latex punctuation.definition.arguments.begin.latex, meta.function.environment.general.latex meta.reference.label.latex punctuation.definition.arguments.begin.latex, meta.function.environment.general.latex meta.reference.label.latex punctuation.definition.arguments.end.latex	#78CEFE	—
constant.other.reference.label.latex	#78CEFE	bold
entity.name.section.latex	#FF7BB3	bold
meta.function.section.section.latex punctuation.definition.arguments.begin.latex, meta.function.section.section.latex punctuation.definition.arguments.end.latex, meta.function.section.subsection.latex punctuation.definition.arguments.begin.latex, meta.function.section.subsection.latex punctuation.definition.arguments.end.latex, meta.function.section.subsubsection.latex punctuation.definition.arguments.begin.latex, meta.function.section.subsubsection.latex punctuation.definition.arguments.end.latex, support.function.section.latex punctuation.definition.function.latex, support.function.section.latex	#FF7BB3	—
meta.function.environment.latex.tikz support.function.be.latex punctuation.definition.function.latex, meta.function.environment.latex.tikz support.function.be.latex, meta.function.environment.latex.tikz punctuation.definition.arguments.begin.latex, meta.function.environment.latex.tikz punctuation.definition.arguments.end.latex	#788BFD	—
meta.function.environment.latex.tikz variable.parameter.function.latex	#788BFD	bold
markup.bold.markdown, punctuation.definition.bold.markdown	#788BFD	bold
punctuation.definition.quote.begin.markdown	#63CEA0	—
fenced_code.block.language.markdown, punctuation.definition.markdown	#000000	bold
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown	#78CEFE	—
text.html.markdown entity.name.tag.html	#788BFD
markup.italic.markdown, punctuation.definition.italic.markdown	#B98913	italic
text.html.markdown meta.paragraph.markdown markup.bold.markdown markup.italic.markdown, markup.bold.markdown markup.italic.markdown punctuation.definition.italic.markdown	#63CEA0	italic bold
constant.other.reference.link.markdown, string.other.link.description.markdown, string.other.link.title.markdown	#50B1FE	—
string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.markdown	#78CEFE	—
markup.underline.link.markdown	#000000	—
punctuation.definition.list.begin.markdown	#B98913	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#353535	bold
heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown	#788BFD	bold
heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown	#FF62A4	bold
heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown	#FF62A4	bold
heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown	#FF62A4	bold
heading.5.markdown entity.name.section.markdown, heading.5.markdown punctuation.definition.heading.markdown	#FF62A4	bold
heading.6.markdown entity.name.section.markdown, heading.6.markdown punctuation.definition.heading.markdown	#FF62A4	bold
meta.separator.markdown	#88846F	bold
entity.other.attribute-name.localname.xml	#50B1FE	—
entity.other.attribute-name.namespace.xml	#38CEEA	—
comment.block.xml, punctuation.definition.comment.xml	#88846F	—
punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml	#78CEFE	—
entity.name.tag.localname.xml	#FF7BB3
constant.language.boolean.yaml	#FF7BB3	—
punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml	#000000	—
punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml	#707070	—
string.quoted.double.yaml	#707070	—
string.unquoted.plain.out.yaml	#63CEA0	—
entity.name.tag.yaml	#38CEEA

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