Homey

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#221f1d
• activityBar.border#4c423b
• activityBar.dropBackground#4c423b
• activityBar.foreground#bda595
• activityBarBadge.background#75ac51
• activityBarBadge.foreground#221f1d
• badge.background#75ac51
• badge.foreground#221f1d
• button.background#cf7e5c
• button.foreground#221f1d
• button.hoverBackground#95d053
• debugExceptionWidget.background#4c423b
• debugExceptionWidget.border#4c423b
• debugToolBar.background#4c423b
• diffEditor.insertedTextBackground#e3954620
• diffEditor.removedTextBackground#a0b46120
• dropdown.background#4c423b
• dropdown.border#4c423b
• dropdown.foreground#d9beac
• editor.background#221f1d
• editor.findMatchBackground#e9785c7f
• editor.findMatchHighlightBackground#e9785c3f
• editor.findRangeHighlightBackground#4c423b
• editor.foreground#f5d7c2
• editor.hoverHighlightBackground#685b52
• editor.inactiveSelectionBackground#cf7e5c33
• editor.lineHighlightBackground#221f1d
• editor.lineHighlightBorder#4c423b
• editor.rangeHighlightBackground#4c423b
• editor.selectionBackground#cf7e5c33
• editor.selectionHighlightBackground#4c423b
• editor.wordHighlightBackground#75ac517f
• editor.wordHighlightStrongBackground#b8a63d7f
• editorBracketMatch.background#4c423b
• editorBracketMatch.border#4c423b
• editorCodeLens.foreground#bda595
• editorCursor.foreground#75ac51
• editorError.border#f5d7c2
• editorError.foreground#a0b461
• editorGroup.border#4c423b
• editorGroup.dropBackground#685b527f
• editorGroup.emptyBackground#221f1d
• editorGroup.focusedEmptyBorder#4c423b
• editorGroupHeader.noTabsBackground#221f1d
• editorGroupHeader.tabsBackground#221f1d
• editorGroupHeader.tabsBorder#4c423b
• editorGutter.addedBackground#e39546
• editorGutter.background#221f1d
• editorGutter.deletedBackground#a0b461
• editorGutter.modifiedBackground#e9785c
• editorHoverWidget.background#4c423b
• editorHoverWidget.border#4c423b
• editorIndentGuide.activeBackground#685b52
• editorIndentGuide.background#4c423b
• editorLineNumber.foreground#685b52
• editorLink.activeForeground#95d053
• editorMarkerNavigation.background#4c423b
• editorMarkerNavigationError.background#a0b461
• editorMarkerNavigationWarning.background#c0a63a
• editorOverviewRuler.addedForeground#e395467f
• editorOverviewRuler.border#4c423b
• editorOverviewRuler.currentContentForeground#95d053
• editorOverviewRuler.deletedForeground#a0b4617f
• editorOverviewRuler.errorForeground#a0b4617f
• editorOverviewRuler.findMatchForeground#e9785cbf
• editorOverviewRuler.incomingContentForeground#cf7e5c
• editorOverviewRuler.infoForeground#cf7e5c7f
• editorOverviewRuler.modifiedForeground#e9785c7f
• editorOverviewRuler.rangeHighlightForeground#685b52bf
• editorOverviewRuler.selectionHighlightForeground#4c423bbf
• editorOverviewRuler.warningForeground#c0a63a7f
• editorOverviewRuler.wordHighlightForeground#685b52bf
• editorOverviewRuler.wordHighlightStrongForeground#847468bf
• editorPane.background#221f1d
• editorRuler.foreground#4c423b
• editorSuggestWidget.background#4c423b
• editorSuggestWidget.border#4c423b
• editorSuggestWidget.foreground#d9beac
• editorSuggestWidget.highlightForeground#b8a63d
• editorSuggestWidget.selectedBackground#685b52
• editorWarning.border#d9beac
• editorWarning.foreground#c0a63a
• editorWhitespace.foreground#4c423b
• editorWidget.background#4c423b
• editorWidget.border#4c423b
• errorForeground#a0b461
• extensionButton.prominentBackground#cf7e5c
• extensionButton.prominentForeground#221f1d
• extensionButton.prominentHoverBackground#95d053
• focusBorder#75ac51
• foreground#f5d7c2
• gitDecoration.conflictingResourceForeground#95d053
• gitDecoration.deletedResourceForeground#a0b461
• gitDecoration.ignoredResourceForeground#847468
• gitDecoration.modifiedResourceForeground#e9785c
• gitDecoration.untrackedResourceForeground#75ac51
• input.background#4c423b
• input.border#4c423b
• input.foreground#d9beac
• input.placeholderForeground#685b52
• inputOption.activeBorder#95d053
• inputValidation.errorBackground#4c423b
• inputValidation.errorBorder#a0b461
• inputValidation.infoBackground#4c423b
• inputValidation.infoBorder#cf7e5c
• inputValidation.warningBackground#4c423b
• inputValidation.warningBorder#c0a63a
• list.activeSelectionBackground#e395467f
• list.activeSelectionForeground#221f1d
• list.dropBackground#847468
• list.focusBackground#847468
• list.focusForeground#221f1d
• list.highlightForeground#e9785c
• list.hoverBackground#4c423b
• list.hoverForeground#bda595
• list.inactiveSelectionBackground#4c423b
• list.inactiveSelectionForeground#f5d7c2
• menu.border#4c423b
• merge.border#a18c7f
• merge.currentContentBackground#95d0537f
• merge.currentHeaderBackground#95d053
• merge.incomingContentBackground#cf7e5c7f
• merge.incomingHeaderBackground#cf7e5c
• notification.background#4c423b
• notification.buttonBackground#cf7e5c
• notification.buttonForeground#221f1d
• notification.buttonHoverBackground#95d053
• notification.errorBackground#a0b461
• notification.errorForeground#221f1d
• notification.foreground#f5d7c2
• notification.infoBackground#cf7e5c
• notification.infoForeground#221f1d
• notification.warningBackground#c0a63a
• notification.warningForeground#221f1d
• notifications.border#4c423b
• panel.background#221f1d
• panel.border#4c423b
• panelTitle.activeBorder#847468
• panelTitle.activeForeground#d9beac
• panelTitle.inactiveForeground#a18c7f
• peekView.border#b8a63d
• peekViewEditor.background#4c423b
• peekViewEditor.matchHighlightBackground#e9785c
• peekViewEditorGutter.background#4c423b
• peekViewResult.background#4c423b
• peekViewResult.fileForeground#d9beac
• peekViewResult.lineForeground#685b52
• peekViewResult.matchHighlightBackground#e9785c
• peekViewResult.selectionBackground#847468
• peekViewResult.selectionForeground#f5d7c2
• peekViewTitle.background#685b52
• peekViewTitleDescription.foreground#bda595
• peekViewTitleLabel.foreground#f5d7c2
• pickerGroup.border#bda595
• pickerGroup.foreground#f5d7c2
• progressBar.background#e39546
• scrollbar.shadow#221f1d
• scrollbarSlider.activeBackground#bda5957f
• scrollbarSlider.background#8474687f
• scrollbarSlider.hoverBackground#a18c7f7f
• selection.background#685b52
• sideBar.background#221f1d
• sideBar.border#4c423b
• sideBar.foreground#d9beac
• sideBarSectionHeader.background#685b52
• sideBarSectionHeader.foreground#d9beac
• sideBarTitle.foreground#bda595
• statusBar.background#cf7e5c
• statusBar.border#cf7e5c7f
• statusBar.debuggingBackground#c0a63a
• statusBar.debuggingBorder#c0a63a7f
• statusBar.debuggingForeground#221f1d
• statusBar.foreground#221f1d
• statusBar.noFolderBackground#75ac51
• statusBar.noFolderBorder#75ac517f
• statusBar.noFolderForeground#221f1d
• statusBarItem.activeBackground#95d053
• statusBarItem.hoverBackground#e39546
• statusBarItem.prominentBackground#95d053
• statusBarItem.prominentHoverBackground#e39546
• tab.activeBackground#4c423b
• tab.activeForeground#bda595
• tab.border#221f1d
• tab.inactiveBackground#221f1d
• tab.inactiveForeground#a18c7f
• tab.unfocusedActiveForeground#847468
• tab.unfocusedInactiveForeground#685b52
• terminal.ansiBlack#221f1d
• terminal.ansiBlue#cf7e5c
• terminal.ansiBrightBlack#4c423b
• terminal.ansiBrightBlue#cf7e5c
• terminal.ansiBrightCyan#95d053
• terminal.ansiBrightGreen#95d053
• terminal.ansiBrightMagenta#b8a63d
• terminal.ansiBrightRed#c0a63a
• terminal.ansiBrightWhite#f5d7c2
• terminal.ansiBrightYellow#e9785c
• terminal.ansiCyan#95d053
• terminal.ansiGreen#e39546
• terminal.ansiMagenta#b8a63d
• terminal.ansiRed#a0b461
• terminal.ansiWhite#d9beac
• terminal.ansiYellow#e9785c
• terminal.background#221f1d
• terminal.border#4c423b
• terminal.foreground#d9beac
• terminal.selectionBackground#cf7e5c7f
• terminalCursor.background#4c423b
• terminalCursor.foreground#bda595
• titleBar.activeBackground#221f1d
• titleBar.activeForeground#bda595
• titleBar.border#4c423b
• titleBar.inactiveBackground#221f1d
• titleBar.inactiveForeground#847468
• walkThrough.embeddedEditorBackground#221f1d
• welcomePage.buttonBackground#4c423b
• welcomePage.buttonHoverBackground#685b52
• widget.shadow#221f1d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...