OneCalm theme

Name: OneCalm theme
Author: volkovpishet

Publisher: volkovpishetThemes in package: 1

Dark theme for VS Code with calm colors

Open in VS Code GitHub

VS Code preview

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

OneCalm theme — OneCalm

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#568af2
activityBar.background#2d3440
activityBar.foreground#d7dae0
activityBarBadge.background#4d78cc
activityBarBadge.foreground#f8fafd
badge.background#2d3440
button.background#4d78cc
button.secondaryBackground#2d3440
dart.closingLabels#727b89B3
debugToolBar.background#22262d
diffEditor.insertedTextBackground#00809b33
dropdown.background#22262d
dropdown.border#22262d
editor.background#2d3440
editor.findMatchBackground#42557b
editor.findMatchBorder#457dff
editor.findMatchHighlightBackground#528bff3d
editor.foreground#ffffffaf
editor.lineHighlightBackground#ffffff04
editor.selectionBackground#3f847e5f
editor.selectionHighlightBackground#ffffff17
editor.selectionHighlightBorder#ffffff00
editor.wordHighlightBackground#484e5b
editor.wordHighlightBorder#7f848e
editor.wordHighlightStrongBackground#abb2bf26
editor.wordHighlightStrongBorder#7f848e
editorBracketHighlight.foreground1#7fc1f7
editorBracketHighlight.foreground2#bf9ffe
editorBracketHighlight.foreground3#8dc4b2
editorBracketHighlight.foreground4#7fc1f7
editorBracketHighlight.foreground5#bf9ffe
editorBracketHighlight.foreground6#8dc4b2
editorBracketMatch.background#ffffff4D
editorBracketMatch.border#ffffff0f
editorCursor.background#ffffffc9
editorCursor.foreground#457dff
editorError.foreground#c24038
editorGroup.border#181a1f
editorGroupHeader.tabsBackground#22262d
editorHoverWidget.background#22262d
editorHoverWidget.border#181a1f
editorIndentGuide.activeBackground#ffffff2e
editorIndentGuide.background#ffffff10
editorInlayHint.foreground#A0A0A0F0
editorLineNumber.activeForeground#e3f1ff70
editorLineNumber.foreground#e3f1ff48
editorMarkerNavigation.background#22262d
editorRuler.foreground#abb2bf26
editorSuggestWidget.background#22262d
editorSuggestWidget.border#181a1f
editorSuggestWidget.selectedBackground#ffffff16
editorWhitespace.foreground#3b4048
editorWidget.background#22262d
focusBorder#568af2
input.background#1d1f23
list.activeSelectionBackground#4d78cc
list.activeSelectionForeground#ffffff
list.focusBackground#ffffff16
list.highlightForeground#c5c5c5
list.hoverBackground#ffffff16
list.inactiveSelectionBackground#ffffff0f
list.inactiveSelectionForeground#d7dae0
menu.foreground#c8c8c8
panel.border#181a1f
panelTitle.activeBorder#568af2
peekViewEditor.background#2d3440
peekViewEditor.matchHighlightBackground#29244b
peekViewResult.background#22262d
quickInput.foreground#e3f1ff9f
quickInputList.focusBackground#ffffff16
scrollbarSlider.activeBackground#747d9180
scrollbarSlider.background#4e566660
scrollbarSlider.hoverBackground#5a637580
settings.modifiedItemIndicator#568af2
sideBar.background#22262d
sideBar.border#181a1f
sideBar.foreground#e3f1ff9f
sideBarSectionHeader.background#2d3440
statusBar.background#22262d
statusBar.debuggingBackground#7e0097
statusBar.debuggingBorder#66017a
statusBar.debuggingForeground#ffffff
statusBar.foreground#e3f1ff9f
statusBar.noFolderBackground#22262d
statusBarItem.hoverBackground#4d78cc
statusBarItem.remoteBackground#4d78cc
statusBarItem.remoteForeground#f8fafd
tab.activeBackground#2d3440
tab.activeBorder#568af2
tab.activeForeground#dcdcdc
tab.activeModifiedBorder#568af2
tab.border#181a1f
tab.hoverBackground#4d78cc
tab.inactiveBackground#22262d
tab.unfocusedHoverBackground#323842
terminal.ansiBlack#000000
terminal.ansiBlue#7fc1f7
terminal.ansiBrightBlack#22262d
terminal.ansiBrightBlue#457dff
terminal.ansiBrightCyan#8dc4b2
terminal.ansiBrightGreen#a7d984
terminal.ansiBrightMagenta#bf9ffe
terminal.ansiBrightRed#c24038
terminal.ansiBrightWhite#d7dae0
terminal.ansiBrightYellow#e2c08d
terminal.ansiCyan#8dc4b2
terminal.ansiGreen#a7d984
terminal.ansiMagenta#bf9ffe
terminal.ansiRed#f08585
terminal.ansiWhite#d7dae0
terminal.ansiYellow#e2c08d
terminal.foreground#c8c8c8
textBlockQuote.background#22262d
textBlockQuote.border#568af2
textCodeBlock.background#2d3440
textLink.activeForeground#7fc1f7
textLink.foreground#7fc1f7
textPreformat.foreground#e2c08d
titleBar.activeBackground#2d3440
titleBar.activeForeground#e3f1ff9f
titleBar.border#181a1f
titleBar.inactiveBackground#22262d
titleBar.inactiveForeground#e3f1ff70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.inline, markup.quote, source.ini, string.other.link.description, string	#e2c08d	—
keyword, storage.type, storage.modifier, markup.italic, punctuation.definition.block.tag, entity.name.tag, support.type.property-name, heading, punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, punctuation.definition.template-expression, punctuation.section.embedded, variable.language, keyword.operator.expression.typeof, keyword.control.anchor, keyword.operator.new	#f08585	—
string.regexp, constant.other.character-class, constant.character.escape, markup.underline.link, string.url, entity.other.attribute-name, variable.parameter, variable.object.property, meta.object-literal.key	#8dc4b2	—
entity.other.inherited-class, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.generic, storage.type.java, storage.type.groovy, storage.type.primitive, support.class, support.other.namespace, support.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.module, entity.name.type.parameter, entity.name.type, support.type.primitive	#7fc1f7	—
meta.brace, punctuation.accessor, punctuation.definition.block, punctuation.separator, support.type.property-name.css, variable.other.constant, string.interpolated.expression, keyword.operator, storage.type.function.arrow, meta.arrow, storage.type.annotation, punctuation.definition.annotation, meta.decorator	#ffffffaf	—
	#a7d984	—
comment	#727b89	—
entity.other.attribute-name.id.css, string.other.link, variable.language.super, entity.name.function, meta.function-call, support.function, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.decrement, keyword.operator.increment	#bf9ffe	—
keyword.operator.quantifier.regexp, markup.bold, variable.other.jsdoc, variable.other.enummember, constant, support.constant	#eaa768	—
markup.quote, markup.italic	—	italic
heading, markup.bold	—	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}!`;
}