Sea of Serenity & Tycho Crater

Color themes

• 

  Sea of Serenity

• 

  Tycho Crater

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#f0e0d8
• activityBar.background#404048
• activityBar.foreground#f0f0f8
• activityBar.inactiveForeground#707078
• activityBarBadge.background#0080ff
• badge.background#484850
• badge.foreground#0080ff
• breadcrumb.background#505058
• breadcrumb.foreground#c0c0c8
• button.background#70b0ff
• button.foreground#404048
• button.hoverBackground#a8d0ff
• debugExceptionWidget.background#707078
• debugIcon.breakpointCurrentStackframeForeground#00b0a0
• debugIcon.breakpointForeground#ff3050
• debugIcon.continueForeground#00b0a0
• debugIcon.disconnectForeground#ff8000
• debugIcon.pauseForeground#ffc080
• debugIcon.restartForeground#40c000
• debugIcon.startForeground#00b0a0
• debugIcon.stepBackForeground#0080ff
• debugIcon.stepIntoForeground#0080ff
• debugIcon.stepOutForeground#0080ff
• debugIcon.stepOverForeground#0080ff
• debugIcon.stopForeground#ff3050
• debugTokenExpression.name#f0f0f8
• debugTokenExpression.number#e0c080
• debugTokenExpression.value#a0a0a8
• debugToolBar.background#383840
• debugView.valueChangedHighlight#ffffff80
• descriptionForeground#c0c0c8
• diffEditor.insertedLineBackground#00a03040
• diffEditor.insertedTextBackground#00a03080
• diffEditor.removedLineBackground#f0204040
• diffEditor.removedTextBackground#f0204080
• disabledForeground#d0d0d8
• dropdown.background#585860
• dropdown.foreground#d0d0d8
• editor.background#707078
• editor.findMatchBackground#0080ffa0
• editor.findMatchHighlightBackground#2080ff50
• editor.focusedStackFrameHighlightBackground#ffc08040
• editor.foldBackground#686060c0
• editor.foldPlaceholderForeground#a4a0a8
• editor.foreground#d0d0d8
• editor.hoverHighlightBackground#ffffff20
• editor.inlineValuesBackground#0080ff80
• editor.inlineValuesForeground#303038
• editor.lineHighlightBackground#64646c
• editor.rangeHighlightBackground#2080ff40
• editor.selectionBackground#ffffff50
• editor.selectionHighlightBackground#00000050
• editor.stackFrameHighlightBackground#00809070
• editor.symbolHighlightBackground#0080ffa0
• editor.wordHighlightBackground#00a08080
• editorActionList.background#707078
• editorActionList.focusBackground#888890
• editorActionList.focusForeground#f0f0f8
• editorActionList.foreground#d0d0d8
• editorBracketHighlight.foreground1#000040
• editorBracketHighlight.foreground2#0040c0
• editorBracketHighlight.foreground3#a0d0ff
• editorBracketHighlight.foreground4#ffd080
• editorBracketHighlight.foreground5#c08000
• editorBracketHighlight.foreground6#603800
• editorBracketMatch.background#f0f0f800
• editorBracketMatch.border#000008
• editorCursor.background#606068
• editorCursor.foreground#d0d0d8
• editorError.foreground#ff3050
• editorGroup.border#303038
• editorGroupHeader.border#303038
• editorGroupHeader.tabsBackground#404048
• editorGroupHeader.tabsBorder#505058
• editorGutter.addedBackground#00a030
• editorGutter.addedSecondaryBackground#40e070
• editorGutter.background#686870
• editorGutter.deletedBackground#ff3050
• editorGutter.deletedSecondaryBackground#ff6060
• editorGutter.modifiedBackground#0080ff
• editorGutter.modifiedSecondaryBackground#40c0ff
• editorHoverWidget.background#707078
• editorIndentGuide.activeBackground1#b0b0b8
• editorIndentGuide.background1#888890
• editorInfo.foreground#80c0ff
• editorLightBulb.foreground#ffd900
• editorLineNumber.activeForeground#000008
• editorLineNumber.foreground#404048
• editorMarkerNavigation.background#f0204040
• editorMarkerNavigationError.background#f02040
• editorMarkerNavigationError.headerBackground#f0204040
• editorMarkerNavigationInfo.background#0080ff
• editorMarkerNavigationWarning.background#f08000
• editorMultiCursor.primary.foreground#ffffff
• editorOverviewRuler.background#00000040
• editorOverviewRuler.findMatchForeground#0080ffa0
• editorWarning.foreground#ffc060
• editorWidget.background#606068
• editorWidget.border#383840
• editorWidget.foreground#c0c0c8
• errorForeground#ff3050
• extensionIcon.starForeground#ffc080
• focusBorder#ffffff40
• foreground#d0d0d8
• gitDecoration.addedResourceForeground#00b040
• gitDecoration.deletedResourceForeground#ff3050
• gitDecoration.ignoredResourceForeground#808088
• gitDecoration.modifiedResourceForeground#0080ff
• gitDecoration.submoduleResourceForeground#00b0a0
• gitDecoration.untrackedResourceForeground#e0c080
• icon.foreground#d0d0d8
• input.background#505058
• input.border#404048
• input.foreground#d0d0d8
• input.placeholderForeground#a0a0a8
• inputOption.activeBackground#707078
• inputOption.activeBorder#e0e0e8
• inputOption.activeForeground#e0e0e8
• inputOption.hoverBackground#ffffff20
• list.activeSelectionBackground#505058
• list.activeSelectionForeground#d0d0d8
• list.activeSelectionIconForeground#d0d0d8
• list.dropBackground#505058
• list.errorForeground#ff3050
• list.filterMatchBackground#0080ffa0
• list.hoverBackground#ffffff20
• list.inactiveSelectionBackground#ffffff10
• list.warningForeground#ffc060
• minimap.background#00000020
• minimap.errorHighlight#ff3050a0
• minimap.findMatchHighlight#0080ffa0
• minimap.infoHighlight#0028a8a0
• minimap.selectionHighlight#ffffff60
• minimap.warningHighlight#f08000a0
• minimapGutter.addedBackground#00a030
• minimapGutter.deletedBackground#ff3050
• minimapGutter.modifiedBackground#0080ff
• notebook.cellBorderColor#505058
• notebook.cellEditorBackground#707078
• notebook.cellHoverBackground#f0f0f818
• notebook.cellToolbarSeparator#505058
• notebook.editorBackground#606068
• notebook.focusedCellBackground#f0f0f828
• notebook.focusedCellBorder#0028a8
• notebook.focusedEditorBorder#585860
• notebook.inactiveFocusedCellBorder#303038
• notebook.outputContainerBackgroundColor#606068
• notebook.selectedCellBackground#0080ff30
• outputView.background#707078
• panel.background#606068
• panel.border#404048
• panel.dropBorder#404048
• panelSection.border#404048
• panelSection.dropBackground#00000020
• panelSectionHeader.background#707078
• panelTitle.activeBorder#d0d0d8
• panelTitle.activeForeground#d0d0d8
• panelTitle.inactiveForeground#a0a0a8
• peekView.border#0040c0
• peekViewEditor.background#707078
• peekViewEditor.matchHighlightBackground#00000040
• peekViewEditorGutter.background#686870
• peekViewResult.background#505058
• peekViewResult.matchHighlightBackground#00000040
• peekViewResult.selectionBackground#ffffff20
• peekViewTitle.background#0028a8
• peekViewTitleDescription.foreground#80c0ff
• peekViewTitleLabel.foreground#d0d0d8
• problemsErrorIcon.foreground#ff3050
• problemsInfoIcon.foreground#0080ff
• problemsWarningIcon.foreground#f08000
• progressBar.background#0080ff
• sash.hoverBorder#808088
• scmGraph.foreground1#40a0ff
• scmGraph.foreground2#40ffa0
• scmGraph.foreground3#a0ff40
• scmGraph.foreground4#ffa040
• scmGraph.foreground5#ff40a0
• scmGraph.historyItemHoverAdditionsForeground#00b040
• scmGraph.historyItemHoverDeletionsForeground#ff3050
• scmGraph.historyItemHoverLabelForeground#303038
• scmGraph.historyItemRefColor#c8c0b8
• scmGraph.historyItemRemoteRefColor#b0c0ff
• scrollbar.shadow#303038
• scrollbarSlider.activeBackground#ffffff50
• scrollbarSlider.background#ffffff30
• scrollbarSlider.hoverBackground#ffffff40
• selection.background#0080ffa0
• settings.focusedRowBackground#f0f0ff28
• settings.modifiedItemIndicator#a0ff40
• settings.numberInputBackground#606068
• settings.numberInputBorder#505058
• settings.rowHoverBackground#f0f0ff18
• settings.textInputBackground#606068
• settings.textInputBorder#505058
• sideBar.background#585860
• sideBar.border#303038
• sideBar.dropBackground#585860
• sideBar.foreground#c0c0c8
• sideBarSectionHeader.background#707078
• sideBarTitle.background#484850
• statusBar.background#0028a8
• statusBar.debuggingBackground#80c0ff
• statusBar.debuggingForeground#404048
• statusBar.foreground#a0a0a8
• statusBar.noFolderBackground#505058
• statusBarItem.errorBackground#f02040
• statusBarItem.errorHoverBackground#ff6060
• statusBarItem.offlineBackground#00000020
• statusBarItem.remoteBackground#0040c0
• statusBarItem.remoteHoverBackground#0030b0
• statusBarItem.remoteHoverForeground#e0e0e8
• statusBarItem.warningBackground#f08000
• statusBarItem.warningHoverBackground#ffc080
• symbolIcon.classForeground#0000a0
• symbolIcon.constantForeground#000008
• symbolIcon.fieldForeground#80c0ff
• symbolIcon.functionForeground#f0f0f8
• symbolIcon.methodForeground#e0d080
• symbolIcon.namespaceForeground#ff20a0
• symbolIcon.operatorForeground#40c000
• symbolIcon.structForeground#ff40ff
• tab.activeBackground#505058
• tab.border#484850
• tab.inactiveBackground#404048
• terminal.ansiBrightMagenta#a0d000
• terminal.ansiBrightYellow#40a0d0
• terminal.ansiCyan#000080
• terminal.background#585860
• terminal.border#a0a0a8
• textBlockQuote.background#808088
• textBlockQuote.border#0028a8
• textCodeBlock.background#303038
• textLink.activeForeground#a8d0ff
• textLink.foreground#70b0ff
• textPreformat.background#484850
• textPreformat.foreground#e0c080
• titleBar.activeBackground#383840
• titleBar.activeForeground#d0d0d8
• titleBar.inactiveBackground#303038
• toolbar.activeBackground#707078
• toolbar.hoverBackground#ffffff20
• tree.inactiveIndentGuidesStroke#888890
• tree.indentGuidesStroke#c0c0c8
• widget.border#404048
• widget.shadow#404048

tokenColors

TextMate scopes and font styles (syntax highlighting rules).