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#968f8eff
• activityBar.background#fdfdfdff
• activityBar.border#ebe9e9ff
• activityBar.foreground#1c1a19ff
• activityBar.inactiveForeground#736d6cff
• activityBarBadge.background#fff4ebff
• activityBarBadge.foreground#1c1a19ff
• badge.background#ebe9e9ff
• badge.foreground#1c1a19ff
• button.background#1c1a19ff
• button.foreground#ffffffff
• button.hoverBackground#2f2d2cff
• descriptionForeground#736d6cff
• diffEditor.border#ebe9e9ff
• diffEditor.diagonalFill#f6f6f6ff
• diffEditor.insertedLineBackground#e6ffecff
• diffEditor.insertedTextBackground#e6ffecff
• diffEditor.insertedTextForeground#188435ff
• diffEditor.move.border#ffe2cfff
• diffEditor.moveActive.border#ffe2cfff
• diffEditor.removedLineBackground#fff4efff
• diffEditor.removedTextBackground#fff4efff
• diffEditor.removedTextForeground#c42c28ff
• diffEditor.unchangedCodeBackground#f6f6f6ff
• diffEditor.unchangedRegionBackground#f6f6f6ff
• diffEditor.unchangedRegionForeground#736d6cff
• diffEditor.unchangedRegionShadow#fdfdfdff
• diffEditorGutter.insertedLineBackground#e6ffecff
• diffEditorGutter.removedLineBackground#fff4efff
• diffEditorOverview.insertedForeground#188435ff
• diffEditorOverview.removedForeground#c42c28ff
• dropdown.background#ffffffff
• dropdown.border#968f8eff
• dropdown.foreground#1c1a19ff
• editor.background#fdfdfdff
• editor.findMatchBackground#f6f6f6ff
• editor.findMatchBorder#968f8eff
• editor.findMatchForeground#c13900ff
• editor.findMatchHighlightBackground#f6f6f6ff
• editor.findMatchHighlightBorder#ebe9e9ff
• editor.findMatchHighlightForeground#c13900ff
• editor.findRangeHighlightBorder#ebe9e9ff
• editor.foldBackground#f6f6f6ff
• editor.foreground#1c1a19ff
• editor.hoverHighlightBackground#f6f6f6ff
• editor.inactiveSelectionBackground#f6f6f6ff
• editor.lineHighlightBackground#f6f6f6bf
• editor.linkedEditingBackground#f6f6f6ff
• editor.rangeHighlightBackground#f6f6f6ff
• editor.rangeHighlightBorder#4e4a49ff
• editor.selectionBackground#f6f6f6ff
• editor.selectionForeground#1c1a19ff
• editor.selectionHighlightBackground#f6f6f6ff
• editor.selectionHighlightBorder#ebe9e9ff
• editor.symbolHighlightBackground#f6f6f6ff
• editor.symbolHighlightBorder#4e4a49ff
• editor.wordHighlightBackground#f6f6f6ff
• editor.wordHighlightBorder#ebe9e9ff
• editor.wordHighlightStrongBackground#fff4ebbf
• editor.wordHighlightStrongBorder#ffe2cfff
• editorBracketHighlight.foreground#c13900ff
• editorBracketHighlight.foreground1#c13900ff
• editorBracketHighlight.foreground2#c13900ff
• editorBracketHighlight.foreground3#c13900ff
• editorBracketHighlight.foreground4#c13900ff
• editorBracketHighlight.foreground5#c13900ff
• editorBracketHighlight.foreground6#c13900ff
• editorBracketHighlight.unexpectedBracket.foreground#c42c28ff
• editorBracketMatch.background#fff4ebff
• editorBracketMatch.border#ffe2cfff
• editorBracketPairGuide.activeBackground#fff4ebff
• editorBracketPairGuide.background#fff4ebff
• editorCodeLens.foreground#736d6cff
• editorCommentsWidget.resolvedBorder#c13900ff
• editorCommentsWidget.unresolvedBorder#c42c28ff
• editorCursor.background#fdfdfdff
• editorCursor.foreground#1c1a19ff
• editorError.foreground#c42c28ff
• editorGroup.border#968f8eff
• editorGroup.dropBackground#f6f6f6ff
• editorGroupHeader.noTabsBackground#fdfdfdff
• editorGroupHeader.tabsBackground#fdfdfdff
• editorGutter.addedBackground#e6ffecbf
• editorGutter.background#fdfdfdff
• editorGutter.commentRangeForeground#188435ff
• editorGutter.deletedBackground#fff4efbf
• editorGutter.foldingControlForeground#736d6cff
• editorGutter.modifiedBackground#ab5100ff
• editorHint.foreground#188435ff
• editorIndentGuide.activeBackground#ebe9e9ff
• editorIndentGuide.activeBackground1#ebe9e9ff
• editorIndentGuide.activeBackground2#ebe9e9ff
• editorIndentGuide.activeBackground3#ebe9e9ff
• editorIndentGuide.activeBackground4#ebe9e9ff
• editorIndentGuide.activeBackground5#ebe9e9ff
• editorIndentGuide.activeBackground6#ebe9e9ff
• editorIndentGuide.background#f6f6f6ff
• editorIndentGuide.background1#f6f6f6ff
• editorIndentGuide.background2#f6f6f6ff
• editorIndentGuide.background3#f6f6f6ff
• editorIndentGuide.background4#f6f6f6ff
• editorIndentGuide.background5#f6f6f6ff
• editorIndentGuide.background6#f6f6f6ff
• editorInfo.foreground#006dceff
• editorInlayHint.background#f6f6f6ff
• editorInlayHint.foreground#736d6cff
• editorLightBulb.foreground#ab5100ff
• editorLineNumber.activeForeground#1c1a19ff
• editorLineNumber.dimmedForeground#736d6cff
• editorLineNumber.foreground#736d6cff
• editorLink.activeForeground#c13900ff
• editorOverviewRuler.addedForeground#188435ff
• editorOverviewRuler.background#fdfdfdff
• editorOverviewRuler.border#ffe2cfff
• editorOverviewRuler.bracketMatchForeground#c13900ff
• editorOverviewRuler.commonContentForeground#1c1a19ff
• editorOverviewRuler.currentContentForeground#1c1a19ff
• editorOverviewRuler.deletedForeground#c42c28ff
• editorOverviewRuler.errorForeground#c42c28ff
• editorOverviewRuler.findMatchForeground#c13900ff
• editorOverviewRuler.incomingContentForeground#1c1a19ff
• editorOverviewRuler.infoForeground#006dceff
• editorOverviewRuler.modifiedForeground#ab5100ff
• editorOverviewRuler.rangeHighlightForeground#c13900ff
• editorOverviewRuler.selectionHighlightForeground#c13900ff
• editorOverviewRuler.warningForeground#ab5100ff
• editorOverviewRuler.wordHighlightForeground#c13900ff
• editorOverviewRuler.wordHighlightStrongForeground#c13900ff
• editorPane.background#fdfdfdff
• editorRuler.foreground#ebe9e9ff
• editorUnnecessaryCode.border#736d6cff
• editorUnnecessaryCode.opacity#ebe9e9ff
• editorWarning.foreground#ab5100ff
• editorWhitespace.foreground#ebe9e9ff
• errorForeground#c42c28ff
• focusBorder#4e4a49ff
• foreground#1c1a19ff
• gitDecoration.addedResourceForeground#188435ff
• gitDecoration.conflictingResourceForeground#c42c28ff
• gitDecoration.deletedResourceForeground#c42c28ff
• gitDecoration.ignoredResourceForeground#736d6cff
• gitDecoration.modifiedResourceForeground#ab5100ff
• gitDecoration.renamedResourceForeground#ab5100ff
• gitDecoration.submoduleResourceForeground#006dceff
• gitDecoration.untrackedResourceForeground#17806cff
• icon.foreground#736d6cff
• input.background#ffffffff
• input.border#968f8eff
• input.foreground#1c1a19ff
• input.placeholderForeground#736d6cff
• list.activeSelectionBackground#ebe9e9ff
• list.activeSelectionForeground#1c1a19ff
• list.dropBackground#f6f6f6ff
• list.errorForeground#c42c28ff
• list.focusHighlightForeground#1c1a19ff
• list.focusOutline#4e4a49ff
• list.highlightForeground#1c1a19ff
• list.hoverBackground#f6f6f6ff
• list.hoverForeground#1c1a19ff
• list.inactiveSelectionBackground#f6f6f6ff
• list.invalidItemForeground#c42c28ff
• list.warningForeground#ab5100ff
• merge.border#ebe9e9ff
• merge.commonContentBackground#f6f6f6ff
• merge.commonHeaderBackground#fdfdfdff
• merge.currentContentBackground#e0fffebf
• merge.currentHeaderBackground#e6ffecbf
• merge.incomingContentBackground#f1f7ffbf
• merge.incomingHeaderBackground#006dceff
• minimap.errorHighlight#c42c28ff
• minimap.findMatchHighlight#f6f6f6ff
• minimap.selectionHighlight#ebe9e9ff
• minimap.warningHighlight#ab5100ff
• minimapGutter.addedBackground#e6ffecbf
• minimapGutter.deletedBackground#fff4efbf
• minimapGutter.modifiedBackground#fff4e9bf
• minimapSlider.activeBackground#c13900ff
• minimapSlider.background#f6f6f6bf
• minimapSlider.hoverBackground#f6f6f6ff
• multiDiffEditor.background#fdfdfdff
• multiDiffEditor.headerBackground#fdfdfdff
• notificationCenter.border#ebe9e9ff
• notificationCenterHeader.background#ffffffff
• notificationCenterHeader.border#ebe9e9ff
• notificationCenterHeader.foreground#1c1a19ff
• notifications.background#ffffffff
• notifications.border#ebe9e9ff
• notifications.errorIcon.foreground#c42c28ff
• notifications.foreground#1c1a19ff
• notifications.infoIcon.foreground#006dceff
• notifications.successIcon.foreground#188435ff
• notifications.warningIcon.foreground#ab5100ff
• notificationsErrorIcon.foreground#c42c28ff
• notificationsInfoIcon.foreground#006dceff
• notificationsLoadingIcon.foreground#736d6cff
• notificationsSuccessIcon.foreground#188435ff
• notificationsWarningIcon.foreground#ab5100ff
• notificationToast.background#ffffffff
• notificationToast.border#ebe9e9ff
• notificationToast.foreground#1c1a19ff
• progressBar.background#c13900ff
• sash.hoverBorder#736d6cff
• scrollbar.shadow#fdfdfdff
• scrollbarSlider.activeBackground#fff4ebbf
• scrollbarSlider.background#ebe9e9ff
• scrollbarSlider.hoverBackground#f6f6f6ff
• sideBar.background#ffffffff
• sideBar.border#ebe9e9ff
• sideBar.dropBackground#f6f6f6ff
• sideBar.foreground#1c1a19ff
• sideBarSectionHeader.background#fdfdfdff
• sideBarSectionHeader.foreground#1c1a19ff
• sideBarTitle.foreground#1c1a19ff
• statusBar.background#ebe9e9ff
• statusBar.border#ebe9e9ff
• statusBar.foreground#1c1a19ff
• statusBarItem.errorBackground#fff4efff
• statusBarItem.hoverBackground#f6f6f6ff
• statusBarItem.remoteBackground#ffffffff
• statusBarItem.remoteForeground#1c1a19ff
• tab.activeBackground#ebe9e9ff
• tab.activeForeground#1c1a19ff
• tab.activeModifiedBorder#968f8eff
• tab.border#ebe9e9ff
• tab.inactiveBackground#ffffffff
• tab.inactiveForeground#736d6cff
• tab.inactiveModifiedBorder#ebe9e9ff
• tab.lastPinnedBorder#ebe9e9ff
• tab.unfocusedActiveModifiedBorder#968f8eff
• tab.unfocusedInactiveModifiedBorder#ebe9e9ff
• terminal.ansiBlack#1c1a19ff
• terminal.ansiBlue#004895ff
• terminal.ansiBrightBlack#4e4a49ff
• terminal.ansiBrightBlue#006dceff
• terminal.ansiBrightCyan#17806cff
• terminal.ansiBrightGreen#188435ff
• terminal.ansiBrightMagenta#ca0356ff
• terminal.ansiBrightRed#c42c28ff
• terminal.ansiBrightWhite#ffffffff
• terminal.ansiBrightYellow#d47500ff
• terminal.ansiCyan#105748ff
• terminal.ansiGreen#105a20ff
• terminal.ansiMagenta#8b0839ff
• terminal.ansiRed#8d0d10ff
• terminal.ansiWhite#cfcdccff
• terminal.ansiYellow#ab5100ff
• textBlockQuote.background#f6f6f6ff
• textBlockQuote.border#ebe9e9ff
• textLink.activeForeground#c13900ff
• textLink.foreground#c13900ff
• textPreformat.foreground#736d6cff
• textSeparator.foreground#ebe9e9ff
• toolbar.hoverBackground#f6f6f6ff
• tree.indentGuidesStroke#ebe9e9ff
• widget.shadow#fdfdfdff
• window.activeBorder#968f8eff
• window.inactiveBorder#ebe9e9ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).