Cool Dark Theme

Name: Cool Dark Theme
Author: Abhishek Jha

Publisher: Abhishek JhaThemes in package: 1

Dark theme for all the coders out there, as you know dark is better

Open in VS Code GitHub

VS Code preview

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

Cool Dark Theme — Cool Dark Theme

fetchUser.ts

index.ts

README.md

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#001219
activityBar.border#00121960
activityBar.foreground#EAE6EB
activityBarBadge.background#B7E4C7
activityBarBadge.foreground#001219
badge.background#00121930
badge.foreground#4EA8DE
breadcrumb.activeSelectionForeground#4EA8DE
breadcrumb.background#001219
breadcrumb.focusForeground#EAE6EB
breadcrumb.foreground#23CEDE
breadcrumbPicker.background#001219
button.background#4EA8DE50
contrastBorder#4EA8DE40
debugToolBar.background#001219
diffEditor.insertedTextBackground#5467DA15
diffEditor.removedTextBackground#F77F0020
dropdown.background#001219
dropdown.border#F5F5F510
editor.background#001219
editor.findMatchBackground#001219
editor.findMatchBorder#4EA8DE
editor.findMatchHighlightBackground#4EA8DE93
editor.findMatchHighlightBorder#F5F5F530
editor.foreground#EAE6EB
editor.lineHighlightBackground#00121950
editor.selectionBackground#B7E4C730
editor.selectionHighlightBackground#4EA8DE6b
editor.selectionHighlightBorder#B7E4C7f0
editorBracketMatch.background#001219
editorBracketMatch.border#6076F97f
editorCursor.foreground#6076F9
editorError.foreground#F77F0070
editorGroup.border#00121930
editorGroupHeader.tabsBackground#001219
editorGutter.addedBackground#5467DA60
editorGutter.deletedBackground#F77F0060
editorGutter.modifiedBackground#B7E4C760
editorHoverWidget.background#001219
editorHoverWidget.border#F5F5F510
editorIndentGuide.activeBackground#00293A
editorIndentGuide.background#00293A70
editorInfo.foreground#B7E4C770
editorLineNumber.activeForeground#B7E4C7
editorLineNumber.foreground#4EA8DEc0
editorLink.activeForeground#EAE6EB
editorMarkerNavigation.background#EAE6EB05
editorOverviewRuler.border#001219
editorOverviewRuler.errorForeground#F77F0040
editorOverviewRuler.findMatchForeground#4EA8DE
editorOverviewRuler.infoForeground#B7E4C740
editorOverviewRuler.warningForeground#6076F970
editorRuler.foreground#00293A
editorSuggestWidget.background#001219
editorSuggestWidget.border#F5F5F510
editorSuggestWidget.foreground#EAE6EB
editorSuggestWidget.highlightForeground#6076F9
editorSuggestWidget.selectedBackground#4EA8DE20
editorWarning.foreground#5467DA
editorWhitespace.foreground#EAE6EB40
editorWidget.background#001219
editorWidget.border#6076F9
editorWidget.resizeBorder#4EA8DE
extensionButton.prominentBackground#5467DA90
extensionButton.prominentHoverBackground#F77F00
focusBorder#F5F5F500
gitDecoration.conflictingResourceForeground#6076F9
gitDecoration.deletedResourceForeground#F77F00
gitDecoration.ignoredResourceForeground#4EA8DE
gitDecoration.modifiedResourceForeground#23CEDE
gitDecoration.untrackedResourceForeground#B7E4C7
input.background#00222F
input.border#F5F5F510
input.foreground#EAE6EB
input.placeholderForeground#EAE6EB60
inputOption.activeBackground#EAE6EB30
inputOption.activeBorder#EAE6EB30
inputValidation.errorBorder#F77F0050
inputValidation.infoBorder#B7E4C750
inputValidation.warningBorder#6076F950
list.activeSelectionBackground#001219
list.activeSelectionForeground#4EA8DE
list.focusBackground#00222F
list.focusForeground#B7E4C7
list.highlightForeground#4EA8DE
list.hoverBackground#00293A
list.hoverForeground#F5F5F5
list.inactiveSelectionBackground#00121930
list.inactiveSelectionForeground#4EA8DE
list.warningForeground#6076F9
listFilterWidget.background#00121930
listFilterWidget.noMatchesOutline#00121930
listFilterWidget.outline#00121930
menu.background#001219f8
menu.border#4EA8DE50
menu.foreground#EAE6EB
menu.selectionBackground#00222F
menu.selectionBorder#00121930
menu.selectionForeground#EAE6EB
menu.separatorBackground#EAE6EB
menubar.selectionBackground#00222F
menubar.selectionBorder#4EA8DE50
menubar.selectionForeground#EAE6EB
minimap.background#001219
minimapGutter.addedBackground#F77F00
minimapGutter.deletedBackground#6076F9
minimapGutter.modifiedBackground#5467DA
minimapSlider.activeBackground#5467DAb0
minimapSlider.background#5467DA80
minimapSlider.hoverBackground#5467DAa0
notificationLink.foreground#4EA8DE
notifications.background#001219
notifications.foreground#EAE6EB
panel.background#001219
panel.border#00121960
panelTitle.activeBorder#4EA8DE
panelTitle.activeForeground#F5F5F5
panelTitle.inactiveForeground#EAE6EB
peekView.border#00121930
peekViewEditor.background#EAE6EB05
peekViewEditor.matchHighlightBackground#4EA8DE50
peekViewEditorGutter.background#EAE6EB05
peekViewResult.background#EAE6EB05
peekViewResult.matchHighlightBackground#4EA8DE50
peekViewResult.selectionBackground#4EA8DE70
peekViewTitle.background#EAE6EB05
peekViewTitleDescription.foreground#EAE6EB60
pickerGroup.foreground#4EA8DE
progressBar.background#4EA8DE
scrollbar.shadow#00121900
scrollbarSlider.activeBackground#4EA8DEcc
scrollbarSlider.background#4EA8DEbb
scrollbarSlider.hoverBackground#4EA8DEee
selection.background#4EA8DE
settings.checkboxBackground#001219
settings.checkboxForeground#EAE6EB
settings.dropdownBackground#001219
settings.dropdownForeground#EAE6EB
settings.headerForeground#4EA8DE
settings.modifiedItemIndicator#4EA8DE
settings.numberInputBackground#001219
settings.numberInputForeground#EAE6EB
settings.textInputBackground#001219
settings.textInputForeground#EAE6EB
sideBar.background#001219
sideBar.border#4EA8DE50
sideBar.foreground#B7E4C7
sideBarSectionHeader.background#001219
sideBarSectionHeader.border#00121960
sideBarSectionHeader.foreground#B7E4C7
sideBarTitle.foreground#EAE6EB
statusBar.background#03071E
statusBar.border#00121960
statusBar.debuggingBackground#6076F9
statusBar.debuggingForeground#F5F5F5
statusBar.foreground#EDEDED
statusBar.noFolderBackground#001219
statusBarItem.hoverBackground#4EA8DE20
statusBarItem.remoteBackground#4EA8DE
statusBarItem.remoteForeground#001219
tab.activeBackground#4EA8DE50
tab.activeBorder#4EA8DE
tab.activeForeground#F5F5F5
tab.activeModifiedBorder#4EA8DE
tab.border#001219
tab.inactiveBackground#4EA8DE20
tab.inactiveForeground#EAE6EBaf
tab.unfocusedActiveBackground#4EA8DE40
tab.unfocusedActiveBorder#4EA8DE
tab.unfocusedActiveForeground#EAE6EB
tab.unfocusedInactiveBackground#4EA8DE10
tab.unfocusedInactiveForeground#EAE6EB7f
terminal.ansiBlack#001219
terminal.ansiBlue#B7E4C7
terminal.ansiBrightBlack#4EA8DE
terminal.ansiBrightBlue#B7E4C7
terminal.ansiBrightCyan#D8F3DC
terminal.ansiBrightGreen#5467DA
terminal.ansiBrightMagenta#6076F9
terminal.ansiBrightRed#F77F00
terminal.ansiBrightWhite#F5F5F5
terminal.ansiBrightYellow#6076F9
terminal.ansiCyan#D8F3DC
terminal.ansiGreen#5467DA
terminal.ansiMagenta#6076F9
terminal.ansiRed#F77F00
terminal.ansiWhite#F5F5F5
terminal.ansiYellow#6076F9
terminalCursor.background#001219
terminalCursor.foreground#6076F9
textLink.activeForeground#EAE6EB
textLink.foreground#4EA8DE
titleBar.activeBackground#001219
titleBar.activeForeground#EAE6EB
titleBar.border#00121960
titleBar.inactiveBackground#001219
titleBar.inactiveForeground#4EA8DE
tree.indentGuidesStroke#00293A
widget.shadow#00121930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#6076F9	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#5467DA	—
constant.other.php	#6076F9	—
constant.other.color	#F5F5F5	—
invalid, invalid.illegal	#F77F00	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#A7A8AF	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#23CEDE	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#EAE6EB	—
punctuation.definition, string.quoted.single.scss	#A7A8AF	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#6D6F7C	—
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#EAE6EB	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#6076F9	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#23CEDE
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#B7E4C7	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#D8F3DC	—
support.other.variable, string.other.link, markup.table	#EAE6EB	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#6076F9	—
variable.parameter.function.language.special, variable.parameter	#F77F00	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#5467DA
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#6076F9	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#23CEDE	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#F77F00	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#B7E4C7	italic
entity.other.attribute-name, support.function	#6076F9	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#EAE6EB	—
source.scss keyword.control	#6076F9	—
markup.inserted	#5467DA	—
markup.deleted	#F77F00	—
markup.changed	#6076F9	—
string.regexp	#D8F3DC	—
constant.character.escape	#D8F3DC	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#EAE6EB	italic
support.type.property-name.json	#EAE6EB	—
text.html.markdown, punctuation.definition.list_item.markdown	#EAE6EB	—
text.html.markdown markup.inline.raw.markdown	#6076F9	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#4EA8DE50	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#23CEDE	bold
markup.underline	#B7E4C7	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#4EA8DE50	—
markup.quote	—	italic
string.other.link.description.title.markdown	#6076F9	—
constant.other.reference.link.markdown	#6076F9	—
markup.raw.block	#6076F9	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#D8F3DC	—
variable.language.fenced.markdown	#4EA8DE	—
meta.separator	#A7A8AF	bold
token.info-token	#4EA8DE	—
token.warn-token	#6076F9	—
token.error-token	#FF293B	—
token.debug-token	#D8F3DC	—

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