Serenity Theme

Name: Serenity Theme
Author: Roman Chesnokov

Publisher: Roman ChesnokovThemes in package: 3

Keep calm ☁️ code on

Open in VS Code GitHub

Color themes

VS Code preview

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

Serenity Theme — Serenity Day

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#3f454e
activityBar.foreground#7881af
activityBarBadge.background#ca970b
activityBarBadge.foreground#222222
breadcrumb.activeSelectionForeground#714600
breadcrumb.background#ccd3e6
breadcrumb.foreground#7881af
breadcrumbPicker.background#d4daeb
button.background#bac6db
button.foreground#404f72
dropdown.background#c7d5ee
dropdown.listBackground#d4daeb
editor.background#d4daeb
editor.findMatchBackground#bebee3
editor.findMatchHighlightForeground#0d0099bb
editor.foreground#4c4473
editor.lineHighlightBackground#d4dae9
editor.rangeHighlightBackground#13638233
editor.selectionBackground#c9d9f5
editor.selectionHighlightBackground#bcc8ff75
editor.wordHighlightBackground#bcc8ff75
editor.wordHighlightStrongBackground#99adf075
editorBracketMatch.background#ebd6c6
editorBracketMatch.border#0000
editorCursor.foreground#ca970b
editorGroupHeader.border#ccd3e6
editorGroupHeader.tabsBackground#ccd3e6
editorLineNumber.activeForeground#a2aac3
editorLineNumber.foreground#ccd4e7
editorStickyScroll.border#0000
editorStickyScroll.shadow#cad3ec80
editorStickyScrollHover.background#cad1e4
editorWhitespace.foreground#d3daea
editorWidget.background#ccd3e6
editorWidget.foreground#7881af
git.blame.editorDecorationForeground#b4badb
gitDecoration.ignoredResourceForeground#a4b0c5
gitDecoration.modifiedResourceForeground#7b6900
gitDecoration.untrackedResourceForeground#2bb37c
input.background#d5ddec
input.foreground#4e505b
list.activeSelectionBackground#b8c6e7
list.activeSelectionForeground#684c00
list.errorForeground#d45d48
list.hoverBackground#cdd6e5
list.warningForeground#ce9308
listFilterWidget.shadow#0000
menu.foreground#666
menu.selectionBackground#4e587c
menu.selectionForeground#ffc830
panel.background#ccd3e6
panelStickyScroll.shadow#0000
scrollbar.background#ccd3e6
scrollbar.shadow#0000
scrollbarSlider.background#99abce
sideBar.background#d4daeb
sideBar.foreground#6a708e
sideBarSectionHeader.background#ccd3e6
sideBarSectionHeader.foreground#666b7e
sideBarStickyScroll.shadow#0000
sideBarTitle.foreground#666
statusBar.background#ccd3e6
statusBar.foreground#714600
statusBar.noFolderBackground#deb48d
tab.activeBackground#c0cde8
tab.activeForeground#714600
tab.border#ccd3e6
tab.inactiveBackground#ccd3e6
tab.inactiveForeground#7881af
titleBar.activeBackground#ccd3e6
titleBar.activeForeground#714600
titleBar.inactiveBackground#ccd3e6
titleBar.inactiveForeground#714600
widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.character.escape, entity.name.class, entity.name.type.class, new.expr, meta.block, meta.class, meta.function-call, meta.var.expr, support.class, markup.changed.git_gutter	#006f59	—
comment, comment.block, punctuation.definition.comment, punctuation.definition.comment.html	#7d8baa	italic
constant.character, constant.language, constant.numeric, constant.language.boolean, constant.numeric.scss, support.constant, entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less	#b1005e	—
constant.language.boolean	#a7460e	—
constant.language.undefined, constant.language.null	#555565	—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, meta.block-level, keyword.operator.typeof, keyword.operator.module	#00497d	—
keyword, entity.name.tag.other, entity.name.tag.reference.scss	#bf7599	bold
entity.other.attribute-name.generic, meta.object-literal.key, meta.object.member, meta.objectliteral, meta.object.member, meta.objectliteral, meta.export.default, support.type.property-name.json, variable.other.constant.property, variable.other.property, variable.other.object.property	#395566
punctuation.accessor.optional, keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.compartion, constant.other.color	#004cb6
meta.parameters, variable.parameter, variable.scss	#5a1200	—
punctuation.section.embedded, punctuation.other, punctuation.definition, punctuation.definition.block, punctuation.section.property-list, punctuation.separator, punctuation.section.tag, meta.delimiter, meta.group.braces, meta.brace.round, meta.brace.square, keyword.operator.accessor	#8998e4	—
storage, storage.modifier, variable.language, keyword.operator.new, keyword.other.substitution, keyword.control.import, keyword.control.export, keyword.control.from, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, punctuation.definition.generic	#7279a9	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.interpolated, punctuation.definition.string, punctuation.definition.entity, meta.attribute-selector.scss	#069499	—
entity.name.type, support.type.primitive, meta.type.parameters, variable.object.property, support.type.builtin	#6649ab	—
meta.object-binding-pattern-variable.tsx, variable.other.constant, variable.other.object, variable.other.readwrite, object.key, string.unquoted, meta.arguments, meta.property.object, meta.jsx.children, meta.jsx.js	#2f3444	—
support.class.component	#5f00b2	—
entity.name.tag, meta.tag	#1859aa	—
entity.name.tag.css, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx	#8d6bb5	—
entity.other.attribute-name, meta.attribute-with-value.id.html, entity.other.attribute-name.id.html, meta.attribute-with-value.class.html, entity.other.attribute-name.class.html, meta.attribute-with-value.html, entity.other.attribute-name.html, entity.name.tag.reference	#bb1573	—
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix, entity.other.attribute-name.parent-selector-suffix.css, punctuation.definition.entity	#0059a6	—
entity.other.attribute-name.generic, support.type.property-name	#58608f	—
support.constant.property-value, constant.property-value	#3360a2	—
string.regexp, string.regexp keyword.operator, constant.character.escape.backslash.regexp, keyword.control.anchor.regexp, keyword.other.unit, constant.other.unit	#6093b1	—

