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++ — OneDark++

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#20242a
activityBar.foreground#fff
activityBarBadge.background#6190ee
activityBarBadge.foreground#fff
badge.background#6190ee
badge.foreground#fff
breadcrumb.activeSelectionForeground#fff
breadcrumb.focusForeground#fff
breadcrumb.foreground#abb2c1
breadcrumbPicker.background#272b33
button.background#6190ee
button.foreground#fff
button.hoverBackground#4d82ec
checkbox.background#6190ee
checkbox.border#fff
checkbox.foreground#fff
debugToolBar.background#272b33
diffEditor.insertedTextBackground#73c99019
diffEditor.removedTextBackground#ff634719
dropdown.background#272b33
editor.background#272b33
editor.findMatchBackground#6190ee7a
editor.findMatchHighlightBackground#6190ee10
editor.foreground#abb2c1
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#2c323c
editor.lineHighlightBorder#2c323c
editor.selectionBackground#6190ee46
editor.selectionHighlightBackground#add6ff26
editorCursor.foreground#6190ee
editorGroup.border#fff
editorGroup.dropBackground#23262d
editorGroupHeader.tabsBackground#20242a
editorIndentGuide.background#404040
editorLineNumber.foreground#4a5364
editorLink.activeForeground#6190ee
editorWidget.background#20242a
focusBorder#6190ee
gitDecoration.conflictingResourceForeground#c776df
gitDecoration.deletedResourceForeground#e16971
gitDecoration.ignoredResourceForeground#5c6370
gitDecoration.modifiedResourceForeground#d19a66
gitDecoration.untrackedResourceForeground#96c474
input.background#272b33
list.activeSelectionBackground#6190ee50
list.activeSelectionForeground#fff
list.hoverBackground#272b33
list.inactiveSelectionBackground#6190ee30
list.inactiveSelectionForeground#fff
menu.background#272b33
menu.foreground#abb2c1
menubar.selectionBackground#20242a
menubar.selectionForeground#fff
notifications.background#20242a
notifications.foreground#fff
panel.background#20242a
panel.border#20242a
sideBar.background#20242a
sideBar.foreground#fff
statusBar.background#20242a
statusBar.debuggingBackground#6190ee
statusBar.debuggingForeground#fff
statusBar.foreground#fff
statusBar.noFolderBackground#20242a
statusBarItem.remoteBackground#6190ee
statusBarItem.remoteForeground#fff
tab.activeBackground#272b33
tab.activeForeground#fff
tab.border#20242a
tab.inactiveBackground#20242a
terminal.ansiBlack#000
terminal.ansiBlue#5eadf2
terminal.ansiBrightBlack#000
terminal.ansiBrightBlue#5eadf2
terminal.ansiBrightCyan#56b6c2
terminal.ansiBrightGreen#96c474
terminal.ansiBrightMagenta#c776df
terminal.ansiBrightRed#e16971
terminal.ansiBrightWhite#fff
terminal.ansiBrightYellow#eedd92
terminal.ansiCyan#56b6c2
terminal.ansiGreen#96c474
terminal.ansiMagenta#c776df
terminal.ansiRed#e16971
terminal.ansiWhite#fff
terminal.ansiYellow#eedd92
titleBar.activeBackground#20242a
titleBar.activeForeground#abb2c1
titleBar.inactiveBackground#20242a
titleBar.inactiveForeground#abb2c1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment, punctuation.definition.quote.begin.markdown, markup.quote	#5c6370	italic
string, punctuation.definition.string	#96c474
constant, variable.other.constant	#d19a66
constant.character, variable.language	#c776df
variable.readwrite, variable.readwrite.other.block, support.type.object.module	#e16971
keyword, keyword.operator.new, keyword.operator.expression, punctuation.definition.keyword, storage	#c776df
punctuation.separator.key-value, punctuation.destructuring, punctuation.separator.annotation.python, punctuation.separator.dict.python, punctuation.separator.colon.cs	#56b6c2
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	#eedd92	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	#56b6c2	italic
meta.definition.function, meta.definition.method, entity.name.function.stylus, support.function.filter.css, entity.name.function.shell, entity.name.function.cs	#5eadf2
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	#abb2c1
function.support.builtin, function.support.core	#96c474
meta.template.expression, string.js.taggedTemplate.svg	#eedd92
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#e16971
entity.name.tag.class, entity.name.tag.id, entity.other.attribute-name.id	#56b6c2
entity.other.attribute-name	#d19a66
entity.other.attribute-name.class	#eedd92
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	#abb2bf
support.constant.css, support.constant.postcss, support.constant.scss, support.constant.less, support.constant.sass	#96c474
variable.css, variable.postcss, variable.scss, variable.less, variable.sass	#abb2c1
variable.css.string, variable.postcss.string, variable.scss.string, variable.less.string, variable.sass.string	#e5c07b
unit.css, unit.postcss, unit.scss, unit.less, unit.sass	#c776df
function.css, function.postcss, function.scss, function.less, function.sass	#56b6c2
support.type.property-name, meta.object-literal.key, variable.object.property, variable.other.object.property.cs	#e16971
invalid, invalid.deprecated	#e16971	underline
string.detected-link, linkForeground	#eedd92	italic underline
meta.diff, meta.diff.header	#5c6370	bold
markup.deleted	#e16971
markup.inserted	#96c474
markup.changed	#56b6c2
markup.underline	—	underline
markup.bold	#c776df	bold
markup.italic	#c776df	italic
markup.heading	#96c474	—
punctuation.definition.list.begin.markdown	#56b6c2	—
markup.inline.raw	#eedd92	—

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