Kelp Forest Theme

Name: Kelp Forest Theme
Author: Jason Theiler

Publisher: Jason TheilerThemes in package: 3

A cool and cozy dark 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.

Kelp Forest Theme — Kelp Forest Bold

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#0AE194
activityBar.activeFocusBorder#0AE194
activityBar.background#0F1614
activityBar.dropBackground#64787880
activityBar.foreground#D5DAD8
activityBar.inactiveForeground#D5DAD880
activityBarBadge.background#0AE194
activityBarBadge.foreground#060C06
badge.background#344848
badge.foreground#D5DAD8
breadcrumb.activeSelectionForeground#24B1C5
breadcrumb.background#141B19
breadcrumb.focusForeground#D5DAD8
breadcrumb.foreground#D5DAD8B3
breadcrumbPicker.background#1F2826
button.background#344848
button.hoverBackground#445858
debugToolBar.background#1F2826
descriptionForeground#D5DAD8
diffEditor.insertedTextBackground#0AE1941A
diffEditor.removedTextBackground#E0093C1A
dropdown.background#1F2826
dropdown.foreground#D5DAD8B3
dropdown.listBackground#1F2826
editor.background#141B19
editor.findMatchBackground#ED008C80
editor.findMatchHighlightBackground#ED008C4D
editor.findRangeHighlightBackground#ED008C1A
editor.foldBackground#0AE1941A
editor.foreground#BBBBBB
editor.hoverHighlightBackground#6478784D
editor.lineHighlightBackground#3448484D
editor.rangeHighlightBackground#ED008C1A
editor.selectionBackground#15C3AC4D
editor.selectionHighlightBackground#6478784D
editor.snippetTabstopHighlightBackground#64787800
editor.snippetTabstopHighlightBorder#647878
editor.wordHighlightBackground#15C3AC4D
editor.wordHighlightStrongBackground#FFE0304D
editorBracketMatch.background#64787800
editorBracketMatch.border#647878
editorCodeLens.foreground#647878B3
editorCursor.background#141B19
editorCursor.foreground#0AE194
editorError.foreground#E0093C
editorGroup.border#2F4846
editorGroup.dropBackground#64787880
editorGroupHeader.tabsBackground#0F1614
editorGutter.addedBackground#0AE19480
editorGutter.deletedBackground#E0093C80
editorGutter.modifiedBackground#15C3AC80
editorIndentGuide.activeBackground#2F4846
editorIndentGuide.background#2F484680
editorInfo.foreground#24B1C5
editorLightBulb.foreground#FFE030
editorLightBulbAutoFix.foreground#FFE030
editorLineNumber.activeForeground#BBBBBB80
editorLineNumber.foreground#BBBBBB1A
editorLink.activeForeground#24B1C5
editorMarkerNavigation.background#1F2826
editorOverviewRuler.addedForeground#0AE19480
editorOverviewRuler.border#2F484680
editorOverviewRuler.bracketMatchForeground#647878
editorOverviewRuler.deletedForeground#E0093C80
editorOverviewRuler.errorForeground#E0093CE6
editorOverviewRuler.findMatchForeground#ED008C80
editorOverviewRuler.infoForeground#24B1C580
editorOverviewRuler.modifiedForeground#15C3AC80
editorOverviewRuler.rangeHighlightForeground#ED008C80
editorOverviewRuler.selectionHighlightForeground#64787880
editorOverviewRuler.warningForeground#FF9018E6
editorOverviewRuler.wordHighlightForeground#15C3AC80
editorOverviewRuler.wordHighlightStrongForeground#FFE03080
editorRuler.foreground#2F4846B3
editorSuggestWidget.foreground#D5DAD8B3
editorSuggestWidget.highlightForeground#0AE194
editorWarning.foreground#FF9018
editorWhitespace.foreground#647878B3
editorWidget.background#1F2826
editorWidget.border#2F484600
editorWidget.foreground#D5DAD8
editorWidget.resizeBorder#2F4846
errorForeground#E0093C
extensionBadge.remoteBackground#344848
extensionBadge.remoteForeground#D5DAD8
extensionButton.prominentBackground#344848
extensionButton.prominentForeground#D5DAD8
extensionButton.prominentHoverBackground#445858
focusBorder#2F4846
foreground#D5DAD8
gitDecoration.addedResourceForeground#0AE194
gitDecoration.conflictingResourceForeground#ED008C
gitDecoration.deletedResourceForeground#E0093C
gitDecoration.ignoredResourceForeground#D5DAD84D
gitDecoration.modifiedResourceForeground#15C3AC
gitDecoration.submoduleResourceForeground#15C3AC
gitDecoration.untrackedResourceForeground#0AE194
iconForeground#D5DAD8
imagePreview.border#2F484600
input.background#1F2826
input.foreground#D5DAD8
input.placeholderForeground#D5DAD880
inputOption.activeBorder#0AE194
inputValidation.errorBackground#E0093CE6
inputValidation.errorBorder#E0093CE6
inputValidation.infoBackground#24B1C5E6
inputValidation.infoBorder#24B1C5E6
inputValidation.warningBackground#FF9018E6
inputValidation.warningBorder#FF9018E6
list.activeSelectionBackground#34484880
list.activeSelectionForeground#D5DAD8
list.dropBackground#64787880
list.errorForeground#E0093C
list.focusBackground#34484880
list.focusForeground#D5DAD8
list.highlightForeground#0AE194
list.hoverBackground#34484880
list.hoverForeground#D5DAD8
list.inactiveFocusBackground#34484880
list.inactiveSelectionBackground#3448484D
list.inactiveSelectionForeground#D5DAD8
list.warningForeground#FF9018
listFilterWidget.background#ED008C1A
listFilterWidget.noMatchesOutline#E0093C
listFilterWidget.outline#ED008CE6
menu.foreground#D5DAD8B3
menu.selectionForeground#D5DAD8
menu.separatorBackground#647878
menubar.selectionBackground#34484880
menubar.selectionForeground#D5DAD8
merge.currentContentBackground#15C3AC1A
merge.currentHeaderBackground#15C3AC4D
merge.incomingContentBackground#FFE0301A
merge.incomingHeaderBackground#FFE0304D
minimap.errorHighlight#E0093CE6
minimap.findMatchHighlight#ED008C80
minimap.selectionHighlight#15C3AC4D
minimap.warningHighlight#FF9018E6
minimapGutter.addedBackground#0AE19480
minimapGutter.deletedBackground#E0093C80
minimapGutter.modifiedBackground#15C3AC80
panel.background#141B19
panel.border#2F4846
panel.dropBackground#64787880
panelTitle.activeBorder#0AE194
panelTitle.activeForeground#D5DAD8
panelTitle.inactiveForeground#D5DAD880
peekView.border#2F4846
peekViewEditor.background#141B19
peekViewEditor.matchHighlightBackground#24B1C54D
peekViewResult.background#1F2826
peekViewResult.fileForeground#D5DAD8B3
peekViewResult.lineForeground#D5DAD8B3
peekViewResult.matchHighlightBackground#24B1C54D
peekViewResult.selectionBackground#34484880
peekViewResult.selectionForeground#D5DAD8
peekViewTitle.background#1F2826
peekViewTitleDescription.foreground#D5DAD880
peekViewTitleLabel.foreground#D5DAD8
pickerGroup.border#2F4846
pickerGroup.foreground#0AE194
problemsErrorIcon.foreground#E0093C
problemsInfoIcon.foreground#24B1C5
problemsWarningIcon.foreground#FF9018
progressBar.background#0AE194
quickInput.foreground#D5DAD880
scrollbar.shadow#0B1210
scrollbarSlider.activeBackground#44585880
scrollbarSlider.background#3448484D
scrollbarSlider.hoverBackground#4458584D
selection.background#15C3AC4D
settings.headerForeground#D5DAD8
settings.modifiedItemIndicator#15C3AC
sideBar.background#0F1614
sideBar.dropBackground#64787880
sideBar.foreground#D5DAD880
sideBarSectionHeader.background#0F1614
sideBarSectionHeader.foreground#D5DAD8B3
sideBarTitle.foreground#D5DAD8B3
statusBar.background#0AE194
statusBar.debuggingBackground#FFE030
statusBar.debuggingForeground#060C06
statusBar.foreground#060C06
statusBar.noFolderBackground#0AE194
statusBar.noFolderForeground#060C06
statusBarItem.activeBackground#34484880
statusBarItem.hoverBackground#3448484D
statusBarItem.prominentBackground#E0093C
statusBarItem.prominentForeground#D5DAD8
statusBarItem.prominentHoverBackground#0B12104D
statusBarItem.remoteBackground#0F1614
statusBarItem.remoteForeground#0AE194
tab.activeBackground#141B19
tab.activeBorderTop#0AE194
tab.activeForeground#D5DAD8
tab.border#2F484600
tab.inactiveBackground#0F1614
tab.inactiveForeground#D5DAD880
tab.unfocusedActiveBorderTop#0AE19480
tab.unfocusedActiveForeground#D5DAD880
tab.unfocusedInactiveForeground#D5DAD84D
terminal.ansiBlue#24B1C5
terminal.ansiBrightBlue#6CD5E4
terminal.ansiBrightCyan#4FECD7
terminal.ansiBrightGreen#5AF8BF
terminal.ansiBrightMagenta#FF51B8
terminal.ansiBrightRed#F8587E
terminal.ansiBrightYellow#FFEF95
terminal.ansiCyan#15C3AC
terminal.ansiGreen#0AE194
terminal.ansiMagenta#ED008C
terminal.ansiRed#E0093C
terminal.ansiYellow#FFE030
terminal.foreground#D5DAD8
terminal.selectionBackground#15C3AC4D
terminalCursor.background#141B19
terminalCursor.foreground#0AE194
textBlockQuote.background#34484880
textBlockQuote.border#FFE030
textCodeBlock.background#0F1614
textLink.activeForeground#0AE194
textLink.foreground#0AE194
textPreformat.foreground#15C3AC
textSeparator.foreground#2F4846
titleBar.activeBackground#0F1614
titleBar.activeForeground#D5DAD880
titleBar.inactiveBackground#0F1614
titleBar.inactiveForeground#D5DAD84D
tree.indentGuidesStroke#2F4846
walkThrough.embeddedEditorBackground#0F1614
welcomePage.background#141B19
welcomePage.buttonBackground#344848
welcomePage.buttonHoverBackground#445858
widget.shadow#0B1210

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#BBBBBB80	italic
constant	#15C3AC	—
constant.character.escape	#FF9018	—
entity.name	#C8DCE9	—
entity.name.function	#FF9018	—
entity.name.tag	#0AE194	bold
entity.name.type, storage.type.cs	#C8DCE9	—
entity.other.attribute-name	#15C3AC	bold
entity.other.inherited-class	#C8E8DD	—
entity.other.attribute-name.id	#FF9018	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#C8E8DD	—
entity.name.variable, variable	#0AE194	—
keyword	#FFE030	bold
keyword.operator	#BBBBBB	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#FFE030	—
keyword.other.unit	#15C3AC	—
markup.quote	#C8E8DD	italic
markup.heading, entity.name.section	#0AE194	—
markup.bold	#FFE030	bold
markup.italic	#FF9018	italic
markup.inline.raw, markup.fenced_code.block	#15C3AC	—
markup.underline.link	#C8E8DD	—
storage	#FFE030	bold
string.quoted, string.template	#C8E8DD	—
string.regexp	#15C3AC	—
string.other.link	#15C3AC	—
support	#C8DCE9	—
support.function	#FF9018	—
support.variable	#0AE194	—
support.type.property-name, meta.object-literal.key	#0AE194	—
support.type.property-name.css	#BBBBBB	—
variable.language	#C8DCE9	italic
variable.parameter	—	italic
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag	#0F7D57	bold
punctuation.separator	#BBBBBB	—
punctuation.definition.template-expression	#FFE030	—
punctuation.section.embedded	#FFE030	—
punctuation.definition.list	#15C3AC	—

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