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 Phosphor

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.border#141
activityBar.dropBackground#201610
activityBar.foreground#6F6
activityBarBadge.background#4B4
activityBarBadge.foreground#010B01
badge.background#494
badge.foreground#010B01
button.background#494
button.foreground#010B01
button.hoverBackground#6F6
contrastActiveBorder#0000
contrastBorder#0000
descriptionForeground#393
dropdown.background#010B01
dropdown.border#141
dropdown.foreground#4B4
editor.background#010B01
editor.findMatchBackground#141
editor.findMatchHighlightBackground#141
editor.foreground#4B4
editor.hoverHighlightBackground#141
editor.inactiveSelectionBackground#141
editor.lineHighlightBackground#0000
editor.lineHighlightBorder#0000
editor.selectionBackground#141
editor.selectionHighlightBackground#141
editorBracketMatch.background#0000
editorBracketMatch.border#393
editorCodeLens.foreground#4B4
editorCursor.foreground#6F6
editorError.foreground#6F6
editorGroup.background#010B01
editorGroup.border#141
editorGroup.dropBackground#010B01
editorGutter.addedBackground#262
editorGutter.deletedBackground#262
editorGutter.modifiedBackground#262
editorHoverWidget.background#021002
editorHoverWidget.border#141
editorIndentGuide.background#262
editorLineNumber.foreground#262
editorLink.activeForeground#6F6
editorRuler.foreground#141
editorSuggestWidget.background#021002
editorSuggestWidget.border#141
editorSuggestWidget.foreground#4B4
editorSuggestWidget.selectedBackground#141
editorWarning.foreground#6F6
editorWidget.background#021002
editorWidget.border#141
extensionButton.prominentBackground#6F6
extensionButton.prominentForeground#010B01
extensionButton.prominentHoverBackground#6F6
foreground#383
input.background#010B01
input.border#141
input.foreground#4B4
input.placeholderForeground#262
list.activeSelectionBackground#262
list.dropBackground#141
list.focusBackground#141
list.highlightForeground#6F6
list.hoverBackground#262
list.inactiveFocusBackground#141
list.inactiveSelectionBackground#262
notification.background#6F6
notification.foreground#010B01
panel.background#010B01
panel.border#141
panelTitle.activeForeground#4B4
panelTitle.inactiveForeground#393
peekView.border#141
peekViewEditor.background#010B01
peekViewEditor.matchHighlightBackground#141
peekViewEditorGutter.background#010801
peekViewResult.background#010B01
peekViewResult.fileForeground#4B4
peekViewResult.lineForeground#4B4
peekViewResult.matchHighlightBackground#141
peekViewResult.selectionBackground#141
peekViewResult.selectionForeground#6F6
peekViewTitle.background#6F6
peekViewTitleDescription.foreground#6F6
peekViewTitleLabel.foreground#6F6
scrollbar.shadow#0000
scrollbarSlider.activeBackground#262
scrollbarSlider.background#262
scrollbarSlider.hoverBackground#393
selection.background#262
sideBar.background#010B01
sideBar.border#141
sideBar.dropBackground#141
sideBar.foreground#4B4
sideBarSectionHeader.background#124212
sideBarSectionHeader.foreground#4B4
sideBarTitle.foreground#6F6
statusBar.background#010B01
statusBar.debuggingBackground#141
statusBar.foreground#6F6
statusBar.noFolderBackground#010B01
tab.activeBackground#141
tab.activeForeground#6F6
tab.border#141
tab.inactiveBackground#010B01
tab.inactiveForeground#6F6
terminal.ansiBlack#010B01
terminal.ansiBlue#141
terminal.ansiBrightBlack#262
terminal.ansiBrightBlue#4B4
terminal.ansiBrightCyan#4B4
terminal.ansiBrightGreen#4B4
terminal.ansiBrightMagenta#4B4
terminal.ansiBrightRed#4B4
terminal.ansiBrightWhite#6F6
terminal.ansiBrightYellow#4B4
terminal.ansiCyan#262
terminal.ansiGreen#141
terminal.ansiMagenta#262
terminal.ansiRed#262
terminal.ansiWhite#4B4
terminal.ansiYellow#262
terminal.background#040600
terminal.foreground#4B4
terminalCursor.foreground#6F6
textBlockQuote.background#021002
textBlockQuote.border#141
textCodeBlock.background#021002
textLink.activeForeground#6F6
textLink.foreground#4B4
textPreformat.foreground#6F6
textSeparator.foreground#6F6
walkThrough.embeddedEditorBackground#010B01
welcomePage.buttonBackground#0A100A
welcomePage.buttonHoverBackground#6F6
widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	#6f6	—
strong	#6F6	bold
meta.diff.header	#6F6	—
comment	#262	—
constant.language	#6F6	—
constant.numeric	#6F6	—
constant.regexp	#6F6	—
entity.name.tag	—	bold
entity.name.selector	#6F6	—
entity.other.attribute-name	#6F6	—
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	#6F6	—
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id	#6F6	—
invalid	#6F6	bold
markup.underline	—	underline
markup.bold	#6F6	bold
markup.heading	#6F6	bold
markup.italic	#6F6	—
markup.list	#6F6	—
markup.list.numbered	#6F6	—
markup.list.numbered	#6F6	—
markup.quote	#262	—
markup.raw	#262	—
markup.inline.raw	#262	—
markup.inserted	#4B4	underline
markup.deleted	#6F6	underline
markup.changed	—	underline
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown	#6f6	—
markup.inline.raw	#262	—
meta.selector	#6F6	—
punctuation.definition.tag	#262	—
meta.preprocessor	#6F6	bold
meta.preprocessor.string	#6F6	—
meta.preprocessor.numeric	#6F6	—
meta.structure.dictionary.key.python	#6F6	—
storage, storage.type, storage.modifier	#4B4	—
string	#6F6	—
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	#6F6	underline
string.regexp	#6F6	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#6F6	underline
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	#6F6	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	—	—
support.function.git-rebase	#6F6	bold underline
constant.sha.git-rebase	#262	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#4B4	—
variable.language	#262	—
keyword, keyword.control	#4B4	bold
keyword.operator	—	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.other.unit	#4B4	bold
entity.name.function, support.function, support.constant.handlebars	#6F6	—
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	#6F6	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json	#6F6	—
entity.other.inherited-class	—	bold
variable, meta.definition.variable.name, support.variable	—	—
meta.object-literal.key, meta.object-literal.key entity.name.function	—	bold
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	#6F6	—

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