Clear Dawn Dark

Name: Clear Dawn Dark
Author: Ivan Hernandez Valmisa

Publisher: Ivan Hernandez ValmisaThemes in package: 5

Desaturated greenish and blueish, high contrast, dark themes (and two retro monochromatic extras)

Open in VS Code

Color themes

VS Code preview

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

Clear Dawn Dark — Clear Dawn Dark

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...
~/my-project $

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#0A100A
activityBar.border#0A100A
activityBar.dropBackground#201610
activityBar.foreground#EFE
activityBarBadge.background#8C8
activityBarBadge.foreground#040600
badge.background#8C8
badge.foreground#040600
button.background#F40
button.foreground#040600
button.hoverBackground#F60
contrastActiveBorder#0000
contrastBorder#0000
descriptionForeground#F60
dropdown.background#0A100A
dropdown.border#343
dropdown.foreground#EFE
editor.background#040600
editor.findMatchBackground#F00
editor.findMatchHighlightBackground#800
editor.foreground#CDB
editor.hoverHighlightBackground#301
editor.inactiveSelectionBackground#0C2C1C
editor.lineHighlightBackground#0A100A
editor.lineHighlightBorder#232
editor.selectionBackground#134
editor.selectionHighlightBackground#132
editorBracketMatch.background#0000
editorBracketMatch.border#0FD
editorCodeLens.foreground#097
editorCursor.foreground#F40
editorError.foreground#F40
editorGroup.background#0A100A
editorGroup.border#343
editorGroup.dropBackground#6243
editorGutter.addedBackground#010
editorGutter.deletedBackground#200
editorGutter.modifiedBackground#021
editorHoverWidget.background#201610
editorHoverWidget.border#643
editorIndentGuide.background#232
editorLineNumber.foreground#563
editorLink.activeForeground#0DC
editorRuler.foreground#343
editorSuggestWidget.background#102016
editorSuggestWidget.border#343
editorSuggestWidget.foreground#EFE
editorSuggestWidget.selectedBackground#343
editorWarning.foreground#CF0
editorWidget.background#0A100A
editorWidget.border#232
extensionButton.prominentBackground#F20
extensionButton.prominentForeground#EFE
extensionButton.prominentHoverBackground#F40
foreground#EFE
input.background#0A100A
input.border#343
input.foreground#EFE
input.placeholderForeground#AB9
list.activeSelectionBackground#343
list.dropBackground#201610
list.focusBackground#232
list.highlightForeground#F40
list.hoverBackground#121
list.inactiveFocusBackground#121
list.inactiveSelectionBackground#232
notification.background#F20
notification.foreground#040600
panel.background#040600
panel.border#343
panelTitle.activeForeground#EFE
panelTitle.inactiveForeground#AB9
peekView.border#346
peekViewEditor.background#0C1018
peekViewEditor.matchHighlightBackground#248
peekViewEditorGutter.background#0C1018
peekViewResult.background#124
peekViewResult.fileForeground#88C
peekViewResult.lineForeground#88C
peekViewResult.matchHighlightBackground#F20
peekViewResult.selectionBackground#368
peekViewResult.selectionForeground#EEF
peekViewTitle.background#124
peekViewTitleDescription.foreground#EEF
peekViewTitleLabel.foreground#EEF
scrollbar.shadow#0000
scrollbarSlider.activeBackground#7548
scrollbarSlider.background#5632
scrollbarSlider.hoverBackground#5635
selection.background#289
sideBar.background#0A100A
sideBar.border#343
sideBar.dropBackground#232
sideBar.foreground#EFE
sideBarSectionHeader.background#0000
sideBarSectionHeader.foreground#ADA
sideBarTitle.foreground#6F6F6F
statusBar.background#182820
statusBar.debuggingBackground#810
statusBar.foreground#EFE
statusBar.noFolderBackground#040600
tab.activeBackground#040600
tab.activeForeground#AE9
tab.border#0A100A
tab.inactiveBackground#0A100A
tab.inactiveForeground#AB9
terminal.ansiBlack#040600
terminal.ansiBlue#028
terminal.ansiBrightBlack#9A7
terminal.ansiBrightBlue#04F
terminal.ansiBrightCyan#0FD
terminal.ansiBrightGreen#0F0
terminal.ansiBrightMagenta#C4B
terminal.ansiBrightRed#E20
terminal.ansiBrightWhite#EFE
terminal.ansiBrightYellow#CF0
terminal.ansiCyan#087
terminal.ansiGreen#0A0
terminal.ansiMagenta#847
terminal.ansiRed#A10
terminal.ansiWhite#BDA
terminal.ansiYellow#790
terminal.background#040600
terminal.foreground#BDA
terminalCursor.foreground#2F0
textBlockQuote.background#070B07
textBlockQuote.border#343
textCodeBlock.background#070B07
textLink.activeForeground#0FD
textLink.foreground#097
textPreformat.foreground#AE9
textSeparator.foreground#563
walkThrough.embeddedEditorBackground#070B07
welcomePage.buttonBackground#0A100A
welcomePage.buttonHoverBackground#343
widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#ADA	—
comment	#607068	—
constant.language	#BFC	—
constant.numeric	#FEE	—
constant.regexp	#F80	—
entity.name.tag	—	bold
entity.name.selector	#BFC	—
entity.other.attribute-name	#BFC	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#BFC	—
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id	#FCB	—
invalid	#F40	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#F40	bold
markup.italic	—	italic
markup.list	#BFC	—
markup.list.numbered	#BFC	—
markup.list.numbered	#BFC	—
markup.quote	#9A7	—
markup.raw	#9A7	—
markup.inline.raw	#9A7	—
markup.inserted	#00D080	—
markup.deleted	#F40	—
markup.changed	#08C	—
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown	#EFE	—
markup.inline.raw	#EFE	—
meta.selector	#EFE	—
punctuation.definition.tag	#607068	—
meta.preprocessor	#F40	—
meta.preprocessor.string	#AE9	—
meta.preprocessor.numeric	#ADC	—
meta.structure.dictionary.key.python	#CDA	—
storage, storage.type, storage.modifier	#897	—
string	#AE9	—
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars	#AE9	—
string.regexp	#ADC	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#EFE	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	—	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less	—	—
support.type.property-name.json	#CDB	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	—	—
support.function.git-rebase	#0BC	—
constant.sha.git-rebase	#00D080	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#897	—
variable.language	#6DA	—
keyword, keyword.control	#6DA	—
keyword.operator	—	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.other.unit	#BFC	—
entity.name.function, support.function, support.constant.handlebars	#BFC	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#EFE	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json	#9CF	—
entity.other.inherited-class	—	bold
variable, meta.definition.variable.name, support.variable	—	—
meta.object-literal.key, meta.object-literal.key entity.name.function	—	italic
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#BFC	—

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