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

Clear Dawn Turbo

VS Code preview

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

Clear Dawn Dark — Clear Dawn Turbo

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#AAA
activityBar.border#AAA
activityBar.dropBackground#0A0
activityBar.foreground#FFF
activityBarBadge.background#555
activityBarBadge.foreground#FFF
badge.background#555
badge.foreground#FFF
button.background#0A0
button.foreground#000
button.hoverBackground#0A0
contrastActiveBorder#AAA
contrastBorder#AAA
descriptionForeground#AAA
dropdown.background#AAA
dropdown.border#AAA
dropdown.foreground#000
editor.background#00A
editor.findMatchBackground#A00
editor.findMatchHighlightBackground#A0A
editor.foreground#FFF
editor.hoverHighlightBackground#000
editor.inactiveSelectionBackground#125
editor.lineHighlightBackground#00A
editor.lineHighlightBorder#00A
editor.selectionBackground#000
editor.selectionHighlightBackground#55F
editorBracketMatch.background#A50
editorBracketMatch.border#A50
editorCodeLens.foreground#000
editorCursor.foreground#5F5
editorError.foreground#F55
editorGroup.border#AAA
editorGroup.dropBackground#55F
editorGutter.addedBackground#0A0
editorGutter.deletedBackground#A00
editorGutter.modifiedBackground#0AA
editorHoverWidget.background#000
editorHoverWidget.border#000
editorHoverWidget.statusBarBackground#000
editorIndentGuide.background#0AA
editorLineNumber.foreground#0AA
editorLink.activeForeground#5FF
editorRuler.foreground#0AA
editorSuggestWidget.background#AAA
editorSuggestWidget.border#AAA
editorSuggestWidget.foreground#000
editorSuggestWidget.selectedBackground#0A0
editorWarning.foreground#F55
editorWidget.background#AAA
editorWidget.border#AAA
extensionButton.prominentBackground#0A0
extensionButton.prominentForeground#000
extensionButton.prominentHoverBackground#0A0
foreground#FFF
gitDecoration.addedResourceForeground#FF5
gitDecoration.conflictingResourceForeground#5FF
gitDecoration.deletedResourceForeground#F55
gitDecoration.ignoredResourceForeground#000
gitDecoration.modifiedResourceForeground#5F5
gitDecoration.submoduleResourceForeground#0AA
gitDecoration.untrackedResourceForeground#000
gitlens.gutterUncommittedForegroundColor#F5F
gitlens.lineHighlightBackgroundColor#555
gitlens.trailingLineForegroundColor#55F
input.background#00A
input.border#00A
input.foreground#FF5
input.placeholderForeground#AAA
list.activeSelectionBackground#0A0
list.dropBackground#0000
list.errorForeground#A00
list.focusBackground#0A0
list.focusForeground#FFF
list.highlightForeground#A00
list.hoverBackground#AAA
list.inactiveFocusBackground#0A0
list.inactiveSelectionBackground#0A0
list.inactiveSelectionForeground#555
list.invalidItemForeground#00A
list.warningForeground#A50
notification.background#005
notification.foreground#FFF
panel.background#0AA
panel.border#0AA
panelTitle.activeForeground#5F5
panelTitle.inactiveForeground#000
peekView.border#555
peekViewEditor.background#555
peekViewEditor.matchHighlightBackground#A0A
peekViewEditorGutter.background#555
peekViewResult.background#555
peekViewResult.fileForeground#AAA
peekViewResult.lineForeground#FFF
peekViewResult.matchHighlightBackground#A00
peekViewResult.selectionBackground#00A
peekViewResult.selectionForeground#FFF
peekViewTitle.background#AAA
peekViewTitleDescription.foreground#AAA
peekViewTitleLabel.foreground#A00
scrollbar.shadow#0000
scrollbarSlider.activeBackground#5F5
scrollbarSlider.background#5F5
scrollbarSlider.hoverBackground#5F5
selection.background#000
sideBar.background#AAA
sideBar.border#AAA
sideBar.dropBackground#0000
sideBar.foreground#000
sideBarSectionHeader.background#AAA
sideBarSectionHeader.foreground#FF5
sideBarTitle.foreground#A00
statusBar.background#AAA
statusBar.debuggingBackground#A50
statusBar.foreground#000
statusBar.noFolderBackground#AAA
tab.activeBackground#00A
tab.activeForeground#AAA
tab.border#AAA
tab.inactiveBackground#AAA
tab.inactiveForeground#000
terminal.ansiBlack#000
terminal.ansiBlue#00A
terminal.ansiBrightBlack#555
terminal.ansiBrightBlue#55F
terminal.ansiBrightCyan#5FF
terminal.ansiBrightGreen#5F5
terminal.ansiBrightMagenta#F5F
terminal.ansiBrightRed#F55
terminal.ansiBrightWhite#FFF
terminal.ansiBrightYellow#FF5
terminal.ansiCyan#0AA
terminal.ansiGreen#0A0
terminal.ansiMagenta#A0A
terminal.ansiRed#A00
terminal.ansiWhite#AAA
terminal.ansiYellow#A50
terminal.background#000
terminal.foreground#AAA
terminalCursor.foreground#5F5
textBlockQuote.background#A0A
textBlockQuote.border#A0A
textCodeBlock.background#000
textLink.activeForeground#5FF
textLink.foreground#5FF
textPreformat.foreground#FF5
textSeparator.foreground#FFF
walkThrough.embeddedEditorBackground#00A
welcomePage.background#00A
welcomePage.buttonBackground#A50
welcomePage.buttonHoverBackground#A50
widget.shadow#5555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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