Dark Low Contrast Themes

Name: Dark Low Contrast Themes
Author: Evgeniy Petukhov

Publisher: Evgeniy PetukhovThemes in package: 5

Dark Low Contrast Themes for Visual Studio Code

GitHub

Color themes

VS Code preview

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

Dark Low Contrast Themes — Dark Low Contrast Cold

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#D2D2D7
activityBar.background#2E2E33
activityBar.dropBorder#D2D2D7
activityBar.foreground#D2D2D7
activityBar.inactiveForeground#D2D2D766
activityBarBadge.background#0667AE
activityBarBadge.foreground#D2D2D7
badge.background#434348
badge.foreground#D2D2D7
breadcrumb.activeSelectionForeground#B9B9BE
breadcrumb.background#1E1E23
breadcrumb.focusForeground#B9B9BE
breadcrumb.foreground#A9A9AEcc
breadcrumbPicker.background#232329
button.background#115587
button.foreground#D2D2D7
button.hoverBackground#1365A0
button.secondaryBackground#34363F
button.secondaryForeground#D2D2D7
button.secondaryHoverBackground#3D4049
checkbox.background#36363B
checkbox.border#36363B
checkbox.foreground#C6C6CB
debugConsole.errorForeground#C97265
debugConsole.infoForeground#639ED7
debugConsole.sourceForeground#A9A9AE
debugConsole.warningForeground#A98B0B
debugConsoleInputIcon.foreground#A9A9AE
debugExceptionWidget.background#3A0E15
debugExceptionWidget.border#88161B
debugIcon.breakpointCurrentStackframeForeground#D2A90B
debugIcon.breakpointDisabledForeground#6F6F74
debugIcon.breakpointForeground#BD160B
debugIcon.breakpointStackframeForeground#73AD75
debugIcon.breakpointUnverifiedForeground#6F6F74
debugIcon.continueForeground#639ED7
debugIcon.disconnectForeground#C97265
debugIcon.pauseForeground#639ED7
debugIcon.restartForeground#73AD75
debugIcon.startForeground#73AD75
debugIcon.stepBackForeground#639ED7
debugIcon.stepIntoForeground#639ED7
debugIcon.stepOutForeground#639ED7
debugIcon.stepOverForeground#639ED7
debugIcon.stopForeground#C97265
debugTokenExpression.boolean#447CAF
debugTokenExpression.error#C97265
debugTokenExpression.name#A371A4
debugTokenExpression.number#96AA91
debugTokenExpression.string#AA7A6B
debugTokenExpression.value#A9A9AE99
debugToolBar.background#2E2E33
debugView.exceptionLabelBackground#5C1F26
debugView.exceptionLabelForeground#A9A9AE
debugView.stateLabelBackground#72727744
debugView.stateLabelForeground#A9A9AE
debugView.valueChangedHighlight#4A82B6
descriptionForeground#A9A9AEb3
diffEditor.diagonalFill#A9A9AE33
diffEditor.insertedTextBackground#829A4F33
diffEditor.removedTextBackground#D2060B33
dropdown.background#36363B
dropdown.border#36363B
dropdown.foreground#C6C6CB
editor.background#1E1E23
editor.findMatchBackground#464F5F
editor.findMatchHighlightBackground#C14F0B55
editor.findRangeHighlightBackground#34363F66
editor.focusedStackFrameHighlightBackground#679D6C4d
editor.foldBackground#24456B4d
editor.foreground#AFAFB4
editor.hoverHighlightBackground#24456B40
editor.inactiveSelectionBackground#34363F
editor.lineHighlightBorder#26262B
editor.onTypeRenameBackground#D2060B4d
editor.rangeHighlightBackground#D2D2D70b
editor.selectionBackground#24456B
editor.selectionHighlightBackground#90B1D726
editor.snippetFinalTabstopHighlightBorder#47474C
editor.snippetTabstopHighlightBackground#69696E4d
editor.stackFrameHighlightBackground#D2D20B33
editor.symbolHighlightBackground#C14F0B55
editor.wordHighlightBackground#4B4B50b8
editor.wordHighlightStrongBackground#064066b8
editorActiveLineNumber.foreground#A4A4A9
editorBracketMatch.background#06560B1a
editorBracketMatch.border#727277
editorCodeLens.foreground#808085
editorCursor.foreground#919295
editorError.foreground#C97265
editorGroup.border#3C3C41
editorGroup.dropBackground#484D5580
editorGroupHeader.noTabsBackground#1E1E23
editorGroupHeader.tabsBackground#232329
editorGutter.addedBackground#4C6914
editorGutter.background#1E1E23
editorGutter.commentRangeForeground#A3A3A8
editorGutter.deletedBackground#7C1620
editorGutter.foldingControlForeground#A3A3A8
editorGutter.modifiedBackground#0F6A88
editorHint.foreground#C4C4C9b3
editorHoverWidget.background#232329
editorHoverWidget.border#3D3D42
editorHoverWidget.foreground#A9A9AE
editorHoverWidget.statusBarBackground#29292F
editorIndentGuide.activeBackground#5F5F64
editorIndentGuide.background#39393E
editorInfo.foreground#639ED7
editorLightBulb.foreground#D2A90B
editorLightBulbAutoFix.foreground#639ED7
editorLineNumber.activeForeground#A4A4A9
editorLineNumber.foreground#707075
editorLink.activeForeground#447CAF
editorMarkerNavigation.background#2A2A31
editorMarkerNavigationError.background#C97265
editorMarkerNavigationInfo.background#639ED7
editorMarkerNavigationWarning.background#A98B0B
editorOverviewRuler.addedForeground#4C691499
editorOverviewRuler.border#6B6B704d
editorOverviewRuler.bracketMatchForeground#86868B
editorOverviewRuler.commonContentForeground#52525766
editorOverviewRuler.currentContentForeground#39A69680
editorOverviewRuler.deletedForeground#7C162099
editorOverviewRuler.errorForeground#D21419b3
editorOverviewRuler.findMatchForeground#AD711C7e
editorOverviewRuler.incomingContentForeground#398AD780
editorOverviewRuler.infoForeground#639ED7
editorOverviewRuler.modifiedForeground#0F6A8899
editorOverviewRuler.rangeHighlightForeground#0667AE99
editorOverviewRuler.selectionHighlightForeground#86868Bcc
editorOverviewRuler.warningForeground#A98B0B
editorOverviewRuler.wordHighlightForeground#86868Bcc
editorOverviewRuler.wordHighlightStrongForeground#9F86A4cc
editorPane.background#1E1E23
editorRuler.foreground#4E4E53
editorSuggestWidget.background#232329
editorSuggestWidget.border#3D3D42
editorSuggestWidget.foreground#AFAFB4
editorSuggestWidget.highlightForeground#067ED3
editorSuggestWidget.selectedBackground#0A2B46
editorUnnecessaryCode.opacity#06060Baa
editorWarning.foreground#A98B0B
editorWhitespace.foreground#BBBCBF29
editorWidget.background#232329
editorWidget.border#3D3D42
editorWidget.foreground#A9A9AE
errorForeground#C97265
extensionBadge.remoteBackground#0667AE
extensionBadge.remoteForeground#D2D2D7
extensionButton.prominentBackground#2E6A36
extensionButton.prominentForeground#D2D2D7
extensionButton.prominentHoverBackground#26552D
focusBorder#066BB4
foreground#A9A9AE
gitDecoration.addedResourceForeground#6D997A
gitDecoration.conflictingResourceForeground#5C5CA7
gitDecoration.deletedResourceForeground#A54438
gitDecoration.ignoredResourceForeground#76767B
gitDecoration.modifiedResourceForeground#BA9F7B
gitDecoration.submoduleResourceForeground#769ABF
gitDecoration.untrackedResourceForeground#62A67F
gitlens.gutterBackgroundColor#D2D2D713
gitlens.gutterForegroundColor#9E9EA3
gitlens.gutterUncommittedForegroundColor#069CCC99
gitlens.lineHighlightBackgroundColor#069CCC33
gitlens.lineHighlightOverviewRulerColor#069CCC99
gitlens.trailingLineBackgroundColor#06060B00
gitlens.trailingLineForegroundColor#80808559
icon.foreground#A3A3A8
imagePreview.border#6C6C7159
input.background#36363B
input.foreground#A9A9AE
input.placeholderForeground#8A8A8F
inputOption.activeBackground#066BB466
inputOption.activeBorder#0667AE00
inputOption.activeForeground#D2D2D7
inputValidation.errorBackground#4E1D22
inputValidation.errorBorder#9E130B
inputValidation.infoBackground#0A3545
inputValidation.infoBorder#0667AE
inputValidation.warningBackground#30270F
inputValidation.warningBorder#997D0B
list.activeSelectionBackground#0D3E65
list.activeSelectionForeground#D2D2D7
list.deemphasizedForeground#76767B
list.dropBackground#32353B
list.errorForeground#CC6C64
list.filterMatchBackground#C14F0B55
list.focusBackground#0A2B46
list.highlightForeground#067ED3
list.hoverBackground#272A2F
list.inactiveSelectionBackground#32323B
list.invalidItemForeground#997D0B
list.warningForeground#A98B0B
listFilterWidget.background#563227
listFilterWidget.noMatchesOutline#9E130B
listFilterWidget.outline#06060B00
menu.background#232329
menu.foreground#A9A9AE
menu.selectionBackground#0D3E65
menu.selectionForeground#D2D2D7
menu.separatorBackground#9B9BA0
menubar.selectionBackground#D2D2D71a
menubar.selectionForeground#A9A9AE
merge.commonContentBackground#52525729
merge.commonHeaderBackground#52525766
merge.currentContentBackground#39A69633
merge.currentHeaderBackground#39A69680
merge.incomingContentBackground#398AD733
merge.incomingHeaderBackground#398AD780
minimap.errorHighlight#D21419b3
minimap.findMatchHighlight#AD711C
minimap.selectionHighlight#24456B
minimap.warningHighlight#A98B0B
minimapGutter.addedBackground#4C6914
minimapGutter.deletedBackground#7C1620
minimapGutter.modifiedBackground#0F6A88
minimapSlider.activeBackground#9E9EA333
minimapSlider.background#66666B33
minimapSlider.hoverBackground#56565B59
notebook.cellBorderColor#6C6C7124
notebook.cellHoverBackground#6C6C7112
notebook.cellInsertionIndicator#066BB4
notebook.cellStatusBarItemHoverBackground#D2D2D726
notebook.cellToolbarSeparator#6C6C7159
notebook.focusedCellBackground#6C6C7124
notebook.focusedCellBorder#D2D2D71f
notebook.focusedEditorBorder#066BB4
notebook.outputContainerBackgroundColor#6C6C7124
notebook.symbolHighlightBackground#D2D2D70b
notebookScrollbarSlider.activeBackground#9E9EA366
notebookScrollbarSlider.background#66666B66
notebookScrollbarSlider.hoverBackground#56565Bb3
notebookStatusErrorIcon.foreground#C97265
notebookStatusRunningIcon.foreground#A9A9AE
notebookStatusSuccessIcon.foreground#73AD75
notificationCenterHeader.background#2C2C32
notificationLink.foreground#327CD7
notifications.background#232329
notifications.border#2C2C32
notifications.foreground#A9A9AE
notificationsErrorIcon.foreground#C97265
notificationsInfoIcon.foreground#639ED7
notificationsWarningIcon.foreground#A98B0B
panel.background#1E1E23
panel.border#6C6C7159
panel.dropBorder#BEBEC3
panelSection.border#6C6C7159
panelSection.dropBackground#484D5580
panelSectionHeader.background#6C6C7133
panelTitle.activeBorder#BEBEC3
panelTitle.activeForeground#BEBEC3
panelTitle.inactiveForeground#BEBEC399
peekView.border#0667AE
peekViewEditor.background#061E33
peekViewEditor.matchHighlightBackground#D2780B99
peekViewEditorGutter.background#061E33
peekViewResult.background#232329
peekViewResult.fileForeground#D2D2D7
peekViewResult.lineForeground#9B9BA0
peekViewResult.matchHighlightBackground#C14F0B4d
peekViewResult.selectionBackground#2E80D733
peekViewResult.selectionForeground#D2D2D7
peekViewTitle.background#1E1E23
peekViewTitleDescription.foreground#A9A9AEb3
peekViewTitleLabel.foreground#D2D2D7
pickerGroup.border#383843
pickerGroup.foreground#327CD7
problemsErrorIcon.foreground#C97265
problemsInfoIcon.foreground#639ED7
problemsWarningIcon.foreground#A98B0B
progressBar.background#115FA4
quickInput.background#232329
quickInput.foreground#A9A9AE
quickInputTitle.background#D2D2D71b
scm.providerBorder#3D3D42
scrollbar.shadow#06060B
scrollbarSlider.activeBackground#9E9EA366
scrollbarSlider.background#66666B66
scrollbarSlider.hoverBackground#56565Bb3
searchEditor.findMatchBackground#C14F0B38
settings.checkboxBackground#36363B
settings.checkboxBorder#36363B
settings.checkboxForeground#C6C6CB
settings.dropdownBackground#36363B
settings.dropdownBorder#36363B
settings.dropdownForeground#C6C6CB
settings.dropdownListBorder#3D3D42
settings.headerForeground#BEBEC3
settings.modifiedItemIndicator#0F6A88
settings.numberInputBackground#26262B
settings.numberInputForeground#A9A9AE
settings.textInputBackground#26262B
settings.textInputForeground#A9A9AE
sideBar.background#232329
sideBar.dropBackground#484D5580
sideBarSectionHeader.background#06060B00
sideBarSectionHeader.border#A9A9AE33
sideBarTitle.foreground#9B9BA0
statusBar.background#0667AE
statusBar.debuggingBackground#A95733
statusBar.debuggingForeground#D2D2D7
statusBar.foreground#D2D2D7
statusBar.noFolderBackground#59206C
statusBar.noFolderForeground#D2D2D7
statusBarItem.activeBackground#D2D2D72e
statusBarItem.hoverBackground#D2D2D71f
statusBarItem.prominentBackground#06060B80
statusBarItem.prominentForeground#D2D2D7
statusBarItem.prominentHoverBackground#06060B4d
statusBarItem.remoteBackground#176E55
statusBarItem.remoteForeground#D2D2D7
symbolIcon.arrayForeground#A9A9AE
symbolIcon.booleanForeground#A9A9AE
symbolIcon.classForeground#C4832B
symbolIcon.colorForeground#A9A9AE
symbolIcon.constantForeground#A9A9AE
symbolIcon.constructorForeground#936CB7
symbolIcon.enumeratorForeground#C4832B
symbolIcon.enumeratorMemberForeground#639ED7
symbolIcon.eventForeground#C4832B
symbolIcon.fieldForeground#639ED7
symbolIcon.fileForeground#A9A9AE
symbolIcon.folderForeground#A9A9AE
symbolIcon.functionForeground#936CB7
symbolIcon.interfaceForeground#639ED7
symbolIcon.keyForeground#A9A9AE
symbolIcon.keywordForeground#A9A9AE
symbolIcon.methodForeground#936CB7
symbolIcon.moduleForeground#A9A9AE
symbolIcon.namespaceForeground#A9A9AE
symbolIcon.nullForeground#A9A9AE
symbolIcon.numberForeground#A9A9AE
symbolIcon.objectForeground#A9A9AE
symbolIcon.operatorForeground#A9A9AE
symbolIcon.packageForeground#A9A9AE
symbolIcon.propertyForeground#A9A9AE
symbolIcon.referenceForeground#A9A9AE
symbolIcon.snippetForeground#A9A9AE
symbolIcon.stringForeground#A9A9AE
symbolIcon.structForeground#A9A9AE
symbolIcon.textForeground#A9A9AE
symbolIcon.typeParameterForeground#A9A9AE
symbolIcon.unitForeground#A9A9AE
symbolIcon.variableForeground#639ED7
tab.activeBackground#1E1E23
tab.activeForeground#D2D2D7
tab.activeModifiedBorder#2E80AE
tab.border#232329
tab.inactiveBackground#2A2A2F
tab.inactiveForeground#D2D2D780
tab.inactiveModifiedBorder#2E80AE80
tab.unfocusedActiveBackground#1E1E23
tab.unfocusedActiveForeground#D2D2D780
tab.unfocusedActiveModifiedBorder#2E80AE80
tab.unfocusedInactiveBackground#2A2A2F
tab.unfocusedInactiveForeground#D2D2D740
tab.unfocusedInactiveModifiedBorder#2E80AE40
terminal.ansiBlack#06060B
terminal.ansiBlue#2261AB
terminal.ansiBrightBlack#57575C
terminal.ansiBrightBlue#3577C6
terminal.ansiBrightCyan#2699BA
terminal.ansiBrightGreen#22AD7A
terminal.ansiBrightMagenta#B15FB6
terminal.ansiBrightRed#C64247
terminal.ansiBrightWhite#BDBDC2
terminal.ansiBrightYellow#CACA40
terminal.ansiCyan#138CAF
terminal.ansiGreen#109C6B
terminal.ansiMagenta#9C38A1
terminal.ansiRed#AA2D32
terminal.ansiWhite#BDBDC2
terminal.ansiYellow#BDBD17
terminal.border#6C6C7159
terminal.foreground#A9A9AE
terminal.selectionBackground#D2D2D740
textBlockQuote.background#6B6B701a
textBlockQuote.border#0667AE80
textCodeBlock.background#0E0E1366
textLink.activeForeground#327CD7
textLink.foreground#327CD7
textPreformat.foreground#B29A6F
textSeparator.foreground#D2D2D72e
titleBar.activeBackground#36363B
titleBar.activeForeground#A9A9AE
titleBar.inactiveBackground#36363B99
titleBar.inactiveForeground#A9A9AE99
tree.indentGuidesStroke#4C4C51
widget.shadow#06060B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	#AFAFB4	—
emphasis	—	italic
strong	—	bold
header	#060671	—
comment	#5A804F	—
constant.language	#4A82B6	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#96AA91	—
constant.regexp	#565782	—
entity.name.tag	#4A82B6	—
entity.name.tag.css	#B29A6F	—
entity.other.attribute-name	#82B6D6	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#B29A6F	—
invalid	#C93E43	—
markup.underline	—	underline
markup.bold	#4A82B6	bold
markup.heading	#4A82B6	bold
markup.italic	—	italic
markup.inserted	#96AA91	—
markup.deleted	#AA7A6B	—
markup.changed	#4A82B6	—
punctuation.definition.quote.begin.markdown	#5A804F	—
punctuation.definition.list.begin.markdown	#587EC3	—
markup.inline.raw	#AA7A6B	—
punctuation.definition.tag	#6C6C71	—
meta.preprocessor, entity.name.function.preprocessor	#4A82B6	—
meta.preprocessor.string	#AA7A6B	—
meta.preprocessor.numeric	#96AA91	—
meta.structure.dictionary.key.python	#82B6D6	—
meta.diff.header	#4A82B6	—
storage	#4A82B6	—
storage.type	#4A82B6	—
storage.modifier, keyword.operator.noexcept	#4A82B6	—
string, meta.embedded.assembly	#AA7A6B	—
string.tag	#AA7A6B	—
string.value	#AA7A6B	—
string.regexp	#AD5A5F	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#4A82B6	—
meta.template.expression	#AFAFB4	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#82B6D6	—
keyword	#4A82B6	—
keyword.control	#4A82B6	—
keyword.operator	#AFAFB4	—
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.logical.python, keyword.operator.wordlike	#4A82B6	—
keyword.other.unit	#96AA91	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#4A82B6	—
support.function.git-rebase	#82B6D6	—
constant.sha.git-rebase	#96AA91	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#AFAFB4	—
variable.language	#4A82B6	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#B6B693	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#44A697	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#44A697	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#A371A4	—
variable, meta.definition.variable.name, support.variable, entity.name.variable	#82B6D6	—
variable.other.constant, variable.other.enummember	#45A0D7	—
meta.object-literal.key	#82B6D6	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#AA7A6B	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#AA7A6B	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#AD5A5F	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#B6B693	—
keyword.operator.quantifier.regexp	#B29A6F	—
constant.character	#4A82B6	—
constant.character.escape	#B29A6F	—
entity.name.label	#A6A6AB	—
token.info-token	#587EC3	—
token.warn-token	#AA7E32	—
token.error-token	#C93E43	—
token.debug-token	#9458C3	—

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