Islands Theme

Name: Islands Theme
Author: kangsou

Publisher: kangsouThemes in package: 2

Islands Dark and Light themes ported from JetBrains IDEs - A beautiful, consistent color scheme for VS Code

Open in VS Code GitHub

Color themes

VS Code preview

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

Islands Theme — Islands Dark

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#191a1c
activityBar.border#2b2d30
activityBar.foreground#bcbec4
activityBar.inactiveForeground#6f737a
activityBarBadge.background#548af7
activityBarBadge.foreground#ffffff
badge.background#393b40
badge.foreground#bcbec4
breadcrumb.activeSelectionForeground#dfe1e5
breadcrumb.background#191a1c
breadcrumb.focusForeground#dfe1e5
breadcrumb.foreground#9da0a8
breadcrumbPicker.background#27282b
button.background#548af7
button.foreground#ffffff
button.hoverBackground#4a7ce6
button.secondaryBackground#393b40
button.secondaryForeground#bcbec4
button.secondaryHoverBackground#43454a
charts.blue#56a8f5
charts.foreground#bcbec4
charts.green#6aab73
charts.lines#6f737a
charts.orange#d69a6b
charts.purple#c77dbb
charts.red#f75464
charts.yellow#e0bb65
debugExceptionWidget.background#402929
debugExceptionWidget.border#fa6675
debugToolBar.background#27282b
debugToolBar.border#43454a
diffEditor.border#2b2d30
diffEditor.diagonalFill#2b2d3080
diffEditor.insertedLineBackground#54915915
diffEditor.insertedTextBackground#54915920
diffEditor.removedLineBackground#da363326
diffEditor.removedTextBackground#da363326
dropdown.background#27282b
dropdown.border#43454a
dropdown.foreground#bcbec4
dropdown.listBackground#27282b
editor.background#191a1c
editor.findMatchBackground#2d543f
editor.findMatchHighlightBackground#114957
editor.findRangeHighlightBackground#11495740
editor.foreground#bcbec4
editor.inactiveSelectionBackground#373b3960
editor.lineHighlightBackground#1f2024
editor.lineHighlightBorder#00000000
editor.selectionBackground#373b39
editor.selectionHighlightBackground#373b3980
editor.wordHighlightBackground#373b39
editor.wordHighlightStrongBackground#402f33
editorBracketHighlight.foreground1#c77dbb
editorBracketHighlight.foreground2#56a8f5
editorBracketHighlight.foreground3#6aab73
editorBracketHighlight.foreground4#cf8e6d
editorBracketHighlight.foreground5#f75464
editorBracketHighlight.foreground6#2aacb8
editorBracketMatch.background#43454a
editorBracketMatch.border#00000000
editorCodeLens.foreground#868a91
editorCursor.foreground#ced0d6
editorError.border#00000000
editorError.foreground#fa6675
editorGroup.border#2b2d30
editorGroup.dropBackground#2b2d3080
editorGroupHeader.noTabsBackground#191a1c
editorGroupHeader.tabsBackground#191a1c
editorGroupHeader.tabsBorder#2b2d30
editorGutter.addedBackground#549159
editorGutter.background#191a1c
editorGutter.deletedBackground#FD5B87
editorGutter.modifiedBackground#375fad
editorHint.border#00000000
editorHint.foreground#857042
editorHoverWidget.background#27282b
editorHoverWidget.border#43454a
editorHoverWidget.foreground#bcbec4
editorHoverWidget.statusBarBackground#2b2d30
editorIndentGuide.activeBackground#4e5157
editorIndentGuide.background#323438
editorInfo.border#00000000
editorInfo.foreground#857042
editorInlayHint.background#393b40
editorInlayHint.foreground#868a91
editorInlayHint.parameterBackground#393b40
editorInlayHint.parameterForeground#858a94
editorInlayHint.typeBackground#393b40
editorInlayHint.typeForeground#868a91
editorLineNumber.activeForeground#a1a3ab
editorLineNumber.foreground#4b5059
editorLink.activeForeground#548af7
editorOverviewRuler.addedForeground#549159
editorOverviewRuler.background#191a1c
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#6b6c73
editorOverviewRuler.currentContentForeground#549159
editorOverviewRuler.deletedForeground#868a91
editorOverviewRuler.errorForeground#d64d5b
editorOverviewRuler.findMatchForeground#42bd77
editorOverviewRuler.incomingContentForeground#375fad
editorOverviewRuler.infoForeground#857042
editorOverviewRuler.modifiedForeground#375fad
editorOverviewRuler.warningForeground#c29e4a
editorOverviewRuler.wordHighlightForeground#5b786a
editorOverviewRuler.wordHighlightStrongForeground#ba6387
editorRuler.foreground#323438
editorSuggestWidget.background#27282b
editorSuggestWidget.border#43454a
editorSuggestWidget.foreground#bcbec4
editorSuggestWidget.highlightForeground#548af7
editorSuggestWidget.selectedBackground#2b2d30
editorWarning.border#00000000
editorWarning.foreground#f2c55c
editorWhitespace.foreground#6f737a
editorWidget.background#27282b
editorWidget.border#43454a
editorWidget.foreground#bcbec4
extensionBadge.remoteBackground#548af7
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#548af7
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#4a7ce6
gitDecoration.addedResourceForeground#73bd79
gitDecoration.conflictingResourceForeground#de6a66
gitDecoration.deletedResourceForeground#6f737a
gitDecoration.ignoredResourceForeground#6f737a
gitDecoration.modifiedResourceForeground#70aeff
gitDecoration.stageDeletedResourceForeground#6f737a
gitDecoration.stageModifiedResourceForeground#70aeff
gitDecoration.untrackedResourceForeground#238636
input.background#27282b
input.border#43454a
input.foreground#bcbec4
input.placeholderForeground#6f737a
inputOption.activeBackground#548af720
inputOption.activeBorder#548af7
inputOption.activeForeground#bcbec4
inputValidation.errorBackground#402929
inputValidation.errorBorder#fa6675
inputValidation.errorForeground#f75464
inputValidation.infoBackground#25324d
inputValidation.infoBorder#548af7
inputValidation.infoForeground#56a8f5
inputValidation.warningBackground#3d3320
inputValidation.warningBorder#f2c55c
inputValidation.warningForeground#f2c55c
list.activeSelectionBackground#2b2d30
list.activeSelectionForeground#dfe1e5
list.dropBackground#2b2d3080
list.errorForeground#f75464
list.focusBackground#2b2d30
list.focusForeground#dfe1e5
list.highlightForeground#548af7
list.hoverBackground#2b2d30
list.hoverForeground#dfe1e5
list.inactiveSelectionBackground#2b2d30
list.inactiveSelectionForeground#bcbec4
list.warningForeground#f2c55c
listFilterWidget.background#393b40
listFilterWidget.noMatchesOutline#fa6675
listFilterWidget.outline#548af7
menu.background#27282b
menu.border#43454a
menu.foreground#bcbec4
menu.selectionBackground#2b2d30
menu.selectionForeground#dfe1e5
menu.separatorBackground#43454a
merge.border#2b2d30
merge.currentContentBackground#54915920
merge.currentHeaderBackground#54915940
merge.incomingContentBackground#375fad20
merge.incomingHeaderBackground#375fad40
minimap.background#191a1c
minimap.errorHighlight#fa6675
minimap.findMatchHighlight#2d543f
minimap.selectionHighlight#373b39
minimap.warningHighlight#f2c55c
notificationCenter.border#43454a
notificationCenterHeader.background#27282b
notificationCenterHeader.foreground#bcbec4
notificationLink.foreground#548af7
notifications.background#27282b
notifications.border#43454a
notifications.foreground#bcbec4
notificationToast.border#43454a
panel.background#191a1c
panel.border#2b2d30
panelInput.border#43454a
panelTitle.activeBorder#548af7
panelTitle.activeForeground#dfe1e5
panelTitle.inactiveForeground#6f737a
peekView.border#548af7
peekViewEditor.background#27282b
peekViewEditor.matchHighlightBackground#2d543f80
peekViewEditorGutter.background#27282b
peekViewResult.background#27282b
peekViewResult.fileForeground#bcbec4
peekViewResult.lineForeground#6f737a
peekViewResult.matchHighlightBackground#2d543f
peekViewResult.selectionBackground#2b2d30
peekViewResult.selectionForeground#dfe1e5
peekViewTitle.background#393b40
peekViewTitleDescription.foreground#9da0a8
peekViewTitleLabel.foreground#dfe1e5
pickerGroup.border#43454a
pickerGroup.foreground#548af7
progressBar.background#548af7
quickInput.background#27282b
quickInput.foreground#bcbec4
quickInputList.focusBackground#2b2d30
quickInputList.focusForeground#dfe1e5
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#ffffff66
scrollbarSlider.background#ffffff26
scrollbarSlider.hoverBackground#ffffff4d
searchEditor.findMatchBackground#2d543f
searchEditor.findMatchBorder#42bd77
settings.checkboxBackground#27282b
settings.checkboxBorder#43454a
settings.checkboxForeground#bcbec4
settings.dropdownBackground#27282b
settings.dropdownBorder#43454a
settings.dropdownForeground#bcbec4
settings.headerForeground#dfe1e5
settings.modifiedItemIndicator#548af7
settings.numberInputBackground#27282b
settings.numberInputBorder#43454a
settings.numberInputForeground#bcbec4
settings.textInputBackground#27282b
settings.textInputBorder#43454a
settings.textInputForeground#bcbec4
sideBar.background#191a1c
sideBar.border#2b2d30
sideBar.foreground#bcbec4
sideBarSectionHeader.background#191a1c
sideBarSectionHeader.border#2b2d30
sideBarSectionHeader.foreground#bcbec4
sideBarTitle.foreground#bcbec4
statusBar.background#191a1c
statusBar.border#2b2d30
statusBar.debuggingBackground#2a5091
statusBar.debuggingForeground#ced0d6
statusBar.foreground#bcbec4
statusBar.noFolderBackground#191a1c
statusBar.noFolderForeground#bcbec4
statusBarItem.remoteBackground#548af7
statusBarItem.remoteForeground#ffffff
tab.activeBackground#191a1c
tab.activeBorder#00000000
tab.activeBorderTop#548af7
tab.activeForeground#dfe1e5
tab.activeModifiedBorder#70aeff
tab.border#2b2d30
tab.hoverBackground#2b2d30
tab.inactiveBackground#191a1c
tab.inactiveForeground#6f737a
tab.inactiveModifiedBorder#70aeff80
tab.lastPinnedBorder#43454a
tab.unfocusedHoverBackground#2b2d3080
terminal.ansiBlack#191a1c
terminal.ansiBlue#56a8f5
terminal.ansiBrightBlack#6f737a
terminal.ansiBrightBlue#70aeff
terminal.ansiBrightCyan#42c3d4
terminal.ansiBrightGreen#73bd79
terminal.ansiBrightMagenta#cf84cf
terminal.ansiBrightRed#fa6675
terminal.ansiBrightWhite#ced0d6
terminal.ansiBrightYellow#f2c55c
terminal.ansiCyan#2aacb8
terminal.ansiGreen#6aab73
terminal.ansiMagenta#c77dbb
terminal.ansiRed#f75464
terminal.ansiWhite#bcbec4
terminal.ansiYellow#e0bb65
terminal.background#191a1c
terminal.foreground#bcbec4
terminalCursor.background#191a1c
terminalCursor.foreground#ced0d6
titleBar.activeBackground#191a1c
titleBar.activeForeground#bcbec4
titleBar.border#2b2d30
titleBar.inactiveBackground#191a1c
titleBar.inactiveForeground#6f737a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.line	#7a7e85	—
comment.block.documentation	#5f826b	italic
storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#67a37c	—
string, string.quoted, string.template	#6aab73	—
constant.character.escape, constant.other.placeholder	#cf8e6d	—
constant.numeric, constant.language.numeric	#2aacb8	—
constant.language.boolean	#cf8e6d	—
constant.language.null, constant.language.undefined	#cf8e6d	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other	#cf8e6d	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#bcbec4	—
storage.type, storage.modifier	#cf8e6d	—
entity.name.function, support.function	#56a8f5	—
entity.name.function.member	#57aaf7	—
entity.name.function.member.static	#57aaf7	italic
entity.name.type.class, entity.name.class, support.class	#bcbec4	—
entity.name.type, support.type	#bcbec4	—
entity.name.type.parameter	#16baac	—
entity.name.type.interface	#16baac	—
variable, variable.other.readwrite, variable.other.object	#bcbec4	—
variable.other.constant, constant.other	#c77dbb	italic
variable.other.property, support.variable.property	#c77dbb	—
variable.other.property.static	#c77dbb	italic
variable.parameter	#bcbec4	—
variable.language.this, variable.language.super	#cf8e6d	—
punctuation.separator, punctuation.terminator, punctuation.accessor	#bcbec4	—
punctuation.section, meta.brace	#bcbec4	—
entity.name.tag	#d5b778	—
entity.other.attribute-name	#bcbec4	—
meta.decorator, punctuation.decorator, storage.type.annotation	#b3ae60	—
entity.other.attribute-name.class.css	#56a8f5	—
support.type.property-name.css	#bcbec4	—
keyword.other.important.css	#cf8e6d	bold
support.type.property-name.json	#c77dbb	—
markup.heading, entity.name.section.markdown	#56a8f5	bold
markup.inline.raw, markup.fenced_code.block	#6aab73	—
markup.underline.link	#56a8f5	—
string.regexp	#42c3d4	—
entity.name.tag.yaml	#cf8e6d	—
meta.function.decorator.python, entity.name.function.decorator.python	#b3ae60	—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#32b8af	—
support.class.component.jsx, support.class.component.tsx	#2fbaa3	—
markup.inserted	#6aab73	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffa198	—
invalid.illegal	#f75464	—
keyword.codetag	#8bb33d	italic

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