Skip to main content
Home Theme VS Code NiTROUS Theme (Dark) A dark color theme for VS Code inspired by futuristic holo tech, comprised mainly of a purple and blue palette, with pink accents.
NiTROUS Theme (Dark) | 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 #1d1d47 activityBar.border #26265f activityBar.foreground #81bcff activityBarBadge.background #9e2992 activityBarBadge.foreground #c0deff button.background #9e2992 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.quoted.docstring.multi.python #1f65b3 italic string #96c8ff — constant.numeric #baffbd — constant.language #e862da — constant.character, constant.other
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
NiTROUS Theme (Dark) — NiTROUS Theme (Dark)
button.border
#9e2992
button.foreground #c0deff
button.hoverBackground #e23bd1
checkbox.background #9e2992
checkbox.border #9e2992
checkbox.foreground #d5e9ff
descriptionForeground #b0b0f7
diffEditor.insertedLineBackground #4dff000d
diffEditor.insertedTextBackground #4dff001e
diffEditor.removedLineBackground #8100003d
diffEditor.removedTextBackground #8100004e
dropdown.background #26265f
dropdown.border #6060ee
dropdown.foreground #d5e9ff
dropdown.listBackground #303077
editor.background #091833
editor.findMatchBackground #e5ff0055
editor.findMatchBorder #e5ff00
editor.findMatchHighlightBackground #b5c90033
editor.findMatchHighlightBorder #e5ff00
editor.findRangeHighlightBackground #9dff0033
editor.foreground #b0b0f7
editor.hoverHighlightBackground #42c6ff2a
editor.lineHighlightBackground #0d2b4c
editor.selectionBackground #3a3a8f
editor.selectionHighlightBackground #2d90ff33
editor.wordHighlightBackground #ffffff22
editor.wordHighlightStrongBackground #42c6ff63
editorCursor.foreground #e23bd1
editorError.foreground #FF3E3E
editorGroup.border #4d4dbe
editorGroup.dropBackground #3a3a8f9f
editorGroupHeader.border #4d4dbe
editorGroupHeader.tabsBackground #091833
editorGroupHeader.tabsBorder #6060ee
editorHoverWidget.background #123166
editorHoverWidget.border #2d7aff
editorIndentGuide.activeBackground #484f7d
editorIndentGuide.background #2d2844
editorInfo.foreground #7984D1
editorLineNumber.activeForeground #8080f1
editorLineNumber.foreground #3a3a8f
editorRuler.foreground #4d4dbe
editorWarning.foreground #F57800
editorWidget.background #123166
editorWidget.border #2d7aff
foreground #b0b0f7
gitDecoration.conflictingResourceForeground #ff3e3e
gitDecoration.deletedResourceForeground #ff9f9f
gitDecoration.ignoredResourceForeground #7984D1
gitDecoration.modifiedResourceForeground #baffbd
gitDecoration.untrackedResourceForeground #b0b0f7
input.background #26265f
input.border #6060ee
input.placeholderForeground #7984D1
inputOption.activeBorder #F57800
list.activeSelectionBackground #3a3a8f
list.activeSelectionForeground #c0deff
list.dropBackground #7070f0
list.errorForeground #FF3E3E
list.focusBackground #8a45a3
list.hoverBackground #26265f
list.inactiveSelectionBackground #161130
list.warningForeground #F57800
panel.background #1d1d47
panel.border #0c0a20
panelTitle.activeBorder #1ea8fc
panelTitle.activeForeground #f9faff
panelTitle.inactiveForeground #7984D1
peekView.border #F57800
peekViewEditor.background #173d80
peekViewEditor.matchHighlightBackground #173d80
peekViewEditor.matchHighlightBorder #173d80
peekViewResult.background #0d254c
peekViewResult.selectionBackground #F57800
peekViewTitle.background #0d254c
peekViewTitleDescription.foreground #7984D1
progressBar.background #8080f1
scrollbar.shadow #0d254c
scrollbarSlider.activeBackground #9090f3
scrollbarSlider.background #9090f34f
scrollbarSlider.hoverBackground #6060eeb4
sideBar.background #131330
sideBar.border #4747AF
sideBarSectionHeader.background #1d1d47
sideBarSectionHeader.foreground #8080f1
sideBarTitle.border #4747AF
statusBar.background #1d1d47
statusBar.foreground #9090f3
statusBar.noFolderBackground #303077
statusBar.noFolderForeground #b0b0f7
tab.activeBackground #173d80
tab.activeBorder #75FF7A
tab.activeForeground #f9faff
tab.border #173d80
tab.hoverBorder #e23bd1
tab.inactiveBackground #0d254c
tab.inactiveForeground #429bff
terminal.ansiBlack #131330
terminal.ansiBlue #57a6ff
terminal.ansiBrightBlack #1d1d47
terminal.ansiBrightBlue #2d90ff
terminal.ansiBrightCyan #1dc5a9
terminal.ansiBrightGreen #32ef38
terminal.ansiBrightMagenta #4d4dbe
terminal.ansiBrightRed #cb35bc
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #d66400
terminal.ansiCyan #33ffdd
terminal.ansiGreen #75ff7a
terminal.ansiMagenta #6060ee
terminal.ansiRed #e23bd1
terminal.ansiWhite #f0f0f0
terminal.ansiYellow #3f2208
terminal.background #131330
terminal.border #4747AF
terminal.findMatchBackground #91ff95
terminal.findMatchBorder #52b355
terminal.findMatchHighlightBackground #f19de8
terminal.foreground #b0b0f7
terminal.selectionBackground #3a3a8f
terminal.selectionForeground #c0deff
terminal.tab.activeBorder #75ff7a
terminalCursor.background #44123f
terminalCursor.foreground #e23bd1
titleBar.activeBackground #1d1d47 meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #75ff7a —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #429bff —
punctuation.definition.parameters #b5341e —
punctuation.definition.template-expression #b5341e —
entity.name.class, entity.name.type.class #e862da
entity.other.inherited-class, meta.other.inherited-class.php #6cb1ff italic
entity.name.function - meta.function-call #39c0ff
variable.parameter #e54fd6
entity.other.attribute-name #75ff7a
support.type, support.class #e23bd1 italic
support.other.variable #39c0ff
support.variable.property.dom #67b3ff —
invalid.deprecated #00d7e2 —
meta.diff, meta.diff.header #009af3 —
constant.numeric.line-number.find-in-files - match #e63838 —
entity.name.filename.find-in-files #e862da —
meta.property-value, support.constant.property-value, constant.other.color #fd21ef —
meta.structure.dictionary.json string.quoted.double.json #FF0081 —
support.type.property-name.json #8080f1
meta.structure.dictionary.value.json string.quoted.double.json #96c8ff —
meta.property-name support.type.property-name #c0deff
meta.property-value punctuation.separator.key-value #44a1fd —
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as #EA00D9 —
support.other.namespace.php #973dfd —
keyword.other.phpdoc.php #35a3fd
variable.parameter.function.coffee #e862da
variable.parameter.function.language.special.self.python #e862da —
source.ts entity.name.type #cb7162 —
source.ts keyword #ff25f0 —
source.ts punctuation.definition.parameters #b5341e —
meta.arrow.ts punctuation.definition.parameters #b5341e —
source.ts storage #c0deff —
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx #e862da —
entity.other.inherited-class.ts, entity.other.inherited-class.tsx #b5341e —
source.js storage.type.function #9090f3 —
variable.language, entity.name.type.class.js #3ec8ff —
entity.other.inherited-class.js #ff15ef —
text.html.vue-html #75ff7a —
entity.name.section.markdown #ee89e3 —
string.other.link.title.markdown #75ff7a —
punctuation.definition.heading.markdown #b52fa7 —
markup.raw.inline.markdown #e9e9e9 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown #9090f3 —
punctuation.definition.metadata.markdown #b0b0f7 —
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown #e862da
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown #7070f0 —
markup.bold.markdown, markup.italic.markdown #9090f3 —
markup.italic.markdown — italic
markup.bold.markdown — bold
markup.fenced_code.block #2bceb3 —
fenced_code.block.language, markup.inline.raw.markdown #e862da —
fenced_code.block.language, markup.inline.raw.markdown #e862da —
meta.paragraph.markdown #96c8ff —
markup.raw.block.markdown #ffffff —
markup.deleted.git_gutter #e23bd1 —
markup.inserted.git_gutter #75ff7a —
markup.changed.git_gutter #0685fc —
meta.template.expression #18b6ff —
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 } !` ;
}