Japanese Cyber Dark Theme

Name: Japanese Cyber Dark Theme
Author: DarkOwn3r

Publisher: DarkOwn3rThemes in package: 1

A VSCode theme inspired by retro/cyber/synth-wave and japanese aesthetics.

Open in VS Code GitHub

VS Code preview

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

Japanese Cyber Dark Theme — Japanese Cyber Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#8d40a08e
activityBar.activeBorder#e100ff
activityBar.background#000000
activityBar.border#c300ffe5
activityBar.foreground#cc7cfa
activityBarBadge.background#bfff14
activityBarBadge.foreground#a600ff
badge.background#000000fa
badge.foreground#c9f700
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#000000
breadcrumb.focusForeground#bbff00
breadcrumb.foreground#7ba800
breadcrumbPicker.background#15022E
button.background#B300FF50
contrastBorder#d9ff00b9
debugToolBar.background#15022E
diffEditor.insertedTextBackground#B5000015
diffEditor.removedTextBackground#00FF2B20
dropdown.background#15022E
dropdown.border#cc00ff
editor.background#0e0c0f5b
editor.findMatchBackground#ffffff
editor.findMatchBorder#ffffff
editor.findMatchHighlightBackground#00f7ff67
editor.findMatchHighlightBorder#ff00ea30
editor.foreground#ffffff
editor.lineHighlightBackground#15022E50
editor.selectionBackground#7422f87c
editor.selectionHighlightBackground#0fff06ea
editor.selectionHighlightBorder#BFFF14f0
editorBracketMatch.background#15022E
editorBracketMatch.border#FF84F67f
editorCursor.foreground#caff84
editorError.foreground#ff0000
editorGroup.border#a200ffc4
editorGroupHeader.tabsBackground#15022E
editorGutter.addedBackground#B5000060
editorGutter.deletedBackground#00FF2B60
editorGutter.modifiedBackground#BFFF1460
editorHoverWidget.background#15022E
editorHoverWidget.border#cc00ff
editorIndentGuide.activeBackground#f200ff
editorIndentGuide.background#6E187370
editorInfo.foreground#BFFF1470
editorLineNumber.activeForeground#aeee00
editorLineNumber.foreground#B300FFc0
editorLink.activeForeground#C400FF
editorMarkerNavigation.background#ffffff00
editorOverviewRuler.border#4d006479
editorOverviewRuler.errorForeground#ff0000
editorOverviewRuler.findMatchForeground#B300FF
editorOverviewRuler.infoForeground#BFFF1440
editorOverviewRuler.warningForeground#ff84f670
editorRuler.foreground#6E1873
editorSuggestWidget.background#15022E
editorSuggestWidget.border#FFA7F810
editorSuggestWidget.foreground#C400FF
editorSuggestWidget.highlightForeground#FF84F6
editorSuggestWidget.selectedBackground#8b00d120
editorWarning.foreground#ff0000
editorWhitespace.foreground#C400FF40
editorWidget.background#15022E
editorWidget.border#FF84F6
editorWidget.resizeBorder#B300FF
extensionButton.prominentBackground#B5000090
extensionButton.prominentHoverBackground#00FF2B
focusBorder#FFA7F800
gitDecoration.conflictingResourceForeground#ffa600
gitDecoration.deletedResourceForeground#000000
gitDecoration.ignoredResourceForeground#B300FF
gitDecoration.modifiedResourceForeground#91ff00
gitDecoration.untrackedResourceForeground#ff0000
icon.foreground#d0ff00
input.background#16111a
input.border#FFA7F810
input.foreground#fbfbfc
input.placeholderForeground#f6f3f78e
inputOption.activeBackground#C400FF30
inputOption.activeBorder#C400FF30
inputValidation.errorBorder#ff0000
inputValidation.infoBorder#BFFF1450
inputValidation.warningBorder#FF84F650
list.activeSelectionBackground#15022E
list.activeSelectionForeground#B300FF
list.focusBackground#2F1D3D
list.focusForeground#BFFF14
list.highlightForeground#B300FF
list.hoverBackground#6E1873
list.hoverForeground#FFA7F8
list.inactiveSelectionBackground#15022E30
list.inactiveSelectionForeground#B300FF
list.warningForeground#FF84F6
listFilterWidget.background#ffffff30
listFilterWidget.noMatchesOutline#15022E30
listFilterWidget.outline#15022E30
menu.background#392d49f8
menu.border#c8ff00
menu.foreground#fcfcfc
menu.selectionBackground#91ff00
menu.selectionBorder#a200ff30
menu.selectionForeground#000000
menu.separatorBackground#cc00ff
menubar.selectionBackground#2F1D3D
menubar.selectionBorder#b300ffb9
menubar.selectionForeground#91ff00
minimap.background#210742d5
minimapGutter.addedBackground#00FF2B
minimapGutter.deletedBackground#FF84F6
minimapGutter.modifiedBackground#B50000
minimapSlider.activeBackground#9700b5b0
minimapSlider.background#ffffff80
minimapSlider.hoverBackground#c8ff00a0
notificationCenter.border#ae01ff
notificationCenterHeader.background#5e0175
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#cc00ff
notifications.background#9b3db8
notifications.foreground#000000
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#000000
notificationsWarningIcon.foreground#ff0000
panel.background#1a0925
panel.border#e100ff60
panelTitle.activeBorder#B300FF
panelTitle.activeForeground#d9ff00
panelTitle.inactiveForeground#848285
peekView.border#15022E30
peekViewEditor.background#C400FF05
peekViewEditor.matchHighlightBackground#B300FF50
peekViewEditorGutter.background#C400FF05
peekViewResult.background#C400FF05
peekViewResult.matchHighlightBackground#B300FF50
peekViewResult.selectionBackground#B300FF70
peekViewTitle.background#c300ff00
peekViewTitleDescription.foreground#fbfafc60
pickerGroup.foreground#cc00ff
progressBar.background#cc00ff
scrollbar.shadow#15022E00
scrollbarSlider.activeBackground#B300FFcc
scrollbarSlider.background#B300FFbb
scrollbarSlider.hoverBackground#B300FFee
selection.background#cc00ff
settings.checkboxBackground#15022E
settings.checkboxForeground#cc00ff
settings.dropdownBackground#15022E
settings.dropdownForeground#cc00ff
settings.headerForeground#cc00ff
settings.modifiedItemIndicator#a6ff00
settings.numberInputBackground#15022E
settings.numberInputForeground#cc00ff
settings.textInputBackground#15022E
settings.textInputForeground#cc00ff
sideBar.background#140527a1
sideBar.border#cc00ff
sideBar.foreground#fffffe
sideBarSectionHeader.background#c960fa33
sideBarSectionHeader.border#cc00ff
sideBarSectionHeader.foreground#befc15
sideBarTitle.foreground#ffffff
statusBar.background#91ff00f5
statusBar.border#00000070
statusBar.debuggingBackground#FF84F6
statusBar.debuggingForeground#fde3fb
statusBar.foreground#000000
statusBar.noFolderBackground#15022E
statusBarItem.hoverBackground#b300ff
statusBarItem.remoteBackground#c300ffd3
statusBarItem.remoteForeground#91ff00
tab.activeBackground#B300FF50
tab.activeBorder#B300FF
tab.activeForeground#faf8fa
tab.activeModifiedBorder#bbff00
tab.border#15022E
tab.inactiveBackground#B300FF20
tab.inactiveForeground#f1eef1af
tab.unfocusedActiveBackground#B300FF40
tab.unfocusedActiveBorder#B300FF
tab.unfocusedActiveForeground#f5f1f7
tab.unfocusedInactiveBackground#B300FF10
tab.unfocusedInactiveForeground#f3edf57f
terminal.ansiBlack#15022E
terminal.ansiBlue#BFFF14
terminal.ansiBrightBlack#B300FF
terminal.ansiBrightBlue#BFFF14
terminal.ansiBrightCyan#B9FEFF
terminal.ansiBrightGreen#d0ff64
terminal.ansiBrightMagenta#FF84F6
terminal.ansiBrightRed#ff7a7a
terminal.ansiBrightWhite#FFA7F8
terminal.ansiBrightYellow#FF84F6
terminal.ansiCyan#B9FEFF
terminal.ansiGreen#9dff00
terminal.ansiMagenta#FF84F6
terminal.ansiRed#ff0000
terminal.ansiWhite#FFA7F8
terminal.ansiYellow#FF84F6
terminalCursor.background#15022E
terminalCursor.foreground#FF84F6
textLink.activeForeground#C400FF
textLink.foreground#b300ff
titleBar.activeBackground#15022E
titleBar.activeForeground#f3eff5
titleBar.border#15022E60
titleBar.inactiveBackground#15022E
titleBar.inactiveForeground#9c9a9c
tree.indentGuidesStroke#6E1873
widget.shadow#15022E30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#d7db00	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#af0000	—
constant.other.php	#ff13ef	—
constant.other.color	#FFA7F8	—
invalid, invalid.illegal	#ff0000	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#A7A8AF	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#e14aff	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#3cff00	—
punctuation.definition, string.quoted.single.scss	#e0e1eb	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#74a6c48e	—
text.html.derivative	#a7a7a7	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#42ff09be	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#93ff18	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#5dfd00fd
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#bdff17	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#7afbff	—
support.other.variable, string.other.link, markup.table	#d567f7	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#f300aa	—
variable.parameter.function.language.special, variable.parameter	#00ff2b	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#f867c0
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#4bfd04	—
support.type	#ffffff	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#42ce30	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#00ff2b	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#b9fa07	italic
entity.other.attribute-name, support.function	#e676de	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#c663ff	—
source.scss keyword.control	#ff84f6	—
markup.inserted	#B50000	—
markup.deleted	#00FF2B	—
markup.changed	#FF84F6	—
string.regexp	#d9e9e9	—
constant.character.escape	#12dbdf	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#c400ff	italic
support.type.property-name.json	#f2e5f7	—
text.html.markdown, punctuation.definition.list_item.markdown	#C400FF	—
text.html.markdown markup.inline.raw.markdown	#fffefe	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#993bc250	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#C753FF	bold
markup.underline	#BFFF14	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#B300FF50	—
markup.quote	—	italic
string.other.link.description.title.markdown	#FF84F6	—
constant.other.reference.link.markdown	#FF84F6	—
markup.raw.block	#FF84F6	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#B9FEFF	—
variable.language.fenced.markdown	#B300FF	—
meta.separator	#A7A8AF	bold
token.info-token	#B300FF	—
token.warn-token	#FF84F6	—
token.error-token	#FF293B	—
token.debug-token	#B9FEFF	—

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}!`;
}