YD VSC Theme

Color themes

• 

  YD Dark

• 

  YD Light

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#e0dce033
• activityBar.activeBorder#474247
• activityBar.activeFocusBorder#bf65f0
• activityBar.background#fffcff
• activityBar.border#fffcff
• activityBar.dropBorder#53a6e1
• activityBar.foreground#656066
• activityBar.inactiveForeground#847e85
• activityBarBadge.background#bf65f0
• activityBarBadge.foreground#fffcff
• badge.background#bf65f0
• badge.foreground#fffcff
• breadcrumb.activeSelectionForeground#282629
• breadcrumb.background#fffcff
• breadcrumb.focusForeground#474247
• breadcrumb.foreground#656066
• breadcrumbPicker.background#fffcff
• button.background#53a6e1
• button.foreground#fffcff
• button.hoverBackground#1fc598
• button.secondaryBackground#474247
• button.secondaryForeground#fffcff
• button.secondaryHoverBackground#656066
• charts.blue#53a6e1
• charts.foreground#474247
• charts.green#97bd2d
• charts.lines#a29da3
• charts.orange#f37735
• charts.purple#bf65f0
• charts.red#f03e4d
• charts.yellow#eeba21
• checkbox.background#53a6e1
• checkbox.border#e0dce0
• checkbox.foreground#fffcff
• debugConsole.errorForeground#f03e4d
• debugConsole.infoForeground#53a6e1
• debugConsole.sourceForeground#bf65f0
• debugConsole.warningForeground#f37735
• debugConsoleInputIcon.foreground#847e85
• debugExceptionWidget.background#e0dce0
• debugExceptionWidget.border#e0dce0
• debugIcon.breakpointCurrentStackframeForeground#97bd2d
• debugIcon.breakpointDisabledForeground#847e85
• debugIcon.breakpointForeground#f03e4d
• debugIcon.breakpointStackframeForeground#eeba21
• debugIcon.breakpointUnverifiedForeground#656066
• debugIcon.continueForeground#97bd2d
• debugIcon.disconnectForeground#f37735
• debugIcon.pauseForeground#53a6e1
• debugIcon.restartForeground#ee4eb8
• debugIcon.startForeground#97bd2d
• debugIcon.stepBackForeground#282629
• debugIcon.stepIntoForeground#282629
• debugIcon.stepOutForeground#282629
• debugIcon.stepOverForeground#282629
• debugIcon.stopForeground#f03e4d
• debugTokenExpression.boolean#bf65f0
• debugTokenExpression.error#f03e4d
• debugTokenExpression.name#53a6e1
• debugTokenExpression.number#ee4eb8
• debugTokenExpression.string#97bd2d
• debugTokenExpression.value#282629
• debugToolBar.background#e0dce0
• debugToolBar.border#c1bcc2
• debugView.exceptionLabelBackground#e0dce0
• debugView.exceptionLabelForeground#eeba21
• debugView.stateLabelBackground#e0dce0
• debugView.stateLabelForeground#53a6e1
• debugView.valueChangedHighlight#eeba2133
• descriptionForeground#474247
• diffEditor.border#e0dce0
• diffEditor.diagonalFill#e0dce07f
• diffEditor.insertedTextBackground#97bd2d20
• diffEditor.removedTextBackground#f03e4d20
• dropdown.background#e0dce0
• dropdown.border#e0dce0
• dropdown.foreground#474247
• dropdown.listBackground#e0dce0
• editor.background#fffcff
• editor.findMatchBackground#eeba213f
• editor.findMatchHighlightBackground#eeba2133
• editor.findRangeHighlightBackground#e0dce0
• editor.focusedStackFrameHighlightBackground#97bd2d3f
• editor.foldBackground#e0dce066
• editor.foreground#282629
• editor.hoverHighlightBackground#c1bcc27f
• editor.inactiveSelectionBackground#53a6e133
• editor.lineHighlightBackground#fffcff
• editor.lineHighlightBorder#e0dce0
• editor.rangeHighlightBackground#eeba2133
• editor.selectionBackground#53a6e133
• editor.selectionForeground#282629
• editor.selectionHighlightBackground#e0dce0
• editor.snippetFinalTabstopHighlightBackground#c1bcc27f
• editor.snippetTabstopHighlightBackground#e0dce07f
• editor.stackFrameHighlightBackground#1fc5983f
• editor.symbolHighlightBackground#bf65f033
• editor.wordHighlightBackground#bf65f033
• editor.wordHighlightStrongBackground#ee4eb833
• editorBracketMatch.background#e0dce0
• editorBracketMatch.border#c1bcc2
• editorCodeLens.foreground#656066
• editorCursor.background#fffcff
• editorCursor.foreground#bf65f0
• editorError.border#282629
• editorError.foreground#f03e4d
• editorGroup.border#e0dce0
• editorGroup.dropBackground#c1bcc27f
• editorGroup.emptyBackground#fffcff
• editorGroup.focusedEmptyBorder#e0dce0
• editorGroupHeader.border#fffcff
• editorGroupHeader.noTabsBackground#fffcff
• editorGroupHeader.tabsBackground#fffcff
• editorGroupHeader.tabsBorder#fffcff
• editorGutter.addedBackground#97bd2d
• editorGutter.background#fffcff
• editorGutter.commentRangeForeground#a29da3
• editorGutter.deletedBackground#f03e4d
• editorGutter.foldingControlForeground#656066
• editorGutter.modifiedBackground#eeba21
• editorHint.border#847e85
• editorHint.foreground#ee4eb8
• editorHoverWidget.background#e0dce0
• editorHoverWidget.border#e0dce0
• editorHoverWidget.foreground#474247
• editorHoverWidget.statusBarBackground#53a6e133
• editorIndentGuide.activeBackground#c1bcc2
• editorIndentGuide.background#e0dce0
• editorInfo.border#656066
• editorInfo.foreground#53a6e1
• editorLightBulb.foreground#eeba21
• editorLightBulbAutoFix.foreground#53a6e1
• editorLineNumber.activeForeground#847e85
• editorLineNumber.foreground#c1bcc2
• editorLink.activeForeground#1fc598
• editorMarkerNavigation.background#e0dce0
• editorMarkerNavigationError.background#f03e4d
• editorMarkerNavigationInfo.background#53a6e1
• editorMarkerNavigationWarning.background#f37735
• editorOverviewRuler.addedForeground#97bd2d7f
• editorOverviewRuler.border#e0dce0
• editorOverviewRuler.bracketMatchForeground#a29da3
• editorOverviewRuler.commonContentForeground#bf65f0
• editorOverviewRuler.currentContentForeground#1fc598
• editorOverviewRuler.deletedForeground#f03e4d7f
• editorOverviewRuler.errorForeground#f03e4d7f
• editorOverviewRuler.findMatchForeground#eeba21bf
• editorOverviewRuler.incomingContentForeground#53a6e1
• editorOverviewRuler.infoForeground#53a6e17f
• editorOverviewRuler.modifiedForeground#eeba217f
• editorOverviewRuler.rangeHighlightForeground#c1bcc2bf
• editorOverviewRuler.selectionHighlightForeground#e0dce0bf
• editorOverviewRuler.warningForeground#f377357f
• editorOverviewRuler.wordHighlightForeground#c1bcc2bf
• editorOverviewRuler.wordHighlightStrongForeground#a29da3bf
• editorPane.background#fffcff
• editorRuler.foreground#e0dce0
• editorSuggestWidget.background#e0dce0
• editorSuggestWidget.border#e0dce0
• editorSuggestWidget.foreground#474247
• editorSuggestWidget.highlightForeground#ee4eb8
• editorSuggestWidget.selectedBackground#c1bcc2
• editorUnnecessaryCode.opacity#0000007f
• editorWarning.border#474247
• editorWarning.foreground#f37735
• editorWhitespace.foreground#e0dce0
• editorWidget.background#e0dce0
• editorWidget.border#e0dce0
• editorWidget.foreground#474247
• editorWidget.resizeBorder#53a6e1
• errorForeground#f03e4d
• extensionBadge.remoteBackground#ee4eb8
• extensionBadge.remoteForeground#fffcff
• extensionButton.prominentBackground#53a6e1
• extensionButton.prominentForeground#fffcff
• extensionButton.prominentHoverBackground#1fc598
• focusBorder#bf65f0
• foreground#282629
• gitDecoration.addedResourceForeground#97bd2d
• gitDecoration.conflictingResourceForeground#1fc598
• gitDecoration.deletedResourceForeground#f03e4d
• gitDecoration.ignoredResourceForeground#a29da3
• gitDecoration.modifiedResourceForeground#eeba21
• gitDecoration.stageDeletedResourceForeground#f03e4d
• gitDecoration.stageModifiedResourceForeground#1fc598
• gitDecoration.submoduleResourceForeground#ee4eb8
• gitDecoration.untrackedResourceForeground#bf65f0
• icon.foreground#474247
• imagePreview.border#e0dce0
• input.background#e0dce0
• input.border#e0dce0
• input.foreground#474247
• input.placeholderForeground#c1bcc2
• inputOption.activeBackground#c1bcc2
• inputOption.activeBorder#1fc598
• inputOption.activeForeground#282629
• inputValidation.errorBackground#e0dce0
• inputValidation.errorBorder#f03e4d
• inputValidation.errorForeground#f03e4d
• inputValidation.infoBackground#e0dce0
• inputValidation.infoBorder#53a6e1
• inputValidation.infoForeground#53a6e1
• inputValidation.warningBackground#e0dce0
• inputValidation.warningBorder#f37735
• inputValidation.warningForeground#f37735
• list.activeSelectionBackground#bf65f033
• list.activeSelectionForeground#282629
• list.deemphasizedForeground#847e85
• list.dropBackground#e0dce0
• list.errorForeground#f03e4d
• list.filterMatchBackground#eeba2133
• list.filterMatchBorder#eeba2133
• list.focusBackground#a29da33f
• list.focusForeground#282629
• list.highlightForeground#eeba21
• list.hoverBackground#e0dce033
• list.hoverForeground#282629
• list.inactiveFocusBackground#e0dce03f
• list.inactiveSelectionBackground#c1bcc23f
• list.inactiveSelectionForeground#474247
• list.invalidItemForeground#f03e4d
• list.warningForeground#eeba21
• listFilterWidget.background#e0dce0
• listFilterWidget.noMatchesOutline#f03e4d
• listFilterWidget.outline#53a6e1
• menu.background#fffcff
• menu.foreground#474247
• menu.selectionBackground#e0dce0
• menu.selectionForeground#282629
• menu.separatorBackground#c1bcc2
• menubar.selectionBackground#e0dce0
• menubar.selectionForeground#282629
• merge.border#847e85
• merge.commonContentBackground#bf65f04c
• merge.commonHeaderBackground#bf65f04c
• merge.currentContentBackground#1fc5984c
• merge.currentHeaderBackground#1fc5984c
• merge.incomingContentBackground#53a6e14c
• merge.incomingHeaderBackground#53a6e14c
• minimap.background#fffcff
• minimap.errorHighlight#f03e4d80
• minimap.findMatchHighlight#eeba21
• minimap.selectionHighlight#53a6e180
• minimap.warningHighlight#f3773580
• minimapGutter.addedBackground#97bd2d80
• minimapGutter.deletedBackground#f03e4d80
• minimapGutter.modifiedBackground#eeba2180
• minimapSlider.activeBackground#a29da333
• minimapSlider.background#e0dce033
• minimapSlider.hoverBackground#c1bcc233
• notebook.cellBorderColor#e0dce03f
• notebook.cellHoverBackground#e0dce03f
• notebook.cellInsertionIndicator#97bd2d
• notebook.cellStatusBarItemHoverBackground#e0dce03f
• notebook.cellToolbarSeparator#e0dce03f
• notebook.focusedCellBackground#e0dce07f
• notebook.focusedCellBorder#bf65f0
• notebook.focusedCellShadow#0000003f
• notebook.focusedEditorBorder#e0dce0
• notebook.focusedRowBorder#bf65f0
• notebook.inactiveFocusedCellBorder#656066
• notebook.outputContainerBackgroundColor#fffcff
• notebook.rowHoverBackground#e0dce07f
• notebook.selectedCellBorder#847e85
• notebook.symbolHighlightBackground#bf65f03f
• notebookScrollbarSlider.activeBackground#6560667f
• notebookScrollbarSlider.background#a29da37f
• notebookScrollbarSlider.hoverBackground#847e857f
• notebookStatusErrorIcon.foreground#f03e4d
• notebookStatusRunningIcon.foreground#53a6e1
• notebookStatusSuccessIcon.foreground#97bd2d
• notificationCenterHeader.background#c1bcc2
• notificationCenterHeader.foreground#474247
• notificationLink.foreground#53a6e1
• notifications.background#e0dce0
• notifications.border#a29da3
• notifications.foreground#282629
• notificationsErrorIcon.foreground#f03e4d
• notificationsInfoIcon.foreground#53a6e1
• notificationsWarningIcon.foreground#f37735
• notificationToast.border#a29da3
• panel.background#fffcff
• panel.border#e0dce0
• panel.dropBorder#53a6e1
• panelSection.border#e0dce0
• panelSection.dropBackground#e0dce03f
• panelSectionHeader.background#c1bcc2
• panelSectionHeader.border#fffcff
• panelSectionHeader.foreground#474247
• panelTitle.activeBorder#a29da3
• panelTitle.activeForeground#474247
• panelTitle.inactiveForeground#847e85
• peekView.border#ee4eb8
• peekViewEditor.background#e0dce07f
• peekViewEditor.matchHighlightBackground#eeba217f
• peekViewEditorGutter.background#e0dce07f
• peekViewResult.background#e0dce0
• peekViewResult.fileForeground#474247
• peekViewResult.lineForeground#c1bcc2
• peekViewResult.matchHighlightBackground#eeba21
• peekViewResult.selectionBackground#a29da3
• peekViewResult.selectionForeground#282629
• peekViewTitle.background#e0dce0
• peekViewTitleDescription.foreground#656066
• peekViewTitleLabel.foreground#282629
• pickerGroup.border#c1bcc2
• pickerGroup.foreground#847e85
• problemsErrorIcon.foreground#f03e4d
• problemsInfoIcon.foreground#53a6e1
• problemsWarningIcon.foreground#f37735
• progressBar.background#97bd2d
• quickInput.background#e0dce0
• quickInput.foreground#282629
• quickInputTitle.background#c1bcc2
• sash.hoverBorder#53a6e1
• scm.providerBorder#c1bcc2
• scrollbar.shadow#28262966
• scrollbarSlider.activeBackground#6560667f
• scrollbarSlider.background#a29da37f
• scrollbarSlider.hoverBackground#847e857f
• selection.background#c1bcc2
• settings.checkboxBackground#53a6e1
• settings.checkboxBorder#53a6e1
• settings.checkboxForeground#fffcff
• settings.dropdownBackground#e0dce0
• settings.dropdownForeground#474247
• settings.dropdownListBorder#c1bcc2
• settings.focusedRowBackground#fffcff
• settings.headerForeground#282629
• settings.modifiedItemIndicator#1fc598
• settings.numberInputBackground#e0dce0
• settings.numberInputForeground#474247
• settings.textInputBackground#e0dce0
• settings.textInputForeground#474247
• sideBar.background#fffcff
• sideBar.border#e0dce0
• sideBar.dropBackground#e0dce03f
• sideBar.foreground#474247
• sideBarSectionHeader.background#c1bcc2
• sideBarSectionHeader.border#fffcff
• sideBarSectionHeader.foreground#474247
• sideBarTitle.foreground#656066
• statusBar.background#53a6e1
• statusBar.border#fffcff
• statusBar.debuggingBackground#f37735
• statusBar.debuggingBorder#fffcff
• statusBar.debuggingForeground#fffcff
• statusBar.foreground#fffcff
• statusBar.noFolderBackground#bf65f0
• statusBar.noFolderBorder#fffcff
• statusBar.noFolderForeground#fffcff
• statusBarItem.activeBackground#1fc598
• statusBarItem.errorBackground#f03e4d
• statusBarItem.errorForeground#fffcff
• statusBarItem.hoverBackground#97bd2d
• statusBarItem.prominentBackground#1fc598
• statusBarItem.prominentHoverBackground#97bd2d
• statusBarItem.remoteBackground#1fc598
• statusBarItem.remoteForeground#fffcff
• symbolIcon.arrayForeground#ee4eb8
• symbolIcon.booleanForeground#bf65f0
• symbolIcon.classForeground#53a6e1
• symbolIcon.colorForeground#1fc598
• symbolIcon.constantForeground#97bd2d
• symbolIcon.constructorForeground#bf65f0
• symbolIcon.enumeratorForeground#1fc598
• symbolIcon.enumeratorMemberForeground#53a6e1
• symbolIcon.eventForeground#f37735
• symbolIcon.fieldForeground#f03e4d
• symbolIcon.fileForeground#474247
• symbolIcon.folderForeground#656066
• symbolIcon.functionForeground#bf65f0
• symbolIcon.interfaceForeground#f03e4d
• symbolIcon.keyForeground#eeba21
• symbolIcon.keywordForeground#53a6e1
• symbolIcon.methodForeground#1fc598
• symbolIcon.moduleForeground#1fc598
• symbolIcon.namespaceForeground#53a6e1
• symbolIcon.nullForeground#f03e4d
• symbolIcon.numberForeground#f37735
• symbolIcon.objectForeground#282629
• symbolIcon.operatorForeground#f03e4d
• symbolIcon.packageForeground#f37735
• symbolIcon.propertyForeground#1fc598
• symbolIcon.referenceForeground#f37735
• symbolIcon.snippetForeground#656066
• symbolIcon.stringForeground#97bd2d
• symbolIcon.structForeground#53a6e1
• symbolIcon.textForeground#282629
• symbolIcon.typeParameterForeground#53a6e1
• symbolIcon.unitForeground#eeba21
• symbolIcon.variableForeground#f37735
• tab.activeBackground#fffcff
• tab.activeForeground#474247
• tab.activeModifiedBorder#eeba21
• tab.border#fffcff
• tab.hoverBackground#e0dce080
• tab.hoverForeground#656066
• tab.inactiveBackground#e0dce0
• tab.inactiveForeground#a29da3
• tab.inactiveModifiedBorder#eeba21
• tab.lastPinnedBorder#ee4eb8
• tab.unfocusedActiveBackground#fffcff
• tab.unfocusedActiveForeground#a29da3
• tab.unfocusedActiveModifiedBorder#eeba21
• tab.unfocusedHoverBackground#e0dce080
• tab.unfocusedHoverForeground#847e85
• tab.unfocusedInactiveBackground#e0dce0
• tab.unfocusedInactiveForeground#c1bcc2
• tab.unfocusedInactiveModifiedBorder#eeba21
• terminal.ansiBlack#fffcff
• terminal.ansiBlue#53a6e1
• terminal.ansiBrightBlack#e0dce0
• terminal.ansiBrightBlue#53a6e1
• terminal.ansiBrightCyan#1fc598
• terminal.ansiBrightGreen#1fc598
• terminal.ansiBrightMagenta#ee4eb8
• terminal.ansiBrightRed#f37735
• terminal.ansiBrightWhite#282629
• terminal.ansiBrightYellow#eeba21
• terminal.ansiCyan#1fc598
• terminal.ansiGreen#97bd2d
• terminal.ansiMagenta#ee4eb8
• terminal.ansiRed#f03e4d
• terminal.ansiWhite#474247
• terminal.ansiYellow#eeba21
• terminal.background#fffcff
• terminal.foreground#474247
• terminal.selectionBackground#53a6e17f
• terminalCursor.background#e0dce0
• terminalCursor.foreground#656066
• testing.iconErrored#f03e4d
• testing.iconFailed#f37735
• testing.iconPassed#97bd2d
• testing.iconQueued#1fc598
• testing.iconSkipped#847e85
• testing.iconUnset#656066
• testing.message.error.decorationForeground#f03e4d
• testing.message.error.lineBackground#f03e4d3f
• testing.message.hint.decorationForeground#ee4eb8
• testing.message.hint.lineBackground#ee4eb83f
• testing.message.info.decorationForeground#53a6e1
• testing.message.info.lineBackground#53a6e13f
• testing.message.warning.decorationForeground#f37735
• testing.message.warning.lineBackground#f377353f
• testing.peekBorder#a29da3
• testing.runAction#53a6e1
• textBlockQuote.background#e0dce0
• textBlockQuote.border#e0dce0
• textCodeBlock.background#fffcff
• textLink.activeForeground#1fc598
• textLink.foreground#53a6e1
• textPreformat.foreground#f37735
• textSeparator.foreground#847e85
• titleBar.activeBackground#fffcff
• titleBar.activeForeground#656066
• titleBar.inactiveBackground#fffcff
• titleBar.inactiveForeground#a29da3
• tree.indentGuidesStroke#e0dce0
• walkThrough.embeddedEditorBackground#fffcff
• welcomePage.background#fffcff
• welcomePage.buttonBackground#e0dce0
• welcomePage.buttonHoverBackground#c1bcc2
• welcomePage.progress.background#53a6e1
• welcomePage.progress.foreground#fffcff
• widget.shadow#28262966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).