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

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#D2D2D2
activityBar.background#2E2E2E
activityBar.dropBorder#D2D2D2
activityBar.foreground#D2D2D2
activityBar.inactiveForeground#D2D2D266
activityBarBadge.background#0667A9
activityBarBadge.foreground#D2D2D2
badge.background#434343
badge.foreground#D2D2D2
breadcrumb.activeSelectionForeground#B9B9B9
breadcrumb.background#1E1E1E
breadcrumb.focusForeground#B9B9B9
breadcrumb.foreground#A9A9A9cc
breadcrumbPicker.background#232324
button.background#115582
button.foreground#D2D2D2
button.hoverBackground#13659B
button.secondaryBackground#34363A
button.secondaryForeground#D2D2D2
button.secondaryHoverBackground#3D4044
checkbox.background#363636
checkbox.border#363636
checkbox.foreground#C6C6C6
debugConsole.errorForeground#C97260
debugConsole.infoForeground#639ED2
debugConsole.sourceForeground#A9A9A9
debugConsole.warningForeground#A98B06
debugConsoleInputIcon.foreground#A9A9A9
debugExceptionWidget.background#3A0E10
debugExceptionWidget.border#881616
debugIcon.breakpointCurrentStackframeForeground#D2A906
debugIcon.breakpointDisabledForeground#6F6F6F
debugIcon.breakpointForeground#BD1606
debugIcon.breakpointStackframeForeground#73AD70
debugIcon.breakpointUnverifiedForeground#6F6F6F
debugIcon.continueForeground#639ED2
debugIcon.disconnectForeground#C97260
debugIcon.pauseForeground#639ED2
debugIcon.restartForeground#73AD70
debugIcon.startForeground#73AD70
debugIcon.stepBackForeground#639ED2
debugIcon.stepIntoForeground#639ED2
debugIcon.stepOutForeground#639ED2
debugIcon.stepOverForeground#639ED2
debugIcon.stopForeground#C97260
debugTokenExpression.boolean#447CAA
debugTokenExpression.error#C97260
debugTokenExpression.name#A3719F
debugTokenExpression.number#96AA8C
debugTokenExpression.string#AA7A66
debugTokenExpression.value#A9A9A999
debugToolBar.background#2E2E2E
debugView.exceptionLabelBackground#5C1F21
debugView.exceptionLabelForeground#A9A9A9
debugView.stateLabelBackground#72727244
debugView.stateLabelForeground#A9A9A9
debugView.valueChangedHighlight#4A82B1
descriptionForeground#A9A9A9b3
diffEditor.diagonalFill#A9A9A933
diffEditor.insertedTextBackground#829A4A33
diffEditor.removedTextBackground#D2060633
dropdown.background#363636
dropdown.border#363636
dropdown.foreground#C6C6C6
editor.background#1E1E1E
editor.findMatchBackground#464F5A
editor.findMatchHighlightBackground#C14F0655
editor.findRangeHighlightBackground#34363A66
editor.focusedStackFrameHighlightBackground#679D674d
editor.foldBackground#2445664d
editor.foreground#AFAFAF
editor.hoverHighlightBackground#24456640
editor.inactiveSelectionBackground#34363A
editor.lineHighlightBorder#262626
editor.onTypeRenameBackground#D206064d
editor.rangeHighlightBackground#D2D2D20b
editor.selectionBackground#244566
editor.selectionHighlightBackground#90B1D226
editor.snippetFinalTabstopHighlightBorder#474747
editor.snippetTabstopHighlightBackground#6969694d
editor.stackFrameHighlightBackground#D2D20633
editor.symbolHighlightBackground#C14F0655
editor.wordHighlightBackground#4B4B4Bb8
editor.wordHighlightStrongBackground#064061b8
editorActiveLineNumber.foreground#A4A4A4
editorBracketMatch.background#0656061a
editorBracketMatch.border#727272
editorCodeLens.foreground#808080
editorCursor.foreground#919290
editorError.foreground#C97260
editorGroup.border#3C3C3C
editorGroup.dropBackground#484D5080
editorGroupHeader.noTabsBackground#1E1E1E
editorGroupHeader.tabsBackground#232324
editorGutter.addedBackground#4C690F
editorGutter.background#1E1E1E
editorGutter.commentRangeForeground#A3A3A3
editorGutter.deletedBackground#7C161B
editorGutter.foldingControlForeground#A3A3A3
editorGutter.modifiedBackground#0F6A83
editorHint.foreground#C4C4C4b3
editorHoverWidget.background#232324
editorHoverWidget.border#3D3D3D
editorHoverWidget.foreground#A9A9A9
editorHoverWidget.statusBarBackground#29292A
editorIndentGuide.activeBackground#5F5F5F
editorIndentGuide.background#393939
editorInfo.foreground#639ED2
editorLightBulb.foreground#D2A906
editorLightBulbAutoFix.foreground#639ED2
editorLineNumber.activeForeground#A4A4A4
editorLineNumber.foreground#707070
editorLink.activeForeground#447CAA
editorMarkerNavigation.background#2A2A2C
editorMarkerNavigationError.background#C97260
editorMarkerNavigationInfo.background#639ED2
editorMarkerNavigationWarning.background#A98B06
editorOverviewRuler.addedForeground#4C690F99
editorOverviewRuler.border#6B6B6B4d
editorOverviewRuler.bracketMatchForeground#868686
editorOverviewRuler.commonContentForeground#52525266
editorOverviewRuler.currentContentForeground#39A69180
editorOverviewRuler.deletedForeground#7C161B99
editorOverviewRuler.errorForeground#D21414b3
editorOverviewRuler.findMatchForeground#AD71177e
editorOverviewRuler.incomingContentForeground#398AD280
editorOverviewRuler.infoForeground#639ED2
editorOverviewRuler.modifiedForeground#0F6A8399
editorOverviewRuler.rangeHighlightForeground#0667A999
editorOverviewRuler.selectionHighlightForeground#868686cc
editorOverviewRuler.warningForeground#A98B06
editorOverviewRuler.wordHighlightForeground#868686cc
editorOverviewRuler.wordHighlightStrongForeground#9F869Fcc
editorPane.background#1E1E1E
editorRuler.foreground#4E4E4E
editorSuggestWidget.background#232324
editorSuggestWidget.border#3D3D3D
editorSuggestWidget.foreground#AFAFAF
editorSuggestWidget.highlightForeground#067ECE
editorSuggestWidget.selectedBackground#0A2B41
editorUnnecessaryCode.opacity#060606aa
editorWarning.foreground#A98B06
editorWhitespace.foreground#BBBCBA29
editorWidget.background#232324
editorWidget.border#3D3D3D
editorWidget.foreground#A9A9A9
errorForeground#C97260
extensionBadge.remoteBackground#0667A9
extensionBadge.remoteForeground#D2D2D2
extensionButton.prominentBackground#2E6A31
extensionButton.prominentForeground#D2D2D2
extensionButton.prominentHoverBackground#265528
focusBorder#066BAF
foreground#A9A9A9
gitDecoration.addedResourceForeground#6D9975
gitDecoration.conflictingResourceForeground#5C5CA2
gitDecoration.deletedResourceForeground#A54433
gitDecoration.ignoredResourceForeground#767676
gitDecoration.modifiedResourceForeground#BA9F76
gitDecoration.submoduleResourceForeground#769ABA
gitDecoration.untrackedResourceForeground#62A67A
gitlens.gutterBackgroundColor#D2D2D213
gitlens.gutterForegroundColor#9E9E9E
gitlens.gutterUncommittedForegroundColor#069CC799
gitlens.lineHighlightBackgroundColor#069CC733
gitlens.lineHighlightOverviewRulerColor#069CC799
gitlens.trailingLineBackgroundColor#06060600
gitlens.trailingLineForegroundColor#80808059
icon.foreground#A3A3A3
imagePreview.border#6C6C6C59
input.background#363636
input.foreground#A9A9A9
input.placeholderForeground#8A8A8A
inputOption.activeBackground#066BAF66
inputOption.activeBorder#0667A900
inputOption.activeForeground#D2D2D2
inputValidation.errorBackground#4E1D1D
inputValidation.errorBorder#9E1306
inputValidation.infoBackground#0A3540
inputValidation.infoBorder#0667A9
inputValidation.warningBackground#30270A
inputValidation.warningBorder#997D06
list.activeSelectionBackground#0D3E60
list.activeSelectionForeground#D2D2D2
list.deemphasizedForeground#767676
list.dropBackground#323536
list.errorForeground#CC6C5F
list.filterMatchBackground#C14F0655
list.focusBackground#0A2B41
list.highlightForeground#067ECE
list.hoverBackground#272A2A
list.inactiveSelectionBackground#323236
list.invalidItemForeground#997D06
list.warningForeground#A98B06
listFilterWidget.background#563222
listFilterWidget.noMatchesOutline#9E1306
listFilterWidget.outline#06060600
menu.background#232324
menu.foreground#A9A9A9
menu.selectionBackground#0D3E60
menu.selectionForeground#D2D2D2
menu.separatorBackground#9B9B9B
menubar.selectionBackground#D2D2D21a
menubar.selectionForeground#A9A9A9
merge.commonContentBackground#52525229
merge.commonHeaderBackground#52525266
merge.currentContentBackground#39A69133
merge.currentHeaderBackground#39A69180
merge.incomingContentBackground#398AD233
merge.incomingHeaderBackground#398AD280
minimap.errorHighlight#D21414b3
minimap.findMatchHighlight#AD7117
minimap.selectionHighlight#244566
minimap.warningHighlight#A98B06
minimapGutter.addedBackground#4C690F
minimapGutter.deletedBackground#7C161B
minimapGutter.modifiedBackground#0F6A83
minimapSlider.activeBackground#9E9E9E33
minimapSlider.background#66666633
minimapSlider.hoverBackground#56565659
notebook.cellBorderColor#6C6C6C24
notebook.cellHoverBackground#6C6C6C12
notebook.cellInsertionIndicator#066BAF
notebook.cellStatusBarItemHoverBackground#D2D2D226
notebook.cellToolbarSeparator#6C6C6C59
notebook.focusedCellBackground#6C6C6C24
notebook.focusedCellBorder#D2D2D21f
notebook.focusedEditorBorder#066BAF
notebook.outputContainerBackgroundColor#6C6C6C24
notebook.symbolHighlightBackground#D2D2D20b
notebookScrollbarSlider.activeBackground#9E9E9E66
notebookScrollbarSlider.background#66666666
notebookScrollbarSlider.hoverBackground#565656b3
notebookStatusErrorIcon.foreground#C97260
notebookStatusRunningIcon.foreground#A9A9A9
notebookStatusSuccessIcon.foreground#73AD70
notificationCenterHeader.background#2C2C2D
notificationLink.foreground#327CD2
notifications.background#232324
notifications.border#2C2C2D
notifications.foreground#A9A9A9
notificationsErrorIcon.foreground#C97260
notificationsInfoIcon.foreground#639ED2
notificationsWarningIcon.foreground#A98B06
panel.background#1E1E1E
panel.border#6C6C6C59
panel.dropBorder#BEBEBE
panelSection.border#6C6C6C59
panelSection.dropBackground#484D5080
panelSectionHeader.background#6C6C6C33
panelTitle.activeBorder#BEBEBE
panelTitle.activeForeground#BEBEBE
panelTitle.inactiveForeground#BEBEBE99
peekView.border#0667A9
peekViewEditor.background#061E2E
peekViewEditor.matchHighlightBackground#D2780699
peekViewEditorGutter.background#061E2E
peekViewResult.background#232324
peekViewResult.fileForeground#D2D2D2
peekViewResult.lineForeground#9B9B9B
peekViewResult.matchHighlightBackground#C14F064d
peekViewResult.selectionBackground#2E80D233
peekViewResult.selectionForeground#D2D2D2
peekViewTitle.background#1E1E1E
peekViewTitleDescription.foreground#A9A9A9b3
peekViewTitleLabel.foreground#D2D2D2
pickerGroup.border#38383E
pickerGroup.foreground#327CD2
problemsErrorIcon.foreground#C97260
problemsInfoIcon.foreground#639ED2
problemsWarningIcon.foreground#A98B06
progressBar.background#115F9F
quickInput.background#232324
quickInput.foreground#A9A9A9
quickInputTitle.background#D2D2D21b
scm.providerBorder#3D3D3D
scrollbar.shadow#060606
scrollbarSlider.activeBackground#9E9E9E66
scrollbarSlider.background#66666666
scrollbarSlider.hoverBackground#565656b3
searchEditor.findMatchBackground#C14F0638
settings.checkboxBackground#363636
settings.checkboxBorder#363636
settings.checkboxForeground#C6C6C6
settings.dropdownBackground#363636
settings.dropdownBorder#363636
settings.dropdownForeground#C6C6C6
settings.dropdownListBorder#3D3D3D
settings.headerForeground#BEBEBE
settings.modifiedItemIndicator#0F6A83
settings.numberInputBackground#262626
settings.numberInputForeground#A9A9A9
settings.textInputBackground#262626
settings.textInputForeground#A9A9A9
sideBar.background#232324
sideBar.dropBackground#484D5080
sideBarSectionHeader.background#06060600
sideBarSectionHeader.border#A9A9A933
sideBarTitle.foreground#9B9B9B
statusBar.background#0667A9
statusBar.debuggingBackground#A9572E
statusBar.debuggingForeground#D2D2D2
statusBar.foreground#D2D2D2
statusBar.noFolderBackground#592067
statusBar.noFolderForeground#D2D2D2
statusBarItem.activeBackground#D2D2D22e
statusBarItem.hoverBackground#D2D2D21f
statusBarItem.prominentBackground#06060680
statusBarItem.prominentForeground#D2D2D2
statusBarItem.prominentHoverBackground#0606064d
statusBarItem.remoteBackground#176E50
statusBarItem.remoteForeground#D2D2D2
symbolIcon.arrayForeground#A9A9A9
symbolIcon.booleanForeground#A9A9A9
symbolIcon.classForeground#C48326
symbolIcon.colorForeground#A9A9A9
symbolIcon.constantForeground#A9A9A9
symbolIcon.constructorForeground#936CB2
symbolIcon.enumeratorForeground#C48326
symbolIcon.enumeratorMemberForeground#639ED2
symbolIcon.eventForeground#C48326
symbolIcon.fieldForeground#639ED2
symbolIcon.fileForeground#A9A9A9
symbolIcon.folderForeground#A9A9A9
symbolIcon.functionForeground#936CB2
symbolIcon.interfaceForeground#639ED2
symbolIcon.keyForeground#A9A9A9
symbolIcon.keywordForeground#A9A9A9
symbolIcon.methodForeground#936CB2
symbolIcon.moduleForeground#A9A9A9
symbolIcon.namespaceForeground#A9A9A9
symbolIcon.nullForeground#A9A9A9
symbolIcon.numberForeground#A9A9A9
symbolIcon.objectForeground#A9A9A9
symbolIcon.operatorForeground#A9A9A9
symbolIcon.packageForeground#A9A9A9
symbolIcon.propertyForeground#A9A9A9
symbolIcon.referenceForeground#A9A9A9
symbolIcon.snippetForeground#A9A9A9
symbolIcon.stringForeground#A9A9A9
symbolIcon.structForeground#A9A9A9
symbolIcon.textForeground#A9A9A9
symbolIcon.typeParameterForeground#A9A9A9
symbolIcon.unitForeground#A9A9A9
symbolIcon.variableForeground#639ED2
tab.activeBackground#1E1E1E
tab.activeForeground#D2D2D2
tab.activeModifiedBorder#2E80A9
tab.border#232324
tab.inactiveBackground#2A2A2A
tab.inactiveForeground#D2D2D280
tab.inactiveModifiedBorder#2E80A980
tab.unfocusedActiveBackground#1E1E1E
tab.unfocusedActiveForeground#D2D2D280
tab.unfocusedActiveModifiedBorder#2E80A980
tab.unfocusedInactiveBackground#2A2A2A
tab.unfocusedInactiveForeground#D2D2D240
tab.unfocusedInactiveModifiedBorder#2E80A940
terminal.ansiBlack#060606
terminal.ansiBlue#2261A6
terminal.ansiBrightBlack#575757
terminal.ansiBrightBlue#3577C1
terminal.ansiBrightCyan#2699B5
terminal.ansiBrightGreen#22AD75
terminal.ansiBrightMagenta#B15FB1
terminal.ansiBrightRed#C64242
terminal.ansiBrightWhite#BDBDBD
terminal.ansiBrightYellow#CACA3B
terminal.ansiCyan#138CAA
terminal.ansiGreen#109C66
terminal.ansiMagenta#9C389C
terminal.ansiRed#AA2D2D
terminal.ansiWhite#BDBDBD
terminal.ansiYellow#BDBD12
terminal.border#6C6C6C59
terminal.foreground#A9A9A9
terminal.selectionBackground#D2D2D240
textBlockQuote.background#6B6B6B1a
textBlockQuote.border#0667A980
textCodeBlock.background#0E0E0E66
textLink.activeForeground#327CD2
textLink.foreground#327CD2
textPreformat.foreground#B29A6A
textSeparator.foreground#D2D2D22e
titleBar.activeBackground#363636
titleBar.activeForeground#A9A9A9
titleBar.inactiveBackground#36363699
titleBar.inactiveForeground#A9A9A999
tree.indentGuidesStroke#4C4C4C
widget.shadow#060606

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	#AFAFAF	—
emphasis	—	italic
strong	—	bold
header	#06066C	—
comment	#5A804A	—
constant.language	#4A82B1	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#96AA8C	—
constant.regexp	#56577D	—
entity.name.tag	#4A82B1	—
entity.name.tag.css	#B29A6A	—
entity.other.attribute-name	#82B6D1	—
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	#B29A6A	—
invalid	#C93E3E	—
markup.underline	—	underline
markup.bold	#4A82B1	bold
markup.heading	#4A82B1	bold
markup.italic	—	italic
markup.inserted	#96AA8C	—
markup.deleted	#AA7A66	—
markup.changed	#4A82B1	—
punctuation.definition.quote.begin.markdown	#5A804A	—
punctuation.definition.list.begin.markdown	#587EBE	—
markup.inline.raw	#AA7A66	—
punctuation.definition.tag	#6C6C6C	—
meta.preprocessor, entity.name.function.preprocessor	#4A82B1	—
meta.preprocessor.string	#AA7A66	—
meta.preprocessor.numeric	#96AA8C	—
meta.structure.dictionary.key.python	#82B6D1	—
meta.diff.header	#4A82B1	—
storage	#4A82B1	—
storage.type	#4A82B1	—
storage.modifier, keyword.operator.noexcept	#4A82B1	—
string, meta.embedded.assembly	#AA7A66	—
string.tag	#AA7A66	—
string.value	#AA7A66	—
string.regexp	#AD5A5A	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#4A82B1	—
meta.template.expression	#AFAFAF	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#82B6D1	—
keyword	#4A82B1	—
keyword.control	#4A82B1	—
keyword.operator	#AFAFAF	—
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	#4A82B1	—
keyword.other.unit	#96AA8C	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#4A82B1	—
support.function.git-rebase	#82B6D1	—
constant.sha.git-rebase	#96AA8C	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#AFAFAF	—
variable.language	#4A82B1	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#B6B68E	—
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	#44A692	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#44A692	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#A3719F	—
variable, meta.definition.variable.name, support.variable, entity.name.variable	#82B6D1	—
variable.other.constant, variable.other.enummember	#45A0D2	—
meta.object-literal.key	#82B6D1	—
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	#AA7A66	—
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	#AA7A66	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#AD5A5A	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#B6B68E	—
keyword.operator.quantifier.regexp	#B29A6A	—
constant.character	#4A82B1	—
constant.character.escape	#B29A6A	—
entity.name.label	#A6A6A6	—
token.info-token	#587EBE	—
token.warn-token	#AA7E2D	—
token.error-token	#C93E3E	—
token.debug-token	#9458BE	—

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