TBFox Theme
Publisher: TristanMarkBarrowThemes in package: 2
A beautiful teal-based color theme for VS Code with both light and dark variants, inspired by modern web design
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.activeBorder#2a9d8f
- activityBar.background#f8f6f1
- activityBar.foreground#2a9d8f
- activityBarBadge.background#2a9d8f
- activityBarBadge.foreground#f8f6f1
- button.background#2a9d8f
- button.foreground#fbf9f4
- button.hoverBackground#319795
- dropdown.background#f2f0eb
- dropdown.border#e6e4df
- dropdown.foreground#2d3748
- editor.background#fbf9f4
- editor.foreground#2d3748
- editor.inactiveSelectionBackground#7c6f6415
- editor.lineHighlightBackground#f2f0eb
- editor.selectionBackground#7c6f6430
- editor.selectionHighlightBackground#7c6f6415
- editorCursor.foreground#2a9d8f
- editorIndentGuide.activeBackground#2a9d8f
- editorIndentGuide.background#e6e4df
- editorWhitespace.foreground#928374
- input.background#f2f0eb
- input.border#e6e4df
- input.foreground#2d3748
- input.placeholderForeground#718096
- list.activeSelectionBackground#7c6f6425
- list.activeSelectionForeground#2d3748
- list.hoverBackground#f2f0eb
- list.hoverForeground#2d3748
- list.inactiveSelectionBackground#f2f0eb
- list.inactiveSelectionForeground#2d3748
- panel.background#f8f6f1
- panel.border#e6e4df
- progressBar.background#2a9d8f
- scrollbarSlider.activeBackground#319795
- scrollbarSlider.background#e6e4df
- scrollbarSlider.hoverBackground#2a9d8f
- sideBar.background#f8f6f1
- sideBar.foreground#2d3748
- sideBarTitle.foreground#2a9d8f
- statusBar.background#f2f0eb
- statusBar.debuggingBackground#e53e3e
- statusBar.foreground#2a9d8f
- tab.activeBackground#fbf9f4
- tab.activeForeground#2d3748
- tab.border#e6e4df
- tab.inactiveBackground#f2f0eb
- tab.inactiveForeground#718096
- terminal.ansiBlack#2d3748
- terminal.ansiBlue#3182ce
- terminal.ansiBrightBlack#718096
- terminal.ansiBrightBlue#63b3ed
- terminal.ansiBrightCyan#4fd1c7
- terminal.ansiBrightGreen#68d391
- terminal.ansiBrightMagenta#f6e05e
- terminal.ansiBrightRed#fc8181
- terminal.ansiBrightWhite#fbf9f4
- terminal.ansiBrightYellow#f6ad55
- terminal.ansiCyan#2a9d8f
- terminal.ansiGreen#38a169
- terminal.ansiMagenta#d69e2e
- terminal.ansiRed#e53e3e
- terminal.ansiWhite#fbf9f4
- terminal.ansiYellow#dd6b20
- terminal.background#fbf9f4
- terminal.foreground#2d3748
- titleBar.activeBackground#f8f6f1
- titleBar.activeForeground#2d3748
- titleBar.inactiveBackground#f8f6f1
- titleBar.inactiveForeground#718096
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #718096 | italic |
| string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple | #d69e2e | — |
| keyword, storage.type, storage.modifier | #3182ce | — |
| entity.name.function, support.function, meta.function-call | #dd6b20 | — |
| variable, variable.other | #2d3748 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #38a169 | — |
| constant.language.boolean | #3182ce | — |
| entity.name.class, support.class | #2a9d8f | — |
| entity.name.type, support.type | #2a9d8f | — |
| keyword.operator | #2d3748 | — |
| punctuation.definition, punctuation.separator, punctuation.terminator | #4a5568 | — |
| variable.other.property, support.variable.property | #3182ce | — |
| entity.name.tag | #e53e3e | — |
| entity.other.attribute-name | #319795 | — |
| constant, constant.other | #2a9d8f | — |
| entity.name.namespace | #2a9d8f | — |
| meta.decorator, support.type.decorator | #dd6b20 | — |
| invalid, invalid.illegal | #e53e3e | — |
| invalid.deprecated | #dd6b20 | — |
| markup.underline.link | #2a9d8f | — |
| markup.heading | #2a9d8f | — |
| markup.bold | #2d3748 | bold |
| markup.italic | #4a5568 | italic |
| keyword.control | #e53e3e | — |
| support.type.property-name.css, meta.property-name.css | #3182ce | — |
| support.constant.property-value.css, meta.property-value.css | #d69e2e | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #e53e3e | — |
| keyword.other.unit.css, constant.numeric.css | #dd6b20 | — |
| support.function.css | #2a9d8f | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #319795 | — |