Native macOS

Color themes

• 

  Native macOS - Dark Theme, Dark Editor

• 

  Native macOS - Dark Theme, Light Editor

• 

  Native macOS - Light Theme, Dark Editor

• 

  Native macOS - Light Theme, Light Editor

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#323237
• activityBar.border#414141
• activityBar.foreground#ffffff
• activityBar.inactiveForeground#ffffff80
• activityBarBadge.background#4082d4
• activityBarBadge.foreground#ffffff
• badge.background#007aff
• badge.foreground#ffffff
• breadcrumb.activeSelectionForeground#000000
• breadcrumb.background#ffffff
• breadcrumb.focusForeground#000000
• breadcrumb.foreground#000000
• breadcrumbPicker.background#ffffff
• button.background#787878
• button.foreground#fafafa
• button.hoverBackground#787878
• debugExceptionWidget.background#f1dfde
• debugExceptionWidget.border#a31515
• debugToolBar.background#f3f3f3
• descriptionForeground#ffffff
• diffEditor.insertedTextBackground#32d74b40
• diffEditor.removedTextBackground#ff453a40
• dropdown.background#ffffff
• dropdown.border#ffffff33
• dropdown.foreground#ffffff
• dropdown.listBackground#000000
• editor.background#ffffff
• editor.findMatchBackground#0a84ff99
• editor.findMatchHighlightBackground#545557
• editor.foldBackground#323232bf
• editor.foreground#000000
• editor.hoverHighlightBackground#add6ff26
• editor.inactiveSelectionBackground#d2d2d2
• editor.lineHighlightBackground#f5f5f5
• editor.lineHighlightBorder#f5f5f5
• editor.rangeHighlightBackground#646e8266
• editor.selectionBackground#b9d7fa
• editor.selectionHighlightBackground#646e82bf
• editor.wordHighlightBackground#646e82bf
• editor.wordHighlightStrongBackground#646e82bf
• editorBracketMatch.background#0064001a
• editorBracketMatch.border#bebebe
• editorError.border#00000000
• editorError.foreground#ff453a
• editorGroup.border#3c3c3c
• editorGroup.dropBackground#555555
• editorGroup.emptyBackground#323237
• editorGroup.focusedEmptyBorder#00000000
• editorGroupHeader.noTabsBackground#323237
• editorGroupHeader.tabsBackground#323237
• editorGroupHeader.tabsBorder#191919
• editorGutter.addedBackground#32d74b
• editorGutter.background#ffffff
• editorGutter.deletedBackground#ff453a
• editorGutter.modifiedBackground#4082d4
• editorHint.border#00000000
• editorHint.foreground#4082d4
• editorHoverWidget.background#3b3b44
• editorHoverWidget.border#191919
• editorInfo.border#00000000
• editorInfo.foreground#32d74b
• editorLineNumber.activeForeground#ffffffcc
• editorLineNumber.foreground#737378
• editorMarkerNavigation.background#ffffff
• editorMarkerNavigationError.background#d60a0a
• editorMarkerNavigationInfo.background#008000
• editorMarkerNavigationWarning.background#117711
• editorOverviewRuler.addedForeground#32d74b
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#646e82bf
• editorOverviewRuler.commonContentForeground#60606066
• editorOverviewRuler.currentContentForeground#40c8ae80
• editorOverviewRuler.deletedForeground#ff453a
• editorOverviewRuler.errorForeground#ff453a
• editorOverviewRuler.findMatchForeground#646e82bf
• editorOverviewRuler.incomingContentForeground#40a6ff80
• editorOverviewRuler.infoForeground#4082d4
• editorOverviewRuler.modifiedForeground#4082d4
• editorOverviewRuler.rangeHighlightForeground#646e82bf
• editorOverviewRuler.selectionHighlightForeground#646e82bf
• editorOverviewRuler.warningForeground#ffd60a
• editorOverviewRuler.wordHighlightForeground#646e82bf
• editorOverviewRuler.wordHighlightStrongForeground#646e82bf
• editorPane.background#191919
• editorRuler.foreground#d3d3d3
• editorSuggestWidget.background#3b3b44
• editorSuggestWidget.border#191919
• editorSuggestWidget.highlightForeground#2d2d2d
• editorSuggestWidget.selectedBackground#dcdcdcaa
• editorUnnecessaryCode.opacity#000000bf
• editorWarning.border#00000000
• editorWarning.foreground#ffd60a
• editorWidget.background#323237
• editorWidget.border#3c3d3d
• errorForeground#ff453a
• extensionButton.prominentBackground#327e36
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#28632b
• focusBorder#3c3c3c
• foreground#000000
• gitDecoration.addedResourceForeground#32d74b
• gitDecoration.conflictingResourceForeground#6c6cc4
• gitDecoration.deletedResourceForeground#ff453a
• gitDecoration.ignoredResourceForeground#8e8e90
• gitDecoration.modifiedResourceForeground#4082d4
• gitDecoration.submoduleResourceForeground#1258a7
• gitDecoration.untrackedResourceForeground#019001
• icon.foreground#ffffff
• input.background#dcdcdc
• input.border#9b9b9b
• input.foreground#000000
• input.placeholderForeground#4b4b4b
• inputOption.activeBackground#292a2f
• inputOption.activeBorder#007acc
• inputValidation.errorBackground#f2dede
• inputValidation.errorBorder#be1100
• inputValidation.infoBackground#d6ecf2
• inputValidation.infoBorder#007acc
• inputValidation.warningBackground#f6f5d2
• inputValidation.warningBorder#b89500
• list.activeSelectionBackground#237df5
• list.activeSelectionForeground#ffffff
• list.dropBackground#dcdcdc
• list.errorForeground#2d2d2d
• list.focusBackground#237df5
• list.focusForeground#000000
• list.highlightForeground#2d2d2d
• list.hoverBackground#00000000
• list.hoverForeground#ffffff
• list.inactiveFocusBackground#237df5
• list.inactiveSelectionBackground#237df5
• list.inactiveSelectionForeground#2d2d2d
• list.invalidItemForeground#2d2d2d
• list.warningForeground#2d2d2d
• merge.commonContentBackground#60606029
• merge.commonHeaderBackground#60606066
• merge.currentContentBackground#40c8ae33
• merge.currentHeaderBackground#40c8ae80
• merge.incomingContentBackground#40a6ff33
• merge.incomingHeaderBackground#40a6ff80
• minimap.errorHighlight#e21515
• minimapSlider.activeBackground#99999980
• minimapSlider.background#b3b3b380
• minimapSlider.hoverBackground#a6a6a680
• notificationCenterHeader.background#e2e2e7
• notificationLink.foreground#007baf
• notifications.background#282828
• notifications.border#464646
• panel.background#292a2f
• panel.border#4b4b4b
• panelTitle.activeBorder#00000000
• panelTitle.activeForeground#ffffff
• panelTitle.inactiveForeground#ffffff80
• peekView.border#3c3d3d
• peekViewEditor.background#3b3c44
• peekViewEditor.matchHighlightBackground#646e82
• peekViewEditor.matchHighlightBorder#646e82
• peekViewEditorGutter.background#3b3b44
• peekViewResult.background#414141
• peekViewResult.fileForeground#ffffff
• peekViewResult.lineForeground#ffffffcc
• peekViewResult.matchHighlightBackground#646e82
• peekViewResult.selectionBackground#474852
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#323237
• peekViewTitleDescription.foreground#dedede
• peekViewTitleLabel.foreground#ffffff
• pickerGroup.border#cccedb
• pickerGroup.foreground#007acc99
• progressBar.background#0e70c0
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#ffffff80
• scrollbarSlider.background#ffffff1a
• scrollbarSlider.hoverBackground#ffffff80
• selection.background#646e82
• settings.checkboxBackground#dcdcdc
• settings.checkboxBorder#9b9b9b
• settings.checkboxForeground#000000
• settings.dropdownBackground#dcdcdc
• settings.dropdownBorder#9b9b9b
• settings.dropdownForeground#000000
• settings.dropdownListBorder#9b9b9b
• settings.headerForeground#000000
• settings.modifiedItemIndicator#4082d4
• settings.numberInputBackground#dcdcdc
• settings.numberInputBorder#9b9b9b
• settings.numberInputForeground#000000
• settings.textInputBackground#dcdcdc
• settings.textInputBorder#9b9b9b
• settings.textInputForeground#000000
• sideBar.background#323237
• sideBar.border#191919
• sideBar.dropBackground#555555
• sideBar.foreground#ffffff
• sideBarSectionHeader.background#00000000
• sideBarSectionHeader.border#323237
• sideBarSectionHeader.foreground#ffffff
• sideBarTitle.foreground#ffffff
• statusBar.background#414141
• statusBar.border#4b4b4b
• statusBar.debuggingBackground#414141
• statusBar.debuggingBorder#4b4b4b
• statusBar.debuggingForeground#a9a9a9
• statusBar.foreground#a9a9a9
• statusBar.noFolderBackground#414141
• statusBar.noFolderBorder#4b4b4b
• statusBar.noFolderForeground#a9a9a9
• statusBarItem.activeBackground#414141
• statusBarItem.hoverBackground#414141
• statusBarItem.prominentBackground#388a34
• statusBarItem.prominentHoverBackground#369432
• tab.activeBackground#414141
• tab.activeBorder#191919
• tab.activeForeground#f5f5f5
• tab.border#3c3c3c
• tab.inactiveBackground#323237
• tab.inactiveForeground#b9b9b9
• tab.unfocusedActiveBorder#00000000
• tab.unfocusedActiveForeground#ffffff1a
• tab.unfocusedInactiveForeground#64646480
• terminal.ansiBlack#000000
• terminal.ansiBlue#0451a5
• terminal.ansiBrightBlack#646464
• terminal.ansiBrightBlue#0451a5
• terminal.ansiBrightCyan#0598bc
• terminal.ansiBrightGreen#14ce14
• terminal.ansiBrightMagenta#bc05bc
• terminal.ansiBrightRed#c83232
• terminal.ansiBrightWhite#a5a5a5
• terminal.ansiBrightYellow#b5ba00
• terminal.ansiCyan#0598bc
• terminal.ansiGreen#00bc00
• terminal.ansiMagenta#bc05bc
• terminal.ansiRed#c83232
• terminal.ansiWhite#555555
• terminal.ansiYellow#949800
• terminal.foreground#333333
• terminal.selectionBackground#00000040
• textBlockQuote.background#00000000
• textBlockQuote.border#00000000
• textCodeBlock.background#00000000
• textLink.activeForeground#007baf
• textLink.foreground#007baf
• textPreformat.foreground#ffffffcc
• textSeparator.foreground#ffffffcc
• titleBar.activeBackground#414141
• titleBar.activeForeground#b9b9b9
• titleBar.border#4b4b4b
• titleBar.inactiveBackground#414141
• titleBar.inactiveForeground#b9b9b9
• widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...