JZ Themes

Color themes

• 

  DBT Inspired Dark Theme

• 

  DBT Inspired Light 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.

• activityBar.activeBorder#736d6cff
• activityBar.background#161514ff
• activityBar.border#4e4a49ff
• activityBar.foreground#f6f6f6ff
• activityBar.inactiveForeground#968f8eff
• activityBarBadge.background#5a0900ff
• activityBarBadge.foreground#f6f6f6ff
• badge.background#4e4a49ff
• badge.foreground#f6f6f6ff
• button.background#fdfdfdff
• button.foreground#1c1a19ff
• button.hoverBackground#ebe9e9ff
• descriptionForeground#968f8eff
• diffEditor.border#4e4a49ff
• diffEditor.diagonalFill#2f2d2cff
• diffEditor.insertedLineBackground#073811ff
• diffEditor.insertedTextBackground#073811ff
• diffEditor.insertedTextForeground#45d170ff
• diffEditor.move.border#8a1b00ff
• diffEditor.moveActive.border#8a1b00ff
• diffEditor.removedLineBackground#5d0002ff
• diffEditor.removedTextBackground#5d0002ff
• diffEditor.removedTextForeground#ff866fff
• diffEditor.unchangedCodeBackground#2f2d2cff
• diffEditor.unchangedRegionBackground#2f2d2cff
• diffEditor.unchangedRegionForeground#968f8eff
• diffEditor.unchangedRegionShadow#161514ff
• diffEditorGutter.insertedLineBackground#073811ff
• diffEditorGutter.removedLineBackground#5d0002ff
• diffEditorOverview.insertedForeground#45d170ff
• diffEditorOverview.removedForeground#ff866fff
• dropdown.background#1c1a19ff
• dropdown.border#736d6cff
• dropdown.foreground#f6f6f6ff
• editor.background#161514ff
• editor.findMatchBackground#2f2d2cff
• editor.findMatchBorder#736d6cff
• editor.findMatchForeground#ff8a4bff
• editor.findMatchHighlightBackground#2f2d2cff
• editor.findMatchHighlightBorder#4e4a49ff
• editor.findMatchHighlightForeground#ff8a4bff
• editor.findRangeHighlightBorder#4e4a49ff
• editor.foldBackground#2f2d2cff
• editor.foreground#f6f6f6ff
• editor.hoverHighlightBackground#2f2d2cff
• editor.inactiveSelectionBackground#2f2d2cff
• editor.lineHighlightBackground#2f2d2cbf
• editor.linkedEditingBackground#2f2d2cff
• editor.rangeHighlightBackground#2f2d2cff
• editor.rangeHighlightBorder#b6b0aeff
• editor.selectionBackground#2f2d2cff
• editor.selectionForeground#f6f6f6ff
• editor.selectionHighlightBackground#2f2d2cff
• editor.selectionHighlightBorder#4e4a49ff
• editor.symbolHighlightBackground#2f2d2cff
• editor.symbolHighlightBorder#b6b0aeff
• editor.wordHighlightBackground#2f2d2cff
• editor.wordHighlightBorder#4e4a49ff
• editor.wordHighlightStrongBackground#5a0900bf
• editor.wordHighlightStrongBorder#8a1b00ff
• editorBracketHighlight.foreground#ff8a4bff
• editorBracketHighlight.foreground1#ff8a4bff
• editorBracketHighlight.foreground2#ff8a4bff
• editorBracketHighlight.foreground3#ff8a4bff
• editorBracketHighlight.foreground4#ff8a4bff
• editorBracketHighlight.foreground5#ff8a4bff
• editorBracketHighlight.foreground6#ff8a4bff
• editorBracketHighlight.unexpectedBracket.foreground#ff866fff
• editorBracketMatch.background#5a0900ff
• editorBracketMatch.border#8a1b00ff
• editorBracketPairGuide.activeBackground#5a0900ff
• editorBracketPairGuide.background#5a0900ff
• editorCodeLens.foreground#968f8eff
• editorCommentsWidget.resolvedBorder#c13900ff
• editorCommentsWidget.unresolvedBorder#c42c28ff
• editorCursor.background#161514ff
• editorCursor.foreground#f6f6f6ff
• editorError.foreground#ff866fff
• editorGroup.border#736d6cff
• editorGroup.dropBackground#2f2d2cff
• editorGroupHeader.noTabsBackground#161514ff
• editorGroupHeader.tabsBackground#161514ff
• editorGutter.addedBackground#032207bf
• editorGutter.background#161514ff
• editorGutter.commentRangeForeground#45d170ff
• editorGutter.deletedBackground#3c0000bf
• editorGutter.foldingControlForeground#968f8eff
• editorGutter.modifiedBackground#ab5100ff
• editorHint.foreground#45d170ff
• editorIndentGuide.activeBackground#4e4a49ff
• editorIndentGuide.activeBackground1#4e4a49ff
• editorIndentGuide.activeBackground2#4e4a49ff
• editorIndentGuide.activeBackground3#4e4a49ff
• editorIndentGuide.activeBackground4#4e4a49ff
• editorIndentGuide.activeBackground5#4e4a49ff
• editorIndentGuide.activeBackground6#4e4a49ff
• editorIndentGuide.background#2f2d2cff
• editorIndentGuide.background1#2f2d2cff
• editorIndentGuide.background2#2f2d2cff
• editorIndentGuide.background3#2f2d2cff
• editorIndentGuide.background4#2f2d2cff
• editorIndentGuide.background5#2f2d2cff
• editorIndentGuide.background6#2f2d2cff
• editorInfo.foreground#6ab8ffff
• editorInlayHint.background#2f2d2cff
• editorInlayHint.foreground#968f8eff
• editorLightBulb.foreground#f79900ff
• editorLineNumber.activeForeground#f6f6f6ff
• editorLineNumber.dimmedForeground#968f8eff
• editorLineNumber.foreground#968f8eff
• editorLink.activeForeground#ff8a4bff
• editorOverviewRuler.addedForeground#45d170ff
• editorOverviewRuler.background#161514ff
• editorOverviewRuler.border#8a1b00ff
• editorOverviewRuler.bracketMatchForeground#ff8a4bff
• editorOverviewRuler.commonContentForeground#f6f6f6ff
• editorOverviewRuler.currentContentForeground#f6f6f6ff
• editorOverviewRuler.deletedForeground#ff866fff
• editorOverviewRuler.errorForeground#ff866fff
• editorOverviewRuler.findMatchForeground#ff8a4bff
• editorOverviewRuler.incomingContentForeground#f6f6f6ff
• editorOverviewRuler.infoForeground#6ab8ffff
• editorOverviewRuler.modifiedForeground#f79900ff
• editorOverviewRuler.rangeHighlightForeground#ff8a4bff
• editorOverviewRuler.selectionHighlightForeground#ff8a4bff
• editorOverviewRuler.warningForeground#f79900ff
• editorOverviewRuler.wordHighlightForeground#ff8a4bff
• editorOverviewRuler.wordHighlightStrongForeground#ff8a4bff
• editorPane.background#161514ff
• editorRuler.foreground#4e4a49ff
• editorUnnecessaryCode.border#968f8eff
• editorUnnecessaryCode.opacity#4e4a49ff
• editorWarning.foreground#f79900ff
• editorWhitespace.foreground#4e4a49ff
• errorForeground#ff866fff
• focusBorder#b6b0aeff
• foreground#f6f6f6ff
• gitDecoration.addedResourceForeground#45d170ff
• gitDecoration.conflictingResourceForeground#ff866fff
• gitDecoration.deletedResourceForeground#ff866fff
• gitDecoration.ignoredResourceForeground#968f8eff
• gitDecoration.modifiedResourceForeground#f79900ff
• gitDecoration.renamedResourceForeground#f79900ff
• gitDecoration.submoduleResourceForeground#6ab8ffff
• gitDecoration.untrackedResourceForeground#38ccb2ff
• icon.foreground#968f8eff
• input.background#1c1a19ff
• input.border#736d6cff
• input.foreground#f6f6f6ff
• input.placeholderForeground#968f8eff
• list.activeSelectionBackground#4e4a49ff
• list.activeSelectionForeground#f6f6f6ff
• list.dropBackground#2f2d2cff
• list.errorForeground#ff866fff
• list.focusHighlightForeground#f6f6f6ff
• list.focusOutline#b6b0aeff
• list.highlightForeground#f6f6f6ff
• list.hoverBackground#2f2d2cff
• list.hoverForeground#f6f6f6ff
• list.inactiveSelectionBackground#2f2d2cff
• list.invalidItemForeground#ff866fff
• list.warningForeground#f79900ff
• merge.border#4e4a49ff
• merge.commonContentBackground#2f2d2cff
• merge.commonHeaderBackground#161514ff
• merge.currentContentBackground#03211abf
• merge.currentHeaderBackground#032207bf
• merge.incomingContentBackground#001a3dbf
• merge.incomingHeaderBackground#006dceff
• minimap.errorHighlight#c42c28ff
• minimap.findMatchHighlight#2f2d2cff
• minimap.selectionHighlight#4e4a49ff
• minimap.warningHighlight#ab5100ff
• minimapGutter.addedBackground#032207bf
• minimapGutter.deletedBackground#3c0000bf
• minimapGutter.modifiedBackground#301000bf
• minimapSlider.activeBackground#c13900ff
• minimapSlider.background#2f2d2cbf
• minimapSlider.hoverBackground#2f2d2cff
• multiDiffEditor.background#161514ff
• multiDiffEditor.headerBackground#161514ff
• notificationCenter.border#4e4a49ff
• notificationCenterHeader.background#1c1a19ff
• notificationCenterHeader.border#4e4a49ff
• notificationCenterHeader.foreground#f6f6f6ff
• notifications.background#1c1a19ff
• notifications.border#4e4a49ff
• notifications.errorIcon.foreground#ff866fff
• notifications.foreground#f6f6f6ff
• notifications.infoIcon.foreground#6ab8ffff
• notifications.successIcon.foreground#45d170ff
• notifications.warningIcon.foreground#f79900ff
• notificationsErrorIcon.foreground#ff866fff
• notificationsInfoIcon.foreground#6ab8ffff
• notificationsLoadingIcon.foreground#968f8eff
• notificationsSuccessIcon.foreground#45d170ff
• notificationsWarningIcon.foreground#f79900ff
• notificationToast.background#1c1a19ff
• notificationToast.border#4e4a49ff
• notificationToast.foreground#f6f6f6ff
• progressBar.background#c13900ff
• sash.hoverBorder#968f8eff
• scrollbar.shadow#161514ff
• scrollbarSlider.activeBackground#5a0900bf
• scrollbarSlider.background#4e4a49ff
• scrollbarSlider.hoverBackground#2f2d2cff
• sideBar.background#1c1a19ff
• sideBar.border#4e4a49ff
• sideBar.dropBackground#2f2d2cff
• sideBar.foreground#f6f6f6ff
• sideBarSectionHeader.background#161514ff
• sideBarSectionHeader.foreground#f6f6f6ff
• sideBarTitle.foreground#f6f6f6ff
• statusBar.background#4e4a49ff
• statusBar.border#4e4a49ff
• statusBar.foreground#f6f6f6ff
• statusBarItem.errorBackground#5d0002ff
• statusBarItem.hoverBackground#2f2d2cff
• statusBarItem.remoteBackground#1c1a19ff
• statusBarItem.remoteForeground#f6f6f6ff
• tab.activeBackground#4e4a49ff
• tab.activeForeground#f6f6f6ff
• tab.activeModifiedBorder#736d6cff
• tab.border#4e4a49ff
• tab.inactiveBackground#1c1a19ff
• tab.inactiveForeground#968f8eff
• tab.inactiveModifiedBorder#4e4a49ff
• tab.lastPinnedBorder#4e4a49ff
• tab.unfocusedActiveModifiedBorder#736d6cff
• tab.unfocusedInactiveModifiedBorder#4e4a49ff
• terminal.ansiBlack#2f2d2cff
• terminal.ansiBlue#1894f8ff
• terminal.ansiBrightBlack#736d6cff
• terminal.ansiBrightBlue#6ab8ffff
• terminal.ansiBrightCyan#38ccb2ff
• terminal.ansiBrightGreen#45d170ff
• terminal.ansiBrightMagenta#ff82a1ff
• terminal.ansiBrightRed#ff866fff
• terminal.ansiBrightWhite#ffffffff
• terminal.ansiBrightYellow#f79900ff
• terminal.ansiCyan#0ba58bff
• terminal.ansiGreen#31a753ff
• terminal.ansiMagenta#f83d75ff
• terminal.ansiRed#f64b44ff
• terminal.ansiWhite#ebe9e9ff
• terminal.ansiYellow#d47500ff
• textBlockQuote.background#2f2d2cff
• textBlockQuote.border#4e4a49ff
• textLink.activeForeground#ff8a4bff
• textLink.foreground#ff8a4bff
• textPreformat.foreground#968f8eff
• textSeparator.foreground#4e4a49ff
• toolbar.hoverBackground#2f2d2cff
• tree.indentGuidesStroke#4e4a49ff
• widget.shadow#161514ff
• window.activeBorder#736d6cff
• window.inactiveBorder#4e4a49ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).