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 Denim

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#414861
activityBar.border#0A100A
activityBar.dropBackground#614151
activityBar.foreground#EFE
activityBarBadge.background#8C8
activityBarBadge.foreground#040600
badge.background#404050
badge.foreground#FEF0F0
button.background#A02000
button.foreground#FEF6F0
button.hoverBackground#F03000
contrastActiveBorder#0000
contrastBorder#08080A00
descriptionForeground#C0C0CE
dropdown.background#101014
dropdown.border#30303E
dropdown.foreground#C0C0CE
editor.background#08080A
editor.findMatchBackground#238
editor.findMatchHighlightBackground#328
editor.foreground#F0F0FE
editor.hoverHighlightBackground#006
editor.inactiveSelectionBackground#125
editor.lineHighlightBackground#000
editor.lineHighlightBorder#101014
editor.selectionBackground#125
editor.selectionHighlightBackground#30303B
editorBracketMatch.background#F05000
editorBracketMatch.border#F0500D
editorCodeLens.foreground#026
editorCursor.foreground#FD4
editorError.foreground#E56
editorGroup.border#8080A0
editorGroup.dropBackground#2464
editorGutter.addedBackground#2DB
editorGutter.deletedBackground#E56
editorGutter.modifiedBackground#7BE
editorHoverWidget.background#20202B
editorHoverWidget.border#30303E
editorIndentGuide.background#20202B
editorLineNumber.foreground#404050
editorLink.activeForeground#0AF
editorRuler.foreground#404050
editorSuggestWidget.background#08080A
editorSuggestWidget.border#30303B
editorSuggestWidget.foreground#C0C0CE
editorSuggestWidget.selectedBackground#124
editorWarning.foreground#F06000
editorWidget.background#101014
editorWidget.border#20202B
extensionButton.prominentBackground#13A
extensionButton.prominentForeground#F0F0FE
extensionButton.prominentHoverBackground#26F
foreground#F0F0FE
input.background#08080A
input.border#404050
input.foreground#F0F0FE
input.placeholderForeground#C0C0CE
list.activeSelectionBackground#26F
list.dropBackground#FF0
list.focusBackground#024
list.highlightForeground#0AF
list.hoverBackground#348
list.inactiveFocusBackground#0242
list.inactiveSelectionBackground#024
list.inactiveSelectionForeground#F0F0FE
notification.background#101014
notification.foreground#CEC0C0
panel.background#08080A
panel.border#30303B
panelTitle.activeForeground#F0F0FE
panelTitle.inactiveForeground#C0C0CE
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#4080F080
scrollbarSlider.background#4080F030
scrollbarSlider.hoverBackground#4080F060
selection.background#289
sideBar.background#08080A
sideBar.border#202024
sideBar.dropBackground#101014
sideBar.foreground#F0F0FE
sideBarSectionHeader.background#0000
sideBarSectionHeader.foreground#289
sideBarTitle.foreground#50A0F0
statusBar.background#08080A
statusBar.debuggingBackground#501014
statusBar.foreground#C0C0CE
statusBar.noFolderBackground#08080A
tab.activeBackground#08080A
tab.activeForeground#F0F0FE
tab.border#0000
tab.inactiveBackground#101016
tab.inactiveForeground#C0C0CE
terminal.ansiBlack#08080A
terminal.ansiBlue#02B
terminal.ansiBrightBlack#80808D
terminal.ansiBrightBlue#68F
terminal.ansiBrightCyan#2EF
terminal.ansiBrightGreen#0F1
terminal.ansiBrightMagenta#D1F
terminal.ansiBrightRed#D12
terminal.ansiBrightWhite#F0F0FE
terminal.ansiBrightYellow#DE1
terminal.ansiCyan#089
terminal.ansiGreen#092
terminal.ansiMagenta#70A
terminal.ansiRed#702
terminal.ansiWhite#C0C0CE
terminal.ansiYellow#781
terminal.background#08080A
terminal.foreground#C0C0CE
terminalCursor.foreground#F0F0FE
textBlockQuote.background#101014
textBlockQuote.border#216
textCodeBlock.background#101014
textLink.activeForeground#0DF
textLink.foreground#0AF
textPreformat.foreground#ABF
textSeparator.foreground#ABF
walkThrough.embeddedEditorBackground#101014
welcomePage.buttonBackground#20202D
welcomePage.buttonHoverBackground#303050
widget.shadow#FEF0F0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#C0C0CE	—
comment	#6171A1	—
constant.language	#BCF	—
constant.numeric	#FBC	—
constant.regexp	#FF99AA	—
entity.name.tag	—	bold
entity.name.selector	#C0C0CE	—
entity.other.attribute-name	#C0C0CE	—
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	#9AE	—
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id	#A16191	—
invalid	#F50	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#ADF	bold
markup.italic	—	italic
markup.list	#C7A	—
markup.list.numbered	#C7A	—
markup.list.numbered	#C7A	—
markup.quote	#2DB	—
markup.raw	#2DB	—
markup.inline.raw	#2DB	—
markup.inserted	#2DB	—
markup.deleted	#E56	—
markup.changed	#7BE	—
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown	#BFF	—
markup.inline.raw	#BFF	—
meta.selector	#BFF	—
punctuation.definition.tag	#88A	—
meta.preprocessor	#C0C0CE	—
meta.preprocessor.string	#FBC	—
meta.preprocessor.numeric	#BFF	—
meta.structure.dictionary.key.python	#C0C0CE	—
storage	—	bold
storage.type	—	bold
storage.modifier	—	bold
string	#FBC	—
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	#FBC	—
string.regexp	#FF99AA	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#DAE	—
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	#BCF	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	—	—
support.function.git-rebase	#0080F0	—
constant.sha.git-rebase	#00C080	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	—	italic
variable.language	#519171	—
keyword, keyword.control	—	bold
keyword.operator	#597	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#519171	—
keyword.other.unit	#519171	—
entity.name.function, support.function, support.constant.handlebars	#D0D0FE	—
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	—	bold
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json	#A16191	—
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	#9AE	—

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