Ryu Dragon

Name: Ryu Dragon
Author: RoxasKi

Publisher: RoxasKiThemes in package: 1

Dark Theme based on Mythical Dragons

GitHub

VS Code preview

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

Ryu Dragon — Ryu Dragon

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.activeBorder#bbbbbb00
activityBar.background#10111c
activityBar.dropBorder#bbbbbb
activityBar.foreground#777777
activityBarBadge.background#3d4c6e
activityBarBadge.foreground#e6e6e6
button.background#1f234e
button.foreground#eae7e7
button.hoverBackground#232864
dropdown.background#171828
dropdown.foreground#bbbbbb
editor.background#171725
editor.foreground#939ec8
editor.inactiveSelectionBackground#3d4c6e80
editor.lineHighlightBackground#222541
editor.selectionBackground#222541
editor.selectionHighlightBackground#3d4c6e80
editorBracketHighlight.foreground1#5c84da
editorBracketHighlight.foreground2#35769b
editorGroupHeader.tabsBackground#10111c
editorGutter.addedBackground#484b67
editorGutter.deletedBackground#e25d7c80
editorGutter.modifiedBackground#2a4e9be0
editorHoverWidget.background#10111c
editorHoverWidget.border#10111c
editorHoverWidget.foreground#a3a2a2
editorHoverWidget.highlightForeground#a3a2a2
editorHoverWidget.statusBarBackground#10111c
editorIndentGuide.activeBackground1#3b4058
editorIndentGuide.background1#303245
editorIndentGuide.background2#303245
editorIndentGuide.background3#303245
editorIndentGuide.background4#303245
editorIndentGuide.background5#303245
editorIndentGuide.background6#303245
editorLineNumber.activeForeground#a3a2a2
editorLineNumber.foreground#414556
editorOverviewRuler.addedForeground#2a4d9b
editorOverviewRuler.deletedForeground#e25d7c
editorOverviewRuler.errorForeground#930e2d
editorOverviewRuler.modifiedForeground#2a4d9b
editorSuggestWidget.background#222541
editorSuggestWidget.border#0d20ee00
editorSuggestWidget.focusHighlightForeground#a3a2a2
editorSuggestWidget.foreground#a3a2a2
editorSuggestWidget.highlightForeground#a3a2a2
editorSuggestWidget.selectedBackground#10111c
editorSuggestWidget.selectedForeground#a3a2a2
editorSuggestWidget.selectedIconForeground#a3a2a2
editorSuggestWidgetStatus.foreground#a3a2a2
editorWidget.background#10111c
editorWidget.border#10111c
editorWidget.foreground#a3a2a2
editorWidget.resizeBorder#10111c
focusBorder#0212f100
gitDecoration.ignoredResourceForeground#8d90a8
icon.foreground#a3a2a2
input.background#10111c
input.border#303245
input.foreground#bbbbbb
inputOption.activeBackground#3d4c6e80
inputOption.activeBorder#303245
inputOption.activeForeground#eae7e7
inputOption.hoverBackground#41455640
inputValidation.errorBackground#222541
inputValidation.errorBorder#222541
inputValidation.errorForeground#eae7e7
list.activeSelectionBackground#10111c
list.activeSelectionForeground#eae7e7
list.deemphasizedForeground#787c99
list.dropBackground#26304880
list.errorForeground#e25d7c
list.focusBackground#1c1d29
list.focusForeground#a3a2a2
list.highlightForeground#668ac4
list.hoverBackground#10111c
list.hoverForeground#bbbbbb
list.inactiveSelectionBackground#10111c
list.inactiveSelectionForeground#a3a2a2
list.invalidItemForeground#c97018
list.warningForeground#c49a5a
listFilterWidget.background#10111c
listFilterWidget.noMatchesOutline#a6333f
listFilterWidget.outline#3d59a1
menu.background#10111c
menu.border#2e2eb100
menu.foreground#787c99
menu.selectionBackground#222541
menu.selectionForeground#a3a2a2
menu.separatorBackground#2e2eb100
menubar.selectionBorder#1b1e2e
panel.background#10111c
panel.border#10111c
panelTitle.activeBorder#16161e00
panelTitle.activeForeground#a3a2a2
panelTitle.inactiveForeground#676f9e
pickerGroup.border#10111c
pickerGroup.foreground#a9b1d6
scrollbar.shadow#10111c00
selection.background#3d4c6e80
sideBar.background#10111c
sideBar.foreground#a3a2a2
sideBarSectionHeader.background#10111c
sideBarTitle.foreground#a3a2a2
statusBar.background#10111c
statusBar.debuggingBackground#10111c
statusBar.debuggingBorder#10111c
statusBar.debuggingForeground#a3a2a2
statusBar.foreground#bbbbbb
tab.activeBackground#171928
tab.activeForeground#bbbbbb
tab.border#292c4600
tab.inactiveBackground#10111c
terminal.ansiBlack#10111c
terminal.ansiBlue#5a6edf
terminal.ansiBrightBlack#414556
terminal.ansiBrightBlue#668ac4
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#82AAFF
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#ff7a91
terminal.ansiBrightWhite#a3a2a2
terminal.ansiBrightYellow#f5c28a
terminal.ansiCyan#54afe4
terminal.ansiGreen#54afe4
terminal.ansiMagenta#9266e2
terminal.ansiRed#e25d7c
terminal.ansiWhite#939ec8
terminal.ansiYellow#c49a5a
terminal.background#10111c
terminal.foreground#a3a2a2
titleBar.activeBackground#10111c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6091fb	italic
variable, string constant.other.placeholder	#c678cd	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#C792EA	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#a7b5e4	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#c776bd	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#82AAFF	—
meta.block variable.other	#d769c6	—
support.other.variable, string.other.link	#cb8145	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#939ec8	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#8d81f3	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#9266e2	—
support.type	#B2CCD6	—
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	#948fe6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#0c46c4	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#af81f3	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#a3a2a2	italic
entity.other.attribute-name.class	#b88fe4	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#a89ff0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8d9dd6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7a9dd9	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82b5e8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9da8e0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b49ae6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8d9dd6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7a9dd9	—
text.html.markdown, punctuation.definition.list_item.markdown	#939ec8	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#dd8aea	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#a3a2a2	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—

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