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#484f5133
• activityBar.activeBorder#d1d5d6
• activityBar.activeFocusBorder#6c5ce7
• activityBar.background#2d3436
• activityBar.border#2d3436
• activityBar.dropBorder#0763aa
• activityBar.foreground#b5babc
• activityBar.inactiveForeground#9a9fa1
• activityBarBadge.background#6c5ce7
• activityBarBadge.foreground#2d3436
• badge.background#6c5ce7
• badge.foreground#2d3436
• breadcrumb.activeSelectionForeground#ecf0f1
• breadcrumb.background#2d3436
• breadcrumb.focusForeground#d1d5d6
• breadcrumb.foreground#b5babc
• breadcrumbPicker.background#2d3436
• button.background#0763aa
• button.foreground#2d3436
• button.hoverBackground#40b393
• button.secondaryBackground#d1d5d6
• button.secondaryForeground#2d3436
• button.secondaryHoverBackground#b5babc
• charts.blue#0763aa
• charts.foreground#d1d5d6
• charts.green#008a6f
• charts.lines#7f8586
• charts.orange#ea8462
• charts.purple#6c5ce7
• charts.red#d63031
• charts.yellow#fdcb6e
• checkbox.background#0763aa
• checkbox.border#484f51
• checkbox.foreground#2d3436
• debugConsole.errorForeground#d63031
• debugConsole.infoForeground#0763aa
• debugConsole.sourceForeground#6c5ce7
• debugConsole.warningForeground#ea8462
• debugConsoleInputIcon.foreground#9a9fa1
• debugExceptionWidget.background#484f51
• debugExceptionWidget.border#484f51
• debugIcon.breakpointCurrentStackframeForeground#008a6f
• debugIcon.breakpointDisabledForeground#9a9fa1
• debugIcon.breakpointForeground#d63031
• debugIcon.breakpointStackframeForeground#fdcb6e
• debugIcon.breakpointUnverifiedForeground#b5babc
• debugIcon.continueForeground#008a6f
• debugIcon.disconnectForeground#ea8462
• debugIcon.pauseForeground#0763aa
• debugIcon.restartForeground#ae326e
• debugIcon.startForeground#008a6f
• debugIcon.stepBackForeground#ecf0f1
• debugIcon.stepIntoForeground#ecf0f1
• debugIcon.stepOutForeground#ecf0f1
• debugIcon.stepOverForeground#ecf0f1
• debugIcon.stopForeground#d63031
• debugTokenExpression.boolean#6c5ce7
• debugTokenExpression.error#d63031
• debugTokenExpression.name#0763aa
• debugTokenExpression.number#ae326e
• debugTokenExpression.string#008a6f
• debugTokenExpression.value#ecf0f1
• debugToolBar.background#484f51
• debugToolBar.border#646a6b
• debugView.exceptionLabelBackground#484f51
• debugView.exceptionLabelForeground#fdcb6e
• debugView.stateLabelBackground#484f51
• debugView.stateLabelForeground#0763aa
• debugView.valueChangedHighlight#fdcb6e33
• descriptionForeground#d1d5d6
• diffEditor.border#484f51
• diffEditor.diagonalFill#484f517f
• diffEditor.insertedTextBackground#008a6f20
• diffEditor.removedTextBackground#d6303120
• dropdown.background#484f51
• dropdown.border#484f51
• dropdown.foreground#d1d5d6
• dropdown.listBackground#484f51
• editor.background#2d3436
• editor.findMatchBackground#fdcb6e3f
• editor.findMatchHighlightBackground#fdcb6e33
• editor.findRangeHighlightBackground#484f51
• editor.focusedStackFrameHighlightBackground#008a6f3f
• editor.foldBackground#484f5166
• editor.foreground#ecf0f1
• editor.hoverHighlightBackground#646a6b7f
• editor.inactiveSelectionBackground#0763aa33
• editor.lineHighlightBackground#2d3436
• editor.lineHighlightBorder#484f51
• editor.rangeHighlightBackground#fdcb6e33
• editor.selectionBackground#0763aa33
• editor.selectionForeground#ecf0f1
• editor.selectionHighlightBackground#484f51
• editor.snippetFinalTabstopHighlightBackground#646a6b7f
• editor.snippetTabstopHighlightBackground#484f517f
• editor.stackFrameHighlightBackground#40b3933f
• editor.symbolHighlightBackground#6c5ce733
• editor.wordHighlightBackground#6c5ce733
• editor.wordHighlightStrongBackground#ae326e33
• editorBracketMatch.background#484f51
• editorBracketMatch.border#646a6b
• editorCodeLens.foreground#b5babc
• editorCursor.background#2d3436
• editorCursor.foreground#6c5ce7
• editorError.border#ecf0f1
• editorError.foreground#d63031
• editorGroup.border#484f51
• editorGroup.dropBackground#646a6b7f
• editorGroup.emptyBackground#2d3436
• editorGroup.focusedEmptyBorder#484f51
• editorGroupHeader.border#2d3436
• editorGroupHeader.noTabsBackground#2d3436
• editorGroupHeader.tabsBackground#2d3436
• editorGroupHeader.tabsBorder#2d3436
• editorGutter.addedBackground#008a6f
• editorGutter.background#2d3436
• editorGutter.commentRangeForeground#7f8586
• editorGutter.deletedBackground#d63031
• editorGutter.foldingControlForeground#b5babc
• editorGutter.modifiedBackground#fdcb6e
• editorHint.border#9a9fa1
• editorHint.foreground#ae326e
• editorHoverWidget.background#484f51
• editorHoverWidget.border#484f51
• editorHoverWidget.foreground#d1d5d6
• editorHoverWidget.statusBarBackground#0763aa33
• editorIndentGuide.activeBackground#646a6b
• editorIndentGuide.background#484f51
• editorInfo.border#b5babc
• editorInfo.foreground#0763aa
• editorLightBulb.foreground#fdcb6e
• editorLightBulbAutoFix.foreground#0763aa
• editorLineNumber.activeForeground#9a9fa1
• editorLineNumber.foreground#646a6b
• editorLink.activeForeground#40b393
• editorMarkerNavigation.background#484f51
• editorMarkerNavigationError.background#d63031
• editorMarkerNavigationInfo.background#0763aa
• editorMarkerNavigationWarning.background#ea8462
• editorOverviewRuler.addedForeground#008a6f7f
• editorOverviewRuler.border#484f51
• editorOverviewRuler.bracketMatchForeground#7f8586
• editorOverviewRuler.commonContentForeground#6c5ce7
• editorOverviewRuler.currentContentForeground#40b393
• editorOverviewRuler.deletedForeground#d630317f
• editorOverviewRuler.errorForeground#d630317f
• editorOverviewRuler.findMatchForeground#fdcb6ebf
• editorOverviewRuler.incomingContentForeground#0763aa
• editorOverviewRuler.infoForeground#0763aa7f
• editorOverviewRuler.modifiedForeground#fdcb6e7f
• editorOverviewRuler.rangeHighlightForeground#646a6bbf
• editorOverviewRuler.selectionHighlightForeground#484f51bf
• editorOverviewRuler.warningForeground#ea84627f
• editorOverviewRuler.wordHighlightForeground#646a6bbf
• editorOverviewRuler.wordHighlightStrongForeground#7f8586bf
• editorPane.background#2d3436
• editorRuler.foreground#484f51
• editorSuggestWidget.background#484f51
• editorSuggestWidget.border#484f51
• editorSuggestWidget.foreground#d1d5d6
• editorSuggestWidget.highlightForeground#ae326e
• editorSuggestWidget.selectedBackground#646a6b
• editorUnnecessaryCode.opacity#0000007f
• editorWarning.border#d1d5d6
• editorWarning.foreground#ea8462
• editorWhitespace.foreground#484f51
• editorWidget.background#484f51
• editorWidget.border#484f51
• editorWidget.foreground#d1d5d6
• editorWidget.resizeBorder#0763aa
• errorForeground#d63031
• extensionBadge.remoteBackground#ae326e
• extensionBadge.remoteForeground#2d3436
• extensionButton.prominentBackground#0763aa
• extensionButton.prominentForeground#2d3436
• extensionButton.prominentHoverBackground#40b393
• focusBorder#6c5ce7
• foreground#ecf0f1
• gitDecoration.addedResourceForeground#008a6f
• gitDecoration.conflictingResourceForeground#40b393
• gitDecoration.deletedResourceForeground#d63031
• gitDecoration.ignoredResourceForeground#7f8586
• gitDecoration.modifiedResourceForeground#fdcb6e
• gitDecoration.stageDeletedResourceForeground#d63031
• gitDecoration.stageModifiedResourceForeground#40b393
• gitDecoration.submoduleResourceForeground#ae326e
• gitDecoration.untrackedResourceForeground#6c5ce7
• icon.foreground#d1d5d6
• imagePreview.border#484f51
• input.background#484f51
• input.border#484f51
• input.foreground#d1d5d6
• input.placeholderForeground#646a6b
• inputOption.activeBackground#646a6b
• inputOption.activeBorder#40b393
• inputOption.activeForeground#ecf0f1
• inputValidation.errorBackground#484f51
• inputValidation.errorBorder#d63031
• inputValidation.errorForeground#d63031
• inputValidation.infoBackground#484f51
• inputValidation.infoBorder#0763aa
• inputValidation.infoForeground#0763aa
• inputValidation.warningBackground#484f51
• inputValidation.warningBorder#ea8462
• inputValidation.warningForeground#ea8462
• list.activeSelectionBackground#6c5ce733
• list.activeSelectionForeground#ecf0f1
• list.deemphasizedForeground#9a9fa1
• list.dropBackground#484f51
• list.errorForeground#d63031
• list.filterMatchBackground#fdcb6e33
• list.filterMatchBorder#fdcb6e33
• list.focusBackground#7f85863f
• list.focusForeground#ecf0f1
• list.highlightForeground#fdcb6e
• list.hoverBackground#484f5133
• list.hoverForeground#ecf0f1
• list.inactiveFocusBackground#484f513f
• list.inactiveSelectionBackground#646a6b3f
• list.inactiveSelectionForeground#d1d5d6
• list.invalidItemForeground#d63031
• list.warningForeground#fdcb6e
• listFilterWidget.background#484f51
• listFilterWidget.noMatchesOutline#d63031
• listFilterWidget.outline#0763aa
• menu.background#2d3436
• menu.foreground#d1d5d6
• menu.selectionBackground#484f51
• menu.selectionForeground#ecf0f1
• menu.separatorBackground#646a6b
• menubar.selectionBackground#484f51
• menubar.selectionForeground#ecf0f1
• merge.border#9a9fa1
• merge.commonContentBackground#6c5ce74c
• merge.commonHeaderBackground#6c5ce74c
• merge.currentContentBackground#40b3934c
• merge.currentHeaderBackground#40b3934c
• merge.incomingContentBackground#0763aa4c
• merge.incomingHeaderBackground#0763aa4c
• minimap.background#2d3436
• minimap.errorHighlight#d6303180
• minimap.findMatchHighlight#fdcb6e
• minimap.selectionHighlight#0763aa80
• minimap.warningHighlight#ea846280
• minimapGutter.addedBackground#008a6f80
• minimapGutter.deletedBackground#d6303180
• minimapGutter.modifiedBackground#fdcb6e80
• minimapSlider.activeBackground#7f858633
• minimapSlider.background#484f5133
• minimapSlider.hoverBackground#646a6b33
• notebook.cellBorderColor#484f513f
• notebook.cellHoverBackground#484f513f
• notebook.cellInsertionIndicator#008a6f
• notebook.cellStatusBarItemHoverBackground#484f513f
• notebook.cellToolbarSeparator#484f513f
• notebook.focusedCellBackground#484f517f
• notebook.focusedCellBorder#6c5ce7
• notebook.focusedCellShadow#0000003f
• notebook.focusedEditorBorder#484f51
• notebook.focusedRowBorder#6c5ce7
• notebook.inactiveFocusedCellBorder#b5babc
• notebook.outputContainerBackgroundColor#2d3436
• notebook.rowHoverBackground#484f517f
• notebook.selectedCellBorder#9a9fa1
• notebook.symbolHighlightBackground#6c5ce73f
• notebookScrollbarSlider.activeBackground#b5babc7f
• notebookScrollbarSlider.background#7f85867f
• notebookScrollbarSlider.hoverBackground#9a9fa17f
• notebookStatusErrorIcon.foreground#d63031
• notebookStatusRunningIcon.foreground#0763aa
• notebookStatusSuccessIcon.foreground#008a6f
• notificationCenterHeader.background#646a6b
• notificationCenterHeader.foreground#d1d5d6
• notificationLink.foreground#0763aa
• notifications.background#484f51
• notifications.border#7f8586
• notifications.foreground#ecf0f1
• notificationsErrorIcon.foreground#d63031
• notificationsInfoIcon.foreground#0763aa
• notificationsWarningIcon.foreground#ea8462
• notificationToast.border#7f8586
• panel.background#2d3436
• panel.border#484f51
• panel.dropBorder#0763aa
• panelSection.border#484f51
• panelSection.dropBackground#484f513f
• panelSectionHeader.background#646a6b
• panelSectionHeader.border#2d3436
• panelSectionHeader.foreground#d1d5d6
• panelTitle.activeBorder#7f8586
• panelTitle.activeForeground#d1d5d6
• panelTitle.inactiveForeground#9a9fa1
• peekView.border#ae326e
• peekViewEditor.background#484f517f
• peekViewEditor.matchHighlightBackground#fdcb6e7f
• peekViewEditorGutter.background#484f517f
• peekViewResult.background#484f51
• peekViewResult.fileForeground#d1d5d6
• peekViewResult.lineForeground#646a6b
• peekViewResult.matchHighlightBackground#fdcb6e
• peekViewResult.selectionBackground#7f8586
• peekViewResult.selectionForeground#ecf0f1
• peekViewTitle.background#484f51
• peekViewTitleDescription.foreground#b5babc
• peekViewTitleLabel.foreground#ecf0f1
• pickerGroup.border#646a6b
• pickerGroup.foreground#9a9fa1
• problemsErrorIcon.foreground#d63031
• problemsInfoIcon.foreground#0763aa
• problemsWarningIcon.foreground#ea8462
• progressBar.background#008a6f
• quickInput.background#484f51
• quickInput.foreground#ecf0f1
• quickInputTitle.background#646a6b
• sash.hoverBorder#0763aa
• scm.providerBorder#646a6b
• scrollbar.shadow#2d3436
• scrollbarSlider.activeBackground#b5babc7f
• scrollbarSlider.background#7f85867f
• scrollbarSlider.hoverBackground#9a9fa17f
• selection.background#646a6b
• settings.checkboxBackground#0763aa
• settings.checkboxBorder#0763aa
• settings.checkboxForeground#2d3436
• settings.dropdownBackground#484f51
• settings.dropdownForeground#d1d5d6
• settings.dropdownListBorder#646a6b
• settings.focusedRowBackground#2d3436
• settings.headerForeground#ecf0f1
• settings.modifiedItemIndicator#40b393
• settings.numberInputBackground#484f51
• settings.numberInputForeground#d1d5d6
• settings.textInputBackground#484f51
• settings.textInputForeground#d1d5d6
• sideBar.background#2d3436
• sideBar.border#484f51
• sideBar.dropBackground#484f513f
• sideBar.foreground#d1d5d6
• sideBarSectionHeader.background#646a6b
• sideBarSectionHeader.border#2d3436
• sideBarSectionHeader.foreground#d1d5d6
• sideBarTitle.foreground#b5babc
• statusBar.background#0763aa
• statusBar.border#2d3436
• statusBar.debuggingBackground#ea8462
• statusBar.debuggingBorder#2d3436
• statusBar.debuggingForeground#2d3436
• statusBar.foreground#2d3436
• statusBar.noFolderBackground#6c5ce7
• statusBar.noFolderBorder#2d3436
• statusBar.noFolderForeground#2d3436
• statusBarItem.activeBackground#40b393
• statusBarItem.errorBackground#d63031
• statusBarItem.errorForeground#2d3436
• statusBarItem.hoverBackground#008a6f
• statusBarItem.prominentBackground#40b393
• statusBarItem.prominentHoverBackground#008a6f
• statusBarItem.remoteBackground#40b393
• statusBarItem.remoteForeground#2d3436
• symbolIcon.arrayForeground#ae326e
• symbolIcon.booleanForeground#6c5ce7
• symbolIcon.classForeground#0763aa
• symbolIcon.colorForeground#40b393
• symbolIcon.constantForeground#008a6f
• symbolIcon.constructorForeground#6c5ce7
• symbolIcon.enumeratorForeground#40b393
• symbolIcon.enumeratorMemberForeground#0763aa
• symbolIcon.eventForeground#ea8462
• symbolIcon.fieldForeground#d63031
• symbolIcon.fileForeground#d1d5d6
• symbolIcon.folderForeground#b5babc
• symbolIcon.functionForeground#6c5ce7
• symbolIcon.interfaceForeground#d63031
• symbolIcon.keyForeground#fdcb6e
• symbolIcon.keywordForeground#0763aa
• symbolIcon.methodForeground#40b393
• symbolIcon.moduleForeground#40b393
• symbolIcon.namespaceForeground#0763aa
• symbolIcon.nullForeground#d63031
• symbolIcon.numberForeground#ea8462
• symbolIcon.objectForeground#ecf0f1
• symbolIcon.operatorForeground#d63031
• symbolIcon.packageForeground#ea8462
• symbolIcon.propertyForeground#40b393
• symbolIcon.referenceForeground#ea8462
• symbolIcon.snippetForeground#b5babc
• symbolIcon.stringForeground#008a6f
• symbolIcon.structForeground#0763aa
• symbolIcon.textForeground#ecf0f1
• symbolIcon.typeParameterForeground#0763aa
• symbolIcon.unitForeground#fdcb6e
• symbolIcon.variableForeground#ea8462
• tab.activeBackground#2d3436
• tab.activeForeground#d1d5d6
• tab.activeModifiedBorder#fdcb6e
• tab.border#2d3436
• tab.hoverBackground#484f5180
• tab.hoverForeground#b5babc
• tab.inactiveBackground#484f51
• tab.inactiveForeground#7f8586
• tab.inactiveModifiedBorder#fdcb6e
• tab.lastPinnedBorder#ae326e
• tab.unfocusedActiveBackground#2d3436
• tab.unfocusedActiveForeground#7f8586
• tab.unfocusedActiveModifiedBorder#fdcb6e
• tab.unfocusedHoverBackground#484f5180
• tab.unfocusedHoverForeground#9a9fa1
• tab.unfocusedInactiveBackground#484f51
• tab.unfocusedInactiveForeground#646a6b
• tab.unfocusedInactiveModifiedBorder#fdcb6e
• terminal.ansiBlack#2d3436
• terminal.ansiBlue#0763aa
• terminal.ansiBrightBlack#484f51
• terminal.ansiBrightBlue#0763aa
• terminal.ansiBrightCyan#40b393
• terminal.ansiBrightGreen#40b393
• terminal.ansiBrightMagenta#ae326e
• terminal.ansiBrightRed#ea8462
• terminal.ansiBrightWhite#ecf0f1
• terminal.ansiBrightYellow#fdcb6e
• terminal.ansiCyan#40b393
• terminal.ansiGreen#008a6f
• terminal.ansiMagenta#ae326e
• terminal.ansiRed#d63031
• terminal.ansiWhite#d1d5d6
• terminal.ansiYellow#fdcb6e
• terminal.background#2d3436
• terminal.foreground#d1d5d6
• terminal.selectionBackground#0763aa7f
• terminalCursor.background#484f51
• terminalCursor.foreground#b5babc
• testing.iconErrored#d63031
• testing.iconFailed#ea8462
• testing.iconPassed#008a6f
• testing.iconQueued#40b393
• testing.iconSkipped#9a9fa1
• testing.iconUnset#b5babc
• testing.message.error.decorationForeground#d63031
• testing.message.error.lineBackground#d630313f
• testing.message.hint.decorationForeground#ae326e
• testing.message.hint.lineBackground#ae326e3f
• testing.message.info.decorationForeground#0763aa
• testing.message.info.lineBackground#0763aa3f
• testing.message.warning.decorationForeground#ea8462
• testing.message.warning.lineBackground#ea84623f
• testing.peekBorder#7f8586
• testing.runAction#0763aa
• textBlockQuote.background#484f51
• textBlockQuote.border#484f51
• textCodeBlock.background#2d3436
• textLink.activeForeground#40b393
• textLink.foreground#0763aa
• textPreformat.foreground#ea8462
• textSeparator.foreground#9a9fa1
• titleBar.activeBackground#2d3436
• titleBar.activeForeground#b5babc
• titleBar.inactiveBackground#2d3436
• titleBar.inactiveForeground#7f8586
• tree.indentGuidesStroke#484f51
• walkThrough.embeddedEditorBackground#2d3436
• welcomePage.background#2d3436
• welcomePage.buttonBackground#484f51
• welcomePage.buttonHoverBackground#646a6b
• welcomePage.progress.background#0763aa
• welcomePage.progress.foreground#2d3436
• widget.shadow#2d3436

tokenColors

TextMate scopes and font styles (syntax highlighting rules).