KoazieCLRS

Name: KoazieCLRS
Author: koazie

Publisher: koazieThemes in package: 5

With the right colors, KoazieCLRS is a beautiful theme collection for your code editor.

GitHub

Color themes

VS Code preview

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

KoazieCLRS — night rave

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...

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#080D10
activityBar.border#10080f
activityBar.foreground#C3E3F9
activityBarBadge.background#63BAE8
activityBarBadge.foreground#080D10
badge.background#080d1000
badge.foreground#024C75
breadcrumb.activeSelectionForeground#024C75
breadcrumb.background#080D10
breadcrumb.focusForeground#C3E3F9
breadcrumb.foreground#024C75
breadcrumbPicker.background#080D10
button.background#024C7550
contrastBorder#024C7540
debugToolBar.background#080D10
diffEditor.insertedTextBackground#05608C15
diffEditor.removedTextBackground#00000020
dropdown.background#080D10
dropdown.border#C8E8FF10
editor.background#080D10
editor.findMatchBackground#080D10
editor.findMatchBorder#024C75
editor.findMatchHighlightBackground#024C7593
editor.findMatchHighlightBorder#C8E8FF30
editor.foreground#C3E3F9
editor.lineHighlightBackground#080D1050
editor.selectionBackground#63BAE830
editor.selectionHighlightBackground#024C756b
editor.selectionHighlightBorder#63BAE8f0
editorBracketMatch.background#080D10
editorBracketMatch.border#078BCB7f
editorCursor.foreground#078BCB
editorError.foreground#006AF4AE
editorGroup.border#080D1030
editorGroupHeader.tabsBackground#080D10
editorGutter.addedBackground#05608C60
editorGutter.deletedBackground#00000060
editorGutter.modifiedBackground#63BAE860
editorHoverWidget.background#080D10
editorHoverWidget.border#C8E8FF10
editorIndentGuide.activeBackground#080D10
editorIndentGuide.background#080D1070
editorInfo.foreground#63BAE870
editorLineNumber.activeForeground#63BAE8
editorLineNumber.foreground#024C75c0
editorLink.activeForeground#C3E3F9
editorMarkerNavigation.background#C3E3F905
editorOverviewRuler.border#080D10
editorOverviewRuler.errorForeground#00000040
editorOverviewRuler.findMatchForeground#024C75
editorOverviewRuler.infoForeground#63BAE840
editorOverviewRuler.warningForeground#078BCB70
editorRuler.foreground#080D10
editorSuggestWidget.background#080D10
editorSuggestWidget.border#C8E8FF10
editorSuggestWidget.foreground#C3E3F9
editorSuggestWidget.highlightForeground#078BCB
editorSuggestWidget.selectedBackground#024C7520
editorWarning.foreground#05608C
editorWhitespace.foreground#C3E3F940
editorWidget.background#080D10
editorWidget.border#078BCB
editorWidget.resizeBorder#024C75
extensionButton.prominentBackground#05608C90
extensionButton.prominentHoverBackground#000000
focusBorder#C8E8FF00
gitDecoration.conflictingResourceForeground#078BCB
gitDecoration.deletedResourceForeground#000000
gitDecoration.ignoredResourceForeground#024C75
gitDecoration.modifiedResourceForeground#024C75
gitDecoration.untrackedResourceForeground#63BAE8
input.background#080D10
input.border#C8E8FF10
input.foreground#C3E3F9
input.placeholderForeground#C3E3F960
inputOption.activeBackground#C3E3F930
inputOption.activeBorder#C3E3F930
inputValidation.errorBorder#00000050
inputValidation.infoBorder#63BAE850
inputValidation.warningBorder#078BCB50
list.activeSelectionBackground#080D10
list.activeSelectionForeground#024C75
list.focusBackground#080D10
list.focusForeground#63BAE8
list.highlightForeground#024C75
list.hoverBackground#080D10
list.hoverForeground#C8E8FF
list.inactiveSelectionBackground#080D1030
list.inactiveSelectionForeground#024C75
list.warningForeground#078BCB
listFilterWidget.background#080D1030
listFilterWidget.noMatchesOutline#080D1030
listFilterWidget.outline#080D1030
menu.background#080D10f8
menu.border#024C7550
menu.foreground#C3E3F9
menu.selectionBackground#080D10
menu.selectionBorder#080D1030
menu.selectionForeground#C3E3F9
menu.separatorBackground#C3E3F9
menubar.selectionBackground#080D10
menubar.selectionBorder#024C7550
menubar.selectionForeground#C3E3F9
minimap.background#080D10
minimapGutter.addedBackground#000000
minimapGutter.deletedBackground#078BCB
minimapGutter.modifiedBackground#05608C
minimapSlider.activeBackground#05608Cb0
minimapSlider.background#05608C80
minimapSlider.hoverBackground#05608Ca0
notificationLink.foreground#024C75
notifications.background#10191fcd
notifications.foreground#C3E3F9
panel.background#080D10
panel.border#080D1060
panelTitle.activeBorder#024C75
panelTitle.activeForeground#C8E8FF
panelTitle.inactiveForeground#C3E3F9
peekView.border#080D1030
peekViewEditor.background#C3E3F905
peekViewEditor.matchHighlightBackground#024C7550
peekViewEditorGutter.background#C3E3F905
peekViewResult.background#C3E3F905
peekViewResult.matchHighlightBackground#024C7550
peekViewResult.selectionBackground#024C7570
peekViewTitle.background#C3E3F927
peekViewTitleDescription.foreground#C3E3F960
pickerGroup.foreground#024C75
progressBar.background#024C75
scrollbar.shadow#080D1000
scrollbarSlider.activeBackground#024C75cc
scrollbarSlider.background#024C75bb
scrollbarSlider.hoverBackground#024C75ee
selection.background#024C75
settings.checkboxBackground#080D10
settings.checkboxForeground#C3E3F9
settings.dropdownBackground#080D10
settings.dropdownForeground#C3E3F9
settings.headerForeground#024C75
settings.modifiedItemIndicator#024C75
settings.numberInputBackground#080D10
settings.numberInputForeground#C3E3F9
settings.textInputBackground#080D10
settings.textInputForeground#C3E3F9
sideBar.background#080D10
sideBar.border#024C7550
sideBar.foreground#63BAE8
sideBarSectionHeader.background#080D10
sideBarSectionHeader.border#080D1060
sideBarSectionHeader.foreground#63BAE8
sideBarTitle.foreground#C3E3F9
statusBar.background#080D10
statusBar.border#080D1060
statusBar.debuggingBackground#078BCB
statusBar.debuggingForeground#C8E8FF
statusBar.foreground#C3E3F9
statusBar.noFolderBackground#080D10
statusBarItem.hoverBackground#024C7520
statusBarItem.remoteBackground#024C75
statusBarItem.remoteForeground#080D10
tab.activeBackground#024C7550
tab.activeBorder#024C75
tab.activeForeground#C8E8FF
tab.activeModifiedBorder#024C75
tab.border#080D10
tab.inactiveBackground#024C7520
tab.inactiveForeground#C3E3F9af
tab.unfocusedActiveBackground#024C7540
tab.unfocusedActiveBorder#024C75
tab.unfocusedActiveForeground#C3E3F9
tab.unfocusedInactiveBackground#024C7510
tab.unfocusedInactiveForeground#C3E3F97f
terminal.ansiBlack#8ECFF4
terminal.ansiBlue#63BAE8
terminal.ansiBrightBlack#024C75
terminal.ansiBrightBlue#63BAE8
terminal.ansiBrightCyan#6BC8FA
terminal.ansiBrightGreen#05608C
terminal.ansiBrightMagenta#078BCB
terminal.ansiBrightRed#C8E8FF
terminal.ansiBrightWhite#C8E8FF
terminal.ansiBrightYellow#078BCB
terminal.ansiCyan#6BC8FA
terminal.ansiGreen#05608C
terminal.ansiMagenta#078BCB
terminal.ansiRed#E69C74
terminal.ansiWhite#C8E8FF
terminal.ansiYellow#078BCB
terminalCursor.background#080D10
terminalCursor.foreground#078BCB
textLink.activeForeground#C3E3F9
textLink.foreground#024C75
titleBar.activeBackground#080D10
titleBar.activeForeground#C3E3F9
titleBar.border#080D1060
titleBar.inactiveBackground#080D10
titleBar.inactiveForeground#024C75
tree.indentGuidesStroke#C3E3F9
widget.shadow#080D1030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#067CB5	—
string	#63BAE8	—
constant.numeric	#C3E3F9	—
constant.language	#ff0808eb	—
constant.character, constant.other	#E6DB74	—
variable	—
keyword	#078BCB	—
storage	#E6DB74
storage.type	#6398B7
entity.name.class	#078BCB	underline
entity.other.inherited-class	#E6DB74
entity.name.function	#b5dbff	bold
variable.parameter	#C8E8FF
entity.name.tag	#70cdff
entity.other.attribute-name	#6398B7
support.function	#6398B7
support.constant	#6398B7
support.type, support.class	#026397
support.other.variable	—
invalid	#cf433e
invalid.deprecated	#cf433e	—
meta.structure.dictionary.json string.quoted.double.json	#024C75	—
meta.diff, meta.diff.header	#a79e53	—
markup.deleted	#e61f44	—
markup.inserted	#a79e53	—
markup.changed	#a79e53	—
constant.numeric.line-number.find-in-files - match	#E6DB74	—
entity.name.filename.find-in-files	#E6DB74	—
keyword.other	#64778a	—
meta.property-value, support.constant.property-value, constant.other.color	#63BAE8	—
meta.structure.dictionary.json string.quoted.double.json	#E6DB74	—
meta.structure.dictionary.value.json string.quoted.double.json	#63BAE8	—
meta.property-name support.type.property-name	—
meta.property-value punctuation.separator.key-value	#E6DB74	—
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as	#024C75	—
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin	#	normal
variable.other	#63BAE8	italic
variable.parameter.function.coffee	#
entity.name.section.markdown	#E6DB74	—
punctuation.definition.heading.markdown	#E6DB74	—
markup.raw.inline.markdown	#E6DB74	—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#E6DB74	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#E6DB74	—
punctuation.definition.metadata.markdown	#E6DB74	—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown	#E6DB74
markup.bold.markdown, markup.italic.markdown	#E6DB74	—
markup.italic.markdown	—	italic
markup.bold.markdown	—	bold
markup.raw.block.markdown	#E6DB74	—
markup.deleted.git_gutter	#dd3434	—
markup.inserted.git_gutter	#0070c657	—
markup.changed.git_gutter	#d9a30062	—
meta.template.expression	#E6DB74	—

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