OneDark++ & OneLight++

Name: OneDark++ & OneLight++
Author: ifaxity

Publisher: ifaxityThemes in package: 2

A theme based on the OneDark Theme from the editor Atom, now with supplementary light version.

Open in VS Code GitHub

Color themes

VS Code preview

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

OneDark++ & OneLight++ — OneLight++

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#eee
activityBar.foreground#383a42
activityBarBadge.background#ff7ffd
activityBarBadge.foreground#fff
badge.background#ff7ffd
badge.foreground#fff
breadcrumb.activeSelectionForeground#ff7ffd
breadcrumb.focusForeground#696c77
breadcrumb.foreground#383a42
breadcrumbPicker.background#fafafa
button.background#ff7ffd
button.foreground#fff
button.hoverBackground#f373f1
checkbox.background#ff7ffd
checkbox.border#383a42
checkbox.foreground#383a42
debugToolBar.background#eee
diffEditor.insertedTextBackground#73c99019
diffEditor.removedTextBackground#ff634719
dropdown.background#fafafa
editor.background#fafafa
editor.findMatchBackground#ff7ffd7a
editor.findMatchHighlightBackground#ff7ffd10
editor.foreground#383a42
editor.inactiveSelectionBackground#383a4233
editor.lineHighlightBackground#383a420f
editor.lineHighlightBorder#383a420f
editor.selectionBackground#ff7ffd46
editor.selectionHighlightBackground#add6ff26
editorCursor.foreground#ff7ffd
editorGroup.border#eee
editorGroup.dropBackground#ff7ffd50
editorGroupHeader.tabsBackground#eee
editorIndentGuide.background#383a4233
editorLineNumber.foreground#383a42
editorLink.activeForeground#ff7ffd
editorWidget.background#eee
focusBorder#ff7ffd
gitDecoration.conflictingResourceForeground#a626a4
gitDecoration.deletedResourceForeground#e45649
gitDecoration.ignoredResourceForeground#a0a1a7
gitDecoration.modifiedResourceForeground#e27712
gitDecoration.untrackedResourceForeground#50a14f
input.background#fafafa
list.activeSelectionBackground#ff7ffd50
list.activeSelectionForeground#fff
list.hoverBackground#ff7ffd0f
list.inactiveSelectionBackground#ff7ffd30
list.inactiveSelectionForeground#fff
menu.background#eee
menu.foreground#383a42
menubar.selectionBackground#fff
menubar.selectionForeground#383a42
notifications.background#eee
notifications.foreground#383a42
panel.background#eee
panel.border#eee
sideBar.background#eee
sideBar.foreground#383a42
statusBar.background#eee
statusBar.debuggingBackground#ff7ffd
statusBar.debuggingForeground#fff
statusBar.foreground#383a42
statusBar.noFolderBackground#eee
statusBarItem.remoteBackground#ff7ffd
statusBarItem.remoteForeground#fff
tab.activeBackground#fafafa
tab.activeForeground#383a42
tab.border#eee
tab.inactiveBackground#eee
terminal.ansiBlack#000
terminal.ansiBlue#4078f2
terminal.ansiBrightBlack#000
terminal.ansiBrightBlue#4078f2
terminal.ansiBrightCyan#0184bc
terminal.ansiBrightGreen#50a14f
terminal.ansiBrightMagenta#a626a4
terminal.ansiBrightRed#e45649
terminal.ansiBrightWhite#fff
terminal.ansiBrightYellow#986801
terminal.ansiCyan#0184bc
terminal.ansiGreen#50a14f
terminal.ansiMagenta#a626a4
terminal.ansiRed#e45649
terminal.ansiWhite#fff
terminal.ansiYellow#986801
titleBar.activeBackground#eee
titleBar.activeForeground#383a42
titleBar.inactiveBackground#eee
titleBar.inactiveForeground#383a42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment, punctuation.definition.quote.begin.markdown, markup.quote	#a0a1a7	italic
string, punctuation.definition.string	#50a14f
constant, variable.other.constant	#e27712
constant.character, variable.language	#a626a4
variable.readwrite, variable.readwrite.other.block, support.type.object.module	#e45649
keyword, keyword.operator.new, keyword.operator.expression, punctuation.definition.keyword, storage	#a626a4
punctuation.separator.key-value, punctuation.destructuring, punctuation.separator.annotation.python, punctuation.separator.dict.python, punctuation.separator.colon.cs	#0184bc
entity.name.class, entity.name.module, entity.name.type, entity.other.inherited-class, storage.identifier, storage.type.cs, support.class, support.other.namespace, support.type	#986801	italic
meta.function-call, meta.method-call, support.function.construct.output, entity.name.function.stylus, support.function.filter.css, support.function.misc, support.function.builtin.shell, support.function.powershell	#0184bc	italic
meta.definition.function, meta.definition.method, entity.name.function.stylus, support.function.filter.css, entity.name.function.shell, entity.name.function.cs	#4078f2
punctuation.squarebracket, punctuation.parenthesis, punctuation.accessor, punctuation.definition.arguments, punctuation.separator.delimiter, punctuation.terminator, punctuation.section, constant.name.attribute.tag, punctuation.definition.begin, punctuation.definition.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, variable.other, support.variable, meta.function-call.arguments, entity.name.variable.parameter, support.constant, meta.embedded.block, entity.name.function.tagged-template.js	#383a42
function.support.builtin, function.support.core	#50a14f
meta.template.expression, string.js.taggedTemplate.svg	#986801
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#e45649
entity.name.tag.class, entity.name.tag.id, entity.other.attribute-name.id	#0184bc
entity.other.attribute-name	#986801
entity.other.attribute-name.class	#986801
support.type.property-name.css, support.type.property-name.postcss, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#383a42
support.constant.css, support.constant.postcss, support.constant.scss, support.constant.less, support.constant.sass	#50a14f
variable.css, variable.postcss, variable.scss, variable.less, variable.sass	#383a42
variable.css.string, variable.postcss.string, variable.scss.string, variable.less.string, variable.sass.string	#986801
unit.css, unit.postcss, unit.scss, unit.less, unit.sass	#a626a4
function.css, function.postcss, function.scss, function.less, function.sass	#0184bc
support.type.property-name, meta.object-literal.key, variable.object.property, variable.other.object.property.cs	#e45649
invalid, invalid.deprecated	#e45649	underline
string.detected-link, linkForeground	#986801	italic underline
meta.diff, meta.diff.header	#a0a1a7	bold
markup.deleted	#e45649
markup.inserted	#50a14f
markup.changed	#0184bc
markup.underline	—	underline
markup.bold	#a626a4	bold
markup.italic	#a626a4	italic
markup.heading	#50a14f	—
punctuation.definition.list.begin.markdown	#0184bc	—
markup.inline.raw	#986801	—

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