Simple Focus

Name: Simple Focus
Author: ncode fun

Publisher: ncode funThemes in package: 1

Theme using a limited color palette, focusing on important stuff. Works great with lit-html.

Open in VS Code GitHub

VS Code preview

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

Simple Focus — Simple Focus

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#212426
activityBarBadge.background#b0ff91
activityBarBadge.foreground#111111
badge.background#b0ff91
badge.foreground#111111
button.background#81a8a1
dropdown.background#2a3232
dropdown.foreground#cbfff9
dropdown.listBackground#2a3232
editor.background#1d1f21
editor.findMatchBackground#a1bd00aa
editor.findMatchHighlightBackground#babd0050
editor.foldBackground#ffffff03
editor.foreground#eeeeee
editor.inactiveSelectionBackground#6867417e
editor.lineHighlightBackground#86fff111
editor.rangeHighlightBackground#ffffff11
editor.selectionBackground#a3a11669
editor.selectionHighlightBackground#ffffff22
editor.wordHighlightBackground#ceff8022
editor.wordHighlightStrongBackground#706f1344
editorBracketMatch.background#4ab33c73
editorBracketMatch.border#88888800
editorGroupHeader.tabsBackground#212426
editorGutter.background#24272a
editorHoverWidget.border#81a8a1
editorIndentGuide.activeBackground#cbffee88
editorIndentGuide.background#404040
editorLineNumber.activeForeground#81a8a1
editorLineNumber.foreground#81a8a160
editorSuggestWidget.border#81a8a1
editorSuggestWidget.selectedBackground#81a8a122
editorWhitespace.foreground#262626
editorWidget.background#24272a
editorWidget.border#212426
focusBorder#8dfef022
gitDecoration.ignoredResourceForeground#81a8a1aa
gitDecoration.modifiedResourceForeground#cbfff999
gitDecoration.untrackedResourceForeground#ff7733
input.background#171a1a
input.foreground#ffffff
input.placeholderForeground#90a9a5
list.activeSelectionBackground#81a8a144
list.dropBackground#383b3d
list.focusBackground#81a8a133
list.focusForeground#72ecd6
list.hoverForeground#cbfff9
list.inactiveFocusBackground#81a8a144
listFilterWidget.background#72ecd677
listFilterWidget.noMatchesOutline#ec72c7
listFilterWidget.outline#72ecd6
panel.background#24272a
panel.border#81a8a160
scrollbar.shadow#00000080
sideBar.background#212426
sideBar.foreground#cbfff999
sideBarSectionHeader.background#212426
sideBarSectionHeader.foreground#81a8a1
sideBarTitle.foreground#ffffff22
statusBar.background#212426
statusBar.debuggingBackground#511f1f
statusBar.foreground#cbfff999
statusBar.noFolderBackground#212426
statusBar.noFolderForeground#cbfff999
tab.activeBackground#2a3232
tab.activeForeground#cbfff9
tab.inactiveBackground#212426
tab.inactiveForeground#cbfff999
terminal.ansiCyan#8dfef0
terminal.ansiGreen#b0ff91
terminal.ansiMagenta#ff5fb7
terminal.ansiYellow#e7ff91
terminal.foreground#ffffff
titleBar.activeBackground#212426
titleBar.activeForeground#cbfff9
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.other.property.js	#cbffee
markup.heading.markdown	#fff	bold
meta.embedded.block.html	#eee	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
variable.other.object.js, string.template.js variable, meta.var.expr.js variable.other.object.js, string.regexp, constant.other.character-class.set.regexp, meta.function-call.ts variable, meta.template.expression.ts	#fff
string.template.js variable.other.property	#cbffee
string	#b0ff91	italic
constant, string.js.taggedTemplate, meta.property-value.css, source.css support.constant, meta.at-rule meta.ratio keyword.operator, variable.parameter.url.css	#b0ff91
source.css entity	#adf0b8	—
variable.language.this, source.js class, entity.name.type.class.js, entity.name.type.js, meta.selector.css, source.css entity.name.tag, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc	#B4EBBD	—
support.constant.math.js, support.class.builtin.js, support.constant.json.js, support.class.console.js	#cbff9b	—
source.css variable	#ccffb8	italic
variable.parameter	#cdf7e9	italic
keyword.operator.new, entity.name.type.instance.jsdoc, entity.other.attribute-name.pseudo-class.css, keyword.other.unit, punctuation.definition.entity.css, meta.property-value.css constant punctuation	#91be99	—
punctuation.definition.string	#91b683	—
variable.language.super.js	#CBFF9B	italic
meta.object-literal.key, meta.object-literal.key string.quoted.single.js, meta.object-literal.key string.quoted.double.js, meta.property-name.css, variable.css, entity.other.attribute-name.css, support.variable.property, punctuation.accessor, string support.type.property-name, entity.other.attribute-name.html, variable.other.jsdoc, variable.other.object.property.js, support.variable.property.dom	#cbffee
entity.name.tag	#8cc7c1	—
entity.name.function, entity.name.function.tagged-template, meta.function-call, source.css support.function, keyword.operator.quantifier.regexp, keyword.operator	#8DFEF0	—
storage.type.function.arrow, punctuation.definition.group.regexp, keyword.control.anchor.regexp	#7dd3c9	—
keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.from, keyword.control.as, punctuation.separator, storage	#81a8a1	—
punctuation, meta.brace, meta.object-literal.key punctuation.definition.string, meta.structure.dictionary.value support.type.property-name punctuation.definition.string, support.type.property-name.json.comments punctuation	#74938D	—
punctuation.definition.tag	#677e7b	—
punctuation.terminator.statement	#5e7270	—
comment.line.double-slash, comment.block.documentation, comment.block.documentation punctuation.definition.comment, comment.block.css	#81a8a1a1	—
string.js.taggedTemplate, string.template	#e7ff91	—
keyword.control, entity.name.label, storage.modifier.async.js, keyword.operator.ternary, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational	#ddff9e	—
string.regexp punctuation.definition.string, string.regexp.js keyword.other, constant.other.character-class.regexp, constant.other.character-class.range.regexp, entity.other.attribute-name.pseudo-element.css, keyword.control.at-rule, keyword.control.at-rule punctuation, meta.at-rule.media.header.css, meta.at-rule.media.header.css support.constant, meta.at-rule keyword.operator.logical, entity.other.keyframe-offset.percentage.css	#e1ffaa	—
string.template punctuation.definition.string.template, string.js.taggedTemplate punctuation.definition.string.template, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, meta.at-rule, meta.at-rule.media.header punctuation.separator	#abb488	—
constant.character.escape	#b9b0ff	—
keyword.other.important.css, keyword.other.debugger	#f9bcff	—
keyword.operator.negation, keyword.operator.expression.delete	#ff5fb7cc	—
comment, punctuation.definition.comment	#81a8a15d	—
entity.name.label, meta.attribute.unrecognized entity.other.attribute-name.html, support.variable.property.dom	—	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}!`;
}