VS Code preview

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

Serenity Theme — Serenity Evening

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.background#3f454e
activityBar.foreground#999
activityBarBadge.background#b0773a
activityBarBadge.foreground#222222
breadcrumb.activeSelectionForeground#b0773a
breadcrumb.background#1d2741
breadcrumb.foreground#4a577e
breadcrumbPicker.background#1d2741
button.background#243050
button.foreground#b0773a
dropdown.background#1f2944
dropdown.listBackground#1f2944
editor.background#1f2944
editor.findMatchBackground#343785
editor.findMatchHighlightForeground#286b2ebb
editor.foreground#d6d6d6
editor.lineHighlightBackground#202b49
editor.rangeHighlightBackground#27235020
editor.selectionBackground#3460ff30
editor.selectionHighlightBackground#655dff20
editor.wordHighlightBackground#b14b8b40
editor.wordHighlightStrongBackground#b14b8b40
editorBracketMatch.background#4a2f14
editorBracketMatch.border#0000
editorCursor.foreground#d0a920
editorGroupHeader.tabsBackground#1d2741
editorLineNumber.activeForeground#4a5579
editorLineNumber.foreground#252d49
editorStickyScroll.border#0000
editorStickyScroll.shadow#35426680
editorStickyScrollHover.background#293855
editorWhitespace.foreground#33394e
editorWidget.background#1d2741
editorWidget.foreground#4a577e
git.blame.editorDecorationForeground#475576
gitDecoration.ignoredResourceForeground#2f405a
gitDecoration.modifiedResourceForeground#999164
gitDecoration.untrackedResourceForeground#2bb37c
input.background#243050
input.foreground#e0e0e0
list.activeSelectionBackground#2e3856
list.activeSelectionForeground#FEA044
list.errorForeground#db7765
list.hoverBackground#222a3c
list.warningForeground#ce9308
menu.foreground#666
menu.selectionBackground#4e587c
menu.selectionForeground#b0773a
panel.background#1d2741
scrollbar.background#1d2741
scrollbar.shadow#1d2741
scrollbarSlider.background#3e5174
sideBar.background#1f2944
sideBar.foreground#4b5470
sideBarSectionHeader.background#1d2741
sideBarSectionHeader.foreground#bebebe
sideBarTitle.foreground#666
statusBar.background#1d2741
statusBar.foreground#b0773a
statusBar.noFolderBackground#4a2f14
tab.activeBackground#1d2741
tab.activeForeground#b0773a
tab.border#1d2741
tab.inactiveBackground#1d2741
tab.inactiveForeground#4a577e
titleBar.activeBackground#1d2741
titleBar.activeForeground#bcbcbc
titleBar.inactiveBackground#1d2741
titleBar.inactiveForeground#bcbcbc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.character.escape, entity.name.class, entity.name.type.class, new.expr, meta.block, meta.class, meta.function-call, meta.var.expr, support.class, markup.changed.git_gutter	#799cf6	—
comment, comment.block, punctuation.definition.comment, punctuation.definition.comment.html	#566076	italic
constant.character, constant.language, constant.numeric, constant.language.boolean, constant.numeric.scss, support.constant, entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less	#ef5caa	—
constant.language.boolean	#f39a77	—
constant.language.undefined, constant.language.null	#7977a2	—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, meta.block-level, keyword.operator.typeof, keyword.operator.module	#8889f8	—
keyword, entity.name.tag.other, entity.name.tag.reference.scss	#d58cb0	bold
entity.other.attribute-name.generic, meta.object-literal.key, meta.object.member, meta.objectliteral, meta.object.member, meta.objectliteral, meta.export.default, support.type.property-name.json, variable.other.constant.property, variable.other.property, variable.other.object.property	#afc3ff
punctuation.accessor.optional, keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.compartion, constant.other.color	#cda3ff
meta.parameters, variable.parameter, variable.scss	#eed2ff	—
punctuation.section.embedded, punctuation.other, punctuation.definition, punctuation.definition.block, punctuation.section.property-list, punctuation.separator, punctuation.section.tag, meta.delimiter, meta.group.braces, meta.brace.round, meta.brace.square, keyword.operator.accessor	#566090	—
storage, storage.modifier, variable.language, keyword.operator.new, keyword.other.substitution, keyword.control.import, keyword.control.export, keyword.control.from, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, punctuation.definition.generic	#7a82c0	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.interpolated, punctuation.definition.string, punctuation.definition.entity, meta.attribute-selector.scss	#a2d2d2	—
entity.name.type, support.type.primitive, meta.type.parameters, variable.object.property, support.type.builtin	#b299ec	—
meta.object-binding-pattern-variable.tsx, variable.other.constant, variable.other.object, variable.other.readwrite, object.key, string.unquoted, meta.arguments, meta.property.object, meta.jsx.children, meta.jsx.js	#d0c8ff	—
support.class.component	#ffb584	—
entity.name.tag, meta.tag	#ec9363	—
entity.name.tag.css, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx	#c99f59	—
entity.other.attribute-name, meta.attribute-with-value.id.html, entity.other.attribute-name.id.html, meta.attribute-with-value.class.html, entity.other.attribute-name.class.html, meta.attribute-with-value.html, entity.other.attribute-name.html, entity.name.tag.reference	#f59f95	—
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix, entity.other.attribute-name.parent-selector-suffix.css, punctuation.definition.entity	#d5f3ed	—
entity.other.attribute-name.generic, support.type.property-name	#858db5	—
support.constant.property-value, constant.property-value	#e3eeff	—
string.regexp, string.regexp keyword.operator, constant.character.escape.backslash.regexp, keyword.control.anchor.regexp, keyword.other.unit, constant.other.unit	#bacfdb	—

