Toge

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.activeBorder#4d9375
• activityBar.background#121212
• activityBar.border#191919
• activityBar.foreground#dbd7caee
• activityBar.inactiveForeground#dedcd550
• activityBarBadge.background#bfbaaa
• activityBarBadge.foreground#121212
• badge.background#dedcd590
• badge.foreground#121212
• breadcrumb.activeSelectionForeground#eeeeee18
• breadcrumb.background#181818
• breadcrumb.focusForeground#dbd7caee
• breadcrumb.foreground#959da5
• breadcrumbPicker.background#121212
• button.background#4d9375
• button.foreground#121212
• button.hoverBackground#4d9375
• checkbox.background#181818
• checkbox.border#2f363d
• debugToolBar.background#121212
• descriptionForeground#dedcd590
• diffEditor.insertedTextBackground#4d937550
• diffEditor.removedTextBackground#ab595950
• dropdown.background#121212
• dropdown.border#191919
• dropdown.foreground#dbd7caee
• dropdown.listBackground#181818
• editor.background#1a1919
• editor.findMatchBackground#e6cc7722
• editor.findMatchHighlightBackground#e6cc7744
• editor.focusedStackFrameHighlightBackground#b808
• editor.foldBackground#eeeeee10
• editor.foreground#dbd7caee
• editor.inactiveSelectionBackground#eeeeee10
• editor.lineHighlightBackground#181818
• editor.selectionBackground#eeeeee18
• editor.selectionHighlightBackground#eeeeee10
• editor.stackFrameHighlightBackground#a707
• editor.wordHighlightBackground#1c6b4805
• editor.wordHighlightStrongBackground#1c6b4810
• editorBracketHighlight.foreground1#5eaab5
• editorBracketHighlight.foreground2#4d9375
• editorBracketHighlight.foreground3#d4976c
• editorBracketHighlight.foreground4#d9739f
• editorBracketHighlight.foreground5#e6cc77
• editorBracketHighlight.foreground6#6394bf
• editorBracketMatch.background#4d937520
• editorError.foreground#cb7676
• editorGroup.border#191919
• editorGroupHeader.tabsBackground#121212
• editorGroupHeader.tabsBorder#191919
• editorGutter.addedBackground#4d9375
• editorGutter.commentRangeForeground#dedcd550
• editorGutter.deletedBackground#cb7676
• editorGutter.foldingControlForeground#dedcd590
• editorGutter.modifiedBackground#6394bf
• editorHint.foreground#4d9375
• editorIndentGuide.activeBackground#ffffff30
• editorIndentGuide.background#ffffff15
• editorInfo.foreground#6394bf
• editorInlayHint.background#181818
• editorInlayHint.foreground#666666
• editorLineNumber.activeForeground#bfbaaa
• editorLineNumber.foreground#dedcd550
• editorOverviewRuler.border#111
• editorStickyScroll.background#181818
• editorStickyScrollHover.background#181818
• editorWarning.foreground#d4976c
• editorWhitespace.foreground#ffffff15
• editorWidget.background#121212
• errorForeground#cb7676
• focusBorder#00000000
• foreground#dbd7caee
• gitDecoration.addedResourceForeground#4d9375
• gitDecoration.conflictingResourceForeground#d4976c
• gitDecoration.deletedResourceForeground#cb7676
• gitDecoration.ignoredResourceForeground#dedcd550
• gitDecoration.modifiedResourceForeground#6394bf
• gitDecoration.submoduleResourceForeground#dedcd590
• gitDecoration.untrackedResourceForeground#5eaab5
• input.background#181818
• input.border#191919
• input.foreground#dbd7caee
• input.placeholderForeground#dedcd590
• inputOption.activeBackground#dedcd550
• list.activeSelectionBackground#181818
• list.activeSelectionForeground#dbd7caee
• list.focusBackground#181818
• list.highlightForeground#4d9375
• list.hoverBackground#181818
• list.hoverForeground#dbd7caee
• list.inactiveFocusBackground#121212
• list.inactiveSelectionBackground#181818
• list.inactiveSelectionForeground#dbd7caee
• menu.separatorBackground#191919
• notificationCenterHeader.background#121212
• notificationCenterHeader.foreground#959da5
• notifications.background#121212
• notifications.border#191919
• notifications.foreground#dbd7caee
• notificationsErrorIcon.foreground#cb7676
• notificationsInfoIcon.foreground#6394bf
• notificationsWarningIcon.foreground#d4976c
• panel.background#121212
• panel.border#191919
• panelInput.border#2f363d
• panelTitle.activeBorder#4d9375
• panelTitle.activeForeground#dbd7caee
• panelTitle.inactiveForeground#959da5
• peekViewEditor.background#121212
• peekViewEditor.matchHighlightBackground#ffd33d33
• peekViewResult.background#121212
• peekViewResult.matchHighlightBackground#ffd33d33
• pickerGroup.border#191919
• pickerGroup.foreground#dbd7caee
• problemsErrorIcon.foreground#cb7676
• problemsInfoIcon.foreground#6394bf
• problemsWarningIcon.foreground#d4976c
• progressBar.background#4d9375
• quickInput.background#121212
• quickInput.foreground#dbd7caee
• quickInputList.focusBackground#181818
• scrollbar.shadow#0000
• scrollbarSlider.activeBackground#dedcd550
• scrollbarSlider.background#dedcd510
• scrollbarSlider.hoverBackground#dedcd550
• settings.headerForeground#dbd7caee
• settings.modifiedItemIndicator#4d9375
• sideBar.background#121212
• sideBar.border#191919
• sideBar.foreground#bfbaaa
• sideBarSectionHeader.background#121212
• sideBarSectionHeader.border#191919
• sideBarSectionHeader.foreground#dbd7caee
• sideBarTitle.foreground#dbd7caee
• statusBar.background#121212
• statusBar.border#191919
• statusBar.debuggingBackground#181818
• statusBar.debuggingForeground#bfbaaa
• statusBar.foreground#bfbaaa
• statusBar.noFolderBackground#121212
• statusBarItem.prominentBackground#181818
• tab.activeBackground#121212
• tab.activeBorder#191919
• tab.activeBorderTop#dedcd590
• tab.activeForeground#dbd7caee
• tab.border#191919
• tab.hoverBackground#181818
• tab.inactiveBackground#121212
• tab.inactiveForeground#959da5
• tab.unfocusedActiveBorder#191919
• tab.unfocusedActiveBorderTop#191919
• tab.unfocusedHoverBackground#121212
• terminal.ansiBlack#393a34
• terminal.ansiBlue#6394bf
• terminal.ansiBrightBlack#777777
• terminal.ansiBrightBlue#6394bf
• terminal.ansiBrightCyan#5eaab5
• terminal.ansiBrightGreen#4d9375
• terminal.ansiBrightMagenta#d9739f
• terminal.ansiBrightRed#cb7676
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#e6cc77
• terminal.ansiCyan#5eaab5
• terminal.ansiGreen#4d9375
• terminal.ansiMagenta#d9739f
• terminal.ansiRed#cb7676
• terminal.ansiWhite#dbd7ca
• terminal.ansiYellow#e6cc77
• terminal.foreground#dbd7caee
• terminal.selectionBackground#eeeeee18
• textBlockQuote.background#121212
• textBlockQuote.border#191919
• textCodeBlock.background#121212
• textLink.activeForeground#4d9375
• textLink.foreground#4d9375
• textPreformat.foreground#d1d5da
• textSeparator.foreground#586069
• titleBar.activeBackground#121212
• titleBar.activeForeground#bfbaaa
• titleBar.border#181818
• titleBar.inactiveBackground#121212
• titleBar.inactiveForeground#959da5
• tree.indentGuidesStroke#2f363d
• welcomePage.buttonBackground#2f363d
• welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).