Drasing Dark Theme
Publisher: drasingThemes in package: 1
Dark theme focused on structure, hierarchy and productivity.
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#101010
- activityBar.border#101010
- activityBar.dropBackground#282828
- activityBar.foreground#A0A0A0
- activityBar.inactiveForeground#707070
- activityBarBadge.background#99FFE4
- activityBarBadge.foreground#000
- badge.background#99FFE4
- badge.foreground#000
- breadcrumb.activeSelectionForeground#99FFE4
- breadcrumb.background#101010
- breadcrumb.focusForeground#FFF
- breadcrumb.foreground#A0A0A0
- breadcrumbPicker.background#161616
- button.background#99FFE4
- button.foreground#000
- button.hoverBackground#FFCFA8
- contrastBorder#101010
- debugExceptionWidget.background#161616
- debugExceptionWidget.border#282828
- debugToolBar.background#101010
- descriptionForeground#A0A0A0
- diffEditor.insertedTextBackground#FFC79915
- diffEditor.removedTextBackground#FF808015
- dropdown.background#161616
- dropdown.border#282828
- dropdown.foreground#FFF
- dropdown.listBackground#1C1C1C
- editor.background#101010
- editor.findMatchBackground#FFFFFF25
- editor.findMatchBorder#99FFE4
- editor.findMatchHighlightBackground#FFFFFF15
- editor.findMatchHighlightBorder#00000000
- editor.findRangeHighlightBackground#FFFFFF15
- editor.findRangeHighlightBorder#00000000
- editor.foreground#FFF
- editor.hoverHighlightBackground#161616
- editor.inactiveSelectionBackground#FFFFFF15
- editor.lineHighlightBorder#161616
- editor.rangeHighlightBorder#282828
- editor.selectionBackground#FFFFFF25
- editor.selectionForeground#FFF
- editor.selectionHighlightBackground#FFFFFF25
- editor.selectionHighlightBorder#00000000
- editor.wordHighlightBackground#FFFFFF15
- editor.wordHighlightBorder#00000000
- editor.wordHighlightStrongBackground#FFFFFF25
- editor.wordHighlightStrongBorder#00000000
- editorBracketMatch.background#282828
- editorBracketMatch.border#A0A0A0
- editorCodeLens.foreground#505050
- editorCursor.foreground#FFF
- editorError.foreground#FF8080
- editorGroup.background#101010
- editorGroup.border#101010
- editorGroup.dropBackground#28282855
- editorGroup.emptyBackground#101010
- editorGroup.focusedEmptyBorder#282828
- editorGroupHeader.noTabsBackground#101010
- editorGroupHeader.tabsBackground#101010
- editorGroupHeader.tabsBorder#101010
- editorGutter.addedBackground#FFC799
- editorGutter.background#101010
- editorGutter.deletedBackground#FF8080
- editorGutter.modifiedBackground#99FFE4
- editorHint.foreground#FFC799
- editorHoverWidget.background#161616
- editorHoverWidget.border#282828
- editorIndentGuide.activeBackground#505050
- editorIndentGuide.background#282828
- editorInfo.foreground#99FFE4
- editorInlayHint.background#1C1C1C
- editorInlayHint.foreground#A0A0A0
- editorLightBulb.foreground#99FFE4
- editorLightBulbAutoFix.foreground#99FFE4
- editorLineNumber.activeForeground#A0A0A0
- editorLineNumber.foreground#505050
- editorLink.activeForeground#99FFE4
- editorMarkerNavigation.background#101010
- editorMarkerNavigationError.background#161616
- editorMarkerNavigationInfo.background#161616
- editorMarkerNavigationWarning.background#161616
- editorOverviewRuler.addedForeground#FFC799
- editorOverviewRuler.border#101010
- editorOverviewRuler.bracketMatchForeground#A0A0A0
- editorOverviewRuler.commonContentForeground#00000000
- editorOverviewRuler.currentContentForeground#FFC799
- editorOverviewRuler.deletedForeground#FF8080
- editorOverviewRuler.errorForeground#FF8080
- editorOverviewRuler.findMatchForeground#99FFE4
- editorOverviewRuler.incomingContentForeground#99FFE4
- editorOverviewRuler.infoForeground#99FFE4
- editorOverviewRuler.modifiedForeground#99FFE4
- editorOverviewRuler.rangeHighlightForeground#99FFE4
- editorOverviewRuler.selectionHighlightForeground#99FFE4
- editorOverviewRuler.warningForeground#99FFE4
- editorOverviewRuler.wordHighlightForeground#99FFE4
- editorOverviewRuler.wordHighlightStrongForeground#99FFE4
- editorRuler.foreground#282828
- editorSuggestWidget.background#101010
- editorSuggestWidget.border#282828
- editorSuggestWidget.foreground#FFF
- editorSuggestWidget.highlightForeground#99FFE4
- editorSuggestWidget.selectedBackground#232323
- editorWarning.foreground#99FFE4
- editorWhitespace.foreground#282828
- editorWidget.background#101010
- editorWidget.border#282828
- editorWidget.resizeBorder#99FFE4
- errorForeground#FF8080
- extensionButton.prominentBackground#99FFE4
- extensionButton.prominentForeground#000
- extensionButton.prominentHoverBackground#FFCFA8
- focusBorder#99FFE4
- foreground#FFF
- gitDecoration.addedResourceForeground#FFC799
- gitDecoration.conflictingResourceForeground#FF8080
- gitDecoration.deletedResourceForeground#FF8080
- gitDecoration.ignoredResourceForeground#505050
- gitDecoration.modifiedResourceForeground#99FFE4
- gitDecoration.untrackedResourceForeground#99FFE4
- icon.foreground#A0A0A0
- input.background#1C1C1C
- input.border#282828
- input.foreground#FFF
- input.placeholderForeground#A0A0A0
- inputOption.activeBorder#99FFE4
- inputValidation.errorBackground#161616
- inputValidation.errorBorder#FF8080
- inputValidation.errorForeground#FF8080
- inputValidation.infoBackground#161616
- inputValidation.infoBorder#99FFE4
- inputValidation.infoForeground#99FFE4
- inputValidation.warningBackground#161616
- inputValidation.warningBorder#99FFE4
- inputValidation.warningForeground#99FFE4
- list.activeSelectionBackground#232323
- list.activeSelectionForeground#99FFE4
- list.dropBackground#161616
- list.errorForeground#FF8080
- list.focusBackground#232323
- list.focusForeground#FFF
- list.highlightForeground#99FFE4
- list.hoverBackground#282828
- list.hoverForeground#FFF
- list.inactiveFocusBackground#232323
- list.inactiveFocusForeground#A0A0A0
- list.inactiveSelectionBackground#232323
- list.inactiveSelectionForeground#A0A0A0
- list.invalidItemForeground#FF8080
- list.warningForeground#99FFE4
- merge.border#282828
- merge.commonContentBackground#101010
- merge.commonHeaderBackground#101010
- merge.currentContentBackground#FFC79944
- merge.currentHeaderBackground#FFC79955
- merge.incomingContentBackground#99FFE444
- merge.incomingHeaderBackground#99FFE455
- notificationCenter.border#282828
- notificationCenterHeader.background#101010
- notificationCenterHeader.foreground#FFF
- notifications.background#101010
- notifications.border#282828
- notifications.foreground#FFF
- notificationToast.border#282828
- panel.background#101010
- panel.border#282828
- panel.dropBackground#101010
- panelTitle.activeBorder#99FFE4
- panelTitle.activeForeground#FFF
- panelTitle.inactiveForeground#A0A0A0
- peekView.border#282828
- peekViewEditor.background#161616
- peekViewEditorGutter.background#161616
- peekViewResult.background#101010
- peekViewResult.fileForeground#FFF
- peekViewResult.lineForeground#FFF
- peekViewResult.matchHighlightBackground#232323
- peekViewResult.selectionBackground#232323
- peekViewResult.selectionForeground#FFF
- peekViewTitle.background#161616
- peekViewTitleDescription.foreground#A0A0A0
- peekViewTitleLabel.foreground#FFF
- pickerGroup.border#282828
- pickerGroup.foreground#A0A0A0
- progressBar.background#99FFE4
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#343434
- scrollbarSlider.background#34343480
- scrollbarSlider.hoverBackground#343434
- selection.background#FFFFFF25
- settings.modifiedItemIndicator#99FFE4
- sideBar.background#101010
- sideBar.border#101010
- sideBar.dropBackground#282828
- sideBar.foreground#A0A0A0
- sideBarSectionHeader.background#101010
- sideBarSectionHeader.border#101010
- sideBarSectionHeader.foreground#A0A0A0
- sideBarTitle.foreground#A0A0A0
- statusBar.background#101010
- statusBar.border#101010
- statusBar.debuggingBackground#FF7300
- statusBar.debuggingBorder#101010
- statusBar.debuggingForeground#FFF
- statusBar.foreground#A0A0A0
- statusBar.noFolderBackground#101010
- statusBar.noFolderBorder#101010
- statusBar.noFolderForeground#A0A0A0
- statusBarItem.activeBackground#282828
- statusBarItem.hoverBackground#232323
- statusBarItem.prominentBackground#161616
- statusBarItem.prominentHoverBackground#232323
- statusBarItem.remoteBackground#99FFE4
- statusBarItem.remoteForeground#000
- tab.activeBackground#161616
- tab.activeBorder#99FFE4
- tab.activeForeground#FFF
- tab.border#101010
- tab.hoverBackground#161616
- tab.hoverBorder#282828
- tab.inactiveBackground#101010
- tab.inactiveForeground#A0A0A0
- tab.unfocusedActiveBorder#99FFE4
- tab.unfocusedActiveForeground#FFF
- tab.unfocusedHoverBackground#161616
- tab.unfocusedHoverBorder#282828
- tab.unfocusedInactiveForeground#A0A0A0
- terminal.ansiBlack#101010
- terminal.ansiBlue#FFC799
- terminal.ansiBrightBlack#505050
- terminal.ansiBrightBlue#FFC799
- terminal.ansiBrightCyan#FFC799
- terminal.ansiBrightGreen#FFC799
- terminal.ansiBrightMagenta#99FFE4
- terminal.ansiBrightRed#FF8080
- terminal.ansiBrightWhite#FFF
- terminal.ansiBrightYellow#99FFE4
- terminal.ansiCyan#FFC799
- terminal.ansiGreen#FFC799
- terminal.ansiMagenta#99FFE4
- terminal.ansiRed#FF8080
- terminal.ansiWhite#FFF
- terminal.ansiYellow#99FFE4
- terminal.background#101010
- terminal.foreground#FFF
- terminal.selectionBackground#FFFFFF25
- terminalCursor.background#101010
- terminalCursor.foreground#FFF
- textBlockQuote.background#161616
- textBlockQuote.border#99FFE4
- textCodeBlock.background#161616
- textLink.activeForeground#FFCFA8
- textLink.foreground#99FFE4
- textPreformat.foreground#A0A0A0
- textSeparator.foreground#282828
- titleBar.activeBackground#101010
- titleBar.activeForeground#7E7E7E
- titleBar.border#101010
- titleBar.inactiveBackground#101010
- titleBar.inactiveForeground#707070
- walkThrough.embeddedEditorBackground#101010
- welcomePage.buttonBackground#161616
- welcomePage.buttonHoverBackground#232323
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #FFF | — |
| comment, punctuation.definition.comment | #8b8b8b94 | italic |
| string | #e3cdb1 | — |
| constant.character.escape.backslash.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, string.regexp | #A0A0A0 | — |
| constant.numeric | #99FFE4 | — |
| meta.definition.variable.name, support.variable, variable | #fff | — |
| variable.other.readwrite.js, variable.other.readonly.js, variable.other.constant.js, variable.other.object.js | #99FFE4 | — |
| keyword | #E5E7EB | — |
| storage | #A0A0A0 | — |
| storage.modifier | #46B4E7 | — |
| entity.name.class, entity.name.type | #99FFE4 | — |
| meta.function-call | #99FFE4 | — |
| meta.definition.function | #99FFE4 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #FFF | — |
| constant.language | #99FFE4 | — |
| constant.character, constant.other | #99FFE4 | — |
| entity.other.inherited-class | #99FFE4 | — |
| variable.parameter | ##F16F4E | — |
| storage.type | #fff | — |
| support.function | #99FFE4 | — |
| support.constant | #99FFE4 | — |
| support.type, support.class | #e69a9a | — |
| entity.name.function, support.variable.property.dom, variable.other.property, variable.other.readwrite.jsx, variable.other.readwrite.tsx, meta.embedded.expression.jsx | #7ED6C1 | — |
| meta.object-literal.key | #FFC799 | — |
| meta.brace.round, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.comma, punctuation.separator.key-value, punctuation.terminator.statement | #A0Af2f0A0 | — |
| storage.type.function.arrow.js | #A0A0A0 | — |
| variable.language.this | #A0A0A0 | — |
| entity.name.type.class, support.class | #7ED6C1 | — |
| keyword.operator.assignment | #A0A0A0 | — |
| entity.name.tag | #D1D5DB | — |
| meta.tag.metadata.doctype.html, meta.tag.sgml.doctype.html | #A0A0A0 | — |
| punctuation.definition.tag | #A0A0A0 | — |
| meta.tag.structure.any.html | #99FFE4 | — |
| entity.other.attribute.name, entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.localname.xml, entity.other.attribute-name.js | #99FFE4 | — |
| comment.block.html | #8b8b8b94 | italic |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #A0A0A0 | — |
| meta.selector.css, entity.name.tag.css, keyword.control.at-rule.media.css | #99FFE4 | — |
| meta.function.url.css, meta.property-value.css, support.constant.property-value.css, support.function.url.css, support.function.misc.css, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.percentage.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.ch.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.s.css, keyword.other.unit.deg.css, keyword.other.unit.scss, keyword.other.unit.dppx.css, support.constant.media.css, constant.numeric.css, string.quoted.single.css, string.quoted.double.css | #FFF | — |
| constant.other.color.rgb-value.hex.css, variable.parameter.url.css, support.function.transform.css, support.function.calc.css, entity.other.attribute-name.pseudo-class.css, meta.function.gradient.css, support.function.gradient.css, variable.parameter.url.scss, entity.name.tag.scss | #FFF | — |
| punctuation.terminator.rule.css, punctuation.separator.key-value.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.separator.list.comma.css, keyword.operator.pattern.css | #A0A0A0 | — |
| support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name.media.css | #FFF | — |
| support.type.vendored.property-name.css, entity.other.attribute-name.pseudo-element.css | #A0A0A0 | — |
| keyword.operator.combinator.css | #A0A0A0 | — |
| support.type.property-name.json | #99FFE4 | — |
| string.quoted.double.json | #FFC799 | — |
| constant.numeric.json, constant.language.json | #99FFE4 | — |
| punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json | #A0A0A0 | — |
| variable.other.object | #FFF | — |
| variable.other.constant.property | #99FFE4 | — |
| constant.language.null, constant.language.undefined | #A0A0A0 | — |
| constant.language.boolean.true | #99FFE4 | — |
| constant.language.boolean.false | #99FFE4 | — |
| meta.attribute.name, string.quoted.double.html, string.quoted.double.xml, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #72adc4 | — |
| markup.heading | #99FFE4 | bold |
| markup.underline | #99FFE4 | underline |
| markup.bold | #FFF | bold |
| markup.italic | #FFF | italic |
| markup.inserted | #FFC799 | — |
| markup.deleted | #FF8080 | — |
| markup.changed | #A0A0A0 | — |
| punctuation.definition.quote.begin.markdown | #FFF | — |
| punctuation.definition.list.begin.markdown | #FFF | — |
| markup.inline.raw | #A0A0A0 | — |
| meta.paragraph.markdown | #FFF | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #FFF | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #99FFE4 | italic |
| source.env, constant.numeric.env | #FFF | — |