Dark-

Name: Dark-
Author: Néstor Sancho

Publisher: Néstor SanchoThemes in package: 5

Simplified versions of the default Dark (Visual Studio) theme, with less syntax highlight

Open in VS Code GitHub

Color themes

Dark- (Visual Studio) (Flat UI)

VS Code preview

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

Dark- — Dark- (Visual Studio) (Flat UI)

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#383a49
activityBar.background#252526
activityBarBadge.background#007ACC
badge.background#0e639c
checkbox.border#6B6B6B
editor.background#1E1E1E
editor.foreground#D4D4D4
editor.inactiveSelectionBackground#3A3D41
editor.lineHighlightBackground#252526
editor.selectionHighlightBackground#ADD6FF26
editorGroup.border#454545
editorGroupHeader.noTabsBackground#252526
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#d4d4d460
editorLineNumber.foreground#d4d4d430
editorRuler.foreground#d4d4d430
editorWhitespace.foreground#d4d4d430
editorWidget.background#1e1e1e
input.placeholderForeground#A6A6A6
list.activeSelectionIconForeground#FFF
list.dropBackground#383B3D
listFilterWidget.background#252526
menu.background#252526
menu.border#454545
menu.foreground#CCCCCC
menu.selectionBackground#0078d4
menu.separatorBackground#454545
panel.background#252526
panel.border#454545
panelTitle.activeBorder#0098ff
ports.iconRunningProcessForeground#369432
quickInput.background#252526
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarTitle.foreground#BBBBBB
statusBarItem.remoteBackground#16825D
statusBarItem.remoteForeground#FFF
tab.activeBorderTop#0098ff
tab.inactiveBackground#252526
tab.lastPinnedBorder#ccc3
tab.selectedBackground#222222
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorderTop#454545
terminal.background#0f0f0f
terminal.inactiveSelectionBackground#3A3D41
terminal.tab.activeBorder#0098ff
titleBar.activeBackground#252526
widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.control, keyword.operator.ternary, storage.type.class, storage.type.function, storage.type.interface	#569cd6	—
keyword.other.import.java, keyword.other.package.java, meta.method.body.java storage.modifier.java, keyword.control.import, keyword.control.type, keyword.control.from	#569cd6	—
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.wordlike, storage.modifier, keyword.operator.logical.python, support.function.aggregate.sql	#569cd6	—
storage.type, storage.type.built-in.primitive, storage.type.primitive, storage.type.struct, support.type.builtin, support.type.primitive	#569cd6	—
constant.language, variable.language	#569cd6	italic
keyword.operator, keyword.control.ternary, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import.java, storage.modifier.package.java, storage.type.java, storage.type.object.array.java, variable.language.wildcard.java	#d4d4d4	—
constant, support.type.register, variable.parameter.batchfile, variable.parameter.repeat.batchfile	#b5cea8	—
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit	#b5cea8	—
string, punctuation.definition.string	#ce9178	—
keyword.other.documentation.javadoc.java, storage.type.class.jsdoc	#d4d4d4a0	italic
entity.name.tag, punctuation.definition.tag	#569cd6	—
entity.name.tag.yaml, support.type.property-name, punctuation.support.type.property-name	#d4d4d4	—
keyword.mnemonic.z80asm, keyword.control.z80asm, support.type.flag.z80asm	#569cd6	—
keyword.command.batchfile, keyword.control.statement.batchfile, keyword.operator.logical.batchfile, keyword.operator.pipe.batchfile, keyword.operator.redirection.batchfile	#569cd6	—
keyword.command.rem.batchfile, keyword.operator.at.batchfile	#d4d4d480	—
keyword.control.directive	#569cd6	—
entity.name.scope-resolution, support.other.attribute.cpp	#d4d4d4c0	italic
punctuation.separator.scope-resolution	#d4d4d4c0	—
variable.language.makefile	#569cd6	—
string.interpolated.makefile	#ce9178	—
punctuation.definition.heading, punctuation.definition.list.begin, punctuation.definition.link.description, punctuation.definition.link.title, punctuation.definition.metadata.markdown, punctuation.definition.quote	#569cd6	—
markup.inline.raw.string, meta.link.inline.markdown, meta.image.inline.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown	#ce9178	—
string.other.link.description.markdown, fenced_code.block.language	#d4d4d4c0	italic
string.other.link.title.markdown	#d4d4d4	—
storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, constant.other.key.java, storage.type.generic.java, storage.type.generic.wildcard.java, punctuation.bracket.angle.java	#d4d4d4c0	italic
meta.type.parameters.ts, meta.type.parameters.ts storage.modifier.ts	#d4d4d4c0	italic
keyword.control, keyword.operator.ternary, storage.type.class, storage.type.function, storage.type.interface	#569cd6	—
keyword.other.import.java, keyword.other.package.java, meta.method.body.java storage.modifier.java, keyword.control.import, keyword.control.type, keyword.control.from	#569cd6	—
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.wordlike, storage.modifier, keyword.operator.logical.python, support.function.aggregate.sql	#569cd6	—
storage.type, storage.type.built-in.primitive, storage.type.primitive, storage.type.struct, support.type.builtin, support.type.primitive	#569cd6	—
constant.language, variable.language	#569cd6	italic
keyword.operator, keyword.control.ternary, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import.java, storage.modifier.package.java, storage.type.java, storage.type.object.array.java, variable.language.wildcard.java	#d4d4d4	—
constant, support.type.register, variable.parameter.batchfile, variable.parameter.repeat.batchfile	#b5cea8	—
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit	#b5cea8	—
string, punctuation.definition.string	#ce9178	—
keyword.other.documentation.javadoc.java, storage.type.class.jsdoc	#d4d4d4a0	italic
entity.name.tag, punctuation.definition.tag	#569cd6	—
entity.name.tag.yaml, support.type.property-name, punctuation.support.type.property-name	#d4d4d4	—
keyword.mnemonic.z80asm, keyword.control.z80asm, support.type.flag.z80asm	#569cd6	—
keyword.command.batchfile, keyword.control.statement.batchfile, keyword.operator.logical.batchfile, keyword.operator.pipe.batchfile, keyword.operator.redirection.batchfile	#569cd6	—
keyword.command.rem.batchfile, keyword.operator.at.batchfile	#d4d4d480	—
keyword.control.directive	#569cd6	—
entity.name.scope-resolution, support.other.attribute.cpp	#d4d4d4c0	italic
punctuation.separator.scope-resolution	#d4d4d4c0	—
variable.language.makefile	#569cd6	—
string.interpolated.makefile	#ce9178	—
punctuation.definition.heading, punctuation.definition.list.begin, punctuation.definition.link.description, punctuation.definition.link.title, punctuation.definition.metadata.markdown, punctuation.definition.quote	#569cd6	—
markup.inline.raw.string, meta.link.inline.markdown, meta.image.inline.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown	#ce9178	—
string.other.link.description.markdown, fenced_code.block.language	#d4d4d4c0	italic
string.other.link.title.markdown	#d4d4d4	—
storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, constant.other.key.java, storage.type.generic.java, storage.type.generic.wildcard.java, punctuation.bracket.angle.java	#d4d4d4c0	italic
meta.type.parameters.ts, meta.type.parameters.ts storage.modifier.ts	#d4d4d4c0	italic
emphasis, markup.italic	—	italic
strong, markup.bold, markup.bold string	—	bold
markup.italic markup.bold, markup.bold markup.italic, markup.italic markup.bold string, markup.bold markup.italic string	—	italic bold
markup.underline	—	underline
markup.italic markup.underline, markup.underline markup.italic	—	italic underline
markup.bold markup.underline, markup.underline markup.bold	—	bold underline
markup.italic markup.bold markup.underline, markup.italic markup.underline markup.bold, markup.bold markup.italic markup.underline, markup.underline markup.italic markup.bold, markup.bold markup.underline markup.italic, markup.underline markup.bold markup.italic	—	italic bold underline
markup.strikethrough	—	strikethrough
markup.italic markup.strikethrough, markup.strikethrough markup.italic	—	italic strikethrough
markup.bold markup.strikethrough, markup.strikethrough markup.bold	—	bold strikethrough
markup.italic markup.bold markup.strikethrough, markup.bold markup.italic markup.strikethrough, markup.italic markup.strikethrough markup.bold, markup.bold markup.strikethrough markup.italic, markup.strikethrough markup.italic markup.bold, markup.strikethrough markup.bold markup.italic	—	italic bold strikethrough
markup.underline markup.strikethrough, markup.strikethrough markup.underline	—	underline strikethrough
markup.italic markup.underline markup.strikethrough, markup.underline markup.italic markup.strikethrough, markup.italic markup.strikethrough markup.underline, markup.underline markup.strikethrough markup.italic, markup.strikethrough markup.italic markup.underline, markup.strikethrough markup.underline markup.italic	—	italic underline strikethrough
markup.bold markup.underline markup.strikethrough, markup.underline markup.bold markup.strikethrough, markup.bold markup.strikethrough markup.underline, markup.underline markup.strikethrough markup.bold, markup.strikethrough markup.bold markup.underline, markup.strikethrough markup.underline markup.bold	—	bold underline strikethrough
markup.italic markup.bold markup.underline markup.strikethrough, markup.italic markup.underline markup.bold markup.strikethrough, markup.bold markup.italic markup.underline markup.strikethrough, markup.underline markup.italic markup.bold markup.strikethrough, markup.bold markup.underline markup.italic markup.strikethrough, markup.underline markup.bold markup.italic markup.strikethrough, markup.italic markup.bold markup.strikethrough markup.underline, markup.italic markup.underline markup.strikethrough markup.bold, markup.bold markup.italic markup.strikethrough markup.underline, markup.underline markup.italic markup.strikethrough markup.bold, markup.bold markup.underline markup.strikethrough markup.italic, markup.underline markup.bold markup.strikethrough markup.italic, markup.italic markup.strikethrough markup.bold markup.underline, markup.italic markup.strikethrough markup.underline markup.bold, markup.bold markup.strikethrough markup.italic markup.underline, markup.underline markup.strikethrough markup.italic markup.bold, markup.bold markup.strikethrough markup.underline markup.italic, markup.underline markup.strikethrough markup.bold markup.italic, markup.strikethrough markup.italic markup.bold markup.underline, markup.strikethrough markup.italic markup.underline markup.bold, markup.strikethrough markup.bold markup.italic markup.underline, markup.strikethrough markup.underline markup.italic markup.bold, markup.strikethrough markup.bold markup.underline markup.italic, markup.strikethrough markup.underline markup.bold markup.italic	—	italic bold underline strikethrough
invalid	#f44747	—
comment, punctuation.definition.comment	#d4d4d480	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}!`;
}