Drux Theme
Publisher: DruxTechThemes in package: 2
Dark and Light theme
Color themes
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#32b8ae26
- activityBar.activeBorder#32b8ae
- activityBar.background#121c1f
- activityBar.border#0b1113
- activityBar.dropBorder#546E7A33
- activityBar.foreground#32b8ae
- activityBar.inactiveForeground#546E7Ab3
- activityBarBadge.background#32b8ae
- activityBarBadge.foreground#121c1f
- badge.background#32b8ae
- badge.foreground#162226
- breadcrumb.background#162226
- breadcrumbPicker.background#162226
- button.background#32b8ae80
- button.border#32b8ae75
- button.foreground#c9d4d8
- button.hoverBackground#32b8ae92
- button.secondaryBackground#32b8ae20
- button.secondaryForeground#c9d4d8
- button.secondaryHoverBackground#32b8ae35
- charts.blue#11b4d1
- charts.foreground#c9d4d8
- charts.green#00a884
- charts.lines#c9d4d8
- charts.orange#d4770c
- charts.purple#d46ec0
- charts.red#E35535
- charts.yellow#d49a0d
- checkbox.foreground#c9d4d8
- commandCenter.activeBackground#1f303660
- commandCenter.activeForeground#abbdc390
- commandCenter.background#162226
- commandCenter.border#0b1113
- commandCenter.foreground#546E7A
- contrastActiveBorder#00000000
- contrastBorder#00000000
- debugExceptionWidget.background#1f3036
- debugExceptionWidget.border#0b1113
- debugToolBar.background#1f3036
- descriptionForeground#c9d4d84d
- diffEditor.border#0b1113
- diffEditor.diagonalFill#0b111380
- diffEditor.insertedLineBackground#00a88420
- diffEditor.insertedTextBackground#00a88420
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedLineBackground#E3553525
- diffEditor.removedTextBackground#E3553525
- diffEditor.removedTextBorder#00000000
- diffEditorGutter.insertedLineBackground#00000000
- diffEditorGutter.removedLineBackground#00000000
- diffEditorOverview.insertedForeground#00a88425
- diffEditorOverview.removedForeground#E3553530
- disabledForeground#c9d4d84d
- dropdown.background#162226
- dropdown.border#546E7A50
- dropdown.foreground#c9d4d8
- dropdown.listBackground#162226
- editor.background#162226
- editor.findMatchBackground#32b8ae30
- editor.findMatchBorder#32b8ae60
- editor.findMatchHighlightBackground#32b8ae33
- editor.findMatchHighlightBorder#32b8ae4d
- editor.foldBackground#121c1f
- editor.foreground#c9d4d8
- editor.hoverHighlightBackground#32b8ae40
- editor.inactiveSelectionBackground#32b8ae40
- editor.lineHighlightBackground#32b8ae0d
- editor.lineHighlightBorder#32b8ae20
- editor.linkedEditingBackground#00c3e533
- editor.rangeHighlightBackground#32b8ae33
- editor.selectionBackground#32b8ae40
- editor.selectionForeground#c9d4d8
- editor.selectionHighlightBackground#32b8ae15
- editor.selectionHighlightBorder#32b8ae40
- editor.wordHighlightBackground#32b8ae20
- editor.wordHighlightBorder#32b8ae4d
- editor.wordHighlightStrongBackground#32b8ae40
- editorBracketHighlight.foreground1#c7910c
- editorBracketHighlight.foreground2#d46ec0
- editorBracketHighlight.foreground3#11B7D4
- editorBracketHighlight.foreground4#a85ff1
- editorBracketHighlight.foreground5#38c7bd
- editorBracketHighlight.foreground6#c62f52
- editorBracketHighlight.unexpectedBracket.foreground#E35535
- editorBracketMatch.background#32b8ae40
- editorBracketMatch.border#32b8ae60
- editorCodeLens.foreground#abbdc380
- editorCursor.background#32b8ae
- editorCursor.foreground#d49a0d
- editorError.border#00000000
- editorError.foreground#E35535
- editorGhostText.border#00000000
- editorGhostText.foreground#c9d4d870
- editorGroup.border#0b1113
- editorGroup.dropBackground#32b8ae15
- editorGroupHeader.border#bb272700
- editorGroupHeader.noTabsBackground#162226
- editorGroupHeader.tabsBackground#121c1f
- editorGroupHeader.tabsBorder#0b1113
- editorGutter.addedBackground#00a884cc
- editorGutter.background#162226
- editorGutter.commentRangeForeground#1f3036
- editorGutter.deletedBackground#e35535cc
- editorGutter.modifiedBackground#11b4d1cc
- editorHoverWidget.background#1f3036
- editorHoverWidget.border#0b1113
- editorInfo.border#00000000
- editorInlayHint.background#abbdc320
- editorInlayHint.foreground#abbdc390
- editorInlayHint.typeBackground#a85ff130
- editorInlayHint.typeForeground#a85ff1aa
- editorLineNumber.activeForeground#7ba3b5
- editorLineNumber.foreground#546E7A90
- editorLink.activeForeground#c9d4d8
- editorMarkerNavigation.background#121c1f
- editorMarkerNavigationError.background#E3553590
- editorMarkerNavigationInfo.background#11b4d190
- editorMarkerNavigationWarning.background#d4770c90
- editorOverviewRuler.border#0b1113
- editorOverviewRuler.commonContentForeground#d49a0d
- editorOverviewRuler.currentContentForeground#E35535
- editorOverviewRuler.incomingContentForeground#00a884
- editorRuler.foreground#546E7A33
- editorStickyScrollHover.background#213339
- editorSuggestWidget.background#162226
- editorSuggestWidget.border#0b1113
- editorSuggestWidget.foreground#abbdc3
- editorSuggestWidget.highlightForeground#d49a0d
- editorSuggestWidget.selectedBackground#32b8ae4d
- editorUnnecessaryCode.border#00000000
- editorUnnecessaryCode.opacity#000000aa
- editorWarning.border#00000000
- editorWarning.foreground#d49a0d
- editorWhitespace.foreground#546E7A60
- editorWidget.background#1f3036
- editorWidget.resizeBorder#32b8ae50
- errorForeground#E35535
- extensionButton.background#32b8ae80
- extensionButton.foreground#c9d4d8
- extensionButton.hoverBackground#32b8ae92
- extensionButton.prominentBackground#32b8ae9d
- extensionButton.prominentForeground#c9d4d8
- extensionButton.prominentHoverBackground#32b8ae
- focusBorder#32b8ae40
- foreground#abbdc3AA
- gitDecoration.conflictingResourceForeground#32b8ae
- gitDecoration.deletedResourceForeground#E35535
- gitDecoration.ignoredResourceForeground#546E7A
- gitDecoration.modifiedResourceForeground#11b4d1
- gitDecoration.untrackedResourceForeground#00a884
- icon.foreground#abbdc3AA
- input.background#00000000
- input.border#546E7A60
- input.foreground#c9d4d8
- input.placeholderForeground#c9d4d860
- inputOption.activeBorder#32b8ae
- inputValidation.errorBackground#1f3036
- inputValidation.errorBorder#d49a0d
- inputValidation.infoBackground#1f3036
- inputValidation.infoBorder#32b8ae
- inputValidation.warningBackground#1f3036
- inputValidation.warningBorder#d49a0d
- keybindingLabel.background#1f3036
- keybindingLabel.border#4e656d
- keybindingLabel.bottomBorder#4e656d
- keybindingLabel.foreground#7e9aa3
- list.activeSelectionBackground#324d5673
- list.activeSelectionForeground#c9d4d8
- list.dropBackground#32b8ae15
- list.errorForeground#E35535
- list.focusBackground#32b8ae40
- list.focusForeground#abbdc3
- list.highlightForeground#d49a0d
- list.hoverBackground#283e4633
- list.hoverForeground#d7e0e3
- list.inactiveSelectionBackground#324d5640
- list.inactiveSelectionForeground#c9d4d8
- list.warningForeground#d4770c
- menu.background#1f3036
- menu.border#0b1113
- menu.foreground#9cb1b9
- menu.selectionForeground#f5f7f8
- menu.separatorBackground#0b111365
- menubar.selectionBackground#1f3036
- menubar.selectionForeground#abbdc3
- merge.border#0b1113
- merge.commonContentBackground#d49a0d30
- merge.commonHeaderBackground#d49a0d80
- merge.currentContentBackground#00a88430
- merge.currentHeaderBackground#00a88480
- merge.incomingContentBackground#11b4d130
- merge.incomingHeaderBackground#11b4d180
- minimap.background#162226
- minimap.errorHighlight#E35535
- minimap.findMatchHighlight#32b8ae
- minimap.selectionHighlight#32b8ae
- minimap.selectionOccurrenceHighlight#32b8ae
- minimap.warningHighlight#d4770c
- minimapGutter.addedBackground#00a884
- minimapGutter.deletedBackground#E35535
- minimapGutter.modifiedBackground#11b4d1
- notificationCenterHeader.background#1f3036
- notificationCenterHeader.foreground#c9d4d8
- notificationLink.foreground#d49a0d
- notifications.background#1f3036
- notifications.border#0b1113
- notifications.foreground#abbdc3
- notificationsErrorIcon.foreground#E35535
- notificationsInfoIcon.foreground#11b4d1
- notificationsWarningIcon.foreground#d4770c
- panel.background#141f22
- panel.border#0b1113
- panel.dropBorder#546E7A80
- panelSection.border#0b1113
- panelSectionHeader.background#546E7A20
- panelSectionHeader.border#0b1113
- panelSectionHeader.foreground#c9d4d8
- panelTitle.activeBorder#32b8ae
- panelTitle.activeForeground#32b8ae
- panelTitle.inactiveForeground#546E7A
- peekView.border#0b1113
- peekViewEditor.background#1d2e33
- peekViewEditor.matchHighlightBackground#1f303640
- peekViewEditor.matchHighlightBorder#00000000
- peekViewEditorGutter.background#1d2e33
- peekViewEditorStickyScroll.background#1d2e33
- peekViewResult.background#1b292e
- peekViewResult.fileForeground#c9d4d8
- peekViewResult.lineForeground#abbdc3
- peekViewResult.matchHighlightBackground#32b8ae80
- peekViewResult.selectionBackground#32b8ae33
- peekViewResult.selectionForeground#c9d4d8
- peekViewTitle.background#1f3036
- peekViewTitleDescription.foreground#c9d4d8
- peekViewTitleLabel.foreground#c9d4d8
- pickerGroup.border#0b1113
- pickerGroup.foreground#c9d4d8
- profileBadge.background#32b8ae
- profileBadge.foreground#162226
- progressBar.background#d49a0d
- quickInput.foreground#9cb1b9
- quickInputList.focusBackground#3b5b6773
- quickInputList.focusForeground#f5f7f8
- quickInputTitle.background#121c1f
- sash.hoverBorder#32b8ae50
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#32b8ae40
- scrollbarSlider.background#32b8ae20
- scrollbarSlider.hoverBackground#32b8ae30
- selection.background#32b8ae60
- settings.headerForeground#32b8ae
- settings.modifiedItemIndicator#32b8ae
- sideBar.background#121c1f
- sideBar.border#0b1113
- sideBar.foreground#abbdc3CC
- sideBarSectionHeader.background#121c1f
- sideBarSectionHeader.border#0b1113
- sideBarSectionHeader.foreground#c9d4d8
- sideBarTitle.foreground#546E7A
- statusBar.background#121c1f
- statusBar.border#0b1113
- statusBar.debuggingBackground#32b8ae44
- statusBar.debuggingForeground#c9d4d8
- statusBar.foreground#19f9d8BB
- statusBar.noFolderBackground#121c1f
- statusBar.noFolderBorder#0b1113
- statusBar.noFolderForeground#abbdc3BB
- statusBarItem.activeBackground#1f3036
- statusBarItem.errorBackground#E35535
- statusBarItem.hoverBackground#546E7A30
- statusBarItem.prominentBackground#0b1113
- statusBarItem.prominentHoverBackground#1f3036
- statusBarItem.warningBackground#d4770c
- tab.activeBackground#162226
- tab.activeBorder#162226
- tab.activeBorderTop#32b8ae
- tab.activeForeground#32b8ae
- tab.border#0b1113
- tab.hoverBackground#162226
- tab.inactiveBackground#121c1f
- tab.inactiveForeground#546E7A
- tab.lastPinnedBorder#0b1113
- tab.unfocusedActiveBorder#162226
- tab.unfocusedActiveForeground#32b8ae
- tab.unfocusedHoverBackground#162226
- tab.unfocusedInactiveForeground#546E7A
- terminal.ansiBlack#162226
- terminal.ansiBlue#11b4d1
- terminal.ansiBrightBlack#11b4d1
- terminal.ansiBrightBlue#11b4d1
- terminal.ansiBrightCyan#32b8ae
- terminal.ansiBrightGreen#00a884
- terminal.ansiBrightMagenta#d46ec0
- terminal.ansiBrightRed#E35535
- terminal.ansiBrightWhite#c9d4d8
- terminal.ansiBrightYellow#d49a0d
- terminal.ansiCyan#32b8ae
- terminal.ansiGreen#00a884
- terminal.ansiMagenta#d46ec0
- terminal.ansiRed#E35535
- terminal.ansiWhite#c9d4d8
- terminal.ansiYellow#d49a0d
- terminal.background#141f22
- terminal.foreground#c9d4d8
- terminal.selectionForeground#c9d4d8
- terminalCursor.background#162226
- terminalCursor.foreground#00a874
- textBlockQuote.background#11b4d134
- textBlockQuote.border#11b4d1b9
- textCodeBlock.background#11b4d134
- textLink.activeForeground#11b4d1
- textLink.foreground#11b4d1
- textPreformat.foreground#d49a0d
- textSeparator.foreground#32b8ae
- titleBar.activeBackground#121c1f
- titleBar.activeForeground#546E7A
- titleBar.border#0b1113
- titleBar.inactiveBackground#0b1113
- titleBar.inactiveForeground#546E7A
- toolbar.hoverBackground#546E7A60
- tree.indentGuidesStroke#546E7A70
- walkThrough.embeddedEditorBackground#162226
- welcomePage.progress.background#1f3036
- welcomePage.progress.foreground#32b8ae
- welcomePage.tileBackground#abbdc310
- welcomePage.tileBorder#abbdc320
- welcomePage.tileHoverBackground#abbdc320
- widget.shadow#0b111330
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python | #D4D4D4 | — |
| emphasis | — | italic |
| strong | — | bold |
| header | #000080 | — |
| comment | #6db350 | — |
| constant.language | #4e97d4 | — |
| constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent | #b5cea8 | — |
| constant.regexp | #646695 | — |
| entity.name.tag | #4e97d4 | — |
| entity.name.tag.css, entity.name.tag.less | #d7ba7d | — |
| entity.other.attribute-name | #8acbed | — |
| entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss | #d7ba7d | — |
| invalid | #f44747 | — |
| markup.underline | — | underline |
| markup.bold | #4e97d4 | bold |
| markup.heading | #4e97d4 | bold |
| markup.italic | — | italic |
| markup.strikethrough | — | strikethrough |
| markup.inserted | #b5cea8 | — |
| markup.deleted | #ce9178 | — |
| markup.changed | #4e97d4 | — |
| punctuation.definition.quote.begin.markdown | #6db350 | — |
| punctuation.definition.list.begin.markdown | #6796e6 | — |
| markup.inline.raw | #ce9178 | — |
| punctuation.definition.tag | #808080 | — |
| meta.preprocessor, entity.name.function.preprocessor | #4e97d4 | — |
| meta.preprocessor.string | #ce9178 | — |
| meta.preprocessor.numeric | #b5cea8 | — |
| meta.structure.dictionary.key.python | #8acbed | — |
| meta.diff.header | #4e97d4 | — |
| storage | #4e97d4 | — |
| keyword.operator.noexcept | #4e97d4 | — |
| string, meta.embedded.assembly | #ce9178 | — |
| string.tag | #ce9178 | — |
| string.value | #ce9178 | — |
| string.regexp | #d16969 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #4e97d4 | — |
| meta.template.expression | #d4d4d4 | — |
| support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded | #8acbed | — |
| keyword | #4e97d4 | — |
| keyword.operator | #d4d4d4 | — |
| keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike | #4e97d4 | — |
| keyword.other.unit | #b5cea8 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #4e97d4 | — |
| support.function.git-rebase | #8acbed | — |
| constant.sha.git-rebase | #b5cea8 | — |
| storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java | #d4d4d4 | — |
| variable.language | #4e97d4 | — |
| entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal | #DCDCAA | — |
| support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy | #4EC9B0 | — |
| meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class | #4EC9B0 | — |
| keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator | #C586C0 | — |
| variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder | #8acbed | — |
| variable.other.constant, variable.other.enummember | #4FC1FF | — |
| meta.object-literal.key | #8acbed | — |
| support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color | #CE9178 | — |
| punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp | #CE9178 | — |
| constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp | #d16969 | — |
| keyword.operator.or.regexp, keyword.control.anchor.regexp | #DCDCAA | — |
| keyword.operator.quantifier.regexp | #d7ba7d | — |
| constant.character, constant.other.option | #4e97d4 | — |
| constant.character.escape | #d7ba7d | — |
| entity.name.label | #C8C8C8 | — |
| meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.readwrite | #C586C0 | — |
| keyword.operator.expression.keyof, keyword.operator.expression.infer, keyword.operator.expression.satisfies, keyword.operator.type.annotation.ts, keyword.operator.type.ts | #C586C0 | — |
| entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.enum.ts, entity.name.type.enum.tsx, entity.name.type.module.ts, entity.name.type.module.tsx, entity.name.type.parameter.ts, entity.name.type.parameter.tsx | #4EC9B0 | — |
| support.type.builtin.ts, support.type.builtin.tsx, support.type.primitive.ts, support.type.primitive.tsx | #4EC9B0 | — |
| support.class.component.js, support.class.component.ts, support.class.component.jsx, support.class.component.tsx | #4EC9B0 | — |
| storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust | #C586C0 | — |
| support.macro.rust, entity.name.function.macro.rust, entity.name.macro.rust | #DCDCAA | italic |
| meta.attribute.rust, entity.name.function.attribute.rust, punctuation.definition.attribute.rust | #8acbed | — |
| entity.name.package.go, entity.name.import.go | #4EC9B0 | — |
| support.function.builtin.go | #DCDCAA | — |
| punctuation.definition.annotation.java, storage.type.annotation.java, meta.declaration.annotation.java | #C586C0 | — |
| entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java | #4EC9B0 | — |
| entity.name.type.namespace.cs, meta.attribute.cs entity.name.type.cs | #C586C0 | — |
| entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.delegate.cs, entity.name.type.enum.cs | #4EC9B0 | — |
| entity.name.function.decorator.python, punctuation.definition.decorator.python, meta.function.decorator.python entity.name.function.python | #C586C0 | — |
| support.function.builtin.python | #DCDCAA | — |
| support.type.python, support.class.python, support.class.exception.python, entity.name.type.class.python, entity.name.class.python | #4EC9B0 | — |