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#f0f0f0
- activityBar.border#d4d4d8
- activityBar.foreground#4b5563
- activityBar.inactiveForeground#9ca3af
- activityBarBadge.background#6b7280
- activityBarBadge.foreground#ffffff
- breadcrumb.background#fafafa
- breadcrumb.focusForeground#1f1f1f
- breadcrumb.foreground#6b7280
- button.background#2563eb
- button.foreground#ffffff
- button.hoverBackground#1d4ed8
- dropdown.background#ffffff
- dropdown.border#9ca3af
- dropdown.foreground#1f1f1f
- editor.background#fafafa
- editor.findMatchBackground#0ea5e960
- editor.findMatchHighlightBackground#0ea5e930
- editor.foreground#1f1f1f
- editor.lineHighlightBackground#f0f0f0
- editor.selectionBackground#2563eb30
- editor.selectionHighlightBackground#0ea5e930
- editorCursor.foreground#2563eb
- errorForeground#dc2626
- gitDecoration.conflictingResourceForeground#7c3aed
- gitDecoration.deletedResourceForeground#dc2626
- gitDecoration.ignoredResourceForeground#9ca3af
- gitDecoration.modifiedResourceForeground#d97706
- gitDecoration.untrackedResourceForeground#059669
- infoForeground#2563eb
- input.background#ffffff
- input.border#9ca3af
- input.foreground#1f1f1f
- inputOption.activeBorder#2563eb
- list.activeSelectionBackground#2563eb20
- list.activeSelectionForeground#000000
- list.hoverBackground#1f293710
- list.inactiveSelectionBackground#2563eb10
- menu.background#ffffff
- menu.border#e5e7eb
- menu.foreground#1f1f1f
- menu.selectionBackground#2563eb20
- notifications.background#ffffff
- notifications.border#9ca3af
- notifications.foreground#1f1f1f
- panel.background#f9f9f9
- panel.border#e5e5e5
- panelTitle.activeForeground#1f1f1f
- panelTitle.inactiveForeground#6b7280
- peekView.border#2563eb
- peekViewEditor.background#f3f3f3
- peekViewResult.background#efefef
- peekViewTitle.background#e5e5e5
- scrollbarSlider.activeBackground#2563eb70
- scrollbarSlider.background#2563eb30
- scrollbarSlider.hoverBackground#2563eb50
- sideBar.background#f5f5f5
- sideBar.border#e5e7eb
- sideBar.foreground#1f1f1f
- sideBarSectionHeader.background#eaeaea
- sideBarSectionHeader.foreground#6b7280
- sideBarTitle.foreground#1f1f1f
- statusBar.background#e5e5e5
- statusBar.border#d4d4d8
- statusBar.foreground#1f1f1f
- statusBarItem.hoverBackground#2563eb20
- tab.activeBackground#ffffff
- tab.activeBorder#6b7280
- tab.activeForeground#1f1f1f
- tab.border#e5e7eb
- tab.inactiveBackground#f3f3f3
- tab.inactiveForeground#6b7280
- terminal.ansiBlack#111111
- terminal.ansiBlue#2563eb
- terminal.ansiBrightBlack#6b7280
- terminal.ansiBrightBlue#3b82f6
- terminal.ansiBrightCyan#22d3ee
- terminal.ansiBrightGreen#10b981
- terminal.ansiBrightMagenta#8b5cf6
- terminal.ansiBrightRed#ef4444
- terminal.ansiBrightWhite#374151
- terminal.ansiBrightYellow#fbbf24
- terminal.ansiCyan#0891b2
- terminal.ansiGreen#059669
- terminal.ansiMagenta#7c3aed
- terminal.ansiRed#dc2626
- terminal.ansiWhite#1f1f1f
- terminal.ansiYellow#ca8a04
- terminal.background#ffffff
- terminal.foreground#1f1f1f
- titleBar.activeBackground#ffffff
- titleBar.activeForeground#1f1f1f
- titleBar.border#e5e7eb
- warningForeground#d97706
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #9ca3af | italic |
| string | #059669 | — |
| string.template | #10b981 | — |
| constant.numeric | #ca8a04 | — |
| constant.language.boolean | #ca8a04 | — |
| constant.language.null, constant.language.undefined | #dc2626 | — |
| keyword, keyword.other | #7c3aed | bold |
| keyword.control | #7c3aed | italic |
| keyword.operator | #0891b2 | — |
| entity.name.function | #0891b2 | bold |
| entity.name.class | #7c3aed | bold |
| variable | #1f1f1f | — |
| variable.parameter | #d97706 | italic |
| variable.object.property | #1f1f1f | — |
| meta.object-literal.key | #0891b2 | — |
| entity.name.tag | #7c3aed | — |
| entity.other.attribute-name | #0891b2 | — |
| entity.name.tag.css | #7c3aed | — |
| support.type.property-name.css | #0891b2 | — |
| support.constant.property-value.css | #059669 | — |
| keyword.control.import, keyword.control.export | #7c3aed | italic |
| variable.language.this, variable.language.self | #7c3aed | italic |
| support.function | #0891b2 | — |
| support.constant | #ca8a04 | — |
| storage.type, storage.modifier | #7c3aed | bold |
| storage.modifier.access | #2563eb | bold |
| keyword.declaration, storage.type.class, storage.type.function, storage.type.variable | #7c3aed | bold |
| punctuation | #6b7280 | — |
| entity.name.type | #7c3aed | bold |
| constant | #d97706 | — |
| string.regexp | #dc2626 | — |
| support.type.property-name.json | #0891b2 | — |
| markup.heading | #2563eb | bold |
| markup.bold | #d97706 | bold |
| markup.italic | #059669 | italic |
| markup.inline.raw | #0891b2 | — |
| invalid | #dc2626 | underline |
| keyword.declaration.ts, keyword.declaration.js, storage.type.ts, storage.type.js | #7c3aed | bold |
| storage.modifier.ts, storage.modifier.js | #2563eb | bold |
| invalid.deprecated | #ca8a04 | strikethrough |