Code0

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#1e272e
• activityBar.activeBorder#1e272e
• activityBar.background#1e272e
• activityBar.border#1e272e
• activityBar.dropbackground#1e272e
• activityBar.foreground#f1f3f8
• activityBar.inactiveforeground#f1f3f8
• activityBarBadge.background#1e272e
• activityBarBadge.foreground#f1f3f8
• badge.background#1e272e
• badge.foreground#f1f3f8
• breadcrumb.activeSelectionforeground#f1f3f8
• breadcrumb.background#1e272e
• breadcrumb.focusforeground#f1f3f8
• breadcrumb.foreground#f1f3f8
• breadcrumbPicker.background#1e272e
• button.background#1e272e
• button.foreground#f1f3f8
• button.hoverbackground#1e272e
• checkbox.background#1e272e
• checkbox.border#1e272e
• checkbox.foreground#f1f3f8
• contrastActiveborder#1e272e
• contrastborder#1e272e
• debugExceptionWidget.background#1e272e
• debugExceptionWidget.border#1e272e
• debugToolBar.background#1e272e
• debugToolBar.border#1e272e
• descriptionforeground#f1f3f8
• diffEditor.border#1e272e
• diffEditor.insertedTextbackground#1e272e
• diffEditor.insertedTextborder#1e272e
• diffEditor.removedTextbackground#1e272e
• diffEditor.removedTextborder#1e272e
• dropdown.background#1e272e
• dropdown.border#1e272e
• dropdown.foreground#f1f3f8
• dropdown.listbackground#1e272e
• editor.background#1e272e
• editor.findMatchbackground#1e272e
• editor.findMatchborder#1e272e
• editor.findMatchHighlightbackground#1e272e
• editor.findMatchHighlightborder#1e272e
• editor.findRangeHighlightbackground#1e272e
• editor.findRangeHighlightborder#1e272e
• editor.focusedStackFrameHighlightbackground#1e272e
• editor.foreground#f1f3f8
• editor.hoverHighlightbackground#1e272e
• editor.inactiveSelectionbackground#1e272e
• editor.lineHighlightbackground#1e272e
• editor.lineHighlightborder#1e272e
• editor.rangeHighlightbackground#1e272e
• editor.rangeHighlightborder#1e272e
• editor.selectionbackground#1e272e
• editor.selectionforeground#f1f3f8
• editor.selectionHighlightbackground#1e272e
• editor.selectionHighlightborder#1e272e
• editor.snippetFinalTabstopHighlightbackground#1e272e
• editor.snippetFinalTabstopHighlightborder#1e272e
• editor.snippetTabstopHighlightbackground#1e272e
• editor.snippetTabstopHighlightborder#1e272e
• editor.stackFrameHighlightbackground#1e272e
• editor.tokenColorCustomizations
• editor.wordHighlightbackground#1e272e
• editor.wordHighlightborder#1e272e
• editor.wordHighlightStrongbackground#1e272e
• editor.wordHighlightStrongborder#1e272e
• editorBracketMatch.background#1e272e
• editorBracketMatch.border#1e272e
• editorCodeLens.foreground#f1f3f8
• editorCursor.background#1e272e
• editorCursor.foreground#f1f3f8
• editorError.border#1e272e
• editorError.foreground#f1f3f8
• editorGroup.border#1e272e
• editorGroup.dropbackground#1e272e
• editorGroup.emptybackground#1e272e
• editorGroup.focusedEmptyborder#1e272e
• editorGroupHeader.noTabsbackground#1e272e
• editorGroupHeader.tabsbackground#1e272e
• editorGroupHeader.tabsborder#1e272e
• editorGutter.addedbackground#1e272e
• editorGutter.background#1e272e
• editorGutter.commentRangeforeground#f1f3f8
• editorGutter.deletedbackground#1e272e
• editorGutter.modifiedbackground#1e272e
• editorHint.border#1e272e
• editorHint.foreground#f1f3f8
• editorHoverWidget.background#1e272e
• editorHoverWidget.border#1e272e
• editorHoverWidget.statusBarbackground#1e272e
• editorIndentGuide.activebackground#1e272e
• editorIndentGuide.background#1e272e
• editorInfo.border#1e272e
• editorInfo.foreground#f1f3f8
• editorLightBulb.foreground#f1f3f8
• editorLightBulbAutoFix.foreground#f1f3f8
• editorLineNumber.activeforeground#f1f3f8
• editorLineNumber.foreground#f1f3f8af
• editorLink.activeForegroundffffff
• editorMarkerNavigation.background#1e272e
• editorMarkerNavigationError.background#1e272e
• editorMarkerNavigationInfo.background#1e272e
• editorMarkerNavigationWarning.background#1e272e
• editorOverviewRuler.addedforeground#f1f3f8
• editorOverviewRuler.border#1e272e
• editorOverviewRuler.bracketMatchforeground#f1f3f8
• editorOverviewRuler.commonContentforeground#f1f3f8
• editorOverviewRuler.currentContentforeground#f1f3f8
• editorOverviewRuler.deletedforeground#f1f3f8
• editorOverviewRuler.errorforeground#f1f3f8
• editorOverviewRuler.findMatchforeground#f1f3f8
• editorOverviewRuler.incomingContentforeground#f1f3f8
• editorOverviewRuler.infoforeground#f1f3f8
• editorOverviewRuler.modifiedforeground#f1f3f8
• editorOverviewRuler.rangeHighlightforeground#f1f3f8
• editorOverviewRuler.selectionHighlightforeground#f1f3f8
• editorOverviewRuler.warningforeground#f1f3f8
• editorOverviewRuler.wordHighlightforeground#f1f3f8
• editorOverviewRuler.wordHighlightStrongforeground#f1f3f8
• editorPane.background#1e272e
• editorRuler.foreground#f1f3f8
• editorSuggestWidget.background#1e272e
• editorSuggestWidget.border#1e272e
• editorSuggestWidget.foreground#f1f3f8
• editorSuggestWidget.highlightforeground#f1f3f8
• editorSuggestWidget.selectedbackground#1e272e
• editorUnnecessaryCode.border#1e272e
• editorUnnecessaryCode.opacity
• editorWarning.border#1e272e
• editorWarning.foreground#f1f3f8
• editorWhitespace.foreground#f1f3f8
• editorWidget.background#1e272e
• editorWidget.border#1e272e
• editorWidget.foreground#f1f3f8
• editorWidget.resizeborder#1e272e
• errorforeground#f1f3f8
• extensionBadge.remotebackground#1e272e
• extensionBadge.remoteforeground#f1f3f8
• extensionButton.prominentbackground#1e272e
• extensionButton.prominentforeground#f1f3f8
• extensionButton.prominentHoverbackground#1e272e
• focusborder#1e272e
• foreground#f1f3f8
• gitDecoration.addedResourceforeground#f1f3f8
• gitDecoration.conflictingResourceforeground#f1f3f8
• gitDecoration.deletedResourceforeground#f1f3f8
• gitDecoration.ignoredResourceforeground#f1f3f8
• gitDecoration.modifiedResourceforeground#f1f3f8
• gitDecoration.submoduleResourceforeground#f1f3f8
• gitDecoration.untrackedResourceforeground#f1f3f8
• icon.foreground#f1f3f8
• imagePreview.border#1e272e
• input.background#1e272e
• input.border#1e272e
• input.foreground#f1f3f8
• input.placeholderforeground#f1f3f8
• inputOption.activebackground#1e272e
• inputOption.activeborder#1e272e
• inputValidation.errorbackground#1e272e
• inputValidation.errorborder#1e272e
• inputValidation.errorforeground#f1f3f8
• inputValidation.infobackground#1e272e
• inputValidation.infoborder#1e272e
• inputValidation.infoforeground#f1f3f8
• inputValidation.warningbackground#1e272e
• inputValidation.warningborder#1e272e
• inputValidation.warningforeground#f1f3f8
• list.activeSelectionbackground#1e272e
• list.activeSelectionforeground#f1f3f8
• list.dropbackground#1e272e
• list.errorforeground#f1f3f8
• list.filterMatchbackground#1e272e
• list.filterMatchborder#1e272e
• list.focusbackground#1e272e
• list.focusforeground#f1f3f8
• list.highlightforeground#f1f3f8
• list.hoverbackground#1e272e
• list.hoverforeground#f1f3f8
• list.inactiveFocusbackground#1e272e
• list.inactiveSelectionbackground#1e272e
• list.inactiveSelectionforeground#f1f3f8
• list.invalidItemforeground#f1f3f8
• list.warningforeground#f1f3f8
• listFilterWidget.background#1e272e
• listFilterWidget.noMatchesOutline
• listFilterWidget.outline
• menu.background#1e272e
• menu.border#1e272e
• menu.foreground#f1f3f8
• menu.selectionbackground#1e272e
• menu.selectionborder#1e272e
• menu.selectionforeground#f1f3f8
• menu.separatorbackground#1e272e
• menubar.selectionbackground#1e272e
• menubar.selectionborder#1e272e
• menubar.selectionforeground#f1f3f8
• merge.border#1e272e
• merge.commonContentbackground#1e272e
• merge.commonHeaderbackground#1e272e
• merge.currentContentbackground#1e272e
• merge.currentHeaderbackground#1e272e
• merge.incomingContentbackground#1e272e
• merge.incomingHeaderbackground#1e272e
• minimap.findMatchHighlight
• minimap.selectionHighlight
• notificationCenter.border#1e272e
• notificationCenterHeader.background#1e272e
• notificationCenterHeader.foreground#f1f3f8
• notificationLink.foreground#f1f3f8
• notifications.background#1e272e
• notifications.border#1e272e
• notifications.foreground#f1f3f8
• notificationsErrorIcon.foreground#f1f3f8
• notificationsInfoIcon.foreground#f1f3f8
• notificationsWarningIcon.foreground#f1f3f8
• notificationToast.border#1e272e
• panel.background#1e272e
• panel.border#1e272e
• panel.dropbackground#1e272e
• panelInput.border#1e272e
• panelTitle.activeborder#1e272e
• panelTitle.activeforeground#f1f3f8
• panelTitle.inactiveforeground#f1f3f8
• peekView.border#1e272e
• peekViewEditor.background#1e272e
• peekViewEditor.matchHighlightbackground#1e272e
• peekViewEditor.matchHighlightborder#1e272e
• peekViewEditorGutter.background#1e272e
• peekViewResult.background#1e272e
• peekViewResult.fileforeground#f1f3f8
• peekViewResult.lineforeground#f1f3f8
• peekViewResult.matchHighlightbackground#1e272e
• peekViewResult.selectionbackground#1e272e
• peekViewResult.selectionforeground#f1f3f8
• peekViewTitle.background#1e272e
• peekViewTitleDescription.foreground#f1f3f8
• peekViewTitleLabel.foreground#f1f3f8
• pickerGroup.border#1e272e
• pickerGroup.foreground#f1f3f8
• problemsErrorIcon.foreground#f1f3f8
• problemsInfoIcon.foreground#f1f3f8
• problemsWarningIcon.foreground#f1f3f8
• progressBar.background#1e272e
• quickInput.background#1e272e
• quickInput.foreground#f1f3f8
• scrollbar.shadow
• scrollbarSlider.activebackground#1e272e
• scrollbarSlider.background#1e272e
• scrollbarSlider.hoverbackground#1e272e
• selection.background#1e272e
• settings.checkboxbackground#1e272e
• settings.checkboxborder#1e272e
• settings.checkboxforeground#f1f3f8
• settings.dropdownbackground#1e272e
• settings.dropdownborder#1e272e
• settings.dropdownforeground#f1f3f8
• settings.dropdownListborder#1e272e
• settings.headerforeground#f1f3f8
• settings.modifiedItemIndicator
• settings.numberInputbackground#1e272e
• settings.numberInputborder#1e272e
• settings.numberInputforeground#f1f3f8
• settings.textInputbackground#1e272e
• settings.textInputborder#1e272e
• settings.textInputforeground#f1f3f8
• sideBar.background#1e272e
• sideBar.border#1e272e
• sideBar.dropbackground#1e272e
• sideBar.foreground#f1f3f8
• sideBarSectionHeader.background#1e272e
• sideBarSectionHeader.border#1e272e
• sideBarSectionHeader.foreground#f1f3f8
• sideBarTitle.foreground#f1f3f8
• statusBar.background#1e272e
• statusBar.border#1e272e
• statusBar.debuggingbackground#1e272e
• statusBar.debuggingborder#1e272e
• statusBar.debuggingforeground#f1f3f8
• statusBar.foreground#f1f3f8
• statusBar.noFolderbackground#1e272e
• statusBar.noFolderborder#1e272e
• statusBar.noFolderforeground#f1f3f8
• statusBarItem.activebackground#1e272e
• statusBarItem.hoverbackground#1e272e
• statusBarItem.prominentbackground#1e272e
• statusBarItem.prominentforeground#f1f3f8
• statusBarItem.prominentHoverbackground#1e272e
• statusBarItem.remotebackground#1e272e
• statusBarItem.remoteforeground#f1f3f8
• symbolIcon.arrayforeground#f1f3f8
• symbolIcon.booleanforeground#f1f3f8
• symbolIcon.classforeground#f1f3f8
• symbolIcon.colorforeground#f1f3f8
• symbolIcon.constantforeground#f1f3f8
• symbolIcon.constructorforeground#f1f3f8
• symbolIcon.enumeratorforeground#f1f3f8
• symbolIcon.enumeratorMemberforeground#f1f3f8
• symbolIcon.eventforeground#f1f3f8
• symbolIcon.fieldforeground#f1f3f8
• symbolIcon.fileforeground#f1f3f8
• symbolIcon.folderforeground#f1f3f8
• symbolIcon.functionforeground#f1f3f8
• symbolIcon.interfaceforeground#f1f3f8
• symbolIcon.keyforeground#f1f3f8
• symbolIcon.keywordforeground#f1f3f8
• symbolIcon.methodforeground#f1f3f8
• symbolIcon.moduleforeground#f1f3f8
• symbolIcon.namespaceforeground#f1f3f8
• symbolIcon.nullforeground#f1f3f8
• symbolIcon.numberforeground#f1f3f8
• symbolIcon.objectforeground#f1f3f8
• symbolIcon.operatorforeground#f1f3f8
• symbolIcon.packageforeground#f1f3f8
• symbolIcon.propertyforeground#f1f3f8
• symbolIcon.referenceforeground#f1f3f8
• symbolIcon.snippetforeground#f1f3f8
• symbolIcon.stringforeground#f1f3f8
• symbolIcon.structforeground#f1f3f8
• symbolIcon.textforeground#f1f3f8
• symbolIcon.typeParameterforeground#f1f3f8
• symbolIcon.unitforeground#f1f3f8
• symbolIcon.variableforeground#f1f3f8
• tab.activebackground#1e272e
• tab.activeborder#1e272e
• tab.activeBorderTop
• tab.activeforeground#f1f3f8
• tab.activeModifiedborder#1e272e
• tab.border#1e272e
• tab.hoverbackground#1e272e
• tab.hoverborder#1e272e
• tab.inactivebackground#1e272e
• tab.inactiveforeground#f1f3f8
• tab.inactiveModifiedborder#1e272e
• tab.unfocusedActivebackground#1e272e
• tab.unfocusedActiveborder#1e272e
• tab.unfocusedActiveBorderTop
• tab.unfocusedActiveforeground#f1f3f8
• tab.unfocusedActiveModifiedborder#1e272e
• tab.unfocusedHoverbackground#1e272e
• tab.unfocusedHoverborder#1e272e
• tab.unfocusedInactiveforeground#f1f3f8
• tab.unfocusedInactiveModifiedborder#1e272e
• terminal.ansiBlack
• terminal.ansiBlue
• terminal.ansiBrightBlack
• terminal.ansiBrightBlue
• terminal.ansiBrightCyan
• terminal.ansiBrightGreen
• terminal.ansiBrightMagenta
• terminal.ansiBrightRed
• terminal.ansiBrightWhite
• terminal.ansiBrightYellow
• terminal.ansiCyan
• terminal.ansiGreen
• terminal.ansiMagenta
• terminal.ansiRed
• terminal.ansiWhite
• terminal.ansiYellow
• terminal.background#1e272e
• terminal.border#1e272e
• terminal.foreground#f1f3f8
• terminal.selectionbackground#1e272e
• terminalCursor.background#1e272e
• terminalCursor.foreground#f1f3f8
• textBlockQuote.background#1e272e
• textBlockQuote.border#1e272e
• textCodeBlock.background#1e272e
• textLink.activeforeground#f1f3f8
• textLink.foreground#f1f3f8
• textPreformat.foreground#f1f3f8
• textSeparator.foreground#f1f3f8
• titleBar.activebackground#1e272e
• titleBar.activeforeground#f1f3f8
• titleBar.border#1e272e
• titleBar.inactivebackground#1e272e
• titleBar.inactiveforeground#f1f3f8
• tree.indentGuidesStroke
• walkThrough.embeddedEditorbackground#1e272e
• welcomePage.background#1e272e
• welcomePage.buttonbackground#1e272e
• welcomePage.buttonHoverbackground#1e272e
• widget.shadow
• window.activeborder#1e272e
• window.inactiveborder#1e272e
• workbench.colorCustomization
• workbench.colorCustomizations

tokenColors

TextMate scopes and font styles (syntax highlighting rules).