Obsidian Pro Theme
Publisher: williamkollerThemes in package: 8
A sleek dark theme for professional developers
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#050505
- activityBar.border#0f0f0f
- activityBar.foreground#9ca3af
- activityBar.inactiveForeground#6b7280
- activityBarBadge.background#6b7280
- activityBarBadge.foreground#ffffff
- breadcrumb.background#0a0a0a
- breadcrumb.focusForeground#e4e4e7
- breadcrumb.foreground#9ca3af
- button.background#3b82f6
- button.foreground#ffffff
- button.hoverBackground#2563eb
- dropdown.background#111111
- dropdown.border#6b7280
- dropdown.foreground#e4e4e7
- editor.background#0a0a0a
- editor.findMatchBackground#22d3ee60
- editor.findMatchHighlightBackground#22d3ee30
- editor.foreground#e4e4e7
- editor.lineHighlightBackground#111111
- editor.selectionBackground#3b82f640
- editor.selectionHighlightBackground#22d3ee30
- editorCursor.foreground#3b82f6
- errorForeground#ef4444
- gitDecoration.conflictingResourceForeground#8b5cf6
- gitDecoration.deletedResourceForeground#ef4444
- gitDecoration.ignoredResourceForeground#6b7280
- gitDecoration.modifiedResourceForeground#f59e0b
- gitDecoration.untrackedResourceForeground#10b981
- infoForeground#3b82f6
- input.background#111111
- input.border#6b7280
- input.foreground#e4e4e7
- inputOption.activeBorder#3b82f6
- list.activeSelectionBackground#3b82f630
- list.activeSelectionForeground#ffffff
- list.hoverBackground#1f1f2320
- list.inactiveSelectionBackground#3b82f620
- menu.background#0f0f0f
- menu.border#1f1f23
- menu.foreground#e4e4e7
- menu.selectionBackground#3b82f630
- notifications.background#111111
- notifications.border#6b7280
- notifications.foreground#e4e4e7
- panel.background#070707
- panel.border#1f1f23
- panelTitle.activeForeground#e4e4e7
- panelTitle.inactiveForeground#9ca3af
- peekView.border#3b82f6
- peekViewEditor.background#111111
- peekViewResult.background#070707
- peekViewTitle.background#0f0f0f
- scrollbarSlider.activeBackground#3b82f670
- scrollbarSlider.background#3b82f630
- scrollbarSlider.hoverBackground#3b82f650
- sideBar.background#070707
- sideBar.border#1f1f23
- sideBar.foreground#e4e4e7
- sideBarSectionHeader.background#111111
- sideBarSectionHeader.foreground#9ca3af
- sideBarTitle.foreground#e4e4e7
- statusBar.background#0f0f0f
- statusBar.border#1f1f23
- statusBar.foreground#e4e4e7
- statusBarItem.hoverBackground#3b82f630
- tab.activeBackground#111111
- tab.activeBorder#6b7280
- tab.activeForeground#e4e4e7
- tab.border#1f1f23
- tab.inactiveBackground#070707
- tab.inactiveForeground#9ca3af
- terminal.ansiBlack#111111
- terminal.ansiBlue#3b82f6
- terminal.ansiBrightBlack#6b7280
- terminal.ansiBrightBlue#60a5fa
- terminal.ansiBrightCyan#67e8f9
- terminal.ansiBrightGreen#34d399
- terminal.ansiBrightMagenta#a78bfa
- terminal.ansiBrightRed#f87171
- terminal.ansiBrightWhite#f9fafb
- terminal.ansiBrightYellow#fbbf24
- terminal.ansiCyan#22d3ee
- terminal.ansiGreen#10b981
- terminal.ansiMagenta#8b5cf6
- terminal.ansiRed#ef4444
- terminal.ansiWhite#e4e4e7
- terminal.ansiYellow#f59e0b
- terminal.background#0a0a0a
- terminal.foreground#e4e4e7
- titleBar.activeBackground#050505
- titleBar.activeForeground#e4e4e7
- titleBar.border#0f0f0f
- warningForeground#f59e0b
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #6b7280 | italic |
| string | #10b981 | — |
| string.template | #34d399 | — |
| constant.numeric | #f59e0b | — |
| constant.language.boolean | #f59e0b | — |
| constant.language.null, constant.language.undefined | #ef4444 | — |
| keyword, keyword.other | #8b5cf6 | bold |
| keyword.control | #8b5cf6 | italic |
| keyword.operator | #22d3ee | — |
| entity.name.function | #22d3ee | bold |
| entity.name.class | #8b5cf6 | bold |
| variable | #e4e4e7 | — |
| variable.parameter | #fbbf24 | italic |
| variable.object.property | #e4e4e7 | — |
| meta.object-literal.key | #22d3ee | — |
| entity.name.tag | #8b5cf6 | — |
| entity.other.attribute-name | #22d3ee | — |
| entity.name.tag.css | #8b5cf6 | — |
| support.type.property-name.css | #22d3ee | — |
| support.constant.property-value.css | #10b981 | — |
| keyword.control.import, keyword.control.export | #8b5cf6 | italic |
| variable.language.this, variable.language.self | #8b5cf6 | italic |
| support.function | #22d3ee | — |
| support.constant | #f59e0b | — |
| storage.type, storage.modifier | #8b5cf6 | bold |
| storage.modifier.access, storage.modifier.visibility | #3b82f6 | bold |
| keyword.declaration, storage.type.class, storage.type.function, storage.type.variable | #8b5cf6 | bold |
| punctuation | #9ca3af | — |
| entity.name.type | #8b5cf6 | bold |
| constant | #f59e0b | — |
| string.regexp | #ef4444 | — |
| support.type.property-name.json | #22d3ee | — |
| markup.heading | #3b82f6 | bold |
| markup.bold | #fbbf24 | bold |
| markup.italic | #10b981 | italic |
| markup.inline.raw | #22d3ee | — |
| invalid | #ef4444 | underline |
| keyword.declaration.ts, keyword.declaration.js, storage.type.ts, storage.type.js | #8b5cf6 | bold |
| storage.modifier.ts, storage.modifier.js, storage.modifier.access.ts, storage.modifier.access.js | #3b82f6 | bold |
| invalid.deprecated | #f59e0b | strikethrough |