Son Dark Eight
Publisher: soneightThemes in package: 1
cyan color based dark theme
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.
- actionBar.toggledBackground#206060
- activityBar.activeBackground#206060
- activityBar.activeBorder#104040
- activityBar.activeFocusBorder#104040
- activityBar.background#104040
- activityBar.border#104040
- activityBar.dropBorder#E0E080
- activityBar.foreground#E0E0E0
- activityBar.inactiveForeground#808080
- activityBarBadge.background#206060
- activityBarBadge.foreground#E0E080
- badge.background#104040
- badge.foreground#E0E080
- banner.background#101010
- banner.foreground#80E0E0
- banner.iconForeground#80E0E0
- breadcrumb.activeSelectionForeground#E0E0E0
- breadcrumb.background#181818
- breadcrumb.focusForeground#E0E0E0
- breadcrumb.foreground#808080
- breadcrumbPicker.background#101010
- button.background#104040
- button.border#104040
- button.foreground#E0E0E0
- button.hoverBackground#206060
- button.secondaryBackground#404040
- button.secondaryForeground#A0A0A0
- button.secondaryHoverBackground#606060
- button.separator#206060
- checkbox.background#104040
- checkbox.border#104040
- checkbox.foreground#E0E0E0
- checkbox.selectBackground#202020
- checkbox.selectBorder#104040
- commandCenter.activeBackground#206060
- commandCenter.activeBorder#206060
- commandCenter.activeForeground#E0E0E0
- commandCenter.background#104040
- commandCenter.border#104040
- commandCenter.foreground#C0C0C0
- commandCenter.inactiveBorder#104040
- commandCenter.inactiveForeground#808080
- debugConsole.errorForeground#E04040
- debugConsole.infoForeground#40C0C0
- debugConsole.sourceForeground#C0C0C0
- debugConsole.warningForeground#C0C040
- debugExceptionWidget.background#202020
- debugExceptionWidget.border#401010
- debugIcon.breakpointCurrentStackframeForeground#E04040
- debugIcon.breakpointDisabledForeground#E04040
- debugIcon.breakpointForeground#E04040
- debugIcon.breakpointStackframeForeground#E04040
- debugIcon.breakpointUnverifiedForeground#E04040
- debugIcon.continueForeground#E04040
- debugIcon.disconnectForeground#E04040
- debugIcon.pauseForeground#E04040
- debugIcon.restartForeground#E04040
- debugIcon.startForeground#E04040
- debugIcon.stepBackForeground#E04040
- debugIcon.stepIntoForeground#E04040
- debugIcon.stepOutForeground#E04040
- debugIcon.stepOverForeground#E04040
- debugIcon.stopForeground#E04040
- debugTokenExpression.boolean#8080C0
- debugTokenExpression.error#C08080
- debugTokenExpression.name#80C0C0
- debugTokenExpression.number#80C080
- debugTokenExpression.string#C080C0
- debugTokenExpression.value#C0C080
- debugToolBar.background#401010
- debugToolBar.border#401010
- debugView.exceptionLabelBackground#802020
- debugView.exceptionLabelForeground#C0C0C0
- debugView.stateLabelBackground#101010
- debugView.stateLabelForeground#C0C0C0
- debugView.valueChangedHighlight#C04040
- descriptionForeground#A0A0A0
- diffEditor.border#808080
- diffEditor.diagonalFill#204020
- diffEditor.insertedTextBackground#20802020
- diffEditor.insertedTextBorder#20202000
- diffEditor.removedTextBackground#80202020
- diffEditor.removedTextBorder#20202000
- disabledForeground#808080
- dropdown.background#104040
- dropdown.border#104040
- dropdown.foreground#E0E0E0
- dropdown.listBackground#101010
- editor.background#222
- editor.findMatchBackground#606060
- editor.findMatchBorder#E0E0A0
- editor.findMatchHighlightBackground#60606080
- editor.findMatchHighlightBorder#606060
- editor.findRangeHighlightBackground#10101080
- editor.findRangeHighlightBorder#20202080
- editor.focusedStackFrameHighlightBackground#602020
- editor.foldBackground#40404040
- editor.foreground#CCC
- editor.hoverHighlightBackground#80808080
- editor.inactiveSelectionBackground#40808020
- editor.lineHighlightBackground#111
- editor.lineHighlightBorder#111
- editor.rangeHighlightBackground#40404080
- editor.rangeHighlightBorder#404040
- editor.selectionBackground#104040
- editor.selectionForeground#E0E0E0
- editor.selectionHighlightBackground#20606080
- editor.selectionHighlightBorder#206060
- editor.snippetFinalTabstopHighlightBackground#101010
- editor.snippetFinalTabstopHighlightBorder#101010
- editor.snippetTabstopHighlightBackground#101010
- editor.snippetTabstopHighlightBorder#101010
- editor.stackFrameHighlightBackground#401010
- editor.symbolHighlightBackground#40404080
- editor.symbolHighlightBorder#404040
- editor.wordHighlightBackground#40404080
- editor.wordHighlightBorder#404040
- editor.wordHighlightStrongBackground#40404080
- editor.wordHighlightStrongBorder#404040
- editorBracketHighlight.foreground1#8080E0
- editorBracketHighlight.foreground2#E0E080
- editorBracketHighlight.foreground3#E08080
- editorBracketHighlight.foreground4#80E0E0
- editorBracketHighlight.foreground5#80E080
- editorBracketHighlight.foreground6#E080E0
- editorBracketMatch.background#202020
- editorBracketMatch.border#808080
- editorCodeLens.foreground#808080
- editorCursor.background#226
- editorCursor.foreground#EEA
- editorError.border#202020
- editorError.foreground#A2A
- editorGroup.border#101010
- editorGroup.dropBackground#40808040
- editorGroup.emptyBackground#404040
- editorGroup.focusedEmptyBorder#404040
- editorGroupHeader.border#104040
- editorGroupHeader.noTabsBackground#181818
- editorGroupHeader.tabsBackground#181818
- editorGroupHeader.tabsBorder#181818
- editorGutter.addedBackground#681
- editorGutter.addedSecondaryBackground#482
- editorGutter.background#222
- editorGutter.deletedBackground#816
- editorGutter.deletedSecondaryBackground#824
- editorGutter.foldingControlForeground#CCC
- editorGutter.modifiedBackground#168
- editorGutter.modifiedSecondaryBackground#248
- editorHint.border#202020
- editorHint.foreground#808080
- editorHoverWidget.background#202020
- editorHoverWidget.border#104040
- editorHoverWidget.foreground#808080
- editorHoverWidget.statusBarBackground#104040
- editorIndentGuide.activeBackground1#888
- editorIndentGuide.background1#444
- editorInfo.border#202020
- editorInfo.foreground#2AA
- editorLightBulb.foreground#E0E080
- editorLightBulbAutoFix.foreground#E0E080
- editorLineNumber.activeForeground#EEA
- editorLineNumber.foreground#888
- editorLink.activeForeground#80E0E0
- editorMarkerNavigation.background#111
- editorMarkerNavigationError.background#818
- editorMarkerNavigationInfo.background#188
- editorMarkerNavigationWarning.background#881
- editorOverviewRuler.addedForeground#6A2
- editorOverviewRuler.background#111
- editorOverviewRuler.border#206060
- editorOverviewRuler.bracketMatchForeground#808080
- editorOverviewRuler.commonContentForeground#202020
- editorOverviewRuler.currentContentForeground#206060
- editorOverviewRuler.deletedForeground#A26
- editorOverviewRuler.errorForeground#E4E
- editorOverviewRuler.findMatchForeground#60606080
- editorOverviewRuler.incomingContentForeground#602060
- editorOverviewRuler.infoForeground#4EE
- editorOverviewRuler.modifiedForeground#26A
- editorOverviewRuler.rangeHighlightForeground#60606080
- editorOverviewRuler.selectionHighlightForeground#80808080
- editorOverviewRuler.warningForeground#EE4
- editorOverviewRuler.wordHighlightForeground#40404080
- editorPane.background#181818
- editorRuler.foreground#104040
- editorSuggestWidget.background#101010
- editorSuggestWidget.border#101010
- editorSuggestWidget.foreground#808080
- editorSuggestWidget.highlightForeground#C0C080
- editorSuggestWidget.selectedBackground#104040
- editorUnnecessaryCode.border#808080
- editorUnnecessaryCode.opacity#00000080
- editorWarning.border#202020
- editorWarning.foreground#AA2
- editorWhitespace.foreground#404040
- editorWidget.background#202020
- editorWidget.border#202020
- editorWidget.foreground#808080
- editorWidget.resizeBorder#202020
- errorForeground#E04040
- extensionBadge.remoteBackground#104040
- extensionBadge.remoteForeground#E0E080
- extensionButton.background#104040
- extensionButton.border#104040
- extensionButton.foreground#E0E0E0
- extensionButton.hoverBackground#206060
- extensionButton.prominentBackground#104040
- extensionButton.prominentForeground#E0E0E0
- extensionButton.prominentHoverBackground#206060
- extensionButton.separator#202020
- focusBorder#206060
- foreground#C0C0C0
- gitDecoration.addedResourceForeground#AE8
- gitDecoration.conflictingResourceForeground#E84
- gitDecoration.deletedResourceForeground#E6C
- gitDecoration.ignoredResourceForeground#888
- gitDecoration.modifiedResourceForeground#6CE
- gitDecoration.renamedResourceForeground#4E8
- gitDecoration.stageDeletedResourceForeground#E8A
- gitDecoration.stageModifiedResourceForeground#8AE
- gitDecoration.submoduleResourceForeground#84E
- gitDecoration.untrackedResourceForeground#CE6
- icon.foreground#808080
- input.background#101010
- input.border#101010
- input.foreground#E0E0E0
- input.placeholderForeground#808080
- inputOption.activeBackground#104040
- inputOption.activeBorder#104040
- inputOption.activeForeground#E0E0E0
- inputOption.hoverBackground#104040
- inputValidation.errorBackground#402020
- inputValidation.errorBorder#601010
- inputValidation.errorForeground#A0A0A0
- inputValidation.infoBackground#202040
- inputValidation.infoBorder#101060
- inputValidation.infoForeground#A0A0A0
- inputValidation.warningBackground#404020
- inputValidation.warningBorder#606010
- inputValidation.warningForeground#A0A0A0
- keybindingLabel.background#104040
- keybindingLabel.border#104040
- keybindingLabel.bottomBorder#206060
- keybindingLabel.foreground#E0E0E0
- keybindingTable.headerBackground#101010
- keybindingTable.rowsBackground#202020
- list.activeSelectionBackground#206060
- list.activeSelectionForeground#E0E0E0
- list.activeSelectionIconForeground#E0E0E0
- list.deemphasizedForeground#808080
- list.dropBackground#104040
- list.dropBetweenBackground#206060
- list.errorForeground#E01010
- list.filterMatchBackground#206060
- list.filterMatchBorder#206060
- list.focusBackground#104040
- list.focusForeground#E0E0E0
- list.focusHighlightForeground#E0E080
- list.highlightForeground#E0E080
- list.hoverBackground#104040
- list.hoverForeground#E0E0E0
- list.inactiveFocusBackground#104040
- list.inactiveSelectionBackground#104040
- list.inactiveSelectionForeground#E0E0E0
- list.invalidItemForeground#E08080
- list.warningForeground#E0E010
- listFilterWidget.background#104040
- listFilterWidget.shadow#206060
- menu.background#101010
- menu.border#206060
- menu.foreground#C0C0C0
- menu.selectionBackground#206060
- menu.selectionForeground#E0E0E0
- menu.separatorBackground#206060
- menubar.selectionBackground#206060
- menubar.selectionBorder#206060
- menubar.selectionForeground#E0E0E0
- merge.border#20202000
- merge.commonContentBackground#20202080
- merge.commonHeaderBackground#40404080
- merge.currentContentBackground#10404080
- merge.currentHeaderBackground#20606080
- merge.incomingContentBackground#40104080
- merge.incomingHeaderBackground#60206080
- minimap.background#222
- minimap.errorHighlight#E4E8
- minimap.findMatchHighlight#60606080
- minimap.infoHighlight#4EE8
- minimap.selectionHighlight#20606080
- minimap.warningHighlight#EE48
- minimapGutter.addedBackground#6A2
- minimapGutter.deletedBackground#A26
- minimapGutter.modifiedBackground#26A
- minimapSlider.activeBackground#20606080
- minimapSlider.background#20606040
- minimapSlider.hoverBackground#20606060
- notificationCenter.border#104040
- notificationCenterHeader.background#104040
- notificationCenterHeader.foreground#E0E0E0
- notificationLink.foreground#4040C0
- notifications.background#101010
- notifications.border#104040
- notifications.foreground#C0C0C0
- notificationsErrorIcon.foreground#C2C
- notificationsInfoIcon.foreground#2CC
- notificationsWarningIcon.foreground#CC2
- notificationToast.border#104040
- panel.background#181818
- panel.border#104040
- panel.dropBorder#A0A0A0
- panelInput.border#104040
- panelSection.border#104040
- panelSection.dropBackground#40808040
- panelSectionHeader.background#202020
- panelSectionHeader.border#202020
- panelSectionHeader.foreground#A0A0A0
- panelTitle.activeBorder#208080
- panelTitle.activeForeground#E0E0E0
- panelTitle.inactiveForeground#808080
- peekView.border#101010
- peekViewEditor.background#202020
- peekViewEditor.matchHighlightBackground#60606080
- peekViewEditor.matchHighlightBorder#606060
- peekViewEditorGutter.background#101010
- peekViewResult.background#101010
- peekViewResult.fileForeground#808080
- peekViewResult.lineForeground#C0C0C0
- peekViewResult.matchHighlightBackground#60606080
- peekViewResult.selectionBackground#104040
- peekViewResult.selectionForeground#C0C0C0
- peekViewTitle.background#101010
- peekViewTitleDescription.foreground#808080
- peekViewTitleLabel.foreground#C0C0C0
- pickerGroup.border#104040
- pickerGroup.foreground#A0E0E0
- problemsErrorIcon.foreground#C2C
- problemsInfoIcon.foreground#2CC
- problemsWarningIcon.foreground#CC2
- progressBar.background#206060
- quickInput.background#101010
- quickInput.foreground#808080
- scrollbar.shadow#206060
- scrollbarSlider.activeBackground#20808080
- scrollbarSlider.background#20606060
- scrollbarSlider.hoverBackground#20808080
- searchEditor.findMatchBackground#606060
- searchEditor.findMatchBorder#E0E0A0
- searchEditor.textInputBorder#101010
- selection.background#104040
- settings.checkboxBackground#104040
- settings.checkboxBorder#104040
- settings.checkboxForeground#E0E0E0
- settings.dropdownBackground#104040
- settings.dropdownBorder#104040
- settings.dropdownForeground#E0E0E0
- settings.dropdownListBorder#104040
- settings.headerForeground#E0E0E0
- settings.modifiedItemIndicator#80E0E0
- settings.numberInputBackground#808080
- settings.numberInputBorder#808080
- settings.numberInputForeground#101010
- settings.textInputBackground#101010
- settings.textInputBorder#101010
- settings.textInputForeground#E0E0E0
- sideBar.background#181818
- sideBar.border#104040
- sideBar.dropBackground#40808040
- sideBar.foreground#C0C0C0
- sideBarSectionHeader.background#101010
- sideBarSectionHeader.border#101010
- sideBarSectionHeader.foreground#A0A0A0
- sideBarTitle.foreground#E0E0E0
- statusBar.background#104040
- statusBar.border#104040
- statusBar.debuggingBackground#401010
- statusBar.debuggingBorder#104040
- statusBar.debuggingForeground#E0E0E0
- statusBar.foreground#C0C0C0
- statusBar.noFolderBackground#101010
- statusBar.noFolderBorder#104040
- statusBar.noFolderForeground#808080
- statusBarItem.activeBackground#104040
- statusBarItem.hoverBackground#206060
- statusBarItem.prominentBackground#20606080
- statusBarItem.prominentHoverBackground#206060
- statusBarItem.remoteBackground#104040
- statusBarItem.remoteForeground#80E0E0
- symbolIcon.arrayForeground#80C0C0
- symbolIcon.booleanForeground#80C0C0
- symbolIcon.classForeground#80C080
- symbolIcon.colorForeground#C0C0C0
- symbolIcon.constantForeground#C0C0C0
- symbolIcon.constructorForeground#C0C080
- symbolIcon.enumeratorForeground#80C080
- symbolIcon.enumeratorMemberForeground#C0C0C0
- symbolIcon.eventForeground#C0C080
- symbolIcon.fieldForeground#80C0C0
- symbolIcon.fileForeground#80C0C0
- symbolIcon.folderForeground#8080C0
- symbolIcon.functionForeground#C0C080
- symbolIcon.interfaceForeground#C080C0
- symbolIcon.keyForeground#C08080
- symbolIcon.keywordForeground#C08080
- symbolIcon.methodForeground#C0C080
- symbolIcon.moduleForeground#C08080
- symbolIcon.namespaceForeground#808080
- symbolIcon.nullForeground#808080
- symbolIcon.numberForeground#C0C0C0
- symbolIcon.objectForeground#80C0C0
- symbolIcon.operatorForeground#C0C080
- symbolIcon.packageForeground#C08080
- symbolIcon.propertyForeground#80C0C0
- symbolIcon.referenceForeground#80C0C0
- symbolIcon.snippetForeground#C0C080
- symbolIcon.stringForeground#808080
- symbolIcon.structForeground#80C080
- symbolIcon.textForeground#C0C0C0
- symbolIcon.typeParameterForeground#8080C0
- symbolIcon.unitForeground#C08080
- symbolIcon.variableForeground#80C0C0
- tab.activeBackground#104040
- tab.activeBorder#104040
- tab.activeBorderTop#104040
- tab.activeForeground#E0E0E0
- tab.activeModifiedBorder#104040
- tab.border#104040
- tab.hoverBackground#104040
- tab.hoverBorder#104040
- tab.hoverForeground#E0E0E0
- tab.inactiveBackground#181818
- tab.inactiveForeground#808080
- tab.inactiveModifiedBorder#104040
- tab.lastPinnedBorder#20606080
- tab.unfocusedActiveBackground#104040
- tab.unfocusedActiveBorder#104040
- tab.unfocusedActiveBorderTop#104040
- tab.unfocusedActiveForeground#E0E0E0
- tab.unfocusedActiveModifiedBorder#104040
- tab.unfocusedHoverBackground#104040
- tab.unfocusedHoverBorder#104040
- tab.unfocusedHoverForeground#A0A0A0
- tab.unfocusedInactiveBackground#202020
- tab.unfocusedInactiveForeground#808080
- tab.unfocusedInactiveModifiedBorder#104040
- terminal.ansiBlack#101010
- terminal.ansiBlue#4040A0
- terminal.ansiBrightBlack#202020
- terminal.ansiBrightBlue#6060E0
- terminal.ansiBrightCyan#60E0E0
- terminal.ansiBrightGreen#60E060
- terminal.ansiBrightMagenta#E060E0
- terminal.ansiBrightRed#E06060
- terminal.ansiBrightWhite#E0E0E0
- terminal.ansiBrightYellow#E0E060
- terminal.ansiCyan#40A0A0
- terminal.ansiGreen#40A040
- terminal.ansiMagenta#A040A0
- terminal.ansiRed#A04040
- terminal.ansiWhite#A0A0A0
- terminal.ansiYellow#A0A040
- terminal.background#181818
- terminal.border#104040
- terminal.foreground#C0C0C0
- terminal.inactiveSelectionBackground#404040
- terminal.selectionBackground#104040
- terminal.tab.activeBorder#206060
- terminalCursor.background#101010
- terminalCursor.foreground#E0E0E0
- textBlockQuote.background#101010
- textBlockQuote.border#104040
- textCodeBlock.background#181818
- textLink.activeForeground#80E0E0
- textLink.foreground#40A0A0
- textPreformat.background#101010
- textPreformat.foreground#E0E0E0
- textSeparator.foreground#A0A0A0
- titleBar.activeBackground#104040
- titleBar.activeForeground#E0E0E0
- titleBar.border#104040
- titleBar.inactiveBackground#102020
- titleBar.inactiveForeground#808080
- toolbar.activeBackground#206060
- toolbar.hoverBackground#206060
- tree.inactiveIndentGuidesStroke#104040
- tree.indentGuidesStroke#206060
- walkThrough.embeddedEditorBackground#202020
- walkthrough.stepTitle.foreground#E0E0E0
- welcomePage.background#202020
- welcomePage.progress.background#101010
- welcomePage.progress.foreground#104040
- welcomePage.tileBackground#202020
- welcomePage.tileBorder#104040
- welcomePage.tileHoverBackground#104040
- widget.border#206060
- widget.shadow#206060
- window.inactiveBorder#202020
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| constant, entity.name.type, keyword.operator, punctuation, string.quoted, storage.modifier, storage.type.built-in, storage.type.integral, storage.type.js, string.source.cmake, support.constant, variable.other | #C0C0C0 | — |
| comment, entity.name.namespace, entity.name.scope-resolution, invalid, punctuation.definition.comment, punctuation.separator.namespace, punctuation.separator.scope-resolution | #808080 | — |
| constant.other.placeholder, entity.other.attribute-name, markup.underline.link, storage.source.cmake, string.other.link, variable, variable.other.declare, variable.other.local, variable.other.readwrite | #80C0C0 | — |
| constant.character.escape, keyword.other, string | #C080C0 | — |
| storage.type.template, support | #8080C0 | — |
| entity, entity.name.function, keyword.other.operator, support.function | #C0C080 | — |
| entity.source.cmake, storage, storage.type, support.type | #80C080 | — |
| entity.name.tag, keyword, punctuation.definition | #C08080 | — |
| comment, constant, entity.name.function.preprocessor, string.quoted, variable.other.enummember | — | italic |
| punctuation, variable.language | — | bold |
| punctuation.separator.pointer-access | — | bold strikethrough |
| string.quoted.double.include, string.quoted.other.lt-gt.include | — | underline italic |