Skip to main content
Home Theme VS Code Tokyo Night Bright A VS Code color theme inspired by tokyonight.nvim and tokyonight-vscode, using the brighter palette of tokyonight.nvim to create a higher contrast 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.activeBorder #16161e activityBar.background #16161e activityBar.border #16161e activityBar.foreground #c0caf5 activityBar.inactiveForeground #565f89 activityBarBadge.background #7aa2f7 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #565f89 italic string, constant.other.symbol #9ece6a — constant.numeric, constant.language.boolean #ff9e64 — variable, variable.other #c0caf5 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Tokyo Night Bright — Tokyo Night Bright
activityBarBadge.foreground
#1a1b26
badge.background #7aa2f7
badge.foreground #1a1b26
breadcrumb.activeSelectionForeground #7aa2f7
breadcrumb.focusForeground #c0caf5
breadcrumb.foreground #a9b1d6
breadcrumbPicker.background #16161e
button.background #7aa2f7
button.foreground #1a1b26
button.hoverBackground #2ac3de
button.secondaryBackground #292e42
button.secondaryForeground #c0caf5
button.secondaryHoverBackground #414868
checkbox.background #16161e
checkbox.border #16161e
debugConsole.errorForeground #f7768e
debugConsole.infoForeground #7dcfff
debugConsole.sourceForeground #7aa2f7
debugConsole.warningForeground #e0af68
debugConsoleInputIcon.foreground #7aa2f7
debugIcon.breakpointForeground #f7768e
debugTokenExpression.boolean #e0af68
debugTokenExpression.error #f7768e
debugTokenExpression.name #7aa2f7
debugTokenExpression.number #ff9e64
debugTokenExpression.string #9ece6a
debugTokenExpression.value #7dcfff
debugToolBar.background #16161e
debugToolBar.border #16161e
descriptionForeground #a9b1d6
diffEditor.insertedLineBackground #20303b88
diffEditor.insertedTextBackground #20303b88
diffEditor.removedLineBackground #37222c88
diffEditor.removedTextBackground #37222c88
dropdown.background #16161e
dropdown.border #16161e
dropdown.foreground #a9b1d6
dropdown.listBackground #16161e
editor.background #1a1b26
editor.findMatchBackground #3d59a1
editor.findMatchHighlightBackground #28345780
editor.foldBackground #292e4200
editor.foreground #c0caf5
editor.inactiveSelectionBackground #292e4200
editor.lineHighlightBackground #292e42
editor.lineHighlightBorder #292e42
editor.linkedEditingBackground #28345700
editor.selectionBackground #283457
editor.selectionForeground #c0caf5
editor.selectionHighlightBackground #28345780
editor.wordHighlightBackground #292e4200
editor.wordHighlightBorder #292e42
editor.wordHighlightStrongBackground #28345700
editor.wordHighlightStrongBorder #283457
editorBracketHighlight.foreground1 #7aa2f7
editorBracketHighlight.foreground2 #e0af68
editorBracketHighlight.foreground3 #bb9af7
editorBracketHighlight.foreground4 #7dcfff
editorBracketHighlight.foreground5 #f7768e
editorBracketHighlight.foreground6 #9ece6a
editorBracketHighlight.unexpectedBracket.foreground #565f89
editorBracketMatch.background #292e42
editorBracketMatch.border #7aa2f7
editorCursor.foreground #c0caf5
editorError.foreground #f7768e
editorGroup.border #15161e
editorGroupHeader.tabsBackground #16161e
editorGroupHeader.tabsBorder #16161e
editorGutter.addedBackground #449dab
editorGutter.deletedBackground #914c54
editorGutter.modifiedBackground #6183bb
editorIndentGuide.activeBackground #414868
editorIndentGuide.background #292e42
editorInlayHint.background #292e4200
editorInlayHint.foreground #a9b1d6
editorLineNumber.activeForeground #ff9e64
editorLineNumber.foreground #3b4261
editorOverviewRuler.border #16161e
editorRuler.foreground #223366
editorWarning.foreground #e0af68
editorWhitespace.foreground #3b4261
editorWidget.background #16161e
errorForeground #f7768e
focusBorder #16161e
foreground #c0caf5
gitDecoration.addedResourceForeground #9ece6a
gitDecoration.conflictingResourceForeground #e0af68
gitDecoration.deletedResourceForeground #f7768e
gitDecoration.ignoredResourceForeground #565f89
gitDecoration.modifiedResourceForeground #7aa2f7
gitDecoration.submoduleResourceForeground #a9b1d6
gitDecoration.untrackedResourceForeground #9ece6a
icon.foreground #a9b1d6
input.background #16161e
input.border #16161e
input.foreground #a9b1d6
input.placeholderForeground #565f89
keybindingLabel.foreground #c0caf5
list.activeSelectionBackground #283457
list.activeSelectionForeground #c0caf5
list.focusBackground #292e42
list.focusForeground #c0caf5
list.highlightForeground #7aa2f7
list.hoverBackground #292e42
list.hoverForeground #c0caf5
list.inactiveFocusBackground #292e42
list.inactiveSelectionBackground #292e42
list.inactiveSelectionForeground #a9b1d6
menu.border #292e42
menu.separatorBackground #414868
minimapSlider.activeBackground #7aa2f7aa
minimapSlider.background #292e42aa
minimapSlider.hoverBackground #3b4261aa
notificationCenterHeader.background #16161e
notificationCenterHeader.foreground #7aa2f7
notifications.background #16161e
notifications.border #16161e
notifications.foreground #c0caf5
notificationsErrorIcon.foreground #f7768e
notificationsInfoIcon.foreground #7dcfff
notificationsWarningIcon.foreground #e0af68
panel.background #16161e
panel.border #16161e
panelInput.border #16161e
panelTitle.activeBorder #16161e
panelTitle.activeForeground #c0caf5
panelTitle.inactiveForeground #565f89
pickerGroup.border #16161e
pickerGroup.foreground #7aa2f7
problemsErrorIcon.foreground #f7768e
problemsInfoIcon.foreground #7dcfff
problemsWarningIcon.foreground #e0af68
progressBar.background #7aa2f7
quickInput.background #16161e
quickInput.foreground #c0caf5
scrollbar.shadow #292e4200
scrollbarSlider.activeBackground #7aa2f7aa
scrollbarSlider.background #292e42aa
scrollbarSlider.hoverBackground #3b4261aa
sideBar.background #16161e
sideBar.border #16161e
sideBar.foreground #c0caf5
sideBarSectionHeader.background #16161e
sideBarSectionHeader.border #16161e
sideBarSectionHeader.foreground #7aa2f7
sideBarTitle.foreground #7aa2f7
statusBar.background #16161e
statusBar.border #16161e
statusBar.debuggingBackground #f7768e
statusBar.debuggingForeground #1a1b26
statusBar.focusBorder #16161e
statusBar.foreground #bdc7f0
statusBar.noFolderBackground #16161e
statusBarItem.activeBackground #292e42
statusBarItem.focusBorder #16161e
statusBarItem.hoverBackground #292e42
statusBarItem.prominentBackground #7aa2f7
statusBarItem.remoteBackground #292e42
statusBarItem.remoteForeground #7aa2f7
symbolIcon.arrayForeground #e0af68
symbolIcon.booleanForeground #7aa2f7
symbolIcon.classForeground #c0caf5
symbolIcon.colorForeground #7aa2f7
symbolIcon.constantForeground #ff9e64
symbolIcon.constructorForeground #bb9af7
symbolIcon.enumeratorForeground #bb9af7
symbolIcon.enumeratorMemberForeground #7aa2f7
symbolIcon.eventForeground #7dcfff
symbolIcon.fieldForeground #7dcfff
symbolIcon.fileForeground #e0af68
symbolIcon.folderForeground #7aa2f7
symbolIcon.functionForeground #7aa2f7
symbolIcon.interfaceForeground #7aa2f7
symbolIcon.keyForeground #7dcfff
symbolIcon.keywordForeground #bb9af7
symbolIcon.methodForeground #7aa2f7
symbolIcon.moduleForeground #bb9af7
symbolIcon.namespaceForeground #7aa2f7
symbolIcon.nullForeground #565f89
symbolIcon.numberForeground #ff9e64
symbolIcon.objectForeground #7dcfff
symbolIcon.operatorForeground #89ddff
symbolIcon.packageForeground #7dcfff
symbolIcon.propertyForeground #7dcfff
symbolIcon.referenceForeground #7aa2f7
symbolIcon.snippetForeground #7aa2f7
symbolIcon.stringForeground #9ece6a
symbolIcon.structForeground #2ac3de
symbolIcon.textForeground #c0caf5
symbolIcon.typeParameterForeground #2ac3de
symbolIcon.unitForeground #7aa2f7
symbolIcon.variableForeground #c0caf5
tab.activeBackground #1a1b26
tab.activeBorder #16161e
tab.activeBorderTop #16161e
tab.activeForeground #c0caf5
tab.border #16161e
tab.hoverBackground #292e42
tab.inactiveBackground #16161e
tab.inactiveForeground #565f89
tab.unfocusedActiveBorder #16161e
tab.unfocusedActiveBorderTop #16161e
tab.unfocusedHoverBackground #292e42
terminal.ansiBlack #15161e
terminal.ansiBlue #7aa2f7
terminal.ansiBrightBlack #414868
terminal.ansiBrightBlue #8db0ff
terminal.ansiBrightCyan #a4daff
terminal.ansiBrightGreen #9fe044
terminal.ansiBrightMagenta #c7a9ff
terminal.ansiBrightRed #ff899d
terminal.ansiBrightWhite #c0caf5
terminal.ansiBrightYellow #faba4a
terminal.ansiCyan #7dcfff
terminal.ansiGreen #9ece6a
terminal.ansiMagenta #bb9af7
terminal.ansiRed #f7768e
terminal.ansiWhite #a9b1d6
terminal.ansiYellow #e0af68
terminal.background #1a1b26
terminal.foreground #c0caf5
textBlockQuote.background #16161e
textBlockQuote.border #16161e
textCodeBlock.background #16161e
textLink.activeForeground #7aa2f7
textLink.foreground #7aa2f7
textPreformat.background #16161e
textPreformat.foreground #a9b1d6
textSeparator.foreground #414868
titleBar.activeBackground #16161e
titleBar.activeForeground #c0caf5
titleBar.border #16161e
titleBar.inactiveBackground #16161e
titleBar.inactiveForeground #565f89
toolbar.activeBackground #414868
toolbar.border #16161e
toolbar.hoverBackground #292e42
toolbar.hoverOutline #7aa2f7
tree.indentGuidesStroke #414868
welcomePage.background #1a1b26
welcomePage.progress.background #292e42
welcomePage.progress.foreground #7aa2f7
welcomePage.tileBackground #16161e
welcomePage.tileBorder #16161e
welcomePage.tileHoverBackground #292e42 entity.name.function, support.function #7aa2f7 —
entity.name.class, entity.name.type.class #c0caf5 —
entity.name.tag, support.class.component #f7768e —
constant.language, support.constant #ff9e64 —
support.type.property-name, variable.other.property #7dcfff —
punctuation, meta.brace, meta.delimiter #89ddff —
markup.heading, markup.heading.markdown #7aa2f7 bold
markup.underline — underline
markup.strikethrough — strikethrough
markup.raw, markup.inline.raw #b4f9f8 —
meta.object-literal.key, support.type.property-name.json #7dcfff —
variable.parameter #e0af68 —
variable.language #bb9af7 —
constant.character.escape #bb9af7 —
entity.other.attribute-name #7dcfff —
entity.other.attribute-name.class #c0caf5 —
entity.other.attribute-name.id #7aa2f7 —
entity.other.attribute-name.pseudo-class #bb9af7 —
entity.other.attribute-name.pseudo-element #bb9af7 —
entity.other.attribute-name.namespace #7dcfff —
support.type.property-name #7dcfff —
punctuation.definition.string #9ece6a —
punctuation.definition.variable #c0caf5 —
punctuation.section.embedded #7aa2f7 —
punctuation.section.class.begin #bb9af7 —
punctuation.section.class.end #bb9af7 —
punctuation.section.block.begin #89ddff —
punctuation.section.block.end #89ddff —
punctuation.terminator #89ddff —
punctuation.separator #89ddff —
punctuation.accessor #89ddff —
constant.other.color #7aa2f7 —
markup.inserted.diff #9ece6a —
markup.deleted.diff #f7768e —
markup.changed.diff #e0af68 —
meta.diff.header.from-file #7aa2f7 —
meta.diff.header.to-file #7aa2f7 —
meta.diff.header.git #7aa2f7 —
meta.diff.header.git.commit #bb9af7 —
markup.bold.markdown — bold
markup.italic.markdown — italic
markup.inline.raw.markdown #b4f9f8 —
markup.quote.markdown #e0af68 —
markup.heading.setext.1.markdown #7aa2f7 bold
markup.heading.setext.2.markdown #e0af68 bold
markup.heading.markdown punctuation.definition.heading.markdown #7aa2f7 —
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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
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
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*
Button.tsx
31
$
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 } !` ;
}
Tokyo Night Bright | Coding Theme