Sun and Moon 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#e3ecff
• activityBar.activeBorder#007AFF
• activityBar.activeFocusBorder#007AFF
• activityBar.background#FFFFFF
• activityBar.border#f2f2f7
• activityBar.dropBorder#f2f2f7
• activityBar.foreground#007AFF
• activityBar.inactiveForeground#B3D7FF
• activityBarBadge.background#007AFF
• activityBarBadge.foreground#FFFFFF
• badge.background#007AFF
• badge.foreground#FFFFFF
• breadcrumb.activeSelectionForeground#007AFF
• breadcrumb.background#ffffff
• breadcrumb.foreground#000000
• breadcrumbPicker.background#ffffff
• button.background#007aff
• button.foreground#FFFFFF
• button.hoverBackground#007aff
• commandCenter.activeBackground#f2f2f7
• commandCenter.activeBorder#afaeb3
• commandCenter.activeForeground#000000
• commandCenter.background#FFFFFF
• commandCenter.border#E5E5EA
• commandCenter.debuggingBackground#FFFFFF
• commandCenter.foreground#6c6c70
• commandCenter.inactiveBorder#f2f2f7
• debugConsole.errorForeground#ff453b
• debugConsole.warningForeground#FFD708
• diffEditor.insertedLineBackground#32d74b40
• diffEditor.insertedTextBackground#32d74b40
• diffEditor.removedLineBackground#ff453b40
• diffEditor.removedTextBackground#ff453b40
• editor.background#FFFFFF
• editor.findMatchBackground#B3D7FF80
• editor.findMatchHighlightBackground#B3D7FF80
• editor.findRangeHighlightBackground#B3D7FF80
• editor.foreground#000000
• editor.hoverHighlightBackground#B3D7FF66
• editor.inactiveSelectionBackground#B3D7FF
• editor.lineHighlightBackground#B3D7FF26
• editor.lineHighlightBorder#B3D7FF26
• editor.rangeHighlightBackground#B3D7FF66
• editor.selectionBackground#B3D7FF
• editor.selectionHighlightBackground#B3D7FF66
• editor.stackFrameHighlightBackground#B3D7FF66
• editor.symbolHighlightBackground#B3D7FF66
• editor.wordHighlightBackground#B3D7FF
• editor.wordHighlightStrongBackground#B3D7FF66
• editor.wordHighlightTextBackground#B3D7FF66
• editorBracketHighlight.foreground1#007AFF
• editorBracketHighlight.foreground2#007AFF
• editorBracketHighlight.foreground3#007AFF
• editorBracketHighlight.foreground4#007AFF
• editorBracketHighlight.foreground5#007AFF
• editorBracketHighlight.foreground6#007AFF
• editorBracketMatch.background#B3D7FF
• editorBracketMatch.border#ffffff
• editorCursor.background#FFFFFF
• editorCursor.foreground#007AFF
• editorError.foreground#ff453b
• editorGroup.dropBackground#f2f2f7
• editorGutter.addedBackground#32d74b66
• editorGutter.background#ffffff
• editorGutter.deletedBackground#ff453b66
• editorGutter.modifiedBackground#ffd70866
• editorHoverWidget.highlightForeground#007AFF
• editorLineNumber.activeForeground#B3D7FF
• editorLineNumber.foreground#B3D7FF26
• editorOverviewRuler.errorForeground#ff453b
• editorOverviewRuler.warningForeground#FFD708
• editorSuggestWidget.background#ffffff
• editorSuggestWidget.focusHighlightForeground#007AFF
• editorSuggestWidget.highlightForeground#007AFF
• editorSuggestWidget.selectedBackground#B3D7FF80
• editorSuggestWidget.selectedForeground#000000
• editorSuggestWidget.selectedIconForeground#000000
• editorUnicodeHighlight.background#B3D7FF66
• editorUnnecessaryCode.opacity#CCCCCC
• editorWarning.foreground#FFD708
• editorWidget.background#ffffff
• editorWidget.foreground#000000
• errorForeground#ff453b
• focusBorder#E0E0E0
• gitDecoration.modifiedResourceForeground#FFD708
• gitDecoration.untrackedResourceForeground#afaeb3
• input.background#FFFFFF
• inputOption.activeBorder#8e8e93
• inputValidation.errorBackground#ff453bb3
• inputValidation.errorBorder#FFFFFF
• inputValidation.errorForeground#FFFFFF
• inputValidation.infoBackground#FFFFFF
• inputValidation.infoBorder#FFFFFF
• inputValidation.infoForeground#000000
• inputValidation.warningBackground#ffd708b3
• inputValidation.warningBorder#FFFFFF
• inputValidation.warningForeground#FFFFFF
• list.activeSelectionBackground#B3D7FF
• list.activeSelectionForeground#000000
• list.activeSelectionIconForeground#000000
• list.errorForeground#ff453b
• list.focusBackground#E9F3FF
• list.focusForeground#000000
• list.focusHighlightForeground#007AFF
• list.focusOutline#E9F3FF
• list.highlightForeground#007AFF
• list.inactiveFocusBackground#E9F3FF
• list.inactiveSelectionBackground#E9F3FF
• list.inactiveSelectionForeground#000000
• list.warningForeground#FFD708
• minimap.errorHighlight#ff453b
• notebookStatusErrorIcon.foreground#ff453b
• notificationsErrorIcon.foreground#ff453b
• notificationsWarningIcon.foreground#FFD708
• panel.background#FFFFFF
• panel.border#f2f2f7
• panelSection.dropBackground#f2f2f7
• peekView.border#E0E0E0
• peekViewEditor.background#FFFFFF
• pickerGroup.border#E0E0E0
• pickerGroup.foreground#000000
• problemsErrorIcon.foreground#ff453b
• problemsWarningIcon.foreground#FFD708
• progressBar.background#007AFF
• quickInput.background#ffffff
• quickInput.foreground#000000
• quickInputList.focusBackground#B3D7FF80
• quickInputList.focusForeground#000000
• quickInputList.focusIconForeground#000000
• quickInputTitle.background#000000
• scrollbarSlider.activeBackground#6c6c70
• scrollbarSlider.background#afaeb3
• scrollbarSlider.hoverBackground#8e8e93
• searchEditor.findMatchBackground#B3D7FF80
• sideBar.background#FFFFFF
• sideBar.border#f2f2f7
• sideBar.dropBackground#f2f2f7
• sideBar.foreground#000000
• sideBarSectionHeader.background#f2f2f7
• statusBar.background#FFFFFF
• statusBar.debuggingBackground#FFFFFF
• statusBar.foreground#000000
• statusBar.noFolderBackground#FFFFFF
• statusBarItem.errorBackground#8e8e93
• statusBarItem.errorForeground#ff453b
• statusBarItem.hoverBackground#E5E5EA
• statusBarItem.warningBackground#FFD708
• statusBarItem.warningForeground#FFD708
• symbolIcon.arrayForeground#000000
• symbolIcon.booleanForeground#000000
• symbolIcon.classForeground#007AFF
• symbolIcon.colorForeground#FFD708
• symbolIcon.constantForeground#000000
• symbolIcon.constructorForeground#007AFF
• symbolIcon.enumeratorForeground#FF8200
• symbolIcon.enumeratorMemberForeground#FF8200
• symbolIcon.eventForeground#000000
• symbolIcon.fieldForeground#FF8200
• symbolIcon.fileForeground#FFD708
• symbolIcon.folderForeground#FFD708
• symbolIcon.functionForeground#007AFF
• symbolIcon.interfaceForeground#FF8200
• symbolIcon.keyForeground#FF8200
• symbolIcon.keywordForeground#000000
• symbolIcon.methodForeground#007AFF
• symbolIcon.moduleForeground#007AFF
• symbolIcon.namespaceForeground#FF8200
• symbolIcon.nullForeground#000000
• symbolIcon.numberForeground#000000
• symbolIcon.objectForeground#007AFF
• symbolIcon.operatorForeground#000000
• symbolIcon.packageForeground#FFD708
• symbolIcon.propertyForeground#FF8200
• symbolIcon.referenceForeground#FFD708
• symbolIcon.snippetForeground#FFD708
• symbolIcon.stringForeground#000000
• symbolIcon.structForeground#007AFF
• symbolIcon.textForeground#000000
• symbolIcon.typeParameterForeground#FF8200
• symbolIcon.unitForeground#000000
• symbolIcon.variableForeground#000000
• titleBar.activeBackground#FFFFFF
• titleBar.activeForeground#000000
• titleBar.border#FFFFFF
• titleBar.inactiveBackground#FFFFFF
• titleBar.inactiveForeground#8e8e93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).