Moon Night 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.activeBackground#394867
• activityBar.background#212A3E
• activityBar.dropBorder#526D82
• activityBar.foreground#9DB2BF
• activityBar.inactiveForeground#526D82
• activityBarBadge.background#27374D
• activityBarBadge.foreground#F1F6F9
• badge.background#F1F6F9
• badge.foreground#2D4356
• button.background#3C4F65
• button.foreground#E6F5FF
• button.hoverBackground#394867
• button.secondaryBackground212A3E
• button.secondaryForeground#394867
• checkbox.background#394867
• checkbox.border#9BA4B5
• checkbox.foreground#9BA4B5
• checkbox.selectBackground#394867
• checkbox.selectBorder#394867
• dropdown.background#394867
• dropdown.border#F1F6F9
• dropdown.foreground#F1F6F9
• dropdown.listBackground#394867
• editor.background#212A3E
• editor.findMatchBackground#03506F
• editor.findMatchHighlightBackground#394867
• editor.foreground#F8F8F2
• editor.hoverHighlightBackground#30475E
• editor.lineHighlightBackground#27374D
• editor.rangeHighlightBackground#27374D
• editor.selectionBackground#334756
• editor.wordHighlightBackground#27374D
• editor.wordHighlightTextBackground#212A3E
• editorBracketHighlight.foreground1#B767FF
• editorBracketHighlight.foreground2#B767FF
• editorBracketHighlight.foreground3#B767FF
• editorBracketHighlight.foreground4#B767FF
• editorBracketHighlight.foreground5#B767FF
• editorBracketHighlight.foreground6#B767FF
• editorBracketHighlight.unexpectedBracket.foreground#FF1F5A
• editorCursor.background#F1F6F9
• editorCursor.foreground#9DB2BF
• editorError.foreground#d80032
• editorGroup.dropBackground#27374D
• editorGroupHeader.tabsBackground#212A3E
• editorLineNumber.activeForeground#526D82
• editorLineNumber.foreground#9DB2BF
• editorWhitespace.foreground#3B3A32
• input.background#394867
• input.border#9BA4B5
• input.foreground#F1F6F9
• input.placeholderForeground#9BA4B5
• inputOption.activeBackground#212A3E
• inputOption.activeBorder#212A3E
• inputOption.activeForeground#F1F6F9
• inputOption.hoverBackground#526D82
• inputValidation.errorBackground#B91646
• inputValidation.errorBorder#B91646
• inputValidation.errorForeground#DDE6ED
• inputValidation.infoBackground#9BA4B5
• inputValidation.infoBorder#27374D
• inputValidation.infoForeground#9BA4B5
• inputValidation.warningBackground#F2921D
• inputValidation.warningBorder#F2921D
• inputValidation.warningForeground#F1F6F9
• keybindingLabel.background#324a5f
• keybindingLabel.border#324a5f
• keybindingLabel.bottomBorder#d2d7df
• keybindingLabel.foreground#d2d7df
• list.activeSelectionBackground#212A3E
• list.activeSelectionForeground#E9F8F9
• list.dropBackground#212A3E
• list.errorForeground#F05454
• list.focusOutline#212A3E
• list.hoverBackground#212A3E
• list.hoverForeground#9DB2BF
• list.inactiveSelectionBackground#212A3E
• list.inactiveSelectionForeground#DDE6ED
• list.warningForeground#FFC26F
• notificationCenter.border#212A3E
• notificationCenterHeader.background#334756
• notificationCenterHeader.foreground#d2d7df
• notifications.background#212A3E
• notifications.foreground#d2d7df
• notificationsErrorIcon.foreground#e01a4f
• notificationsInfoIcon.foreground#a9cef4
• notificationsWarningIcon.foreground#f4d35e
• panel.background#27374D
• panelTitle.activeBorder#70abaf
• panelTitle.activeForeground#70abaf
• panelTitle.inactiveForeground#819595
• progressBar.background#DDE6ED
• scrollbar.shadow#27374D
• scrollbarSlider.activeBackground#9BA4B5
• scrollbarSlider.background#526D82
• scrollbarSlider.hoverBackground#2D4356
• sideBar.background#27374D
• sideBar.border#394867
• sideBar.foreground#F1F6F9
• statusBar.background#597081
• statusBar.foreground#d2d7df
• statusBarItem.activeBackground#677db7
• statusBarItem.hoverBackground#677db7
• tab.activeBackground#212A3E
• tab.activeBorder#9DB2BF
• tab.activeForeground#F1F6F9
• tab.inactiveBackground#27374D
• terminal.foreground#58a4b0
• titleBar.activeBackground#212A3E
• titleBar.inactiveBackground#212A3E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).