Atom Pro Theme
Publisher: CodeAlbThemes in package: 1
A lightweight dark theme for Visual Studio Code
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#21252B
- activityBar.foreground#D7DAE0
- activityBarBadge.background#4D78CC
- activityBarBadge.foreground#F8FAFD
- badge.background#282c34
- button.background#404754
- debugToolBar.background#21252b
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#1d1f23
- dropdown.border#181A1F
- editor.background#282c34
- editor.findMatchBackground#42557B
- editor.findMatchBorder#457dff
- editor.findMatchHighlightBackground#314365
- editor.lineHighlightBackground#2c313c
- editor.selectionBackground#67769660
- editor.selectionHighlightBackground#ffffff10
- editor.selectionHighlightBorder#ddd
- editor.wordHighlightBackground#484e5b
- editor.wordHighlightBorder#7f848e
- editor.wordHighlightStrongBackground#abb2bf26
- editor.wordHighlightStrongBorder#7f848e
- editorActiveLineNumber.foreground#737984
- editorBracketMatch.background#515a6b
- editorBracketMatch.border#515a6b
- editorCursor.background#ffffffc9
- editorCursor.foreground#528bff
- editorError.foreground#c24038
- editorGroup.background#181A1F
- editorGroup.border#181A1F
- editorGroupHeader.tabsBackground#21252B
- editorHoverWidget.background#21252B
- editorHoverWidget.border#181A1F
- editorIndentGuide.background#3B4048
- editorLineNumber.foreground#495162
- editorMarkerNavigation.background#21252b
- editorRuler.foreground#abb2bf26
- editorSuggestWidget.background#21252B
- editorSuggestWidget.border#181A1F
- editorSuggestWidget.selectedBackground#2c313a
- editorWhitespace.foreground#3B4048
- editorWidget.background#21252B
- focusBorder#21252b
- input.background#1d1f23
- list.activeSelectionBackground#2c313a
- list.activeSelectionForeground#d7dae0
- list.focusBackground#383E4A
- list.highlightForeground#C5C5C5
- list.hoverBackground#292d35
- list.inactiveSelectionBackground#2c313a
- list.inactiveSelectionForeground#d7dae0
- peekViewEditor.matchHighlightBackground#29244b
- scrollbarSlider.activeBackground#747D9180
- scrollbarSlider.background#4e566660
- scrollbarSlider.hoverBackground#5A637580
- sideBar.background#21252b
- sideBarSectionHeader.background#282c34
- statusBar.background#21252B
- statusBar.debuggingBackground#7e0097
- statusBar.debuggingBorder#66017a
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#9da5b4
- statusBar.noFolderBackground#21252B
- statusBarItem.hoverBackground#2c313a
- tab.activeBackground#2c313a
- tab.border#181A1F
- tab.hoverBackground#323842
- tab.inactiveBackground#21252B
- tab.unfocusedHoverBackground#323842
- titleBar.activeBackground#282c34
- titleBar.activeForeground#9da5b4
- titleBar.inactiveBackground#21252B
- titleBar.inactiveForeground#6B717D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #656c7c | — |
| punctuation.definition.arguments, punctuation.definition.parameters, punctuation.accessor, constant, keyword.operator.new, support.class, entity.other.alias, variable.language.this, variable.language.this punctuation, source.css keyword.other.unit | #eeb08b | — |
| string | #9bca79 | — |
| keyword.operator.assignment, keyword.operator.class, keyword.operator.key, keyword.operator.string, entity, punctuation, support.type.property-name, source.js punctuation.definition.parameters, support.type.vendored.property-name, meta.property-value, source.css support.constant.property-value, source.css meta.property-value | #acb3c2 | — |
| variable, variable punctuation, entity.name.tag | #db888f | — |
| support, punctuation.definition.storage-type, punctuation.definition.array, source.css entity.name.function, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #66bcd6 | — |
| storage, keyword.operator, keyword.operator.ternary, keyword, source.css keyword.control.at-rule punctuation, punctuation.section.embedded | #cc8eff | — |
| entity.other.attribute-name | #d1af70 | — |
| punctuation.section.array, meta.other.type.phpdoc keyword.other.type | #848c9e | — |
| variable.language.this, meta.other.type.phpdoc keyword.other.type | — | italic |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...