inkpot

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#392e5e
• activityBar.border#1b1b33
• activityBar.dropBackground#392e5e
• activityBar.foreground#b7b7f7
• activityBar.inactiveForeground#9387C2
• activityBarBadge.background#9387C2
• activityBarBadge.foreground#1b1b33
• badge.background#392e5e
• badge.foreground#00ff00
• breadcrumb.activeSelectionForeground#b7b7f7
• breadcrumb.background#463B75
• breadcrumb.focusForeground#b7b7f7
• breadcrumb.foreground#b7b7f7
• breadcrumbPicker.background#463B75
• button.background#392e5e
• button.foreground#b7b7f7
• button.hoverBackground#9387C2
• debugExceptionWidget.background#392e5e
• debugExceptionWidget.border#392e5e
• debugToolBar.background#392e5e
• debugToolBar.border#392e5e
• descriptionForeground#b7b7f7
• diffEditor.border#9387C2
• diffEditor.insertedTextBackground#00ff0050
• diffEditor.insertedTextBorder#00ff0000
• diffEditor.removedTextBackground#9387C250
• diffEditor.removedTextBorder#9387C200
• dropdown.background#392e5e
• dropdown.border#392e5e
• dropdown.foreground#b7b7f7
• dropdown.listBackground#392e5e
• editor.background#1b1b33
• editor.findMatchBackground#b7b7f760
• editor.findMatchBorder#b7b7f795
• editor.findMatchHighlightBackground#b7b7f760
• editor.findMatchHighlightBorder#b7b7f760
• editor.findRangeHighlightBackground#b7b7f760
• editor.findRangeHighlightBorder#b7b7f760
• editor.focusedStackFrameHighlightBackground#392e5e
• editor.foreground#9387C2
• editor.hoverHighlightBackground#00ff0050
• editor.inactiveSelectionBackground#b7b7f750
• editor.lineHighlightBackground#1b1b33
• editor.lineHighlightBorder#1b1b33
• editor.rangeHighlightBackground#ff000000
• editor.rangeHighlightBorder#ff000000
• editor.selectionBackground#b7b7f760
• editor.selectionForeground#b7b7f750
• editor.selectionHighlightBackground#b7b7f760
• editor.selectionHighlightBorder#b7b7f700
• editor.snippetFinalTabstopHighlightBackground#392e5e
• editor.snippetFinalTabstopHighlightBorder#392e5e
• editor.snippetTabstopHighlightBackground#392e5e
• editor.snippetTabstopHighlightBorder#392e5e
• editor.stackFrameHighlightBackground#392e5e
• editor.wordHighlightBackground#b7b7f760
• editor.wordHighlightBorder#b7b7f795
• editor.wordHighlightStrongBackground#b7b7f770
• editor.wordHighlightStrongBorder#b7b7f795
• editorBracketMatch.background#ff8bff60
• editorBracketMatch.border#ff8bff60
• editorCodeLens.foreground#9387C2
• editorCursor.background#00ff00
• editorCursor.foreground#00ff00
• editorError.border#ff0000
• editorError.foreground#ff0000
• editorGroup.border#392e5e
• editorGroup.dropBackground#392e5e
• editorGroup.emptyBackground#392e5e
• editorGroup.focusedEmptyBorder#392e5e
• editorGroupHeader.noTabsBackground#392e5e
• editorGroupHeader.tabsBackground#392e5e
• editorGroupHeader.tabsBorder#392e5e
• editorGutter.background#392e5e
• editorHint.border#409090
• editorHint.foreground#409090
• editorHoverWidget.background#392e5e
• editorHoverWidget.border#9387C2
• editorIndentGuide.activeBackground#9387C2
• editorIndentGuide.background#9387C2
• editorInfo.border#9387C2
• editorInfo.foreground#9387C2
• editorLineNumber.activeForeground#00ff00
• editorLineNumber.foreground#9387C2
• editorLink.activeForeground#9387C2
• editorMarkerNavigation.background#392e5e
• editorMarkerNavigationError.background#9387C2
• editorMarkerNavigationInfo.background#409090
• editorMarkerNavigationWarning.background#f0ad6d
• editorOverviewRuler.addedForeground#409090
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#ff8bff
• editorOverviewRuler.commonContentForeground#ff0000
• editorOverviewRuler.currentContentForeground#ff0000
• editorOverviewRuler.deletedForeground#f0ad6d
• editorOverviewRuler.errorForeground#ff0000
• editorOverviewRuler.findMatchForeground#9387C2
• editorOverviewRuler.incomingContentForeground#ff0000
• editorOverviewRuler.infoForeground#9387C2
• editorOverviewRuler.modifiedForeground#ff0000
• editorOverviewRuler.rangeHighlightForeground#9387C2
• editorOverviewRuler.selectionHighlightForeground#9387C2
• editorOverviewRuler.warningForeground#f0ad6d
• editorOverviewRuler.wordHighlightForeground#9387C2
• editorOverviewRuler.wordHighlightStrongForeground#9387C2
• editorPane.background#392e5e
• editorRuler.foreground#9387C2
• editorSuggestWidget.background#392e5e
• editorSuggestWidget.border#9387C2
• editorSuggestWidget.foreground#b7b7f7
• editorSuggestWidget.highlightForeground#ff8bff
• editorSuggestWidget.selectedBackground#9387C2
• editorUnnecessaryCode.border#b7b7f7
• editorUnnecessaryCode.opacity#b7b7f760
• editorWarning.border#f0ad6d
• editorWarning.foreground#f0ad6d
• editorWhitespace.foreground#b7b7f7
• editorWidget.background#392e5e
• editorWidget.border#392e5e
• editorWidget.resizeBorder#392e5e
• errorForeground#f0ad6d
• extensionButton.prominentBackground#392e5e
• extensionButton.prominentForeground#8b8bcd
• extensionButton.prominentHoverBackground#392e5e50
• focusBorder#9387C2
• foreground#b7b7f7
• gitDecoration.addedResourceForeground#ff0000
• gitDecoration.conflictingResourceForeground#ff0000
• gitDecoration.deletedResourceForeground#ff0000
• gitDecoration.ignoredResourceForeground#ff0000
• gitDecoration.modifiedResourceForeground#ff0000
• gitDecoration.submoduleResourceForeground#ff0000
• gitDecoration.untrackedResourceForeground#ff0000
• input.background#392e5e
• input.border#392e5e
• input.foreground#b7b7f7
• input.placeholderForeground#b7b7f7
• inputOption.activeBackground#392e5e
• inputOption.activeBorder#392e5e
• inputValidation.errorBackground#392e5e
• inputValidation.errorBorder#392e5e
• inputValidation.errorForeground#ff0000
• inputValidation.infoBackground#392e5e
• inputValidation.infoBorder#392e5e
• inputValidation.infoForeground#409090
• inputValidation.warningBackground#392e5e
• inputValidation.warningBorder#392e5e
• inputValidation.warningForeground#f0ad6d
• list.activeSelectionBackground#b7b7f750
• list.activeSelectionForeground#eeeeee
• list.dropBackground#8b8bcd
• list.errorForeground#00ff00
• list.focusBackground#b7b7f750
• list.focusForeground#b7b7f7
• list.highlightForeground#b7b7f7
• list.hoverBackground#b7b7f750
• list.hoverForeground#b7b7f7
• list.inactiveFocusBackground#b7b7f750
• list.inactiveSelectionBackground#b7b7f750
• list.inactiveSelectionForeground#b7b7f7
• list.invalidItemForeground#ff0000
• list.warningForeground#f0ad6d
• listFilterWidget.background#b7b7f750
• listFilterWidget.noMatchesOutline#b7b7f7
• listFilterWidget.outline#b7b7f7
• menu.background#392e5e
• menu.foreground#b7b7f7
• menu.selectionBackground#8b8bcd
• menu.selectionBorder#9387C2
• menu.selectionForeground#b7b7f7
• menu.separatorBackground#b7b7f7
• menubar.selectionBackground#8b8bcd
• menubar.selectionBorder#9387C2
• menubar.selectionForeground#b7b7f7
• merge.border#ff0000
• merge.commonContentBackground#ff0000
• merge.commonHeaderBackground#ff0000
• merge.currentContentBackground#ff0000
• merge.currentHeaderBackground#ff0000
• merge.incomingContentBackground#ff0000
• merge.incomingHeaderBackground#ff0000
• minimap.findMatchHighlight#00ff00
• notificationCenter.border#392e5e
• notificationCenterHeader.background#392e5e
• notificationCenterHeader.foreground#b7b7f7
• notificationLink.foreground#00ff00
• notifications.background#392e5e
• notifications.border#392e5e
• notifications.foreground#b7b7f7
• notificationToast.border#392e5e
• panel.background#1b1b33
• panel.border#392e5e
• panel.dropBackground#ff8bff
• panelInput.border#00ff00
• panelTitle.activeBorder#392e5e
• panelTitle.activeForeground#00ff00
• panelTitle.inactiveForeground#b7b7f7
• peekView.border#9387C2
• peekViewEditor.background#1b1b33
• peekViewEditor.matchHighlightBackground#b7b7f760
• peekViewEditor.matchHighlightBorder#b7b7f700
• peekViewEditorGutter.background#392e5e
• peekViewResult.background#392e5e
• peekViewResult.fileForeground#392e5e
• peekViewResult.lineForeground#392e5e
• peekViewResult.matchHighlightBackground#b7b7f760
• peekViewResult.selectionBackground#b7b7f760
• peekViewResult.selectionForeground#b7b7f7
• peekViewTitle.background#392e5e
• peekViewTitleDescription.foreground#b7b7f7
• peekViewTitleLabel.foreground#ff8bff
• pickerGroup.border#392e5e
• pickerGroup.foreground#00ff00
• progressBar.background#00ff00
• scrollbar.shadow#392e5e
• scrollbarSlider.activeBackground#392e5e
• scrollbarSlider.background#392e5e
• scrollbarSlider.hoverBackground#392e5e
• selection.background#b7b7f780
• settings.checkboxBackground#3e3e75
• settings.checkboxBorder#3e3e75
• settings.checkboxForeground#b7b7f7
• settings.dropdownBackground#3e3e75
• settings.dropdownBorder#3e3e75
• settings.dropdownForeground#b7b7f7
• settings.dropdownListBorder#3e3e75
• settings.headerForeground#b7b7f7
• settings.modifiedItemIndicator#3e3e75
• settings.numberInputBackground#3e3e75
• settings.numberInputBorder#3e3e75
• settings.numberInputForeground#b7b7f7
• settings.textInputBackground#3e3e75
• settings.textInputBorder#3e3e75
• settings.textInputForeground#b7b7f7
• sideBar.background#1b1b33
• sideBar.border#392e5e
• sideBar.dropBackground#392e5e
• sideBar.foreground#b7b7f7
• sideBarSectionHeader.background#392e5e
• sideBarSectionHeader.border#392e5e
• sideBarSectionHeader.foreground#b7b7f7
• sideBarTitle.foreground#b7b7f7
• statusBar.background#2f234c
• statusBar.border#3e3e75
• statusBar.debuggingBackground#2f234c
• statusBar.debuggingBorder#2f234c
• statusBar.debuggingForeground#b7b7f7
• statusBar.foreground#b7b7f7
• statusBar.noFolderBackground#2f234c
• statusBar.noFolderBorder#2f234c
• statusBar.noFolderForeground#b7b7f7
• statusBarItem.activeBackground#ff8bff50
• statusBarItem.hoverBackground#ff8bff50
• statusBarItem.prominentBackground#ff8bff50
• statusBarItem.prominentForeground#b7b7f7
• statusBarItem.prominentHoverBackground#ff8bff50
• tab.activeBackground#b7b7f780
• tab.activeBorder#3e3e7580
• tab.activeBorderTop#3e3e7580
• tab.activeForeground#eeeeee
• tab.activeModifiedBorder#3e3e7580
• tab.border#392e5e
• tab.hoverBackground#b7b7f750
• tab.hoverBorder#3e3e7580
• tab.inactiveBackground#463B75
• tab.inactiveForeground#b7b7f7
• tab.inactiveModifiedBorder#b7b7f780
• tab.unfocusedActiveBackground#392e5e
• tab.unfocusedActiveBorder#3e3e7580
• tab.unfocusedActiveBorderTop#3e3e7580
• tab.unfocusedActiveForeground#eeeeee
• tab.unfocusedActiveModifiedBorder#3e3e7580
• tab.unfocusedHoverBackground#3e3e7580
• tab.unfocusedHoverBorder#3e3e7580
• tab.unfocusedInactiveForeground#b7b7f7
• tab.unfocusedInactiveModifiedBorder#3e3e7580
• terminal.ansiBlack#00482a28
• terminal.ansiBlue#00cc6374
• terminal.ansiBrightBlack#003dde66
• terminal.ansiBrightBlue#00fbd677
• terminal.ansiBrightCyan#003c3cee
• terminal.ansiBrightGreen#00f993dd
• terminal.ansiBrightMagenta#006cb8ff
• terminal.ansiBrightRed#00dee4e4
• terminal.ansiBrightWhite#00969a9a
• terminal.ansiBrightYellow#00c47262
• terminal.ansiCyan#007bfa50
• terminal.ansiGreen#00fde98b
• terminal.ansiMagenta#005555ff
• terminal.ansiRed#00c679ff
• terminal.ansiWhite#008cfcfc
• terminal.ansiYellow#00f2f8f8
• terminal.background#1b1b33
• terminal.border#392e5e
• terminal.foreground#00ff00
• terminal.selectionBackground#b7b7f780
• terminalCursor.background#00ff00
• terminalCursor.foreground#00ff00
• textBlockQuote.background#f0ad6d
• textBlockQuote.border#f0ad6d
• textCodeBlock.background#00ff00
• textLink.activeForeground#00ff00
• textLink.foreground#00ff00
• textPreformat.foreground#ff8bff
• textSeparator.foreground#00ff00
• titleBar.activeBackground#392e5e
• titleBar.activeForeground#b7b7f7
• titleBar.border#392e5e
• titleBar.inactiveBackground#392e5e
• titleBar.inactiveForeground#b7b7f7
• tree.indentGuidesStroke#b7b7f7
• walkThrough.embeddedEditorBackground#392e5e
• welcomePage.background#1b1b33
• welcomePage.buttonBackground#3e3e75
• welcomePage.buttonHoverBackground#3e3e7580
• widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).