Skip to main content
Relax Design | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #1D252C activityBar.foreground #fff activityBarBadge.background #b7c5d3 activityBarBadge.foreground #181e24 badge.background #5ec4ff badge.foreground #181e24 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #41505E — constant #e27e8d — entity #FB467B — invalid #d95468 — keyword
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}!`;
}
Relax Design — Relax Design
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
breadcrumb.activeSelectionForeground
#41505e
breadcrumb.focusForeground #b7c5d3
breadcrumb.foreground #718ca1
breadcrumbPicker.background #28323a
button.background #1D252C
button.foreground #fff
button.hoverBackground #008B94
contrastBorder #ffffff00
debugExceptionWidget.background #1D252C
debugExceptionWidget.border #b7c5d3
debugToolBar.background #1f1f1f
descriptionForeground #b7c5d3
diffEditor.insertedTextBackground #B7C5D3
diffEditor.insertedTextBorder #333F4A
diffEditor.removedTextBackground #B7C5D3
diffEditor.removedTextBorder #333F4A
dropdown.background #41505e
dropdown.border #41505e
dropdown.foreground #fff
editor.background #1D252C
editor.findMatchBackground #b7c5d380
editor.findMatchHighlightBackground #b7c5d330
editor.findRangeHighlightBackground #243E51
editor.foreground #B7C5D3
editor.hoverHighlightBackground #333F4A
editor.inactiveSelectionBackground #1D252C
editor.lineHighlightBackground #28313a
editor.lineHighlightBorder #28313a
editor.rangeHighlightBackground #28313a
editor.selectionBackground #28323a
editor.selectionHighlightBackground #28313a
editor.wordHighlightBackground #3d454d
editor.wordHighlightStrongBackground #41505e
editorBracketMatch.background #4e6e99
editorBracketMatch.border #26506D
editorCodeLens.foreground #B7C5D3
editorCursor.foreground #b7c5d3
editorError.border #333F4A
editorError.foreground #e27e8d
editorGroup.border #1D252C
editorGroup.dropBackground #333F4A
editorGroup.emptyBackground #1D252C
editorGroupHeader.noTabsBackground #333F4A
editorGroupHeader.tabsBackground #181e24
editorGroupHeader.tabsBorder #333F4A
editorGutter.addedBackground #8bd49c
editorGutter.background #1D252C
editorGutter.deletedBackground #e27e8d
editorGutter.modifiedBackground #26506D
editorHoverWidget.background #15232d
editorHoverWidget.border #333F4A
editorIndentGuide.background #28323a
editorLineNumber.foreground #41505E
editorLink.activeForeground #b7c5d3
editorMarkerNavigation.background #1D252C
editorMarkerNavigationError.background #d95468
editorMarkerNavigationWarning.background #d98e48
editorOverviewRuler.border #333F4A
editorOverviewRuler.commonContentForeground #ebbf8355
editorOverviewRuler.currentContentForeground #ee3a4355
editorOverviewRuler.incomingContentForeground #3ad90055
editorRuler.foreground #1F4662
editorSuggestWidget.background #15232d
editorSuggestWidget.border #15232d
editorSuggestWidget.foreground #b7c5d3
editorSuggestWidget.highlightForeground #ebbf83
editorSuggestWidget.selectedBackground #28323a
editorWarning.border #ffffff00
editorWarning.foreground #ebbf83
editorWhitespace.foreground #ffffff1a
editorWidget.background #15232d
editorWidget.border #333F4A
errorForeground #e27e8d
extensionButton.prominentBackground #008B94
extensionButton.prominentForeground #fff
extensionButton.prominentHoverBackground #008B94
focusBorder #333F4A
foreground #b7c5d3
gitDecoration.addedResourceForeground #60af73
gitDecoration.conflictingResourceForeground #33ced8
gitDecoration.deletedResourceForeground #e27e8d
gitDecoration.ignoredResourceForeground #41505e
gitDecoration.modifiedResourceForeground #ebbf83
gitDecoration.untrackedResourceForeground #8bd49c
input.background #333F4A
input.border #333F4A
input.foreground #b7c5d3
input.placeholderForeground #b7c5d3
inputOption.activeBorder #539afc
inputValidation.errorBackground #e27e8d
inputValidation.errorBorder #d95468
inputValidation.errorForeground #fff
inputValidation.infoBackground #5ec4ff
inputValidation.infoBorder #539afc
inputValidation.warningBackground #ebbf83
inputValidation.warningBorder #d98e48
list.activeSelectionBackground #1D252C
list.activeSelectionForeground #b7c5d3
list.dropBackground #333F4A
list.focusBackground #333F4A
list.focusForeground #b7c5d3
list.highlightForeground #008b94
list.hoverBackground #1D252C
list.hoverForeground #b7c5d3
list.inactiveSelectionBackground #333F4A
list.inactiveSelectionForeground #b7c5d3
panel.background #1D252C
panel.border #1D252C
panelTitle.activeBorder #41505E
panelTitle.activeForeground #41505E
panelTitle.inactiveForeground #b7c5d3
peekView.border #333F4A
peekViewEditor.background #15232d
peekViewEditor.matchHighlightBackground #333F4A
peekViewEditorGutter.background #333F4A
peekViewResult.background #15232d
peekViewResult.fileForeground #b7c5d3
peekViewResult.lineForeground #fff
peekViewResult.matchHighlightBackground #333F4A
peekViewResult.selectionBackground #333F4A
peekViewResult.selectionForeground #fff
peekViewTitle.background #15232d
peekViewTitleDescription.foreground #b7c5d3
peekViewTitleLabel.foreground #008b94
pickerGroup.border #333F4A
pickerGroup.foreground #b7c5d3
progressBar.background #008b94
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #333F4A
scrollbarSlider.background #41505E80
scrollbarSlider.hoverBackground #41505ECC
selection.background #027dff
sideBar.background #1D252C
sideBar.border #1D252C
sideBar.foreground #b7c5d3
sideBarSectionHeader.background #1D252C
sideBarSectionHeader.foreground #b7c5d3
sideBarTitle.foreground #b7c5d3
statusBar.background #1D252C
statusBar.border #1D252C
statusBar.debuggingBackground #1D252C
statusBar.debuggingForeground #b7c5d3
statusBar.foreground #b7c5d3
statusBar.noFolderBackground #1D252C
statusBar.noFolderForeground #b7c5d3
statusBarItem.activeBackground #333F4A
statusBarItem.hoverBackground #333F4A
statusBarItem.prominentBackground #1D252C
statusBarItem.prominentHoverBackground #333F4A
tab.activeBackground #1D252C
tab.activeBorder #1D252C
tab.activeForeground #fff
tab.border #1D252C
tab.inactiveBackground #1D252C
tab.inactiveForeground #b7c5d3
tab.unfocusedActiveForeground #b7c5d3
tab.unfocusedInactiveForeground #b7c5d3
terminal.ansiBlack #41505E
terminal.ansiBlue #539afc
terminal.ansiBrightBlack #41505E
terminal.ansiBrightBlue #539afc
terminal.ansiBrightCyan #70e1e8
terminal.ansiBrightGreen #8bd49c
terminal.ansiBrightMagenta #b62d65
terminal.ansiBrightRed #d95468
terminal.ansiBrightWhite #ff0000
terminal.ansiBrightYellow #ebbf83
terminal.ansiCyan #70e1e8
terminal.ansiGreen #8bd49c
terminal.ansiMagenta #b62d65
terminal.ansiRed #d95468
terminal.ansiWhite #ffffff
terminal.ansiYellow #ebbf83
terminal.background #1D252C
terminal.foreground #ffffff
terminalCursor.background #008B94
terminalCursor.foreground #008B94
textBlockQuote.background #B7C5D3
textBlockQuote.border #d3b7b7
textCodeBlock.background #B7C5D3
textLink.activeForeground #718ca1
textLink.foreground #718ca1
textPreformat.foreground #718ca1
textSeparator.foreground #718ca1
titleBar.activeBackground #1D252C
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #1D252C
titleBar.inactiveForeground #ffffff33
walkThrough.embeddedEditorBackground #1D252C
welcomePage.buttonBackground #1D252C
welcomePage.buttonHoverBackground #333F4A
widget.shadow #00000026
#FB467B
storage.type.class.js #008B94 —
punctuation.definition.parameters #718CA1 —
variable.parameter, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql #ebbf83 —
punctuation.definition.template-expression #74E2BD —
storage.type.function.arrow #008B94 —
string, punctuation.definition.string #74e2bd —
string.template, punctuation.definition.string.template #4185e4 —
support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx #70e1e8 —
storage.modifier.async.tsx, storage.modifier.async.ts, storage.modifier.async.js, storage.modifier.async.jsx, keyword.operator.new.js, keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx #5ec4ff italic
support.variable.property.dom, support.constant.math.js, support.constant.math.jsx, support.constant.math.ts, support.constant.math.jsx, support.class.console.js, support.class.console.jsx, support.class.console.ts, support.class.console.tsx #b7c5d3 —
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css #74E2BD —
punctuation.definition.constant.css #D95468 —
constant.other.color.rgb-value.hex.css #E27E8Dff —
support.type.property-name.css #B7C5D3 —
keyword.other.important.scss #b62d65 —
entity.other.attribute-name.pseudo-element.css #DA70D6 —
support.function.misc.scss #B7C5D3 —
entity.other.attribute-name.id.css, punctuation.definition.entity.css #74E2BD —
entity.name.tag.css #74E2BD —
source.css support, source.stylus support #B7C5D3 —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #e27e8d —
support.constant.property-value.css #718CA1 —
keyword.other.unit.px.css, keyword.other.unit.percentage.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css #d95468 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #74E2BD —
source.css variable, source.stylus variable #ebbf83 —
text.252526.basic #B7C5D3 —
toc-list.id.252526 #74E2BD —
punctuation.definition.tag.end.252526, punctuation.definition.tag.begin.252526 #718CA1 —
entity.name.tag.block.any.252526, meta.tag.block.any.252526, entity.name.tag.inline.any.252526, entity.name.tag.structure.any.252526, meta.tag.inline.any.252526, entity.name.tag.252526, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.ts, entity.name.tag.tsx, meta.tag.js #008b94 —
punctuation.definition.string.begin, punctuation.definition.string.end #74E2BD —
source.js storage.type.function #008B94 —
variable.language, entity.name.type.class.js, entity.other.inherited-class.js, variable.language.this.ts, variable.language.this.java, variable.language.this.js #d98e48 —
entity.other.inherited-class.js, variable.other.readwrite.alias.js, meta.import.js, punctuation.accessor.js, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.js, variable.other.readwrite.jsx #B7C5D3 —
variable.other.constant.js, variable.other.constant.js.jsx, variable.other.constant.ts, variable.other.constant.property.ts, variable.other.constant.property.js, variable.other.constant.property.tsx, variable.other.constant.tsx, support.constant.json.js, support.constant.json.ts, support.constant.json.tsx, variable.other.constant.object.js, variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx #8BD49C —
variable.parameter.function.language.special.self.python #b62d65 —
storage.type.function.python #b62d65 —
meta.function-call.arguments.python #8bd49c —
meta.function-call.generic.python #008b94 —
source.json support #718CA1 —
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json #B7C5D3 —
source.php entity #9effff —
variable.other.php, punctuation.definition.variable.php #ebbf83 —
entity.other.inherited-class.java #d98e48 —
storage.type.annotation.java, storage.type.annotation.ts, entity.name.type.ts #b7c5d3 italic
storage.type.java, support.type.primitive.ts, support.type.primitive.tsx, entity.name.type.ts, entity.name.type.tsx #008b94 italic
support.type.primitive.ts #33ced8 italic
storage.modifier.java, storage.modifier.ts, storage.modifier.js, storage.modifier.jsx #5ec4ff —
entity.name.type.class.java #d98e48 —
variable.language.java, meta.try.resources.java, variable.language.super.ts #b62d65 —
variable.other.definition.java, meta.try.resources.java #8bd49c —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline components
fetchUser.ts
fetchUser
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 $