Sarper Dim Minimal Color Theme

Name: Sarper Dim Minimal Color Theme
Author: sarper

Publisher: sarperThemes in package: 1

A slightly dimmed color theme with minimal color variations. All the code is mostly a single color so if you like syntax highlighting, this is not what you are looking for.

VS Code preview

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

Sarper Dim Minimal Color Theme — Sarper Dimmed Minimal Color Theme

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#162134
activityBarBadge.background#007acc
debugToolBar.background#162134
debugToolBar.border#74498b
dropdown.background#162134
editor.background#303b4e
editor.findMatchBackground#007acc
editor.findMatchHighlightBackground#248ace44
editor.focusedStackFrameHighlightBackground#542d688f
editor.foreground#CBD5DA
editor.inlineValuesBackground#ffffff00
editor.inlineValuesForeground#ffffff6b
editor.lineHighlightBackground#2d384b
editor.selectionBackground#1381cabb
editor.selectionHighlightBackground#248ace44
editor.stackFrameHighlightBackground#2e173a
editor.wordHighlightBackground#248ace79
editorCursor.foreground#ffffff
editorError.foreground#374051
editorGroupHeader.tabsBackground#2d384b
editorGutter.addedBackground#41D85A
editorGutter.deletedBackground#CB4848
editorGutter.modifiedBackground#48A1CB
editorIndentGuide.activeBackground#ffffff55
editorIndentGuide.background#ffffff11
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#61757E
editorMarkerNavigation.background#162134
editorMarkerNavigationError.headerBackground#162134
editorUnnecessaryCode.border#ff0000
editorWarning.foreground#374051
editorWidget.background#1e2938
editorWidget.border#162134
editorWidget.foreground#CBD5DA
input.background#162134
list.hoverBackground#162134
list.inactiveSelectionBackground#162134
listFilterWidget.background#1a2538
listFilterWidget.outline#00b7ff
panel.border#162134
peekViewEditor.background#374051
peekViewEditor.matchHighlightBackground#161736
peekViewResult.background#162134
peekViewTitle.background#162134
sideBar.background#2d384b
sideBar.border#162134
sideBarTitle.foreground#bbbbbb
statusBar.background#162134
statusBar.debuggingBackground#007acc
tab.activeBackground#303b4e
tab.inactiveBackground#162134
titleBar.activeBackground#162134
titleBar.inactiveBackground#263349
widget.shadow#091c338a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ff7d5c	—
variable, string constant.other.placeholder	#CBD5DA	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#CBD5DA	—
keyword.control, keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#ffffff	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#ffffff	—
meta.block variable.other	#15ff00	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#ffffff	—
string, constant.character, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#9fe88d	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#CBD5DA	—
support.type	#ff00f2	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	—
entity.name.method.js	#82AAFF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	—
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	—
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#CBD5DA	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#b8e43e	—
	#f07178	—
markup.bold, markup.bold string	#CBD5DA	bold
markup.quote markup.bold, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	—
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
support.other.excluded	#cbd5da63	—

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