Hacker's Hideout

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#31383133
• activityBar.activeBorder#BEDE90
• activityBar.activeFocusBorder#78E3FD
• activityBar.background#15171E
• activityBar.border#15171E
• activityBar.dropBorder#B3B3FF
• activityBar.foreground#A2BD7D
• activityBar.inactiveForeground#869C6A
• activityBarBadge.background#78E3FD
• activityBarBadge.foreground#15171E
• badge.background#78E3FD
• badge.foreground#15171E
• breadcrumb.activeSelectionForeground#DAFFA3
• breadcrumb.background#15171E
• breadcrumb.focusForeground#BEDE90
• breadcrumb.foreground#A2BD7D
• breadcrumbPicker.background#15171E
• button.background#B3B3FF
• button.foreground#15171E
• button.hoverBackground#00FFFF
• button.secondaryBackground#BEDE90
• button.secondaryForeground#15171E
• button.secondaryHoverBackground#A2BD7D
• charts.blue#B3B3FF
• charts.foreground#BEDE90
• charts.green#F4B9B2
• charts.lines#697A57
• charts.orange#E5446D
• charts.purple#78E3FD
• charts.red#FF5A34
• charts.yellow#FFD800
• checkbox.background#B3B3FF
• checkbox.border#313831
• checkbox.foreground#15171E
• debugConsole.errorForeground#FF5A34
• debugConsole.infoForeground#B3B3FF
• debugConsole.sourceForeground#78E3FD
• debugConsole.warningForeground#E5446D
• debugConsoleInputIcon.foreground#869C6A
• debugExceptionWidget.background#313831
• debugExceptionWidget.border#313831
• debugIcon.breakpointDisabledForeground#869C6A
• debugIcon.breakpointForeground#FF5A34
• debugIcon.breakpointUnverifiedForeground#A2BD7D
• debugIcon.continueForeground#F4B9B2
• debugIcon.disconnectForeground#E5446D
• debugIcon.pauseForeground#B3B3FF
• debugIcon.restartForeground#E5446D
• debugIcon.startForeground#F4B9B2
• debugIcon.stepBackForeground#DAFFA3
• debugIcon.stepIntoForeground#DAFFA3
• debugIcon.stepOutForeground#DAFFA3
• debugIcon.stepOverForeground#DAFFA3
• debugIcon.stopForeground#FF5A34
• debugTokenExpression.boolean#78E3FD
• debugTokenExpression.error#FF5A34
• debugTokenExpression.name#B3B3FF
• debugTokenExpression.number#E5446D
• debugTokenExpression.string#F4B9B2
• debugTokenExpression.value#DAFFA3
• debugToolBar.background#313831
• debugToolBar.border#4D5944
• debugView.exceptionLabelBackground#313831
• debugView.exceptionLabelForeground#FFD800
• debugView.stateLabelBackground#313831
• debugView.stateLabelForeground#B3B3FF
• debugView.valueChangedHighlight#FFD80033
• descriptionForeground#BEDE90
• diffEditor.border#313831
• diffEditor.diagonalFill#3138317f
• diffEditor.insertedTextBackground#F4B9B220
• diffEditor.removedTextBackground#FF5A3420
• dropdown.background#313831
• dropdown.border#313831
• dropdown.foreground#BEDE90
• dropdown.listBackground#313831
• editor.background#15171E
• editor.findMatchBackground#FFD8003f
• editor.findMatchHighlightBackground#FFD80033
• editor.findRangeHighlightBackground#313831
• editor.focusedStackFrameHighlightBackground#F4B9B23f
• editor.foldBackground#31383166
• editor.foreground#DAFFA3
• editor.hoverHighlightBackground#4D59447f
• editor.inactiveSelectionBackground#B3B3FF33
• editor.lineHighlightBackground#15171E
• editor.lineHighlightBorder#313831
• editor.rangeHighlightBackground#FFD80033
• editor.selectionBackground#B3B3FF33
• editor.selectionForeground#DAFFA3
• editor.selectionHighlightBackground#313831
• editor.snippetFinalTabstopHighlightBackground#4D59447f
• editor.snippetTabstopHighlightBackground#3138317f
• editor.stackFrameHighlightBackground#00FFFF3f
• editor.symbolHighlightBackground#78E3FD33
• editor.wordHighlightBackground#78E3FD33
• editor.wordHighlightStrongBackground#E5446D33
• editorBracketHighlight.foreground1#DAFFA3
• editorBracketHighlight.foreground2#FFD800
• editorBracketHighlight.foreground3#00FFFF
• editorBracketHighlight.foreground4#78E3FD
• editorBracketHighlight.foreground5#F4B9B2
• editorBracketHighlight.foreground6#B3B3FF
• editorBracketMatch.background#313831
• editorBracketMatch.border#4D5944
• editorCodeLens.foreground#A2BD7D
• editorCursor.background#15171E
• editorCursor.foreground#78E3FD
• editorError.border#DAFFA3
• editorError.foreground#FF5A34
• editorGroup.border#313831
• editorGroup.dropBackground#4D59447f
• editorGroup.emptyBackground#15171E
• editorGroup.focusedEmptyBorder#313831
• editorGroupHeader.border#15171E
• editorGroupHeader.noTabsBackground#15171E
• editorGroupHeader.tabsBackground#15171E
• editorGroupHeader.tabsBorder#15171E
• editorGutter.addedBackground#F4B9B2
• editorGutter.background#15171E
• editorGutter.commentRangeForeground#697A57
• editorGutter.deletedBackground#FF5A34
• editorGutter.foldingControlForeground#A2BD7D
• editorGutter.modifiedBackground#FFD800
• editorHint.border#869C6A
• editorHint.foreground#E5446D
• editorHoverWidget.background#313831
• editorHoverWidget.border#313831
• editorHoverWidget.foreground#BEDE90
• editorHoverWidget.statusBarBackground#B3B3FF33
• editorIndentGuide.activeBackground1#4D5944
• editorIndentGuide.background1#313831
• editorInfo.border#A2BD7D
• editorInfo.foreground#B3B3FF
• editorLightBulb.foreground#FFD800
• editorLightBulbAutoFix.foreground#B3B3FF
• editorLineNumber.activeForeground#869C6A
• editorLineNumber.foreground#4D5944
• editorLink.activeForeground#00FFFF
• editorMarkerNavigation.background#313831
• editorMarkerNavigationError.background#FF5A34
• editorMarkerNavigationInfo.background#B3B3FF
• editorMarkerNavigationWarning.background#E5446D
• editorOverviewRuler.addedForeground#F4B9B27f
• editorOverviewRuler.border#313831
• editorOverviewRuler.bracketMatchForeground#697A57
• editorOverviewRuler.commonContentForeground#78E3FD
• editorOverviewRuler.currentContentForeground#00FFFF
• editorOverviewRuler.deletedForeground#FF5A347f
• editorOverviewRuler.errorForeground#FF5A347f
• editorOverviewRuler.findMatchForeground#FFD800bf
• editorOverviewRuler.incomingContentForeground#B3B3FF
• editorOverviewRuler.infoForeground#B3B3FF7f
• editorOverviewRuler.modifiedForeground#FFD8007f
• editorOverviewRuler.rangeHighlightForeground#4D5944bf
• editorOverviewRuler.selectionHighlightForeground#313831bf
• editorOverviewRuler.warningForeground#E5446D7f
• editorOverviewRuler.wordHighlightForeground#4D5944bf
• editorOverviewRuler.wordHighlightStrongForeground#697A57bf
• editorPane.background#15171E
• editorRuler.foreground#313831
• editorSuggestWidget.background#313831
• editorSuggestWidget.border#313831
• editorSuggestWidget.foreground#BEDE90
• editorSuggestWidget.highlightForeground#E5446D
• editorSuggestWidget.selectedBackground#4D5944
• editorUnnecessaryCode.opacity#0000007f
• editorWarning.border#BEDE90
• editorWarning.foreground#E5446D
• editorWhitespace.foreground#313831
• editorWidget.background#313831
• editorWidget.border#313831
• editorWidget.foreground#BEDE90
• editorWidget.resizeBorder#B3B3FF
• errorForeground#FF5A34
• extensionBadge.remoteBackground#E5446D
• extensionBadge.remoteForeground#15171E
• extensionButton.prominentBackground#B3B3FF
• extensionButton.prominentForeground#15171E
• extensionButton.prominentHoverBackground#00FFFF
• focusBorder#78E3FD
• foreground#DAFFA3
• gitDecoration.addedResourceForeground#F4B9B2
• gitDecoration.conflictingResourceForeground#00FFFF
• gitDecoration.deletedResourceForeground#FF5A34
• gitDecoration.ignoredResourceForeground#697A57
• gitDecoration.modifiedResourceForeground#FFD800
• gitDecoration.stageDeletedResourceForeground#FF5A34
• gitDecoration.stageModifiedResourceForeground#00FFFF
• gitDecoration.submoduleResourceForeground#E5446D
• gitDecoration.untrackedResourceForeground#78E3FD
• icon.foreground#BEDE90
• input.background#313831
• input.border#313831
• input.foreground#BEDE90
• input.placeholderForeground#4D5944
• inputOption.activeBackground#4D5944
• inputOption.activeBorder#00FFFF
• inputOption.activeForeground#DAFFA3
• inputValidation.errorBackground#313831
• inputValidation.errorBorder#FF5A34
• inputValidation.errorForeground#FF5A34
• inputValidation.infoBackground#313831
• inputValidation.infoBorder#B3B3FF
• inputValidation.infoForeground#B3B3FF
• inputValidation.warningBackground#313831
• inputValidation.warningBorder#E5446D
• inputValidation.warningForeground#E5446D
• list.activeSelectionBackground#78E3FD33
• list.activeSelectionForeground#DAFFA3
• list.deemphasizedForeground#869C6A
• list.dropBackground#313831
• list.errorForeground#FF5A34
• list.filterMatchBackground#FFD80033
• list.filterMatchBorder#FFD80033
• list.focusBackground#697A573f
• list.focusForeground#DAFFA3
• list.highlightForeground#FFD800
• list.hoverBackground#31383133
• list.hoverForeground#DAFFA3
• list.inactiveFocusBackground#3138313f
• list.inactiveSelectionBackground#4D59443f
• list.inactiveSelectionForeground#BEDE90
• list.invalidItemForeground#FF5A34
• list.warningForeground#FFD800
• listFilterWidget.background#313831
• listFilterWidget.noMatchesOutline#FF5A34
• listFilterWidget.outline#B3B3FF
• menu.background#15171E
• menu.foreground#BEDE90
• menu.selectionBackground#313831
• menu.selectionForeground#DAFFA3
• menu.separatorBackground#4D5944
• menubar.selectionBackground#313831
• menubar.selectionForeground#DAFFA3
• merge.border#869C6A
• merge.commonContentBackground#78E3FD4c
• merge.commonHeaderBackground#78E3FD4c
• merge.currentContentBackground#00FFFF4c
• merge.currentHeaderBackground#00FFFF4c
• merge.incomingContentBackground#B3B3FF4c
• merge.incomingHeaderBackground#B3B3FF4c
• minimap.background#15171E
• minimap.errorHighlight#FF5A3480
• minimap.findMatchHighlight#FFD800
• minimap.selectionHighlight#B3B3FF80
• minimap.warningHighlight#E5446D80
• minimapGutter.addedBackground#F4B9B280
• minimapGutter.deletedBackground#FF5A3480
• minimapGutter.modifiedBackground#FFD80080
• minimapSlider.activeBackground#697A5733
• minimapSlider.background#31383133
• minimapSlider.hoverBackground#4D594433
• notebook.cellBorderColor#3138313f
• notebook.cellHoverBackground#3138313f
• notebook.cellInsertionIndicator#F4B9B2
• notebook.cellStatusBarItemHoverBackground#3138313f
• notebook.cellToolbarSeparator#3138313f
• notebook.focusedCellBackground#3138317f
• notebook.focusedCellBorder#78E3FD
• notebook.focusedEditorBorder#313831
• notebook.inactiveFocusedCellBorder#A2BD7D
• notebook.outputContainerBackgroundColor#15171E
• notebook.selectedCellBorder#869C6A
• notebook.symbolHighlightBackground#78E3FD3f
• notebookScrollbarSlider.activeBackground#A2BD7D7f
• notebookScrollbarSlider.background#697A577f
• notebookScrollbarSlider.hoverBackground#869C6A7f
• notebookStatusErrorIcon.foreground#FF5A34
• notebookStatusRunningIcon.foreground#B3B3FF
• notebookStatusSuccessIcon.foreground#F4B9B2
• notificationCenterHeader.background#4D5944
• notificationCenterHeader.foreground#BEDE90
• notificationLink.foreground#B3B3FF
• notifications.background#313831
• notifications.border#697A57
• notifications.foreground#DAFFA3
• notificationsErrorIcon.foreground#FF5A34
• notificationsInfoIcon.foreground#B3B3FF
• notificationsWarningIcon.foreground#E5446D
• notificationToast.border#697A57
• panel.background#15171E
• panel.border#313831
• panel.dropBorder#B3B3FF
• panelSection.border#313831
• panelSection.dropBackground#3138313f
• panelSectionHeader.background#4D5944
• panelSectionHeader.border#15171E
• panelSectionHeader.foreground#BEDE90
• panelTitle.activeBorder#697A57
• panelTitle.activeForeground#BEDE90
• panelTitle.inactiveForeground#869C6A
• peekView.border#E5446D
• peekViewEditor.background#3138317f
• peekViewEditor.matchHighlightBackground#FFD8007f
• peekViewEditorGutter.background#3138317f
• peekViewResult.background#313831
• peekViewResult.fileForeground#BEDE90
• peekViewResult.lineForeground#4D5944
• peekViewResult.matchHighlightBackground#FFD800
• peekViewResult.selectionBackground#697A57
• peekViewResult.selectionForeground#DAFFA3
• peekViewTitle.background#313831
• peekViewTitleDescription.foreground#A2BD7D
• peekViewTitleLabel.foreground#DAFFA3
• pickerGroup.border#4D5944
• pickerGroup.foreground#869C6A
• problemsErrorIcon.foreground#FF5A34
• problemsInfoIcon.foreground#B3B3FF
• problemsWarningIcon.foreground#E5446D
• progressBar.background#F4B9B2
• quickInput.background#313831
• quickInput.foreground#DAFFA3
• quickInputTitle.background#4D5944
• sash.hoverBorder#B3B3FF
• scm.providerBorder#4D5944
• scrollbar.shadow#15171E
• scrollbarSlider.activeBackground#A2BD7D7f
• scrollbarSlider.background#697A577f
• scrollbarSlider.hoverBackground#869C6A7f
• selection.background#4D5944
• settings.checkboxBackground#B3B3FF
• settings.checkboxBorder#B3B3FF
• settings.checkboxForeground#15171E
• settings.dropdownBackground#313831
• settings.dropdownForeground#BEDE90
• settings.dropdownListBorder#4D5944
• settings.focusedRowBackground#15171E
• settings.headerForeground#DAFFA3
• settings.modifiedItemIndicator#00FFFF
• settings.numberInputBackground#313831
• settings.numberInputForeground#BEDE90
• settings.textInputBackground#313831
• settings.textInputForeground#BEDE90
• sideBar.background#15171E
• sideBar.border#313831
• sideBar.dropBackground#3138313f
• sideBar.foreground#BEDE90
• sideBarSectionHeader.background#4D5944
• sideBarSectionHeader.border#15171E
• sideBarSectionHeader.foreground#BEDE90
• sideBarTitle.foreground#A2BD7D
• statusBar.background#B3B3FF
• statusBar.border#15171E
• statusBar.debuggingBackground#E5446D
• statusBar.debuggingBorder#15171E
• statusBar.debuggingForeground#15171E
• statusBar.foreground#15171E
• statusBar.noFolderBackground#78E3FD
• statusBar.noFolderBorder#15171E
• statusBar.noFolderForeground#15171E
• statusBarItem.activeBackground#00FFFF
• statusBarItem.errorBackground#FF5A34
• statusBarItem.errorForeground#15171E
• statusBarItem.hoverBackground#F4B9B2
• statusBarItem.prominentBackground#00FFFF
• statusBarItem.prominentHoverBackground#F4B9B2
• statusBarItem.remoteBackground#00FFFF
• statusBarItem.remoteForeground#15171E
• symbolIcon.arrayForeground#E5446D
• symbolIcon.booleanForeground#78E3FD
• symbolIcon.classForeground#B3B3FF
• symbolIcon.colorForeground#00FFFF
• symbolIcon.constantForeground#F4B9B2
• symbolIcon.constructorForeground#78E3FD
• symbolIcon.enumeratorForeground#00FFFF
• symbolIcon.enumeratorMemberForeground#B3B3FF
• symbolIcon.eventForeground#E5446D
• symbolIcon.fieldForeground#FF5A34
• symbolIcon.fileForeground#BEDE90
• symbolIcon.folderForeground#A2BD7D
• symbolIcon.functionForeground#78E3FD
• symbolIcon.interfaceForeground#FF5A34
• symbolIcon.keyForeground#FFD800
• symbolIcon.keywordForeground#B3B3FF
• symbolIcon.methodForeground#00FFFF
• symbolIcon.moduleForeground#00FFFF
• symbolIcon.namespaceForeground#B3B3FF
• symbolIcon.nullForeground#FF5A34
• symbolIcon.numberForeground#E5446D
• symbolIcon.objectForeground#DAFFA3
• symbolIcon.operatorForeground#FF5A34
• symbolIcon.packageForeground#E5446D
• symbolIcon.propertyForeground#00FFFF
• symbolIcon.referenceForeground#E5446D
• symbolIcon.snippetForeground#A2BD7D
• symbolIcon.stringForeground#F4B9B2
• symbolIcon.structForeground#B3B3FF
• symbolIcon.textForeground#DAFFA3
• symbolIcon.typeParameterForeground#B3B3FF
• symbolIcon.unitForeground#FFD800
• symbolIcon.variableForeground#E5446D
• tab.activeBackground#15171E
• tab.activeForeground#BEDE90
• tab.activeModifiedBorder#FFD800
• tab.border#15171E
• tab.hoverBackground#31383180
• tab.hoverForeground#A2BD7D
• tab.inactiveBackground#313831
• tab.inactiveForeground#697A57
• tab.inactiveModifiedBorder#FFD800
• tab.lastPinnedBorder#E5446D
• tab.unfocusedActiveBackground#15171E
• tab.unfocusedActiveForeground#697A57
• tab.unfocusedActiveModifiedBorder#FFD800
• tab.unfocusedHoverBackground#31383180
• tab.unfocusedHoverForeground#869C6A
• tab.unfocusedInactiveBackground#313831
• tab.unfocusedInactiveForeground#4D5944
• tab.unfocusedInactiveModifiedBorder#FFD800
• terminal.ansiBlack#15171E
• terminal.ansiBlue#B3B3FF
• terminal.ansiBrightBlack#313831
• terminal.ansiBrightBlue#B3B3FF
• terminal.ansiBrightCyan#00FFFF
• terminal.ansiBrightGreen#00FFFF
• terminal.ansiBrightMagenta#E5446D
• terminal.ansiBrightRed#E5446D
• terminal.ansiBrightWhite#DAFFA3
• terminal.ansiBrightYellow#FFD800
• terminal.ansiCyan#00FFFF
• terminal.ansiGreen#F4B9B2
• terminal.ansiMagenta#E5446D
• terminal.ansiRed#FF5A34
• terminal.ansiWhite#BEDE90
• terminal.ansiYellow#FFD800
• terminal.background#15171E
• terminal.foreground#BEDE90
• terminal.selectionBackground#B3B3FF7f
• terminalCursor.background#313831
• terminalCursor.foreground#A2BD7D
• testing.iconErrored#FF5A34
• testing.iconFailed#E5446D
• testing.iconPassed#F4B9B2
• testing.iconQueued#00FFFF
• testing.iconSkipped#869C6A
• testing.iconUnset#A2BD7D
• testing.message.error.decorationForeground#FF5A34
• testing.message.error.lineBackground#FF5A343f
• testing.message.info.decorationForeground#B3B3FF
• testing.message.info.lineBackground#B3B3FF3f
• testing.peekBorder#697A57
• testing.runAction#B3B3FF
• textBlockQuote.background#313831
• textBlockQuote.border#313831
• textCodeBlock.background#15171E
• textLink.activeForeground#00FFFF
• textLink.foreground#B3B3FF
• textPreformat.foreground#E5446D
• textSeparator.foreground#869C6A
• titleBar.activeBackground#15171E
• titleBar.activeForeground#A2BD7D
• titleBar.inactiveBackground#15171E
• titleBar.inactiveForeground#697A57
• tree.indentGuidesStroke#313831
• walkThrough.embeddedEditorBackground#15171E
• welcomePage.background#15171E
• welcomePage.progress.background#B3B3FF
• welcomePage.progress.foreground#15171E
• widget.shadow#15171E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...