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