Zenless Theme

Color themes

• 

  Theme Miyabi

• 

  Theme Nicole

• 

  Theme Pulchra

• 

  Theme Zhuyuan

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#252525
• activityBar.foreground#22bdcc
• breadcrumb.background#000000
• breadcrumb.focusForeground#22bdcc
• button.background#0d474b
• button.border#111111
• button.hoverBackground#22bdcc
• debugToolBar.border#0d474b
• diffEditor.border#000000
• diffEditor.insertedLineBackground#afce3233
• diffEditor.insertedTextBackground#afce3233
• diffEditor.removedLineBackground#ca4b3d33
• diffEditor.removedTextBackground#ca4b3d33
• disabledForeground#888888
• dropdown.background#000000
• editor.background#111111
• editor.foldBackground#000000
• editor.inactiveSelectionBackground#454545
• editor.lineHighlightBackground#0d474b33
• editor.selectionBackground#fcdc0033
• editor.wordHighlightBackground#0d474b66
• editor.wordHighlightBorder#000000
• editor.wordHighlightStrongBackground#22bdcc66
• editor.wordHighlightStrongBorder#0d474b
• editorBracketHighlight.foreground1#f86495
• editorBracketHighlight.foreground2#ce3f88
• editorBracketHighlight.foreground3#9c56d0
• editorBracketHighlight.foreground4#696cff
• editorBracketHighlight.foreground5#3267d1
• editorCursor.background#000000
• editorCursor.foreground#22bdcc
• editorError.foregroundff0000
• editorGroup.border#000000
• editorGroupHeader.border#000000
• editorGroupHeader.noTabsBackground#000000
• editorGroupHeader.tabsBackground#000000
• editorGroupHeader.tabsBorder#0d474b
• editorGutter.addedBackground#afce32
• editorGutter.addedSecondaryBackground#294b00
• editorGutter.background#000000
• editorGutter.deletedBackground#ca4b3d
• editorGutter.deletedSecondaryBackground#750000
• editorGutter.modifiedBackground#22bdcc
• editorGutter.modifiedSecondaryBackground#0d474b
• editorHoverWidget.border#0d474b
• editorIndentGuide.activeBackground1#f8649566
• editorIndentGuide.activeBackground2#ce3f8866
• editorIndentGuide.activeBackground3#9c56d066
• editorIndentGuide.activeBackground4#696cff66
• editorIndentGuide.activeBackground5#3267d166
• editorIndentGuide.background1#f8649533
• editorIndentGuide.background2#ce3f8833
• editorIndentGuide.background3#9c56d033
• editorIndentGuide.background4#696cff33
• editorIndentGuide.background5#3267d133
• editorInfo.foreground#00ff66
• editorLineNumber.activeForeground#22bdcc
• editorLineNumber.dimmedForeground#ffffff
• editorLineNumber.foreground#888888
• editorMarkerNavigationError.headerBackgroundff000066
• editorMarkerNavigationInfo.headerBackground#00ff6666
• editorMarkerNavigationWarning.headerBackground#ffe51166
• editorRuler.foreground#0d474b99
• editorSuggestWidget.focusHighlightForeground#000000
• editorSuggestWidget.foreground#cdcdcd
• editorSuggestWidget.highlightForeground#22bdcc
• editorSuggestWidget.selectedBackground#22bdcc
• editorSuggestWidget.selectedForeground#000000
• editorSuggestWidget.selectedIconForeground#000000
• editorWarning.foreground#ffe511
• editorWhitespace.foreground#ffffff66
• editorWidget.resizeBorder#22bdcc
• focusBorder#fcdc00aa
• foreground#ffffff
• gitDecoration.addedResourceForeground#afce32
• gitDecoration.conflictingResourceForeground#cc83eb
• gitDecoration.deletedResourceForeground#ca4b3d
• gitDecoration.ignoredResourceForeground#b2b2b2
• gitDecoration.stageDeletedResourceForeground#ff69ac
• gitDecoration.submoduleResourceForeground#91daed
• input.background#000000
• inputOption.activeBackground#0d474b
• inputValidation.errorBorderff0000
• list.activeSelectionBackground#0d474b
• list.activeSelectionForeground#ffffff
• list.focusBackground#0d474b
• list.highlightForeground#22bdcc
• list.hoverBackground#fcdc0099
• list.hoverForeground#000000
• list.inactiveSelectionBackground#888888
• list.inactiveSelectionForeground#000000
• menu.selectionBackground#0d474b
• merge.currentContentBackground#57a19999
• merge.currentHeaderBackground#7ee7c099
• merge.incomingContentBackground#00265699
• merge.incomingHeaderBackground#649eff99
• notificationCenter.border#0d474b
• notifications.background#000000
• notifications.border#0d474b
• notifications.foreground#cdcdcd
• notificationsErrorIcon.foregroundff0000
• notificationsInfoIcon.foreground#00ff66
• notificationsWarningIcon.foreground#ffe511
• panel.background#111111
• panel.border#000000
• panelTitle.activeBorder#22bdcc
• panelTitle.activeForeground#22bdcc
• panelTitle.border#000000
• panelTitle.inactiveForeground#888888
• pickerGroup.foreground#22bdcc
• progressBar.background#22bdcc
• radio.activeBackground#03cc0f
• radio.activeForeground#000000
• scrollbarSlider.activeBackground#ffffff
• sideBar.background#000000
• sideBar.border#000000
• sideBar.dropBackground#0d474b
• sideBar.foreground#cdcdcd
• sideBarSectionHeader.background#111111
• sideBarSectionHeader.border#000000
• sideBarSectionHeader.foreground#22bdcc
• sideBarTitle.border#0d474b
• sideBarTitle.foreground#ffffff
• statusBar.background#000000
• statusBar.border#22bdcc
• statusBar.debuggingBackground#22bdcc
• statusBar.debuggingForeground#ffffff
• statusBar.noFolderBackground#0d474b
• statusBar.noFolderBorder#0d474b
• statusBarItem.hoverBackground#22bdcc
• statusBarItem.remoteBackground#0d474b
• statusBarItem.remoteForeground#000000
• tab.activeBackground#252525
• tab.activeBorder#22bdcc
• tab.activeForeground#22bdcc
• tab.activeModifiedBorder#0d474b
• tab.border#000000
• tab.hoverBorder#22bdcc
• tab.inactiveBackground#000000
• terminal.hoverHighlightBackground#fcdc0066
• textSeparator.foreground#888888
• titleBar.activeBackground#111111
• titleBar.border#000000
• titleBar.inactiveBackground#000000
• tree.indentGuidesStroke#0d474b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).