haidark
Publisher: Huu Nhan TranThemes in package: 2
Your best dark theme
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#161b22
- activityBar.border#30363d
- activityBar.dropBackground#2f81f766
- activityBar.foreground#e6edf3
- activityBar.inactiveForeground#6e7681
- activityBarBadge.background#2f81f7
- activityBarBadge.foreground#ffffff
- badge.background#2f81f7
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#e6edf3
- breadcrumb.focusForeground#e6edf3
- breadcrumb.foreground#9ca5b0
- breadcrumbPicker.background#161b22
- button.background#238636
- button.foreground#ffffff
- button.hoverBackground#2ea043
- button.secondaryBackground#21262d
- button.secondaryForeground#e6edf3
- button.secondaryHoverBackground#30363d
- checkbox.background#161b22
- checkbox.border#30363d
- contrastBorder#30363d
- debugExceptionWidget.background#161b22
- debugExceptionWidget.border#f85149
- debugToolBar.background#161b22
- descriptionForeground#9ca5b0
- diffEditor.insertedLineBackground#3fb9501a
- diffEditor.insertedTextBackground#3fb95026
- diffEditor.removedLineBackground#f851491a
- diffEditor.removedTextBackground#f8514926
- dropdown.background#161b22
- dropdown.border#30363d
- dropdown.foreground#e6edf3
- dropdown.listBackground#161b22
- editor.background#0d1117
- editor.findMatchBackground#bb800966
- editor.findMatchHighlightBackground#ffd33d44
- editor.findRangeHighlightBackground#3fb95020
- editor.foreground#e6edf3
- editor.hoverHighlightBackground#2f81f733
- editor.inactiveSelectionBackground#2f81f722
- editor.lineHighlightBackground#161b22
- editor.rangeHighlightBackground#2f81f722
- editor.selectionBackground#2f81f744
- editor.selectionHighlightBackground#3fb95040
- editor.wordHighlightBackground#6e768133
- editor.wordHighlightStrongBackground#6e768155
- editorBracketHighlight.foreground1#79c0ff
- editorBracketHighlight.foreground2#7ee787
- editorBracketHighlight.foreground3#ffa657
- editorBracketHighlight.foreground4#d2a8ff
- editorBracketHighlight.foreground5#ff7b72
- editorBracketHighlight.foreground6#a5d6ff
- editorBracketMatch.background#3fb95040
- editorBracketMatch.border#3fb95080
- editorCodeLens.foreground#8b949e
- editorCursor.foreground#2f81f7
- editorError.foreground#f85149
- editorGroup.border#30363d
- editorGroup.dropBackground#2f81f733
- editorGroup.emptyBackground#0d1117
- editorGroupHeader.noTabsBackground#0d1117
- editorGroupHeader.tabsBackground#010409
- editorGroupHeader.tabsBorder#30363d
- editorGutter.addedBackground#3fb950
- editorGutter.background#0d1117
- editorGutter.deletedBackground#f85149
- editorGutter.modifiedBackground#bb8009
- editorHoverWidget.background#161b22
- editorHoverWidget.border#30363d
- editorIndentGuide.activeBackground#484f58
- editorIndentGuide.background#21262d
- editorInfo.foreground#2f81f7
- editorLineNumber.activeForeground#e6edf3
- editorLineNumber.foreground#6e7681
- editorLink.activeForeground#2f81f7
- editorMarkerNavigation.background#161b22
- editorMarkerNavigationError.background#f85149
- editorMarkerNavigationWarning.background#d29922
- editorOverviewRuler.border#0d1117
- editorOverviewRuler.commonContentForeground#9ca5b0
- editorOverviewRuler.currentContentForeground#2f81f7
- editorOverviewRuler.incomingContentForeground#3fb950
- editorRuler.foreground#21262d
- editorSuggestWidget.background#161b22
- editorSuggestWidget.border#30363d
- editorSuggestWidget.foreground#e6edf3
- editorSuggestWidget.highlightForeground#2f81f7
- editorSuggestWidget.selectedBackground#30363d
- editorWarning.foreground#d29922
- editorWhitespace.foreground#484f58
- editorWidget.background#161b22
- editorWidget.border#30363d
- errorForeground#ff7b72
- extensionButton.prominentBackground#238636
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#2ea043
- focusBorder#2f81f7
- foreground#e6edf3
- gitDecoration.addedResourceForeground#3fb950
- gitDecoration.conflictingResourceForeground#db6d28
- gitDecoration.deletedResourceForeground#f85149
- gitDecoration.ignoredResourceForeground#8b7fc4
- gitDecoration.modifiedResourceForeground#e8821e
- gitDecoration.renamedResourceForeground#56d4dd
- gitDecoration.stageDeletedResourceForeground#f85149
- gitDecoration.stageModifiedResourceForeground#e8821e
- gitDecoration.submoduleResourceForeground#dcb6ff
- gitDecoration.untrackedResourceForeground#3fb950
- icon.foreground#9ca5b0
- input.background#010409
- input.border#30363d
- input.foreground#e6edf3
- input.placeholderForeground#6e7681
- inputOption.activeBackground#2f81f766
- inputOption.activeBorder#2f81f7
- inputValidation.errorBackground#311b1b
- inputValidation.errorBorder#f85149
- inputValidation.infoBackground#0f2942
- inputValidation.infoBorder#2f81f7
- inputValidation.warningBackground#341a00
- inputValidation.warningBorder#d29922
- keybindingLabel.background#161b22
- keybindingLabel.border#30363d
- keybindingLabel.bottomBorder#30363d
- keybindingLabel.foreground#e6edf3
- list.activeSelectionBackground#30363d
- list.activeSelectionForeground#e6edf3
- list.dropBackground#161b22
- list.focusBackground#1f2937
- list.focusForeground#e6edf3
- list.highlightForeground#2f81f7
- list.hoverBackground#21262d
- list.hoverForeground#e6edf3
- list.inactiveSelectionBackground#21262d
- list.inactiveSelectionForeground#e6edf3
- list.invalidItemForeground#ff7b72
- merge.currentContentBackground#2f81f733
- merge.currentHeaderBackground#2f81f766
- merge.incomingContentBackground#3fb95033
- merge.incomingHeaderBackground#3fb95066
- minimap.findMatchHighlight#bb8009cc
- minimapGutter.addedBackground#3fb950
- minimapGutter.deletedBackground#f85149
- minimapGutter.modifiedBackground#bb8009
- notificationCenter.border#30363d
- notificationCenterHeader.background#161b22
- notificationCenterHeader.foreground#9ca5b0
- notificationLink.foreground#2f81f7
- notifications.background#161b22
- notifications.border#30363d
- notifications.foreground#e6edf3
- notificationToast.border#30363d
- panel.background#161b22
- panel.border#30363d
- panelInput.border#30363d
- panelTitle.activeBorder#fd8c73
- panelTitle.activeForeground#e6edf3
- panelTitle.inactiveForeground#9ca5b0
- peekView.border#2f81f7
- peekViewEditor.background#0d1117
- peekViewEditor.matchHighlightBackground#bb800966
- peekViewResult.background#0d1117
- peekViewResult.fileForeground#e6edf3
- peekViewResult.lineForeground#9ca5b0
- peekViewResult.matchHighlightBackground#bb800966
- peekViewResult.selectionBackground#30363d
- peekViewResult.selectionForeground#e6edf3
- peekViewTitle.background#161b22
- peekViewTitleDescription.foreground#9ca5b0
- peekViewTitleLabel.foreground#e6edf3
- pickerGroup.border#30363d
- pickerGroup.foreground#9ca5b0
- progress.background#2f81f7
- scrollbar.shadow#01040980
- scrollbarSlider.activeBackground#6e768188
- scrollbarSlider.background#6e768133
- scrollbarSlider.hoverBackground#6e768155
- selection.background#2f81f766
- sideBar.background#161b22
- sideBar.border#30363d
- sideBar.foreground#c9d1d9
- sideBarSectionHeader.background#161b22
- sideBarSectionHeader.border#30363d
- sideBarSectionHeader.foreground#e6edf3
- sideBarTitle.foreground#e6edf3
- statusBar.background#161b22
- statusBar.border#30363d
- statusBar.debuggingBackground#bb8009
- statusBar.debuggingBorder#30363d
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#9ca5b0
- statusBar.noFolderBackground#161b22
- statusBar.noFolderBorder#30363d
- statusBar.noFolderForeground#9ca5b0
- statusBarItem.activeBackground#30363d
- statusBarItem.hoverBackground#21262d
- statusBarItem.prominentBackground#30363d
- statusBarItem.prominentHoverBackground#484f58
- statusBarItem.remoteBackground#2f81f7
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#0d1117
- tab.activeBorder#0d1117
- tab.activeBorderTop#fd8c73
- tab.activeForeground#e6edf3
- tab.border#30363d
- tab.hoverBackground#0d1117
- tab.inactiveBackground#010409
- tab.inactiveForeground#9ca5b0
- tab.unfocusedActiveBorderTop#30363d
- tab.unfocusedActiveForeground#9ca5b0
- tab.unfocusedInactiveForeground#6e7681
- terminal.ansiBlack#161b22
- terminal.ansiBlue#79c0ff
- terminal.ansiBrightBlack#6e7681
- terminal.ansiBrightBlue#91cbff
- terminal.ansiBrightCyan#56d4dd
- terminal.ansiBrightGreen#56d364
- terminal.ansiBrightMagenta#dcb6ff
- terminal.ansiBrightRed#ffa198
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#e3b341
- terminal.ansiCyan#56d4dd
- terminal.ansiGreen#3fb950
- terminal.ansiMagenta#d2a8ff
- terminal.ansiRed#ff7b72
- terminal.ansiWhite#e6edf3
- terminal.ansiYellow#d29922
- terminal.foreground#e6edf3
- terminal.selectionBackground#2f81f744
- terminalCursor.foreground#2f81f7
- textBlockQuote.background#010409
- textBlockQuote.border#30363d
- textCodeBlock.background#161b22
- textLink.activeForeground#2f81f7
- textLink.foreground#2f81f7
- textPreformat.foreground#9ca5b0
- titleBar.activeBackground#161b22
- titleBar.activeForeground#e6edf3
- titleBar.border#30363d
- titleBar.inactiveBackground#161b22
- titleBar.inactiveForeground#9ca5b0
- walkThrough.embeddedEditorBackground#0d1117
- welcomePage.buttonBackground#21262d
- welcomePage.buttonHoverBackground#30363d
- widget.shadow#01040980
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #9ca5b0 | italic |
| constant, constant.numeric, constant.language, constant.language.boolean, constant.other.placeholder, variable.other.constant, support.constant | #91cbff | — |
| constant.character, constant.character.escape, constant.other.character-class | #acdaff | — |
| string, string.quoted, string.template, punctuation.definition.string | #acdaff | — |
| string.regexp | #8ff7a7 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier | #ff8985 | — |
| keyword.operator, punctuation, punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter | #e6edf3 | — |
| entity.name.function, support.function, meta.function-call entity.name.function, variable.function | #dcb6ff | — |
| entity.name.type, entity.name.class, entity.name.namespace, entity.other.inherited-class, support.type, support.class, storage.type.class, storage.type.interface | #91cbff | — |
| variable, variable.other, variable.parameter, meta.definition.variable.name, support.variable | #e6edf3 | — |
| variable.other.object.property, variable.other.property, meta.object-literal.key, support.variable.property | #79c0ff | — |
| variable.language, variable.language.this | #ff8985 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #8ff7a7 | — |
| punctuation.definition.tag | #8b949e | — |
| entity.other.attribute-name | #dcb6ff | — |
| meta.decorator variable.other, meta.decorator punctuation.decorator, entity.name.function.decorator, punctuation.decorator | #ffb070 | — |
| meta.preprocessor, entity.name.function.preprocessor, punctuation.section.embedded | #ff8985 | — |
| support.type.property-name, support.type.property-name.css, support.type.vendored.property-name | #79c0ff | — |
| support.constant.property-value, meta.property-value | #acdaff | — |
| keyword.other.unit | #ffb070 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #ffb070 | — |
| support.type.property-name.json | #79c0ff | — |
| invalid, invalid.illegal | #ffa198 | — |
| invalid.deprecated | #ffa198 | strikethrough |
| markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown | #91cbff | bold |
| markup.bold | #e6edf3 | bold |
| markup.italic | #e6edf3 | italic |
| markup.bold markup.italic, markup.italic markup.bold | #e6edf3 | bold italic |
| markup.inline.raw, markup.raw.block | #acdaff | — |
| markup.quote | #8ff7a7 | italic |
| markup.list punctuation.definition.list.begin, beginning.punctuation.definition.list | #ff8985 | — |
| string.other.link, markup.underline.link | #acdaff | — |
| markup.underline | — | underline |
| markup.inserted, markup.inserted.diff | #8ff7a7 | — |
| markup.deleted, markup.deleted.diff | #ffa198 | — |
| markup.changed, meta.diff.header | #ffb070 | — |
| meta.diff.range | #dcb6ff | bold |
| token.info-token | #2f81f7 | — |
| token.warn-token | #d29922 | — |
| token.error-token | #f85149 | — |
| token.debug-token | #dcb6ff | — |
| storage.type.annotation, punctuation.definition.annotation, meta.declaration.annotation | #ffb070 | — |
| entity.name.type.class.java, entity.name.type.enum.java, entity.name.type.interface.java, storage.type.java, storage.type.generic.java, storage.type.primitive.java | #91cbff | — |
| entity.name.function.java | #dcb6ff | — |
| storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java | #e6edf3 | — |
| variable.language.special.self.python, variable.parameter.function.language.special.self.python | #ff8985 | italic |
| source.go storage.type, source.go entity.name.type | #91cbff | — |
| source.go entity.name.import | #acdaff | — |
| entity.name.tag.yaml, support.type.property-name.toml | #79c0ff | — |
| italic | — | italic |
| bold | — | bold |