Catthode
Publisher: CatthodeThemes in package: 1
A warm OLED black VS Code Theme
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.activeBackground#2d2d2d
- activityBar.activeBorder#ff9e3b
- activityBar.background#000000
- activityBar.dropBackground#2d2d2d
- activityBar.foreground#ff9e3b
- activityBarBadge.background#ff9e3b
- activityBarBadge.foreground#000000
- badge.background#ff9e3b
- badge.foreground#000000
- button.background#ff9e3b
- button.foreground#000000
- button.hoverBackground#ffb86c
- button.secondaryBackground#2d2d2d
- button.secondaryForeground#ffffff
- button.secondaryHoverBackground#636363
- charts.blue#9cd9e6
- charts.foreground#ffffff
- charts.green#b9d665
- charts.lines#aee6d6
- charts.orange#f08d49
- charts.purple#eba4be
- charts.red#ff6b6b
- charts.yellow#ffb86c
- debugConsole.errorForeground#ff6b6b
- debugConsole.infoForeground#aee6d6
- debugConsole.sourceForeground#b3b3b3
- debugConsole.warningForeground#ffb86c
- debugConsoleInputIcon.foreground#9cd9e6
- debugExceptionWidget.background#141414
- debugExceptionWidget.border#636363
- debugToolBar.background#141414
- descriptionForeground#e8e8e8
- diffEditor.insertedTextBackground#b9d66533
- diffEditor.removedTextBackground#ff6b6b33
- dropdown.background#141414
- dropdown.border#636363
- dropdown.foreground#ffffff
- editor.background#000000
- editor.findMatchBackground#ff9e3b66
- editor.findMatchHighlightBackground#ff9e3b33
- editor.findRangeHighlightBackground#2d2d2d
- editor.focusedStackFrameHighlightBackground#9cd9e6
- editor.foreground#ffffff
- editor.hoverHighlightBackground#2d2d2d
- editor.inactiveSelectionBackground#2d2d2d
- editor.inlineValuesBackground#141414
- editor.inlineValuesForeground#ffffff
- editor.lineHighlightBackground#141414
- editor.lineHighlightBorder#141414
- editor.rangeHighlightBackground#2d2d2d
- editor.selectionBackground#2d2d2d
- editor.selectionHighlightBackground#2d2d2d
- editor.stackFrameHighlightBackground#9cd9e6
- editor.wordHighlightBackground#2d2d2d
- editor.wordHighlightStrongBackground#2d2d2d
- editorActiveLineNumber.foreground#ff9e3b
- editorBracketHighlight.foreground1#eba4be
- editorBracketHighlight.foreground2#9cd9e6
- editorBracketHighlight.foreground3#ffb86c
- editorBracketHighlight.foreground4#b9d665
- editorBracketHighlight.foreground5#eba4be
- editorBracketHighlight.foreground6#9cd9e6
- editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
- editorBracketMatch.background#2d2d2d
- editorBracketMatch.border#ff9e3b
- editorCodeLens.foreground#b3b3b3
- editorCursor.foreground#ff9e3b
- editorError.border#ff6b6b00
- editorError.foreground#ff6b6b
- editorGroup.background#000000
- editorGroup.border#636363
- editorGroup.dropBackground#2d2d2d
- editorGroupHeader.border#000000
- editorGroupHeader.noTabsBackground#000000
- editorGroupHeader.tabsBackground#000000
- editorGroupHeader.tabsBorder#000000
- editorGutter.addedBackground#b9d665
- editorGutter.background#000000
- editorGutter.deletedBackground#ff6b6b
- editorGutter.modifiedBackground#ffb86c
- editorHint.border#ffb86c00
- editorHint.foreground#ffb86c
- editorHoverWidget.background#141414
- editorHoverWidget.border#636363
- editorIndentGuide.activeBackground#636363
- editorIndentGuide.background#2d2d2d
- editorInlayHint.background#2d2d2d
- editorInlayHint.foreground#b3b3b3
- editorLineNumber.activeForeground#ffffff
- editorLineNumber.foreground#636363
- editorLink.activeForeground#aee6d6
- editorMarkerNavigation.background#141414
- editorMarkerNavigationError.background#ff6b6b
- editorMarkerNavigationWarning.background#ffb86c
- editorOverviewRuler.addedForeground#b9d665
- editorOverviewRuler.border#636363
- editorOverviewRuler.currentContentForeground#636363
- editorOverviewRuler.deletedForeground#ff6b6b
- editorOverviewRuler.errorForeground#ff6b6b
- editorOverviewRuler.findMatchForeground#ff9e3b
- editorOverviewRuler.incomingContentForeground#636363
- editorOverviewRuler.infoForeground#9cd9e6
- editorOverviewRuler.modifiedForeground#ffb86c
- editorOverviewRuler.rangeHighlightForeground#2d2d2d
- editorOverviewRuler.selectionHighlightForeground#2d2d2d
- editorOverviewRuler.warningForeground#ffb86c
- editorOverviewRuler.wordHighlightForeground#2d2d2d
- editorOverviewRuler.wordHighlightStrongForeground#2d2d2d
- editorRuler.foreground#2d2d2d
- editorSuggestWidget.background#141414
- editorSuggestWidget.border#636363
- editorSuggestWidget.focusHighlightForeground#ff9e3b
- editorSuggestWidget.foreground#ffffff
- editorSuggestWidget.highlightForeground#ff9e3b
- editorSuggestWidget.selectedBackground#2d2d2d
- editorSuggestWidget.selectedForeground#ffffff
- editorWarning.border#ffb86c00
- editorWarning.foreground#ffb86c
- editorWhitespace.foreground#2d2d2d
- editorWidget.background#141414
- editorWidget.border#636363
- errorForeground#ff6b6b
- extensionButton.prominentBackground#ff9e3b
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#ffb86c
- focusBorder#636363
- foreground#ffffff
- gitDecoration.conflictingResourceForeground#eba4be
- gitDecoration.deletedResourceForeground#ff6b6b
- gitDecoration.ignoredResourceForeground#757575
- gitDecoration.modifiedResourceForeground#ffb86c
- gitDecoration.stageDeletedResourceForeground#ff6b6b
- gitDecoration.stageModifiedResourceForeground#ffb86c
- gitDecoration.submoduleResourceForeground#e8e8e8
- gitDecoration.untrackedResourceForeground#b9d665
- input.background#000000
- input.border#636363
- input.foreground#ffffff
- input.placeholderForeground#b3b3b3
- inputOption.activeBackground#2d2d2d
- inputOption.activeBorder#ff9e3b
- inputOption.activeForeground#ffffff
- inputValidation.errorBackground#ff6b6b
- inputValidation.errorBorder#ff6b6b
- inputValidation.infoBackground#9cd9e6
- inputValidation.infoBorder#9cd9e6
- inputValidation.warningBackground#ffb86c
- inputValidation.warningBorder#ffb86c
- keybindingLabel.background#2d2d2d
- keybindingLabel.border#636363
- keybindingLabel.bottomBorder#636363
- keybindingLabel.foreground#ffffff
- list.activeSelectionBackground#2d2d2d
- list.activeSelectionForeground#ffffff
- list.dropBackground#2d2d2d
- list.errorForeground#ff6b6b
- list.focusBackground#2d2d2d
- list.focusForeground#ffffff
- list.focusHighlightForeground#ff9e3b
- list.highlightForeground#ff9e3b
- list.hoverBackground#141414
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#2d2d2d
- list.inactiveSelectionBackground#141414
- list.inactiveSelectionForeground#ffffff
- list.warningForeground#ffb86c
- merge.border#000000
- merge.currentContentBackground#9cd9e64d
- merge.currentHeaderBackground#9cd9e666
- merge.incomingContentBackground#b9d6654d
- merge.incomingHeaderBackground#b9d66566
- minimap.background#000000
- minimap.errorHighlight#ff6b6b
- minimap.findMatchHighlight#ff9e3b
- minimap.selectionHighlight#2d2d2d
- minimap.warningHighlight#ffb86c
- minimapGutter.addedBackground#b9d665
- minimapGutter.deletedBackground#ff6b6b
- minimapGutter.modifiedBackground#ffb86c
- minimapSlider.activeBackground#2d2d2d
- minimapSlider.background#2d2d2d
- minimapSlider.hoverBackground#2d2d2d
- notification.background#141414
- notification.buttonBackground#2d2d2d
- notification.buttonForeground#ffffff
- notification.buttonHoverBackground#636363
- notification.errorBackground#ff6b6b
- notification.errorForeground#000000
- notification.foreground#ffffff
- notification.infoBackground#9cd9e6
- notification.infoForeground#000000
- notification.warningBackground#ffb86c
- notification.warningForeground#000000
- notificationCenter.border#636363
- notificationCenterHeader.background#141414
- notificationCenterHeader.foreground#ff9e3b
- notificationLink.foreground#aee6d6
- notifications.background#141414
- notifications.border#636363
- notifications.foreground#ffffff
- notificationToast.border#636363
- panel.background#141414
- panel.border#636363
- panelTitle.activeBorder#ff9e3b
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#b3b3b3
- peekView.border#ff9e3b
- peekViewEditor.background#000000
- peekViewEditor.matchHighlightBackground#ff9e3b4d
- peekViewEditorGutter.background#000000
- peekViewResult.background#141414
- peekViewResult.fileForeground#ffffff
- peekViewResult.lineForeground#b3b3b3
- peekViewResult.matchHighlightBackground#ff9e3bcc
- peekViewResult.selectionBackground#2d2d2d
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#141414
- peekViewTitleDescription.foreground#b3b3b3
- peekViewTitleLabel.foreground#ff9e3b
- pickerGroup.border#636363
- pickerGroup.foreground#ff9e3b
- progressBar.background#ff9e3b
- quickInputList.focusBackground#2d2d2d
- quickInputList.focusForeground#ffffff
- sash.hoverBorder#ff9e3b
- scrollbar.shadow#00000066
- scrollbarSlider.activeBackground#636363
- scrollbarSlider.background#2d2d2d
- scrollbarSlider.hoverBackground#636363
- selection.background#2d2d2d
- sideBar.background#141414
- sideBar.border#636363
- sideBar.foreground#e8e8e8
- sideBarSectionHeader.background#141414
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#ffffff
- statusBar.background#141414
- statusBar.border#636363
- statusBar.debuggingBackground#eba4be
- statusBar.debuggingForeground#000000
- statusBar.foreground#e8e8e8
- statusBar.noFolderBackground#141414
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#2d2d2d
- statusBarItem.errorBackground#ff6b6b
- statusBarItem.errorForeground#000000
- statusBarItem.hoverBackground#2d2d2d
- statusBarItem.prominentBackground#141414
- statusBarItem.prominentHoverBackground#2d2d2d
- statusBarItem.warningBackground#ffb86c
- statusBarItem.warningForeground#000000
- tab.activeBackground#000000
- tab.activeBorder#ff9e3b
- tab.activeBorderTop#ff9e3b
- tab.activeForeground#fae2c8
- tab.border#141414
- tab.hoverBackground#000000
- tab.hoverBorder#ff9e3b
- tab.inactiveBackground#141414
- tab.inactiveForeground#b3b3b3
- tab.lastPinnedBorder#636363
- tab.unfocusedActiveBorder#636363
- tab.unfocusedActiveBorderTop#141414
- tab.unfocusedActiveForeground#b3b3b3
- tab.unfocusedHoverBackground#000000
- tab.unfocusedHoverBorder#636363
- tab.unfocusedInactiveForeground#b3b3b3
- terminal.ansiBlack#000000
- terminal.ansiBlue#9cd9e6
- terminal.ansiBrightBlack#636363
- terminal.ansiBrightBlue#9cd9e6
- terminal.ansiBrightCyan#aee6d6
- terminal.ansiBrightGreen#b9d665
- terminal.ansiBrightMagenta#eba4be
- terminal.ansiBrightRed#f08d49
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#d9b98c
- terminal.ansiCyan#aee6d6
- terminal.ansiGreen#b9d665
- terminal.ansiMagenta#eba4be
- terminal.ansiRed#ff6b6b
- terminal.ansiWhite#B3B3B3
- terminal.ansiYellow#ffb86c
- terminal.background#000000
- terminal.foreground#ffffff
- terminal.tab.activeBorder#ff9e3b
- textBlockQuote.background#141414
- textBlockQuote.border#9cd9e6
- textCodeBlock.background#141414
- textLink.activeForeground#aee6d6
- textLink.foreground#aee6d6
- textPreformat.foreground#ffb86c
- textSeparator.foreground#636363
- titleBar.activeBackground#141414
- titleBar.activeForeground#ffffff
- titleBar.border#141414
- titleBar.inactiveBackground#141414
- titleBar.inactiveForeground#b3b3b3
- tree.indentGuidesStroke#2d2d2d
- walkThrough.embeddedEditorBackground#000000
- welcomePage.buttonBackground#2d2d2d
- welcomePage.buttonHoverBackground#636363
- widget.shadow#00000066
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #ffffff | — |
| emphasis | — | italic |
| strong | — | bold |
| comment | #b3b3b3 | — |
| constant.character | #eba4be | — |
| constant.character.escape | #eba4be | — |
| constant.language | #eba4be | — |
| constant.numeric | #eba4be | — |
| constant.regexp | #eba4be | — |
| entity.name.class, entity.name.type.class | #fae2c8 | — |
| entity.name.function | #ff9e3b | — |
| entity.name.tag | #ff6b6b | — |
| entity.other.attribute-name | #fae2c8 | — |
| entity.other.inherited-class | #fae2c8 | bold |
| invalid.deprecated | #ffffff | — |
| invalid.illegal | #ffffff | — |
| keyword | #ffb86c | — |
| keyword.operator | #f08d49 | — |
| keyword.other.new | #ffb86c | — |
| markup.bold | — | bold |
| markup.changed | #ffb86c | — |
| markup.deleted | #ff6b6b | — |
| markup.inserted | #b9d665 | — |
| meta.preprocessor | #aee6d6 | — |
| punctuation | #f08d49 | — |
| punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters | #f08d49 | — |
| punctuation.definition.tag | #f08d49 | — |
| punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment | #b3b3b3 | — |
| punctuation.section | #f08d49 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #f08d49 | — |
| punctuation.terminator | #f08d49 | — |
| punctuation.definition.variable | #f08d49 | — |
| storage | #ffb86c | — |
| string | #b9d665 | — |
| string.regexp | #eba4be | — |
| support.class | #fae2c8 | — |
| support.constant | #eba4be | — |
| support.function | #ff9e3b | — |
| support.function.construct | #ff9e3b | — |
| support.type | #fae2c8 | — |
| support.type.exception | #fae2c8 | — |
| variable.other | #e8e8e8 | — |
| variable.language | #eba4be | — |
| variable.parameter | #e8e8e8 | — |
| source.css constant.other.color.rgb-value | #eba4be | — |
| source.css meta.property-value | #ff9e3b | — |
| source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword | #ffb86c | — |
| source.css punctuation.definition.keyword | #ffb86c | — |
| source.css support.type.property-name | #ffffff | — |
| text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition | #e8e8e8 | — |
| markup.heading | #ffb86c | — |
| text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw | #b9d665 | — |
| text.html.markdown markup.italic | — | italic |
| text.html.markdown markup.underline.link | — | underline |
| text.html.markdown beginning.punctuation.definition.list | #ffb86c | — |
| text.html.markdown beginning.punctuation.definition.quote | #fae2c8 | — |
| text.html.markdown markup.quote | #b3b3b3 | — |
| text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title | #ff9e3b | — |
| text.html.basic constant.character.entity.html | #eba4be | — |
| text.html.basic constant.other.inline-data | #ffb86c | italic |
| text.html.basic meta.tag.sgml.doctype | #b3b3b3 | — |
| text.html.basic punctuation.definition.entity | #f08d49 | — |
| source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function | #ffb86c | — |
| source.ts meta.object-literal.key, source.tsx meta.object-literal.key | #ffffff | — |
| source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function | #ff9e3b | — |
| source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class | #fae2c8 | — |
| source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json | #fae2c8 | — |
| source.ts support.variable, source.tsx support.variable | #ffffff | — |