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 Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f7f8fa
activityBar.border#e4e6eb
activityBar.foreground#000000
activityBar.inactiveForeground#6c707e
activityBarBadge.background#0033b3
activityBarBadge.foreground#ffffff
badge.background#ebecf0
badge.foreground#000000
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#ffffff
breadcrumb.focusForeground#000000
breadcrumb.foreground#6c707e
breadcrumbPicker.background#ffffff
button.background#0033b3
button.foreground#ffffff
button.hoverBackground#002d9e
button.secondaryBackground#ebecf0
button.secondaryForeground#000000
button.secondaryHoverBackground#dfe1e5
charts.blue#0033b3
charts.foreground#080808
charts.green#067d17
charts.lines#aeb3c2
charts.orange#c47233
charts.purple#871094
charts.red#de1b2e
charts.yellow#9e880d
debugExceptionWidget.background#ffe8e8
debugExceptionWidget.border#f50000
debugToolBar.background#ffffff
debugToolBar.border#e4e6eb
diffEditor.border#e4e6eb
diffEditor.diagonalFill#e4e6eb80
diffEditor.insertedLineBackground#7fc78415
diffEditor.insertedTextBackground#7fc78420
diffEditor.removedLineBackground#da363326
diffEditor.removedTextBackground#da363326
dropdown.background#ffffff
dropdown.border#dfe1e5
dropdown.foreground#080808
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#fcd47e
editor.findMatchHighlightBackground#fcd47e80
editor.findRangeHighlightBackground#fcd47e40
editor.foreground#080808
editor.inactiveSelectionBackground#a6d2ff60
editor.lineHighlightBackground#f5f8fe
editor.lineHighlightBorder#00000000
editor.selectionBackground#a6d2ff
editor.selectionHighlightBackground#a6d2ff80
editor.wordHighlightBackground#edebfc
editor.wordHighlightStrongBackground#fce8f4
editorBracketHighlight.foreground1#871094
editorBracketHighlight.foreground2#00627a
editorBracketHighlight.foreground3#067d17
editorBracketHighlight.foreground4#c47233
editorBracketHighlight.foreground5#de1b2e
editorBracketHighlight.foreground6#007ebd
editorBracketMatch.background#93d9d9
editorBracketMatch.border#00000000
editorCodeLens.foreground#818594
editorCursor.foreground#000000
editorError.border#00000000
editorError.foreground#f50000
editorGroup.border#e4e6eb
editorGroup.dropBackground#e7effd80
editorGroupHeader.noTabsBackground#f7f8fa
editorGroupHeader.tabsBackground#f7f8fa
editorGroupHeader.tabsBorder#e4e6eb
editorGutter.addedBackground#7fc784
editorGutter.background#ffffff
editorGutter.deletedBackground#FD5B87
editorGutter.modifiedBackground#88adf7
editorHint.border#00000000
editorHint.foreground#0066cc
editorHoverWidget.background#ffffff
editorHoverWidget.border#e4e6eb
editorHoverWidget.foreground#080808
editorHoverWidget.statusBarBackground#f7f8fa
editorIndentGuide.activeBackground#aeb3c2
editorIndentGuide.background#ebecf0
editorInfo.border#00000000
editorInfo.foreground#0066cc
editorInlayHint.background#ebecf0
editorInlayHint.foreground#6c707e
editorInlayHint.parameterBackground#ebecf0
editorInlayHint.parameterForeground#6c707e
editorInlayHint.typeBackground#ebecf0
editorInlayHint.typeForeground#6c707e
editorLineNumber.activeForeground#767a8a
editorLineNumber.foreground#aeb3c2
editorLink.activeForeground#006dcc
editorOverviewRuler.addedForeground#7fc784
editorOverviewRuler.background#ffffff
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#62b3b3
editorOverviewRuler.currentContentForeground#7fc784
editorOverviewRuler.deletedForeground#767a8a
editorOverviewRuler.errorForeground#f50000
editorOverviewRuler.findMatchForeground#c47233
editorOverviewRuler.incomingContentForeground#88adf7
editorOverviewRuler.infoForeground#0066cc
editorOverviewRuler.modifiedForeground#88adf7
editorOverviewRuler.warningForeground#f2bf57
editorOverviewRuler.wordHighlightForeground#d0a1ff
editorOverviewRuler.wordHighlightStrongForeground#f0a8d2
editorRuler.foreground#ebecf0
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#e4e6eb
editorSuggestWidget.foreground#080808
editorSuggestWidget.highlightForeground#0033b3
editorSuggestWidget.selectedBackground#e7effd
editorWarning.border#00000000
editorWarning.foreground#f2bf57
editorWhitespace.foreground#aeb3c2
editorWidget.background#ffffff
editorWidget.border#e4e6eb
editorWidget.foreground#080808
extensionBadge.remoteBackground#0033b3
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#0033b3
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#002d9e
gitDecoration.addedResourceForeground#067d17
gitDecoration.conflictingResourceForeground#de1b2e
gitDecoration.deletedResourceForeground#6c707e
gitDecoration.ignoredResourceForeground#aeb3c2
gitDecoration.modifiedResourceForeground#0033b3
gitDecoration.stageDeletedResourceForeground#6c707e
gitDecoration.stageModifiedResourceForeground#0033b3
gitDecoration.untrackedResourceForeground#238636
input.background#ffffff
input.border#dfe1e5
input.foreground#080808
input.placeholderForeground#aeb3c2
inputOption.activeBackground#0033b320
inputOption.activeBorder#0033b3
inputOption.activeForeground#000000
inputValidation.errorBackground#ffe8e8
inputValidation.errorBorder#f50000
inputValidation.errorForeground#f50000
inputValidation.infoBackground#e7effd
inputValidation.infoBorder#0033b3
inputValidation.infoForeground#0033b3
inputValidation.warningBackground#fcf4d4
inputValidation.warningBorder#f2bf57
inputValidation.warningForeground#9e880d
list.activeSelectionBackground#e7effd
list.activeSelectionForeground#000000
list.dropBackground#e7effd80
list.errorForeground#f50000
list.focusBackground#e7effd
list.focusForeground#000000
list.highlightForeground#0033b3
list.hoverBackground#f5f8fe
list.hoverForeground#000000
list.inactiveSelectionBackground#e7effd
list.inactiveSelectionForeground#080808
list.warningForeground#9e880d
listFilterWidget.background#ebecf0
listFilterWidget.noMatchesOutline#f50000
listFilterWidget.outline#0033b3
menu.background#ffffff
menu.border#e4e6eb
menu.foreground#080808
menu.selectionBackground#e7effd
menu.selectionForeground#000000
menu.separatorBackground#e4e6eb
merge.border#e4e6eb
merge.currentContentBackground#7fc78420
merge.currentHeaderBackground#7fc78440
merge.incomingContentBackground#88adf720
merge.incomingHeaderBackground#88adf740
minimap.background#ffffff
minimap.errorHighlight#f50000
minimap.findMatchHighlight#fcd47e
minimap.selectionHighlight#a6d2ff
minimap.warningHighlight#f2bf57
notificationCenter.border#e4e6eb
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#000000
notificationLink.foreground#006dcc
notifications.background#ffffff
notifications.border#e4e6eb
notifications.foreground#080808
notificationToast.border#e4e6eb
panel.background#ffffff
panel.border#e4e6eb
panelInput.border#dfe1e5
panelTitle.activeBorder#0033b3
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#6c707e
peekView.border#0033b3
peekViewEditor.background#f7f8fa
peekViewEditor.matchHighlightBackground#fcd47e80
peekViewEditorGutter.background#f7f8fa
peekViewResult.background#ffffff
peekViewResult.fileForeground#080808
peekViewResult.lineForeground#6c707e
peekViewResult.matchHighlightBackground#fcd47e
peekViewResult.selectionBackground#e7effd
peekViewResult.selectionForeground#000000
peekViewTitle.background#ebecf0
peekViewTitleDescription.foreground#6c707e
peekViewTitleLabel.foreground#000000
pickerGroup.border#e4e6eb
pickerGroup.foreground#0033b3
progressBar.background#0033b3
quickInput.background#ffffff
quickInput.foreground#080808
quickInputList.focusBackground#e7effd
quickInputList.focusForeground#000000
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#00000040
scrollbarSlider.background#00000020
scrollbarSlider.hoverBackground#00000030
searchEditor.findMatchBackground#fcd47e
searchEditor.findMatchBorder#c47233
settings.checkboxBackground#ffffff
settings.checkboxBorder#dfe1e5
settings.checkboxForeground#080808
settings.dropdownBackground#ffffff
settings.dropdownBorder#dfe1e5
settings.dropdownForeground#080808
settings.headerForeground#000000
settings.modifiedItemIndicator#0033b3
settings.numberInputBackground#ffffff
settings.numberInputBorder#dfe1e5
settings.numberInputForeground#080808
settings.textInputBackground#ffffff
settings.textInputBorder#dfe1e5
settings.textInputForeground#080808
sideBar.background#f7f8fa
sideBar.border#e4e6eb
sideBar.foreground#080808
sideBarSectionHeader.background#f7f8fa
sideBarSectionHeader.border#e4e6eb
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#f7f8fa
statusBar.border#e4e6eb
statusBar.debuggingBackground#e7effd
statusBar.debuggingForeground#000000
statusBar.foreground#080808
statusBar.noFolderBackground#f7f8fa
statusBar.noFolderForeground#080808
statusBarItem.remoteBackground#0033b3
statusBarItem.remoteForeground#ffffff
tab.activeBackground#ffffff
tab.activeBorder#00000000
tab.activeBorderTop#0033b3
tab.activeForeground#000000
tab.activeModifiedBorder#0033b3
tab.border#e4e6eb
tab.hoverBackground#ebecf0
tab.inactiveBackground#f7f8fa
tab.inactiveForeground#6c707e
tab.inactiveModifiedBorder#0033b380
tab.lastPinnedBorder#dfe1e5
tab.unfocusedHoverBackground#ebecf080
terminal.ansiBlack#000000
terminal.ansiBlue#0033b3
terminal.ansiBrightBlack#6c707e
terminal.ansiBrightBlue#174be6
terminal.ansiBrightCyan#0095d4
terminal.ansiBrightGreen#0a8a21
terminal.ansiBrightMagenta#a01cac
terminal.ansiBrightRed#f50000
terminal.ansiBrightWhite#aeb3c2
terminal.ansiBrightYellow#b89910
terminal.ansiCyan#007ebd
terminal.ansiGreen#067d17
terminal.ansiMagenta#871094
terminal.ansiRed#de1b2e
terminal.ansiWhite#808080
terminal.ansiYellow#9e880d
terminal.background#ffffff
terminal.foreground#080808
terminalCursor.background#ffffff
terminalCursor.foreground#000000
titleBar.activeBackground#f7f8fa
titleBar.activeForeground#000000
titleBar.border#e4e6eb
titleBar.inactiveBackground#f7f8fa
titleBar.inactiveForeground#6c707e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.line	#8c8c8c	italic
comment.block.documentation	#8c8c8c	italic
storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#999999	—
variable.other.jsdoc	#3d3d3d	italic
string, string.quoted, string.template	#067d17	—
constant.character.escape, constant.other.placeholder	#0037a6	—
invalid.illegal.escape	#067d17	—
constant.numeric, constant.language.numeric	#1750eb	—
constant.language.boolean	#0033b3	—
constant.language.null, constant.language.undefined	#0033b3	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other	#0033b3	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#080808	—
storage.type, storage.modifier	#0033b3	—
entity.name.function, support.function	#00627a	—
entity.name.function.member	#00627a	—
entity.name.function.member.static	#00627a	italic
entity.name.type.class, entity.name.class, support.class	#080808	—
entity.name.type, support.type	#336ecc	—
entity.name.type.parameter	#007e8a	—
entity.name.type.interface	#336ecc	—
variable, variable.other.readwrite, variable.other.object	#080808	—
variable.other.constant, constant.other	#871094	italic
variable.other.property, support.variable.property	#871094	—
variable.other.property.static	#871094	italic
variable.parameter	#080808	—
variable.language.this, variable.language.super	#0033b3	—
punctuation.separator, punctuation.terminator, punctuation.accessor	#080808	—
punctuation.section, meta.brace	#080808	—
entity.name.tag	#000080	—
entity.other.attribute-name	#174ad4	—
meta.decorator, punctuation.decorator, storage.type.annotation	#9e880d	—
entity.other.attribute-name.class.css	#174ad4	—
support.type.property-name.css	#080808	—
keyword.other.important.css	#0033b3	bold
support.type.property-name.json	#000083080	—
markup.heading, entity.name.section.markdown	#0033b3	bold
markup.inline.raw, markup.fenced_code.block	#067d17	—
markup.underline.link	#006dcc	—
string.regexp	#264eff	—
entity.name.tag.yaml	#0033b3	—
meta.function.decorator.python, entity.name.function.decorator.python	#9e880d	—
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#007ebd	—
support.class.component.jsx, support.class.component.tsx	#ad6339	—
markup.inserted	#067d17	—
markup.deleted	#de1b2e	—
invalid.illegal	#f50000	—
keyword.codetag	#008dde	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}!`;
}