Charcoal Theme
Publisher: chriscowan190Themes in package: 1
Two-tone neutral dark theme — #1F1F1E base background, #262626 surfaces
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#262626
- activityBar.border#3A3A37
- activityBar.foreground#E8E8E6
- activityBar.inactiveForeground#75756F
- activityBarBadge.background#E8E8E6
- activityBarBadge.foreground#1F1F1E
- badge.background#E8E8E6
- badge.foreground#1F1F1E
- breadcrumb.background#1F1F1E
- breadcrumb.focusForeground#E8E8E6
- breadcrumb.foreground#9A9A96
- button.background#E8E8E6
- button.foreground#1F1F1E
- button.hoverBackground#FFFFFF
- button.secondaryBackground#262626
- button.secondaryForeground#E8E8E6
- button.secondaryHoverBackground#2E2E2C
- descriptionForeground#9A9A96
- dropdown.background#262626
- dropdown.border#3A3A37
- dropdown.foreground#E8E8E6
- editor.background#1F1F1E
- editor.foreground#E8E8E6
- editor.inactiveSelectionBackground#2E2E2C80
- editor.lineHighlightBackground#262626
- editor.selectionBackground#3A3A3780
- editorCursor.foreground#E8E8E6
- editorError.foreground#C0473A
- editorGroup.border#3A3A37
- editorGroupHeader.tabsBackground#1F1F1E
- editorHint.foreground#8FCFC4
- editorHoverWidget.background#262626
- editorHoverWidget.border#3A3A37
- editorIndentGuide.activeBackground1#3A3A37
- editorIndentGuide.background1#2E2E2C
- editorInfo.foreground#9DB2D0
- editorLineNumber.activeForeground#9A9A96
- editorLineNumber.foreground#5A5A56
- editorSuggestWidget.background#262626
- editorSuggestWidget.selectedBackground#2E2E2C
- editorWarning.foreground#CFC09A
- editorWhitespace.foreground#3A3A37
- editorWidget.background#262626
- editorWidget.border#3A3A37
- errorForeground#C0473A
- focusBorder#8A8A85
- foreground#E8E8E6
- gitDecoration.addedResourceForeground#A9C79A
- gitDecoration.conflictingResourceForeground#D6A687
- gitDecoration.deletedResourceForeground#C0473A
- gitDecoration.ignoredResourceForeground#5A5A56
- gitDecoration.modifiedResourceForeground#CFC09A
- gitDecoration.untrackedResourceForeground#8FCFC4
- input.background#262626
- input.border#3A3A37
- input.foreground#E8E8E6
- input.placeholderForeground#75756F
- inputOption.activeBorder#8A8A85
- list.activeSelectionBackground#2E2E2C
- list.activeSelectionForeground#E8E8E6
- list.focusBackground#2E2E2C
- list.highlightForeground#E8E8E6
- list.hoverBackground#2E2E2C
- list.inactiveSelectionBackground#262626
- menu.background#262626
- menu.border#3A3A37
- menu.foreground#E8E8E6
- menu.selectionBackground#2E2E2C
- menubar.selectionBackground#2E2E2C
- minimap.background#1F1F1E
- notificationCenter.border#3A3A37
- notifications.background#262626
- notifications.foreground#E8E8E6
- panel.background#262626
- panel.border#3A3A37
- panelTitle.activeForeground#E8E8E6
- panelTitle.inactiveForeground#9A9A96
- peekViewEditor.background#262626
- peekViewResult.background#262626
- peekViewTitle.background#1F1F1E
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#4A4A46
- scrollbarSlider.background#3A3A3780
- scrollbarSlider.hoverBackground#3A3A37
- sideBar.background#262626
- sideBar.border#3A3A37
- sideBar.foreground#D4D4D1
- sideBarSectionHeader.background#262626
- sideBarTitle.foreground#E8E8E6
- statusBar.background#1F1F1E
- statusBar.border#3A3A37
- statusBar.debuggingBackground#C0473A
- statusBar.debuggingForeground#FEF2F2
- statusBar.foreground#D4D4D1
- statusBarItem.hoverBackground#2E2E2C
- tab.activeBackground#1F1F1E
- tab.activeBorderTop#8A8A85
- tab.activeForeground#E8E8E6
- tab.border#1F1F1E
- tab.inactiveBackground#262626
- tab.inactiveForeground#9A9A96
- terminal.ansiBlack#1F1F1E
- terminal.ansiBlue#9DB2D0
- terminal.ansiBrightBlack#5A5A56
- terminal.ansiBrightBlue#B8C9E2
- terminal.ansiBrightCyan#AADDD4
- terminal.ansiBrightGreen#C0D9B3
- terminal.ansiBrightMagenta#D4BEDD
- terminal.ansiBrightRed#D66A5E
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#E0D4B3
- terminal.ansiCyan#8FCFC4
- terminal.ansiGreen#A9C79A
- terminal.ansiMagenta#C2A6CC
- terminal.ansiRed#C0473A
- terminal.ansiWhite#E8E8E6
- terminal.ansiYellow#CFC09A
- terminal.background#1F1F1E
- terminal.foreground#E8E8E6
- textLink.activeForeground#B8C9E2
- textLink.foreground#9DB2D0
- titleBar.activeBackground#1F1F1E
- titleBar.activeForeground#E8E8E6
- titleBar.border#3A3A37
- titleBar.inactiveBackground#1F1F1E
- titleBar.inactiveForeground#9A9A96
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #75756F | italic |
| string, string.quoted, string.template | #A9C79A | — |
| constant.numeric, constant.language, constant.character, constant.other | #D6A687 | — |
| keyword, keyword.control, keyword.operator.new, storage, storage.type, storage.modifier | #9DB2D0 | — |
| keyword.operator, punctuation.accessor | #B8B8B3 | — |
| entity.name.function, support.function, meta.function-call entity.name.function | #CFC09A | — |
| entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, support.type, support.class | #8FCFC4 | — |
| entity.name.tag, punctuation.definition.tag | #9DB2D0 | — |
| entity.other.attribute-name | #CFC09A | — |
| variable, variable.other, variable.parameter, meta.definition.variable | #E8E8E6 | — |
| variable.other.property, support.variable.property, meta.object-literal.key | #C2A6CC | — |
| variable.other.constant, variable.other.readwrite.instance, variable.other.global | #D6A687 | — |
| support.constant, constant.language.boolean, constant.language.null, constant.language.undefined | #D6A687 | — |
| invalid, invalid.illegal | #C0473A | — |
| markup.heading | #9DB2D0 | bold |
| markup.bold | #E8E8E6 | bold |
| markup.italic | — | italic |
| markup.inline.raw, markup.fenced_code.block | #A9C79A | — |
| markup.quote | #9A9A96 | italic |
| markup.underline.link | #8FCFC4 | — |