Janus Light

Name: Janus Light
Author: Janus

Publisher: JanusThemes in package: 2

This color theme is just for janus

Open in VS Code GitHub

Color themes

VS Code preview

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

Janus Light — Janus Dark

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#32302f
activityBar.border#3c3836
activityBar.dropBackground#32302f
activityBar.foreground#dfbf8e
activityBarBadge.background#458588
activityBarBadge.foreground#dfbf8e
badge.background#d3869b
badge.foreground#32302f
button.background#45858880
button.foreground#dfbf8e
button.hoverBackground#45858860
debugToolBar.background#32302f
diffEditor.insertedTextBackground#8b955330
diffEditor.insertedTextBorder#a8a81c00
diffEditor.removedTextBackground#d75f5f30
diffEditor.removedTextBorder#d75f5f00
dropdown.background#32302f
dropdown.border#3c3836
dropdown.foreground#dfbf8e
editor.background#32302f
editor.findMatchBackground#83a59870
editor.findMatchHighlightBackground#e78a4e30
editor.findRangeHighlightBackground#83a59870
editor.foreground#dfbf8e
editor.hoverHighlightBackground#689d6a50
editor.lineHighlightBackground#3c383660
editor.lineHighlightBorder#3c383600
editor.selectionBackground#689d6a20
editor.selectionHighlightBackground#cea64a40
editorBracketHighlight.foreground1#dfbf8e
editorBracketHighlight.foreground2#d3869b
editorBracketHighlight.foreground3#d69617
editorBracketMatch.background#92837480
editorBracketMatch.border#32302f00
editorCodeLens.foreground#a8998490
editorCursor.foreground#dfbf8e
editorError.foreground#d75f5f
editorGroup.border#3c3836
editorGroup.dropBackground#3c383660
editorGroupHeader.noTabsBackground#3c3836
editorGroupHeader.tabsBackground#32302f
editorGroupHeader.tabsBorder#3c3836
editorGutter.addedBackground#8b9553
editorGutter.background#32302f00
editorGutter.deletedBackground#d75f5f
editorGutter.modifiedBackground#83a598
editorHoverWidget.background#3c3836
editorHoverWidget.border#665c54
editorIndentGuide.activeBackground#a8998450
editorIndentGuide.background#a8998420
editorInfo.foreground#458588
editorLineNumber.foreground#665c54
editorLink.activeForeground#dfbf8e
editorMarkerNavigation.background#3c3836
editorOverviewRuler.addedForeground#83a598
editorOverviewRuler.border#32302f00
editorOverviewRuler.commonContentForeground#928374
editorOverviewRuler.currentContentForeground#458588
editorOverviewRuler.deletedForeground#83a598
editorOverviewRuler.errorForeground#d75f5f
editorOverviewRuler.findMatchForeground#bdae93
editorOverviewRuler.incomingContentForeground#689d6a
editorOverviewRuler.infoForeground#d3869b
editorOverviewRuler.modifiedForeground#83a598
editorOverviewRuler.rangeHighlightForeground#bdae93
editorOverviewRuler.selectionHighlightForeground#665c54
editorOverviewRuler.warningForeground#d69617
editorOverviewRuler.wordHighlightForeground#665c54
editorOverviewRuler.wordHighlightStrongForeground#665c54
editorRuler.foreground#a8998440
editorSuggestWidget.background#3c3836
editorSuggestWidget.border#665c54
editorSuggestWidget.foreground#dfbf8e
editorSuggestWidget.highlightForeground#689d6a
editorSuggestWidget.selectedBackground#504945
editorWarning.foreground#d69617
editorWhitespace.foreground#a8998420
editorWidget.background#3c3836
editorWidget.border#665c54
errorForeground#d75f5f
extensionButton.prominentBackground#8b955380
extensionButton.prominentHoverBackground#8b955330
focusBorder#3c3836
foreground#dfbf8e
gitDecoration.conflictingResourceForeground#b16286
gitDecoration.deletedResourceForeground#d75f5f
gitDecoration.ignoredResourceForeground#7c6f64
gitDecoration.modifiedResourceForeground#d69617
gitDecoration.untrackedResourceForeground#a8a81c
icon.foreground#87af87
input.background#dfbf8e05
input.border#3c3836
input.foreground#dfbf8e
input.placeholderForeground#dfbf8e60
inputValidation.errorBackground#d75f5f80
inputValidation.errorBorder#d75f5f
inputValidation.infoBackground#45858880
inputValidation.infoBorder#83a598
inputValidation.warningBackground#d6961780
inputValidation.warningBorder#cea64a
list.activeSelectionBackground#504945
list.activeSelectionForeground#87af87
list.dropBackground#3c3836
list.focusForeground#dfbf8e
list.highlightForeground#689d6a
list.hoverBackground#504945
list.hoverForeground#d5c4a1
list.inactiveSelectionBackground#504945
list.inactiveSelectionForeground#689d6a
merge.border#32302f00
merge.currentContentBackground#45858820
merge.currentHeaderBackground#45858840
merge.incomingContentBackground#689d6a20
merge.incomingHeaderBackground#689d6a40
minimap.selectionHighlight#cea64a40
panel.border#3c3836
panelTitle.activeForeground#dfbf8e
peekView.border#83a598
peekViewEditor.background#3c3836
peekViewEditor.matchHighlightBackground#83a59830
peekViewEditorGutter.background#3c3836
peekViewResult.background#3c383690
peekViewResult.fileForeground#dfbf8e
peekViewResult.lineForeground#dfbf8e
peekViewResult.matchHighlightBackground#87af8730
peekViewResult.selectionBackground#83a59830
peekViewResult.selectionForeground#87af87
peekViewTitle.background#3c3836
peekViewTitleDescription.foreground#bdae93
peekViewTitleLabel.foreground#dfbf8e
progressBar.background#689d6a
scrollbar.shadow#282828
scrollbarSlider.activeBackground#689d6a
scrollbarSlider.background#665c54
scrollbarSlider.hoverBackground#7c6f64
selection.background#689d6a80
sideBar.background#32302f
sideBar.border#3c3836
sideBar.foreground#d5c4a1
sideBarSectionHeader.background#32302f00
sideBarSectionHeader.foreground#dfbf8e
sideBarTitle.foreground#dfbf8e
statusBar.background#32302f
statusBar.border#3c3836
statusBar.debuggingBackground#e78a4e
statusBar.debuggingBorder#32302f00
statusBar.debuggingForeground#32302f
statusBar.foreground#dfbf8e
statusBar.noFolderBackground#32302f
statusBar.noFolderBorder#32302f00
tab.activeBackground#3c3836
tab.activeBorder#689d6a
tab.activeForeground#dfbf8e
tab.border#3c3836
tab.inactiveBackground#32302f
tab.inactiveForeground#a89984
tab.unfocusedActiveBorder#32302f00
tab.unfocusedActiveForeground#a89984
tab.unfocusedInactiveForeground#928374
terminal.ansiBlack#3c3836
terminal.ansiBlue#458588
terminal.ansiBrightBlack#928374
terminal.ansiBrightBlue#83a598
terminal.ansiBrightCyan#87af87
terminal.ansiBrightGreen#8b9553
terminal.ansiBrightMagenta#d3869b
terminal.ansiBrightRed#d75f5f
terminal.ansiBrightWhite#dfbf8e
terminal.ansiBrightYellow#cea64a
terminal.ansiCyan#689d6a
terminal.ansiGreen#a8a81c
terminal.ansiMagenta#b16286
terminal.ansiRed#d75f5f
terminal.ansiWhite#a89984
terminal.ansiYellow#d69617
terminal.background#32302f
terminal.foreground#dfbf8e
textLink.activeForeground#458588
textLink.foreground#83a598
titleBar.activeBackground#32302f
titleBar.activeForeground#dfbf8e
titleBar.inactiveBackground#32302f
widget.shadow#282828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment.line, comment.block, punctuation.definition.comment, comment.markup.link, comment.source.cmake	#928374	italic
string, string.tag, string.value, string.entity, constant.character.escape, punctuation.definition.string, string.quoted.double, string.quoted.single, string.template, string.quasi, string.interpolated.dollar.shell, string.interpolated.backtick.shell	#8b9553	—
constant, constant.numeric, constant.language.boolean, constant.other, support.constant, constant.character, constant.escape, constant.rgb-value, constant.language.empty-list.haskell	#d3869b	—
keyword, keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.control, keyword.control.import, keyword.control.directive, keyword.control.class, keyword.control.module, keyword.control.def, keyword.declaration.class, keyword.declaration.module, keyword.declaration.interface, keyword.other.fn, keyword.package, keyword.import, keyword.other.fn.rust, keyword.hard.class.kotlin, storage, storage.modifier, storage.type, storage.type.function, storage.type.class, storage.type.class.cs, storage.type.template, storage.type.namespace, storage.type.struct, storage.type.enum, storage.type.extern, storage.type.interface, storage.type.annotation, storage.type.primitive, storage.type.object, storage.type.java, storage.modifier.declaration, storage.type.function.jsdoc, punctuation.definition.keyword, punctuation.definition.directive, punctuation.definition.directive.c, source.css keyword.control.at-rule, source.scss keyword.control.at-rule, source.js storage.type, source.ts storage.type, source.js.jsx storage.type, source.tsx storage.type, source.cs storage.type, source.rust storage.type	#d75f5f	—
variable, variable.other, variable.other.readwrite, variable.other.object.property, variable.other.readwrite.instance, variable.other.readwrite.global, variable.other.property, variable.other.constant, variable.other.enummember, variable.other.block, variable.other.constant.cpp, variable.name, variable.parameter, variable.arguments, variable.this, variable.language, variable.language.this, variable.language.self, variable.parameter.function.language.special.self.python, entity.name.variable, entity.name.variable.property, meta.object-literal.key, source.python support.variable, source.css support.constant, source.scss variable.other, source.sass variable.other, punctuation.separator, punctuation.quoted, punctuation.definition.variable.ruby, variable.other.readwrite.class, entity.name.type.package.go, entity.name.namespace, entity.name.type.namespace	#dfbf8e	—
entity.function, entity.name.function, entity.name.function.static, entity.name.function.function-call, entity.name.method, entity.name.function.member, entity.name.function.preprocessor, entity.name.function.decorator, support.function, support.function.c, support.function.cpp, support.function.magic, support.function.url.css, support.function.misc.scss, support.function.constructor, support.function.git-rebase, support.function.interpolation.sass, meta.function-call, meta.function-call.ruby, meta.function.method, meta.decorator, meta.decorator.ts entity.name.function.ts, meta.decorator.tsx entity.name.function.tsx	#a8a81c	—
entity.name.class, entity.other.inherited-class, entity.other.attribute-name.class, entity.name.type.class, entity.name.selector, meta.selector, entity.name.tag, punctuation.tag, entity.other.attribute-name, entity.other.attribute-selector, entity.other.attribute-name.id, punctuation.definition.entity, entity.name.type, entity.other.inherited-class.python, entity.other.inherited-class.js, entity.other.inherited-class.ts, entity.other.inherited-class.jsx, entity.other.inherited-class.tsx	#87af87	—
entity.name.type, entity.name.type.namespace, entity.name.type.package, entity.name.type.interface, entity.name.type.enum, entity.name.type.parameter, support.type, support.class, support.type.property-name, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json	#d69617	—
entity.other.attribute-name, entity.other.attribute-name.class, meta.attribute.rust, storage.type.annotation, storage.type.annotation.java, punctuation.definition.annotation, punctuation.decorator, module.node, variable.other.object.property, source.python support.type, meta.function.decorator.python support.type.python	#83a598	—
entity.name.tag, punctuation.tag, meta.preprocessor, meta.header.diff, string.regexp, metatag.php, punctuation.definition.logical-expression, markup.changed, source.haskell keyword.operator	#e78a4e	—
markup.heading, punctuation.definition.heading, entity.name.section	#e78a4e	bold
markup.bold, punctuation.definition.bold	#e78a4e	bold
markup.italic, punctuation.definition.italic, emphasis	—	italic
markup.raw.inline, markup.fenced_code, markup.fenced_code.block, punctuation.definition.fenced	#a8a81c	—
string.other.link, markup.underline.link	#a8a81c	—
meta.link, url, link, uri	#83a598	underline
markup.list, markup.punctuation.list.beginning	#a8a81c	—
markup.quote	#83a598	—
meta.separator	#dfbf8e	—
markup.inserted	#8b9553	—
markup.deleted, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css	#d65d0e	—
markup.changed	#d69617	—
string.regexp	#e78a4e	—
constant.character.escape, constant.character.escape.scss, constant.character.escape.css	#83a598	—
punctuation.section.embedded, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, variable.interpolation	#cea64a	—
keyword.other.unit, source.css keyword.other.unit, source.scss keyword.control.unit, source.css constant.numeric, source.css support.constant.property-value	#d69617	—
support.type.property-name.json, support.type.property-name.toml, entity.name.type.package.go	#dfbf8e	—
keyword.control.class.begin.ruby, keyword.control.class.end.ruby, keyword.control.module.begin.ruby, keyword.control.module.end.ruby, keyword.control.def.begin.ruby, keyword.control.def.end.ruby, meta.function.method keyword.control.rescue.ruby, meta.function.method keyword.control.ensure.ruby, keyword.declaration.class.begin.rbs, keyword.declaration.class.end.rbs, keyword.declaration.module.begin.rbs, keyword.declaration.module.end.rbs, keyword.declaration.interface.begin.rbs, keyword.declaration.interface.end.rbs, keyword.control.def.rbs, keyword.control.import.python, keyword.control.from.js, keyword.control.from.jsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.as.js, keyword.control.as.jsx, meta.import.ts keyword.control.as.ts, meta.import.tsx keyword.control.as.tsx, keyword.control.import.js, keyword.control.import.jsx, keyword.control.import.ts, keyword.control.import.tsx, meta.import.ts keyword.control.default.ts, meta.import.js keyword.control.default.js, meta.import.tsx keyword.control.default.tsx, meta.import.jsx keyword.control.default.js.jsx	#dfbf8e	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#87af87	—
meta.property-value, meta.property-value constant.other, support.constant.property-value, source.css meta.selector, source.scss meta.attribute-selector	#8b9553	—
keyword.other.important	—	bold
markup.inline.raw, markup.fenced_code.block, markup.underline, text.html.markdown	#a8a81c	—