VS Code preview

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

Serenity Theme — Serenity Midnight

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.background#3f454e
activityBar.foreground#999
activityBarBadge.background#5c4190
activityBarBadge.foreground#d0ced4
breadcrumb.activeSelectionForeground#434b68
breadcrumb.background#141c32
breadcrumb.foreground#434b68
breadcrumbPicker.background#161e34
button.background#1c233e
button.foreground#434b68
dropdown.background#161e34
dropdown.listBackground#161e34
editor.background#161e34
editor.foreground#d6d6d6
editor.lineHighlightBackground#17213f
editor.rangeHighlightBackground#27235020
editor.selectionBackground#3460ff30
editor.selectionHighlightBackground#655dff20
editor.wordHighlightBackground#b14b8b40
editor.wordHighlightStrongBackground#b14b8b40
editorBracketMatch.background#550b1f88
editorBracketMatch.border#0000
editorCursor.foreground#5c4190
editorGroupHeader.tabsBackground#141c32
editorLineNumber.activeForeground#48557b
editorLineNumber.foreground#1e2845
editorStickyScroll.border#0000
editorStickyScroll.shadow#202d4475
editorStickyScrollHover.background#162243
editorWhitespace.foreground#20293a
editorWidget.background#161e34
editorWidget.foreground#434b68
git.blame.editorDecorationForeground#444f63
gitDecoration.ignoredResourceForeground#2c384b
gitDecoration.modifiedResourceForeground#9e7900
gitDecoration.untrackedResourceForeground#2bb37c
input.background#1c233e
input.foreground#e0e0e0
list.activeSelectionBackground#19223d
list.activeSelectionForeground#5c4190
list.errorForeground#af3c55
list.hoverBackground#172034
list.inactiveSelectionBackground#161c2d
list.warningForeground#b87500
menu.foreground#666
menu.selectionBackground#4e587c
menu.selectionForeground#434b68
panel.background#141c32
scrollbar.background#141c32
scrollbar.shadow#141c32
scrollbarSlider.background#183260
sideBar.background#161e34
sideBar.foreground#434b68
sideBarSectionHeader.background#141c32
sideBarSectionHeader.foreground#b9b9b9
sideBarTitle.foreground#6d6dc8
statusBar.background#141c32
statusBar.foreground#5c4190
statusBar.noFolderBackground#230811
surface.border#161e34
tab.activeBackground#17203d
tab.activeForeground#4a506a
tab.border#141c32
tab.inactiveBackground#141c32
tab.inactiveForeground#434b68
titleBar.activeBackground#141c32
titleBar.activeForeground#565b72
titleBar.inactiveBackground#141c32
titleBar.inactiveForeground#565b72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.character.escape, entity.name.class, entity.name.type.class, new.expr, meta.block, meta.class, meta.function-call, meta.var.expr, support.class, markup.changed.git_gutter	#7190df	—
comment, comment.block, punctuation.definition.comment, punctuation.definition.comment.html	#45526b	italic
constant.character, constant.language, constant.numeric, constant.language.boolean, constant.numeric.scss, support.constant, entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less	#d35599	—
constant.language.boolean	#b58270	—
constant.language.undefined, constant.language.null	#5f5f7b	—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, meta.block-level, keyword.operator.typeof, keyword.operator.module	#7c7ee7	—
keyword, entity.name.tag.other, entity.name.tag.reference.scss	#b772a0	bold
entity.other.attribute-name.generic, meta.object-literal.key, meta.object.member, meta.objectliteral, meta.object.member, meta.objectliteral, meta.export.default, support.type.property-name.json, variable.other.constant.property, variable.other.property, variable.other.object.property	#97b0eb
punctuation.accessor.optional, keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.compartion, constant.other.color	#b88ded
meta.parameters, variable.parameter, variable.scss	#c5a0dd	—
punctuation.section.embedded, punctuation.other, punctuation.definition, punctuation.definition.block, punctuation.section.property-list, punctuation.separator, punctuation.section.tag, meta.delimiter, meta.group.braces, meta.brace.round, meta.brace.square, keyword.operator.accessor	#505780	—
storage, storage.modifier, variable.language, keyword.operator.new, keyword.other.substitution, keyword.control.import, keyword.control.export, keyword.control.from, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, punctuation.definition.generic	#727bba	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.interpolated, punctuation.definition.string, punctuation.definition.entity, meta.attribute-selector.scss	#8fb9b9	—
entity.name.type, support.type.primitive, meta.type.parameters, variable.object.property, support.type.builtin	#9f82e3	—
meta.object-binding-pattern-variable.tsx, variable.other.constant, variable.other.object, variable.other.readwrite, object.key, string.unquoted, meta.arguments, meta.property.object, meta.jsx.children, meta.jsx.js	#adb2df	—
support.class.component	#c88a60	—
entity.name.tag, meta.tag	#bb7048	—
entity.name.tag.css, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx	#927239	—
entity.other.attribute-name, meta.attribute-with-value.id.html, entity.other.attribute-name.id.html, meta.attribute-with-value.class.html, entity.other.attribute-name.class.html, meta.attribute-with-value.html, entity.other.attribute-name.html, entity.name.tag.reference	#d58077d6	—
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix, entity.other.attribute-name.parent-selector-suffix.css, punctuation.definition.entity	#acc8c2	—
entity.other.attribute-name.generic, support.type.property-name	#687093	—
support.constant.property-value, constant.property-value	#b2b9c3	—
string.regexp, string.regexp keyword.operator, constant.character.escape.backslash.regexp, keyword.control.anchor.regexp, keyword.other.unit, constant.other.unit	#bacfdb	—