Clear theme

Name: Clear theme
Author: Daniel Biedma

Publisher: Daniel BiedmaThemes in package: 3

Minimalistic clear theme.

Open in VS Code GitHub

Color themes

VS Code preview

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

Clear theme — Clear (High Contrast)

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#000000
activityBar.background#ffffff
activityBar.border#000000
activityBar.foreground#000000
activityBar.inactiveForeground#000
activityBarBadge.background#000000
activityBarBadge.foreground#ffffff
badge.background#ffffff
badge.foreground#000000
breadcrumb.activeSelectionForeground#586069
breadcrumb.focusForeground#000000
breadcrumb.foreground#6a737d
breadcrumbPicker.background#fafbfc
button.background#eee
button.foreground#000
button.hoverBackground#ddd
checkbox.background#fafbfc
checkbox.border#d1d5da
contrastActiveBorder#000000
contrastBorder#000000
debugToolBar.background#ffffff
descriptionForeground#6a737d
diffEditor.insertedTextBackground#34d05822
diffEditor.removedTextBackground#d73a4922
dropdown.background#fafbfc
dropdown.border#000000
dropdown.foreground#000000
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#ffdf5d
editor.findMatchHighlightBackground#ffdf5d66
editor.focusedStackFrameHighlightBackground#fff5b1
editor.foldBackground#fafbfc
editor.foreground#24292e
editor.inactiveSelectionBackground#eeeeee05
editor.lineHighlightBackground#eee
editor.rangeHighlightBackground#eeeeee
editor.selectionBackground#cccccc
editor.selectionHighlightBackground#dddddd
editor.selectionHighlightBorder#34d05800
editor.stackFrameHighlightBackground#fffbdd
editor.wordHighlightBackground#34d05800
editor.wordHighlightBorder#24943e99
editor.wordHighlightStrongBackground#34d05800
editor.wordHighlightStrongBorder#24943e50
editorBracketMatch.background#ffffff
editorBracketMatch.border#000000
editorCursor.foreground#000000
editorGroup.border#000000
editorGroupHeader.tabsBackground#eee
editorGroupHeader.tabsBorder#000000
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#d73a49
editorGutter.modifiedBackground#ccac00
editorIndentGuide.activeBackground#000
editorIndentGuide.background#eee
editorLineNumber.activeForeground#24292e
editorLineNumber.foreground#1b1f234d
editorOverviewRuler.border#ffffff
editorWhitespace.foreground#d1d5da
editorWidget.background#eee
errorForeground#cb2431
focusBorder#000000
foreground#444d56
gitDecoration.addedResourceForeground#28a745
gitDecoration.conflictingResourceForeground#ff7200
gitDecoration.deletedResourceForeground#ff628c
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#ccac00
gitDecoration.untrackedResourceForeground#28a745
input.background#fafbfc
input.border#000000
input.foreground#000000
input.placeholderForeground#959da5
list.activeSelectionBackground#ffffff
list.activeSelectionForeground#000000
list.focusBackground#cce5ff
list.hoverBackground#ebf0f4
list.hoverForeground#000000
list.inactiveFocusBackground#dbedff
list.inactiveSelectionBackground#ffffff
list.inactiveSelectionForeground#000000
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#6a737d
notifications.background#fafbfc
notifications.border#000000
notifications.foreground#000000
notificationsErrorIcon.foreground#d73a49
notificationsInfoIcon.foreground#000
notificationsWarningIcon.foreground#e36209
panel.background#fff
panel.border#000000
panelInput.border#000000
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#6a737d
pickerGroup.border#000000
pickerGroup.foreground#000000
progressBar.background#eee
quickInput.background#eee
quickInput.foreground#000000
scrollbar.shadow#00000000
settings.headerForeground#000000
settings.modifiedItemIndicator#f9826c
sideBar.background#eee
sideBar.border#000000
sideBar.foreground#000
sideBarSectionHeader.background#eee
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#ffffff
statusBar.border#000000
statusBar.debuggingBackground#f9826c
statusBar.debuggingForeground#ffffff
statusBar.foreground#586069
statusBar.noFolderBackground#ffffff
statusBarItem.prominentBackground#e8eaed
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#eeeeee
tab.activeForeground#000000
tab.activeModifiedBorder#af3a03
tab.border#000000
tab.hoverBackground#ffffff
tab.inactiveBackground#eee
tab.inactiveForeground#000000
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#000000
tab.unfocusedHoverBackground#ffffff
terminal.foreground#000000
textBlockQuote.background#fafbfc
textBlockQuote.border#000000
textCodeBlock.background#eee
textLink.activeForeground#005cc5
textLink.foreground#0366d6
textPreformat.foreground#586069
textSeparator.foreground#d1d5da
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#000000
titleBar.inactiveBackground#fff
titleBar.inactiveForeground#6a737d
tree.indentGuidesStroke#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.block, comment.block.documentation, comment.line, meta.toc-list, punctuation.definition.comment, string.quoted.docstring, variable.parameter.function	#b2b2b2	italic
entity.name.class, entity.name.enum, entity.name.interface, entity.name.section, entity.name.struct, entity.name.tag, entity.name.trait, entity.name.type, entity.name.union, entity.other, meta.function-call.generic.python	#000000	bold
keyword, keyword.control, keyword.control.conditional, keyword.control.import, keyword.function.go, keyword.import.go, keyword.package.go, keyword.var.go	—	bold italic
entity.name.tag.localname.xml, keyword.control, keyword.operator, meta.tag.xml	#000	bold
string	#22863A
markup.bold.markdown	—	bold
markup.inline.raw	#333333	—
markup.italic	—	italic
punctuation, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.terminator, punctuation.definition, markup.underline, meta.brace	#000	bold
meta.link, meta.paragraph, meta.property-value	#333	—
storage.modifier, storage.type	#000000	bold italic
support.type.property-name.css, support.type.vendored.property-name.css, variable.other.readwrite.ts, variable.other.readwrite.Js	#000000	—
source.json meta.structure.dictionary.json support.type.property-name.json	—	bold
constant, variable.other.constant, variable.other.readwrite	#22863A	—
support.property-value, entity.name.filename	#22863A	—
constant.language.unit, entity.name.function	#000	bold
string.regexp	#000	—
string.double string.regexp	#22863A	—
keyword.operator.logical	#22863A	—
punctuation.definition.logical-expression	#22863A	—
string.inperpolated.dollar.shell	#22863A	—
string.interpolated.dollar.shell, string.interpolated.backtick.shell	#427b58	—
punctuation.definition.tag	#076678	—
text.html entity.name.tag, text.html punctuation.tag	#427b58	bold
string.quoted.none.hjson, string.quoted.multiline.hjson, constant.language.hjson	#22863A
support.type.property-name.hjson	#000	bold
source.ts variable.other.constant, source.js variable.other.constant, support.type.property-name.json	#000	—

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