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 Dark)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#FFFFFF25
activityBar.activeBorder#58B6F0
activityBar.activeFocusBorder#FFFFFF
activityBar.background#303030
activityBar.border#303030
activityBar.dropBorder#FFFFFF
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#FFFFFF55
activityBarBadge.background#58B6F0
activityBarBadge.foreground#FFFFFF
badge.background#58B6F0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.background#303030
breadcrumb.focusForeground#F8F8F8
breadcrumb.foreground#FFFFFF55
breadcrumbPicker.background#505050
button.background#235997
button.foreground#FFFFFF
button.hoverBackground#58B6F0
checkbox.background#58B6F0
checkbox.foreground#FFFFFF
dropdown.background#505050
dropdown.foreground#F8F8F8
editor.background#303030
editor.foldBackground#252525EE
editor.foreground#F8F8F8
editor.lineHighlightBackground#FFFFFF20
editor.selectionBackground#FFFFFF35
editor.selectionHighlightBackground#FFFFFF50
editor.selectionHighlightBorder#F8F8F830
editorCursor.foreground#FFFFFF
editorHoverWidget.background#505050
editorHoverWidget.foreground#F8F8F8
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#FFFFFF55
editorWidget.background#505050
list.hoverBackground#235997
list.hoverForeground#FFFFFF
minimap.background#353535
sideBar.background#252525
sideBar.foreground#DDDDDD
widget.shadow#303030

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	#AAB6FE	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	#69BCFE	—
keyword.control	#7BFFC6	—
keyword.declaration	#66D9EF	—
entity.name.function	#FFE49E
keyword.other.import	#69BCFE	—
keyword.operator.arithmetic	#AAE0FE	—
keyword.operator.assignment	#F5F5F5	—
keyword.operator.closure, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary	#69BCFE	—
punctuation, punctuation.comma, punctuation.dot, punctuation.terminator	#DDDDDD	—
storage.modifier	#FF94C2	—
string.interpolated.double, string.interpolated.single, string.interpolated.triple.single, string.interpolated, string.quoted.double	#AAE0FE	—
string.interpolated.expression	#EDEDED	—
storage.type.annotation	#66D9EF	italic
storage.type.primitive	#69BCFE	bold
variable.language	#FFB269	bold
meta.block variable.other, support.other.variable, variable.name.source, variable	#FFFFFF	—
variable.parameter	#DDDDDD	—
support.class.dart	#AAB6FE	bold
comment.block.documentation.dart	#88846F	—
comment.line.double-slash.dart	#88846FBD	—
constant.numeric.dart	#69BCFE	—
keyword.control.dart	#7BFFC6	—
keyword.declaration.dart	#66D9EF	—
entity.name.function.dart	#FFE49E
keyword.other.import.dart	#69BCFE	—
keyword.operator.arithmetic.dart	#AAE0FE	—
keyword.operator.assignment.dart	#F5F5F5	—
keyword.operator.closure.dart, keyword.operator.comparison.dart, keyword.operator.logical.dart, keyword.operator.ternary.dart	#69BCFE	—
punctuation.comma.dart, punctuation.dot.dart, punctuation.terminator.dart	#DDDDDD	—
storage.modifier.dart	#FF94C2	—
string.interpolated.double.dart, string.interpolated.single.dart, string.interpolated.triple.single.dart, string.interpolated, string.quoted.double, string.quoted.single.dart	#AAE0FE	—
string.interpolated.expression.dart	#EDEDED	—
storage.type.annotation.dart	#66D9EF	italic
storage.type.primitive.dart	#69BCFE	bold
variable.language.dart	#FFB269	bold
variable.name.source.dart	#FFFFFF	—
variable.parameter.dart	#DDDDDD	—
meta.method.groovy	#FFE49E	—
punctuation.definition.method-parameters.begin.groovy, punctuation.definition.method-parameters.end.groovy	#F8F8F8	—
punctuation.definition.string.begin.groovy, punctuation.definition.string.end.groovy, string.quoted.double.groovy, string.quoted.single.groovy	#AAE0FE	—
source.groovy.embedded.source, variable.other.interpolated.groovy	#DDDDDD	—
source.json meta.structure.dictionary.json support.type.property-name.json	#FFE49E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#AAE0FE
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	#FF94C2
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	#AAB6FE
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	#7BFFC6
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	#FFE49E
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	#AAE0FE
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	#FF94C2
markup.bold.markdown, punctuation.definition.bold.markdown	#AAB6FE	bold
punctuation.definition.quote.begin.markdown	#7BFFC6	—
fenced_code.block.language.markdown, punctuation.definition.markdown	#FFFFFF	bold
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown	#AAE0FE	—
text.html.markdown entity.name.tag.html	#AAB6FE
markup.italic.markdown, punctuation.definition.italic.markdown	#FFE49E	italic
text.html.markdown meta.paragraph.markdown markup.bold.markdown markup.italic.markdown, markup.bold.markdown markup.italic.markdown punctuation.definition.italic.markdown	#7BFFC6	italic bold
constant.other.reference.link.markdown, string.other.link.description.markdown, string.other.link.title.markdown	#69BCFE	—
string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.markdown	#AAE0FE	—
markup.underline.link.markdown	#FFFFFF	—
punctuation.definition.list.begin.markdown	#FFE49E	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#F8F8F8	bold
heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown	#FF94C2	bold
heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown	#FFAED1	bold
heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown	#FFC8DF	bold
heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown	#FFE2EE	bold
heading.5.markdown entity.name.section.markdown, heading.5.markdown punctuation.definition.heading.markdown	#FFFCFD	bold
meta.separator.markdown	#88846F	bold
entity.other.attribute-name.localname.xml	#69BCFE	—
entity.other.attribute-name.namespace.xml	#66D9EF	—
comment.block.xml, punctuation.definition.comment.xml	#88846F	—
punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml	#AAE0FE	—
entity.name.tag.localname.xml	#FF94C2
constant.language.boolean.yaml	#FF94C2	—
source.yaml comment.line.number-sign.yaml	#FFE49E	—
source.yaml comment.line.number-sign.yaml punctuation.definition.comment.yaml	#FFE49E	—
punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml	#FFFFFF	—
punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml	#CCCCCC	—
string.quoted.double.yaml	#CCCCCC	—
string.unquoted.plain.out.yaml	#7BFFC6	—
entity.name.tag.yaml	#66D9EF

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