Tinted VSCode
Publisher: Tinted ThemingThemes in package: 510
Choose from over 250 Tinted Themes
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.activeBackground#353554
- activityBar.activeBorder#94e2d5
- activityBar.background#1e1e2e
- activityBar.dropBackground#ff0000
- activityBar.foreground#cdd6f4
- activityBar.inactiveForeground#6c7086
- activityBarBadge.background#94e2d5
- activityBarBadge.foreground#353554
- badge.background#94e2d5
- badge.foreground#1e1e2e
- breadcrumb.activeSelectionForeground#cdd6f4
- breadcrumb.background#1e1e2e
- breadcrumb.focusForeground#cdd6f4
- breadcrumb.foreground#505365
- breadcrumbPicker.background#181825
- button.background#181825
- button.foreground#cdd6f4
- charts.blue#89b4fa
- charts.foreground#97abed
- charts.green#a6e3a1
- charts.lines#94e2d5
- charts.orange#fab387
- charts.purple#cba6f7
- charts.red#f38ba8
- charts.yellow#f9e2af
- checkbox.background#181825
- checkbox.border#181825
- checkbox.foreground#cdd6f4
- contrastBorder#505365
- debugConsole.errorForeground#f38ba8
- debugConsole.infoForeground#fab387
- debugConsole.warningForeground#f9e2af
- debugIcon.breakpointForeground#f38ba8
- debugToolBar.background#181825
- diffEditor.insertedTextBackground#d3f1d040
- diffEditor.removedTextBackground#f9c2d240
- dropdown.background#1e1e2e
- dropdown.border#505365
- dropdown.foreground#cdd6f4
- editor.background#1e1e2e
- editor.findMatchBackground#353554
- editor.findMatchBorder#353554
- editor.findMatchHighlightBackground#353554
- editor.findMatchHighlightBorder#35355440
- editor.foldBackground#181825
- editor.foreground#cdd6f4
- editor.hoverHighlightBackground#181825
- editor.inactiveSelectionBackground#353554
- editor.lineHighlightBackground#505365
- editor.lineHighlightBorder#505365
- editor.rangeHighlightBackground#94e2d5
- editor.selectionBackground#353554
- editor.selectionHighlightBackground#353554
- editor.snippetFinalTabstopHighlightBackground#1e1e2e
- editor.snippetFinalTabstopHighlightBorder#94e2d5
- editor.snippetTabstopHighlightBackground#1e1e2e
- editor.snippetTabstopHighlightBorder#505365
- editor.wordHighlightBackground#505365
- editor.wordHighlightBorder#505365
- editor.wordHighlightStrongBackground#6c7086
- editor.wordHighlightStrongBorder#6c7086
- editorBracketHighlight.foreground1#fab387
- editorBracketHighlight.foreground2#fab387
- editorBracketHighlight.foreground3#fab387
- editorBracketHighlight.foreground4#fab387
- editorBracketHighlight.foreground5#fab387
- editorBracketHighlight.foreground6#fab387
- editorBracketHighlight.unexpectedBracket.foreground#f38ba8
- editorBracketMatch.background#181825
- editorBracketMatch.border#94e2d5
- editorBracketPairGuide.activeBackground1#fab38740
- editorBracketPairGuide.activeBackground2#fab38740
- editorBracketPairGuide.activeBackground3#fab38740
- editorBracketPairGuide.activeBackground4#fab38740
- editorBracketPairGuide.activeBackground5#fab38740
- editorBracketPairGuide.activeBackground6#fab38740
- editorBracketPairGuide.background1#fab38720
- editorBracketPairGuide.background2#fab38720
- editorBracketPairGuide.background3#fab38720
- editorBracketPairGuide.background4#fab38720
- editorBracketPairGuide.background5#fab38720
- editorBracketPairGuide.background6#fab38720
- editorCodeLens.foreground#97abed
- editorCursor.foreground#
- editorError.foreground#f38ba8
- editorGroup.border#505365
- editorGroup.dropBackground#353554
- editorGroupHeader.tabsBackground#181825
- editorGutter.addedBackground#a6e3a1
- editorGutter.background#1e1e2e
- editorGutter.deletedBackground#f38ba8
- editorGutter.modifiedBackground#f9e2af
- editorHoverWidget.background#181825
- editorHoverWidget.border#505365
- editorHoverWidget.foreground#cdd6f4
- editorIndentGuide.activeBackground#505365
- editorIndentGuide.background#353554
- editorInfo.foreground#fab387
- editorLineNumber.activeForeground#cdd6f4
- editorLineNumber.foreground#97abed
- editorLink.activeForeground#94e2d5
- editorMarkerNavigation.background#181825
- editorOverviewRuler.addedForeground#a6e3a1
- editorOverviewRuler.border#505365
- editorOverviewRuler.currentContentForeground#a6e3a1
- editorOverviewRuler.deletedForeground#f38ba8
- editorOverviewRuler.errorForeground#f38ba8
- editorOverviewRuler.incomingContentForeground#89b4fa
- editorOverviewRuler.infoForeground#fab387
- editorOverviewRuler.modifiedForeground#f9e2af
- editorOverviewRuler.selectionHighlightForeground#cdd6f4
- editorOverviewRuler.warningForeground#f9e2af
- editorOverviewRuler.wordHighlightForeground#cdd6f4
- editorOverviewRuler.wordHighlightStrongForeground#cdd6f4
- editorRuler.foreground#353554
- editorSuggestWidget.background#181825
- editorSuggestWidget.foreground#cdd6f4
- editorSuggestWidget.selectedBackground#353554
- editorWarning.foreground#f9e2af
- editorWhitespace.foreground#6c7086
- editorWidget.background#181825
- errorForeground#f38ba8
- extensionButton.prominentForeground#cdd6f4
- extensionButton.prominentHoverBackground#a6e3a1
- focusBorder#94e2d5
- foreground#cdd6f4
- gitDecoration.addedResourceForeground#a6e3a1
- gitDecoration.conflictingResourceForeground#f9e2af
- gitDecoration.deletedResourceForeground#f38ba8
- gitDecoration.ignoredResourceForeground#97abed
- gitDecoration.modifiedResourceForeground#fab387
- gitDecoration.renamedResourceForeground#fab387
- gitDecoration.stageModifiedResourceForeground#f9e2af
- gitDecoration.submoduleResourceForeground#94e2d5
- gitDecoration.untrackedResourceForeground#a6e3a1
- input.background#1e1e2e
- input.border#505365
- input.foreground#cdd6f4
- input.placeholderForeground#97abed
- inputOption.activeBorder#94e2d5
- inputValidation.errorBackground#1e1e2e
- inputValidation.errorBorder#505365
- inputValidation.errorForeground#f38ba8
- inputValidation.infoBackground#1e1e2e
- inputValidation.infoBorder#505365
- inputValidation.infoForeground#fab387
- inputValidation.warningBackground#1e1e2e
- inputValidation.warningBorder#505365
- inputValidation.warningForeground#f9e2af
- list.activeSelectionBackground#353554
- list.activeSelectionForeground#cdd6f4
- list.dropBackground#181825
- list.errorForeground#f38ba8
- list.focusBackground#353554
- list.highlightForeground#f9e2af
- list.hoverBackground#353554
- list.inactiveSelectionBackground#353554
- list.warningForeground#f9e2af
- listFilterWidget.background#1e1e2e
- listFilterWidget.noMatchesOutline#f38ba8
- listFilterWidget.outline#353554
- merge.currentHeaderBackground#a6e3a1
- merge.incomingHeaderBackground#89b4fa
- minimap.background#1e1e2e
- minimap.findMatchHighlight#353554
- minimap.selectionHighlight#353554
- minimapGutter.addedBackground#a6e3a1
- minimapGutter.deletedBackground#f38ba8
- minimapGutter.modifiedBackground#f9e2af
- notification.background#1e1e2e
- notification.buttonBackground#353554
- notification.buttonForeground#cdd6f4
- notification.buttonHoverBackground#353554
- notification.errorBackground#f38ba8
- notification.errorForeground#1e1e2e
- notification.foreground#cdd6f4
- notification.infoBackground#fab387
- notification.infoForeground#1e1e2e
- notification.warningBackground#f9e2af
- notification.warningForeground#1e1e2e
- notificationCenter.border#505365
- notificationCenterHeader.background#1e1e2e
- notificationCenterHeader.foreground#cdd6f4
- notificationLink.foreground#94e2d5
- notifications.background#1e1e2e
- notifications.border#505365
- notifications.foreground#cdd6f4
- notificationsErrorIcon.foreground#f38ba8
- notificationsInfoIcon.foreground#fab387
- notificationsWarningIcon.foreground#f9e2af
- notificationToast.border#505365
- panel.background#1e1e2e
- panel.border#505365
- panelInput.border#505365
- panelTitle.activeBorder#94e2d5
- panelTitle.activeForeground#cdd6f4
- panelTitle.inactiveForeground#97abed
- peekView.border#505365
- peekViewEditor.background#1e1e2e
- peekViewEditor.matchHighlightBackground#353554
- peekViewResult.background#181825
- peekViewResult.fileForeground#cdd6f4
- peekViewResult.lineForeground#cdd6f4
- peekViewResult.matchHighlightBackground#353554
- peekViewResult.selectionBackground#353554
- peekViewResult.selectionForeground#cdd6f4
- peekViewTitle.background#181825
- peekViewTitleDescription.foreground#97abed
- peekViewTitleLabel.foreground#cdd6f4
- pickerGroup.border#505365
- pickerGroup.foreground#94e2d5
- progressBar.background#94e2d5
- quickInput.background#181825
- quickInput.foreground#cdd6f4
- quickInputList.focusBackground#353554
- scrollbar.shadow#353554
- scrollbarSlider.activeBackground#97abed80
- scrollbarSlider.background#97abed40
- scrollbarSlider.hoverBackground#97abed60
- selection.background#353554
- settings.checkboxBackground#181825
- settings.checkboxBorder#505365
- settings.checkboxForeground#cdd6f4
- settings.dropdownBackground#181825
- settings.dropdownBorder#505365
- settings.dropdownForeground#cdd6f4
- settings.headerForeground#cdd6f4
- settings.modifiedItemIndicator#f9e2af
- settings.numberInputBackground#181825
- settings.numberInputBorder#181825
- settings.numberInputForeground#cdd6f4
- settings.textInputBackground#181825
- settings.textInputBorder#181825
- settings.textInputForeground#cdd6f4
- sideBar.background#1e1e2e
- sideBar.border#505365
- sideBar.foreground#cdd6f4
- sideBarSectionHeader.background#1e1e2e
- sideBarSectionHeader.border#505365
- sideBarTitle.foreground#cdd6f4
- statusBar.background#181825
- statusBar.debuggingForeground#181825
- statusBar.foreground#cdd6f4
- statusBar.noFolderBackground#181825
- statusBar.noFolderForeground#cdd6f4
- statusBarItem.prominentBackground#f38ba8
- statusBarItem.prominentHoverBackground#f9e2af
- statusBarItem.remoteBackground#94e2d5
- statusBarItem.remoteForeground#1e1e2e
- tab.activeBackground#353554
- tab.activeBorderTop#94e2d580
- tab.activeForeground#ffffff
- tab.border#505365
- tab.inactiveBackground#181825
- tab.inactiveForeground#97abed
- terminal.ansiBlack#1e1e2e
- terminal.ansiBlue#89b4fa
- terminal.ansiBrightBlack#353554
- terminal.ansiBrightBlue#c4d9fc
- terminal.ansiBrightCyan#c4efe8
- terminal.ansiBrightGreen#d3f1d0
- terminal.ansiBrightMagenta#ece0fb
- terminal.ansiBrightRed#f9c2d2
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#fcf6e9
- terminal.ansiCyan#94e2d5
- terminal.ansiGreen#a6e3a1
- terminal.ansiMagenta#cba6f7
- terminal.ansiRed#f38ba8
- terminal.ansiWhite#cdd6f4
- terminal.ansiYellow#f9e2af
- terminal.background#1e1e2e
- terminal.border#505365
- terminal.foreground#cdd6f4
- terminal.selectionBackground#353554
- terminalCursor.background#1e1e2e
- terminalCursor.foreground#
- textBlockQuote.background#181825
- textLink.foreground#94e2d5
- titleBar.activeBackground#181825
- titleBar.activeForeground#cdd6f4
- titleBar.inactiveBackground#181825
- titleBar.inactiveForeground#97abed
- walkThrough.embeddedEditorBackground#181825
- welcomePage.buttonBackground#353554
- welcomePage.buttonHoverBackground#353554
- widget.shadow#505365
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #505365 | — |
| comment.line | #505365 | — |
| comment.block | #505365 | — |
| comment.block.documentation | #505365 | — |
| invalid | #f9c2d2 | — |
| invalid.deprecated | #fcf6e9 | — |
| invalid.illegal | #f9c2d2 | — |
| string | #a6e3a1 | — |
| string.quoted | #a6e3a1 | — |
| string.quoted.single | #a6e3a1 | — |
| string.quoted.double | #a6e3a1 | — |
| string.regexp | #f38ba8 | — |
| string.template | #a6e3a1 | — |
| string.interpolated, meta.template.expression, punctuation.definition.template-expression | #a6e3a1 | — |
| string.unquoted | #a6e3a1 | — |
| string.other | #a6e3a1 | — |
| constant | #fab387 | — |
| constant.numeric | #fab387 | — |
| constant.numeric.integer | #fab387 | — |
| constant.numeric.float | #fab387 | — |
| constant.numeric.hex | #fab387 | — |
| constant.language | #fab387 | — |
| constant.character | #fab387 | — |
| constant.character.escape | #fab387 | — |
| constant.character.entity | #fab387 | — |
| constant.other | #fab387 | — |
| entity | #cdd6f4 | — |
| entity.name | #cdd6f4 | — |
| entity.name.class | #cdd6f4 | — |
| entity.name.type | #f9e2af | — |
| entity.name.type.class | #f9e2af | — |
| entity.name.type.enum | #f9e2af | — |
| entity.name.type.struct | #f9e2af | — |
| entity.name.function | #89b4fa | — |
| entity.name.function.constructor | #89b4fa | — |
| entity.name.label | #cdd6f4 | — |
| entity.name.tag | #cdd6f4 | — |
| entity.name.type | #f9e2af | — |
| entity.name.namespace, entity.name.module | #f9e2af | — |
| entity.name.section | #94e2d5 | — |
| entity.other | #cdd6f4 | — |
| entity.other.attribute-name | #cba6f7 | — |
| entity.other.inherited-class | #cdd6f4 | — |
| keyword | #cba6f7 | — |
| keyword.control | #cba6f7 | — |
| keyword.control.import, keyword.control.export, keyword.control.from | #cba6f7 | — |
| keyword.control.flow, keyword.control.return, keyword.control.break, keyword.control.continue | #cba6f7 | — |
| keyword.declaration, keyword.other.declaration | #cba6f7 | — |
| keyword.operator | #94e2d5 | — |
| keyword.other | #cba6f7 | — |
| storage | #cba6f7 | — |
| storage.type | #cba6f7 | — |
| storage.modifier | #cba6f7 | — |
| support | #89b4fa | — |
| support.function | #89b4fa | — |
| support.function.builtin | #c4d9fc | — |
| support.class | #89b4fa | — |
| support.type | #89b4fa | — |
| support.constant | #cba6f7 | — |
| support.variable | #94e2d5 | — |
| support.other | #89b4fa | — |
| variable | #cdd6f4 | — |
| variable.parameter | #c4efe8 | — |
| variable.language | #f38ba8 | — |
| variable.other | #cdd6f4 | — |
| variable.other.constant | #cdd6f4 | — |
| variable.other.property, variable.other.member | #cdd6f4 | — |
| variable.other.object | #cdd6f4 | — |
| punctuation | #97abed | — |
| punctuation.separator | #cdd6f4 | — |
| punctuation.definition | #cdd6f4 | — |
| punctuation.definition.string | #a6e3a1 | — |
| punctuation.definition.comment | #505365 | — |
| punctuation.section | #fab387 | — |
| punctuation.brackets | #eba0ac | — |
| punctuation.brackets.round | #eba0ac | — |
| punctuation.brackets.curly | #eba0ac | — |
| punctuation.brackets.square | #eba0ac | — |
| punctuation.brackets.angle | #89dceb | — |
| markup | #fab387 | — |
| markup.bold | #fab387 | bold |
| markup.italic | #fab387 | italic |
| markup.heading, entity.name.section | #cba6f7 | — |
| markup.quote | #fab387 | — |
| markup.underline | #fab387 | underline |
| markup.list, punctuation.definition.list | #fab387 | — |
| markup.list.numbered | #94e2d5 | — |
| markup.list.unnumbered | #94e2d5 | — |
| markup.underline.link | #f9e2af | — |
| markup.raw, markup.inline.raw, markup.fenced_code | #fab387 | — |
| markup.inserted, meta.diff.header.to-file | #d3f1d0 | — |
| markup.changed | #fcf6e9 | — |
| markup.deleted, meta.diff.header.from-file | #f9c2d2 | — |
| source | #cdd6f4 | — |
| text | #cdd6f4 | — |
| meta | #cdd6f4 | — |
| meta.annotation.hex, meta.attribute | #f9e2af | — |
| meta.function | #89b4fa | — |
| meta.class | #cdd6f4 | — |
| meta.block | #cdd6f4 | — |
| meta.tag | #cdd6f4 | — |
| meta.type | #cdd6f4 | — |
| meta.import | #cdd6f4 | — |
| meta.preprocessor | #cdd6f4 | — |
| meta.object.member, meta.object-literal.key | #fab387 | — |
| meta.embedded | #cdd6f4 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...