Cool theme

Name: Cool theme
Author: Dani Aprilyanto

Publisher: Dani AprilyantoThemes in package: 2

A cool theme for Visual Studio Code

Open in VS Code GitHub

Color themes

VS Code preview

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

Cool theme — Cool theme - dark blue

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.activeBorder#9fef00
activityBar.background#030310
activityBar.foreground#DEFDE6
activityBar.inactiveForeground#93c5fd
activityBarBadge.background#9fef00
activityBarBadge.foreground#1a2332
badge.background#ff3e3e
badge.foreground#ffffff
banner.background#030310
banner.foreground#a4b1cd
banner.iconForeground#ffffff
breadcrumb.activeSelectionForeground#9fef00
breadcrumb.background#030310
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#a4b1cd
breadcrumbPicker.background#030310
button.background#9fef00
button.foreground#030310
charts.blue#004cff
charts.foreground#a4b1cd
charts.green#9fef00
charts.lines#a4b1cd
charts.orange#2ee7b6
charts.purple#9f00ff
charts.red#ff3e3e
charts.yellow#ffaf00
checkbox.background#030310
checkbox.border#030310
checkbox.foreground#9fef00
debugExceptionWidget.background#ff3e3e49
debugExceptionWidget.border#ff3e3e49
debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
debugIcon.breakpointDisabledForeground#ff3e3e49
debugIcon.breakpointForeground#ff3e3e
debugIcon.breakpointStackframeForeground#004cff49
debugIcon.breakpointUnverifiedForeground#a4b1cd
debugIcon.continueForeground#9fef00
debugIcon.disconnectForeground#ff3e3e
debugIcon.pauseForeground#9fef00
debugIcon.restartForeground#ffaf00
debugIcon.startForeground#9fef00
debugIcon.stepBackForeground#a4b1cd
debugIcon.stepIntoForeground#a4b1cd
debugIcon.stepOutForeground#a4b1cd
debugIcon.stepOverForeground#a4b1cd
debugIcon.stopForeground#ff3e3e
debugToolBar.background#1a2332
debugToolBar.border#1a2332
descriptionForeground#a4b1cd
dropdown.background#030310
dropdown.foreground#a4b1cd
dropdown.listBackground#030310
editor.background#030310
editor.findMatchBackground#6e7b96a1
editor.findMatchHighlightBackground#6e7b968C
editor.findRangeHighlightBackground#6e7b968C
editor.foldBackground#141d2b
editor.foreground#a4b1cd
editor.lineHighlightBackground#1a2332
editor.lineHighlightBorder#1a2332
editor.rangeHighlightBackground#313f55
editor.selectionBackground#6e7b968C
editor.selectionForeground#030310
editor.selectionHighlightBackground#6e7b968C
editor.stackFrameHighlightBackground#6e7b968C
editorBracketMatch.border#313f55
editorCursor.background#9fef00
editorGroup.border#313f55
editorGroup.dropBackground#6e7b9625
editorGroupHeader.tabsBackground#030310
editorGutter.addedBackground#9fef00
editorGutter.background#030310
editorGutter.commentRangeForeground#a4b1cd
editorGutter.deletedBackground#ff3e3e
editorGutter.modifiedBackground#004cff
editorHoverWidget.background#1a2332
editorHoverWidget.foreground#a4b1cd
editorIndentGuide.activeBackground#a4b1cd
editorIndentGuide.background#313f55
editorLightBulb.foreground#ffaf00
editorLightBulbAutoFix.foreground#9fef00
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#313f55
editorOverviewRuler.bracketMatchForeground#a4b1cd
editorOverviewRuler.commonContentForeground#9fef00
editorOverviewRuler.errorForeground#ff3e3e
editorOverviewRuler.findMatchForeground#004cff
editorOverviewRuler.infoForeground#ffffff
editorOverviewRuler.rangeHighlightForeground#004cff
editorOverviewRuler.selectionHighlightForeground#004cff
editorOverviewRuler.warningForeground#ffaf00
editorOverviewRuler.wordHighlightForeground#a4b1cd
editorSuggestWidget.background#1a2332
editorSuggestWidget.border#1a2332
editorSuggestWidget.foreground#a4b1cd
editorWidget.background#000
editorWidget.border#004cff
errorForeground#ff3e3e
extensionBadge.remoteBackground#2ee7b6
extensionBadge.remoteForeground#030310
extensionButton.prominentBackground#9fef00
extensionButton.prominentForeground#030310
extensionButton.prominentHoverBackground#c5f467
extensionIcon.starForeground#ffaf00
focusBorder#1a2332
foreground#a4b1cd
gitDecoration.addedResourceForeground#9fef00
gitDecoration.conflictingResourceForeground#ffaf00
gitDecoration.deletedResourceForeground#ff3e3e
gitDecoration.ignoredResourceForeground#6e7b968C
gitDecoration.modifiedResourceForeground#ffffff
gitDecoration.submoduleResourceForeground#5cecc6
gitDecoration.untrackedResourceForeground#a4b1cd
icon.foreground#a4b1cd
inlineparameters.annotationBackground#FFFFFF10
input.background#141d2b
input.border#141d2b
input.foreground#ffffff
input.placeholderForeground#a4b1cd
inputOption.activeBackground#313f55
inputOption.activeBorder#313f55
inputOption.activeForeground#a4b1cd
inputValidation.errorBackground#ff3e3e70
inputValidation.errorBorder#ff3e3e49
inputValidation.errorForeground#ffffff
inputValidation.infoBackground#004cff70
inputValidation.infoBorder#004cff54
inputValidation.infoForeground#ffffff
inputValidation.warningBackground#ffaf0070
inputValidation.warningBorder#ffaf0070
inputValidation.warningForeground#ffffff
keybindingLabel.background#6e7b965d
keybindingLabel.border#6e7b968C
keybindingLabel.bottomBorder#a4b1cd7e
keybindingLabel.foreground#a4b1cd
list.activeSelectionBackground#1a2332
list.activeSelectionForeground#ffffff
list.dropBackground#313f55
list.errorForeground#ff3e3e
list.hoverBackground#1a2332
list.inactiveSelectionBackground#1a2332
list.warningForeground#ffaf00
listFilterWidget.background#004cff
menu.background#030310
menu.separatorBackground#1a2332
menubar.selectionBackground#030310
menubar.selectionForeground#a4b1cd
merge.commonContentBackground#ffffff
merge.commonHeaderBackground#ffffff
merge.currentContentBackground#ff3e3e49
merge.currentHeaderBackground#ff3e3e
merge.incomingContentBackground#004cff49
merge.incomingHeaderBackground#004cff
minimap.errorHighlight#ff8484
minimap.findMatchHighlight#c5f467
minimap.selectionHighlight#ffffffd0
minimap.warningHighlight#ffcc5c
minimapGutter.addedBackground#9fef00
minimapGutter.deletedBackground#ff3e3e
minimapGutter.modifiedBackground#004cff
minimapSlider.activeBackground#6e7b968C
minimapSlider.background#141d2b
minimapSlider.hoverBackground#030310
notificationCenterHeader.background#004cff
notificationLink.foreground#5cb2ff
notifications.background#004cff
notifications.foreground#fff
notificationsErrorIcon.foreground#ff8484
notificationsInfoIcon.foreground#9fef00
notificationsWarningIcon.foreground#ffcc5c
panel.background#030310
panel.border#141d2b
panelTitle.activeBorder#9fef00
panelTitle.inactiveForeground#a4b1cd
peekView.border#1a2332
peekViewEditor.background#141d2b
progressBar.background#9fef00
scm.providerBorder#a4b1cd
scrollbar.shadow#141d2b
scrollbarSlider.activeBackground#6e7b968C
scrollbarSlider.background#6e7b968C
scrollbarSlider.hoverBackground#6e7b968C
selection.background#313f55
settings.checkboxBackground#030310
settings.checkboxBorder#030310
settings.checkboxForeground#9fef00
settings.dropdownBackground#030310
settings.dropdownBorder#030310
settings.dropdownForeground#a4b1cd
settings.dropdownListBorder#030310
settings.headerForeground#ffffff
settings.modifiedItemIndicator#9fef00
settings.numberInputBackground#030310
settings.numberInputBorder#030310
settings.numberInputForeground#a4b1cd
settings.textInputBackground#030310
settings.textInputBorder#030310
settings.textInputForeground#a4b1cd
sideBar.background#030310
sideBar.foreground#a4b1cd
sideBarSectionHeader.background#030310
sideBarSectionHeader.foreground#EEEEEE
sideBarTitle.foreground#FFFFFF
statusBar.background#004cff
statusBar.debuggingBackground#ff8484
statusBar.debuggingForeground#004cff
statusBar.foreground#fff
statusBar.noFolderBackground#004cff
statusBar.noFolderForeground#fff
tab.activeBackground#030310
tab.activeBorder#030310
tab.activeBorderTop#a6ff52
tab.activeModifiedBorder#a4b1cd
tab.border#141d2b
tab.hoverBackground#141d2b
tab.hoverBorder#141d2b
tab.inactiveBackground#030310
tab.inactiveForeground#6e7b968C
tab.unfocusedActiveBorder#a4b1cd
terminal.ansiBlue#004cff
terminal.ansiBrightBlue#5cb2ff
terminal.ansiBrightCyan#5cecc6
terminal.ansiBrightGreen#c5f467
terminal.ansiBrightMagenta#c16cfa
terminal.ansiBrightRed#ff8484
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffcc5c
terminal.ansiCyan#2ee7b6
terminal.ansiGreen#9fef00
terminal.ansiMagenta#9f00ff
terminal.ansiRed#ff3e3e
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffaf00
terminal.background#030310
terminal.foreground#a4b1cd
terminalCursor.background#313f55
testing.iconErrored#ffaf00
testing.iconFailed#ff3e3e
testing.iconPassed#9fef00
testing.iconQueued#a4b1cd
testing.iconSkipped#a4b1cd
testing.iconUnset#a4b1cd
testing.message.error.decorationForeground#ff3e3e
testing.message.error.lineBackground#ff3e3e
testing.message.hint.decorationForeground#2ee7b6
testing.message.hint.lineBackground#2ee7b6
testing.message.info.decorationForeground#004cff
testing.message.info.lineBackground#004cff
testing.message.warning.decorationForeground#ffaf00
testing.message.warning.lineBackground#ffaf00
testing.peekBorder#a4b1cd
textBlockQuote.background#141d2b
textBlockQuote.border#a4b1cd
textCodeBlock.background#030310
textLink.activeForeground#c5f467
textLink.foreground#9fef00
textPreformat.foreground#2e6cff
textSeparator.foreground#ffffff
titleBar.activeBackground#004cff
titleBar.activeForeground#fff
titleBar.border#030310
titleBar.inactiveBackground#004cff
titleBar.inactiveForeground#fff
tree.indentGuidesStroke#9fef00
walkThrough.embeddedEditorBackground#141d2b
welcomePage.background#030310
welcomePage.buttonBackground#1a2332
welcomePage.buttonHoverBackground#313f55
widget.shadow#0303107e
window.activeBorder#1a2332

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#7a88cf	—
keyword, storage, support, keyword.control.flow, storage.modifier, keyword.operator, entity.other.attribute-name.class.css, entity.other.keyframe-offset, markup.heading, markup.underline.link, variable.other.env, punctuation.definition.list.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, constant.length.units.css, constant.percentage.units.css	#F6D860	—
string, markup.inserted, markup.raw, constant, source.env, support.type.builtin.graphql, variable.other.quoted.double, markup.inline.raw.string.markdown, entity.other.attribute-name.id.css, meta.jsx.children, JSXNested	#00ffaa	—
markup.changed, entity, entity.name.function, entity.name.function.elixir, entity.name.function-call.elixir, support.class.component.tsx, support.class.component.open.jsx, support.class.component.close.jsx, meta.function-call.generic.python, entity.name.section.markdown, storage.type.annotation.dart	#28e4fd	—
entity.name.tag, variable.language	#FF9D76	—
invalid, markup.deleted	#28e4fd	—
string.unquoted, punctuation.separator, entity.other.attribute-name, meta.object-literal.key, variable.object.property, variable.other.property, variable.other.object.property, variable.other.constant.property, meta.type.annotation, support.type.property-name.css, support.type.vendored, constant.language.symbol.elixir, variable.graphql, meta.attribute.python, source.dart	#ffbb94	—
variable, markup.list, support.constant.property-value.css, variable.parameter.keyframe-list.css, source.css, support.constant.font-name, support.constant.vendored.property-value, variable.parameter, meta.class, meta.method.declaration, parameter.variable.function.elixir, punctuation.definition.tag, punctuation.section.embedded, meta.embedded.expression, punctuation.terminator.dart, punctuation.dot.dart	#edecee	—
comment, string.quoted.docstring.multi.python	#7a88cf	—
entity.name.function, support.function	#beff56	—
entity.name.type, entity.name.class, support.class.builtin, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element.begin, punctuation.quasi.element.end, entity.other.inherited-class, variable.other.constant.elixir, entity.other.attribute-name.class.css, support.class.dart	#ffbb94	—
meta.parameters, meta.type.parameters, meta.return.type, entity.name.type.interface, meta.type.annotation, meta.function.parameters, markup.italic.markdown	—	italic
markup.underline	—	underline
markup.bold.markdown, storage.type.annotation.dart	—	bold

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