Tokyo Nebula

Color themes

• 

  Tokyo Nebula Andromeda

• 

  Tokyo Nebula Aurora

• 

  Tokyo Nebula Eclipse

• 

  Tokyo Nebula Polaris

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#16161e
• activityBar.border#16161e
• activityBar.foreground#787c99
• activityBar.inactiveForeground#3b3e52
• activityBarBadge.background#3d59a1
• activityBarBadge.foreground#fff
• activityBarTop.foreground#787c99
• activityBarTop.inactiveForeground#3b3e52
• badge.background#7e83b230
• badge.foreground#acb0d0
• breadcrumb.activeSelectionForeground#a9b1d6
• breadcrumb.background#16161e
• breadcrumb.focusForeground#a9b1d6
• breadcrumb.foreground#515670
• breadcrumbPicker.background#16161e
• button.background#a78bfacc
• button.foreground#0a0a0a
• button.hoverBackground#a78bfaaa
• button.secondaryBackground#3b3e52
• charts.blue#7aa2f7
• charts.foreground#9AA5CE
• charts.green#41a6b5
• charts.lines#16161e
• charts.orange#ff9e64
• charts.purple#9d7cd8
• charts.red#f7768e
• charts.yellow#e0af68
• chat.avatarBackground#3d59a1
• chat.avatarForeground#a9b1d6
• chat.requestBorder#0f0f14
• chat.slashCommandBackground#14141b
• chat.slashCommandForeground#7aa2f7
• debugConsole.errorForeground#bb616b
• debugConsole.infoForeground#787c99
• debugConsole.sourceForeground#787c99
• debugConsole.warningForeground#c49a5a
• debugConsoleInputIcon.foreground#73daca
• debugExceptionWidget.background#101014
• debugExceptionWidget.border#963c47
• debugIcon.breakpointDisabledForeground#414761
• debugIcon.breakpointForeground#db4b4b
• debugIcon.breakpointUnverifiedForeground#c24242
• debugTokenExpression.boolean#ff9e64
• debugTokenExpression.error#bb616b
• debugTokenExpression.name#7dcfff
• debugTokenExpression.number#ff9e64
• debugTokenExpression.string#9ece6a
• debugTokenExpression.value#9aa5ce
• debugToolBar.background#101014
• debugView.stateLabelBackground#14141b
• debugView.stateLabelForeground#787c99
• debugView.valueChangedHighlight#3d59a1aa
• descriptionForeground#515670
• diffEditor.diagonalFill#292e42
• diffEditor.insertedLineBackground#41a6b520
• diffEditor.insertedTextBackground#41a6b520
• diffEditor.removedLineBackground#db4b4b22
• diffEditor.removedTextBackground#db4b4b22
• diffEditor.unchangedCodeBackground#282a3b66
• diffEditorGutter.insertedLineBackground#41a6b525
• diffEditorGutter.removedLineBackground#db4b4b22
• diffEditorOverview.insertedForeground#41a6b525
• diffEditorOverview.removedForeground#db4b4b22
• disabledForeground#545c7e
• dropdown.background#14141b
• dropdown.foreground#787c99
• dropdown.listBackground#14141b
• editor.background#15161f
• editor.findMatchBackground#a78bfa66
• editor.findMatchBorder#e0af68
• editor.findMatchHighlightBackground#a78bfa33
• editor.findRangeHighlightBackground#515c7e33
• editor.focusedStackFrameHighlightBackground#73daca20
• editor.foldBackground#1111174a
• editor.foreground#a9b1d6
• editor.inactiveSelectionBackground#6b7fb285
• editor.lineHighlightBackground#1e202e
• editor.rangeHighlightBackground#515c7e20
• editor.selectionBackground#a78bfa30
• editor.selectionHighlightBackground#515c7e44
• editor.stackFrameHighlightBackground#E2BD3A20
• editor.wordHighlightBackground#515c7e44
• editor.wordHighlightStrongBackground#515c7e55
• editorBracketHighlight.foreground1#a78bfa
• editorBracketHighlight.foreground2#7aa2f7
• editorBracketHighlight.foreground3#00d4ff
• editorBracketHighlight.foreground4#7ce38b
• editorBracketHighlight.foreground5#ffd866
• editorBracketHighlight.foreground6#ff6188
• editorBracketHighlight.unexpectedBracket.foreground#db4b4b
• editorBracketMatch.background#16161e
• editorBracketMatch.border#42465d
• editorBracketPairGuide.activeBackground1#698cd6
• editorBracketPairGuide.activeBackground2#68b3de
• editorBracketPairGuide.activeBackground3#9a7ecc
• editorBracketPairGuide.activeBackground4#25aac2
• editorBracketPairGuide.activeBackground5#80a856
• editorBracketPairGuide.activeBackground6#c49a5a
• editorCodeLens.foreground#51597d
• editorCursor.foreground#c0caf5
• editorError.foreground#ff6188
• editorGhostText.foreground#646e9c
• editorGroup.border#0a0c12
• editorGroup.dropBackground#1e202e
• editorGroupHeader.border#101014
• editorGroupHeader.noTabsBackground#16161e
• editorGroupHeader.tabsBackground#11121a
• editorGroupHeader.tabsBorder#101014
• editorGutter.addedBackground#164846
• editorGutter.deletedBackground#823c41
• editorGutter.modifiedBackground#394b70
• editorHint.foreground#7ce38b
• editorHoverWidget.background#16161e
• editorHoverWidget.border#101014
• editorIndentGuide.activeBackground1#363b54
• editorIndentGuide.background1#232433
• editorInfo.foreground#00d4ff
• editorInlayHint.foreground#646e9c
• editorLightBulb.foreground#e0af68
• editorLightBulbAutoFix.foreground#e0af68
• editorLineNumber.activeForeground#787c99
• editorLineNumber.foreground#363b54
• editorLink.activeForeground#acb0d0
• editorMarkerNavigation.background#16161e
• editorOverviewRuler.addedForeground#164846
• editorOverviewRuler.border#101014
• editorOverviewRuler.bracketMatchForeground#101014
• editorOverviewRuler.deletedForeground -Foreground#703438
• editorOverviewRuler.errorForeground#db4b4b
• editorOverviewRuler.findMatchForeground#a9b1d644
• editorOverviewRuler.infoForeground#1abc9c
• editorOverviewRuler.modifiedForeground#394b70
• editorOverviewRuler.rangeHighlightForeground#a9b1d644
• editorOverviewRuler.selectionHighlightForeground#a9b1d622
• editorOverviewRuler.warningForeground#e0af68
• editorOverviewRuler.wordHighlightForeground#bb9af755
• editorOverviewRuler.wordHighlightStrongForeground#bb9af766
• editorPane.background#1a1b26
• editorRuler.foreground#101014
• editorSuggestWidget.background#16161e
• editorSuggestWidget.border#101014
• editorSuggestWidget.highlightForeground#6183bb
• editorSuggestWidget.selectedBackground#20222c
• editorWarning.foreground#ffd866
• editorWhitespace.foreground#363b54
• editorWidget.background#16161e
• editorWidget.border#101014
• editorWidget.foreground#787c99
• editorWidget.resizeBorder#545c7e33
• errorForeground#515670
• extensionBadge.remoteBackground#3d59a1
• extensionBadge.remoteForeground#ffffff
• extensionButton.prominentBackground#3d59a1DD
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#3d59a1AA
• focusBorder#a78bfa66
• foreground#787c99
• gitDecoration.addedResourceForeground#7ce38b
• gitDecoration.conflictingResourceForeground#e0af68cc
• gitDecoration.deletedResourceForeground#ff6188
• gitDecoration.ignoredResourceForeground#5a5d8a
• gitDecoration.modifiedResourceForeground#7aa2f7
• gitDecoration.renamedResourceForeground#a78bfa
• gitDecoration.stageDeletedResourceForeground#914c54
• gitDecoration.stageModifiedResourceForeground#6183bb
• gitDecoration.untrackedResourceForeground#449dab
• gitlens.gutterBackgroundColor#16161e
• gitlens.gutterForegroundColor#787c99
• gitlens.gutterUncommittedForegroundColor#7aa2f7
• gitlens.trailingLineForegroundColor#646e9c
• icon.foreground#787c99
• inlineChat.foreground#a9b1d6
• inlineChatDiff.inserted#41a6b540
• inlineChatDiff.removed#db4b4b42
• inlineChatInput.background#14141b
• input.background#14141b
• input.border#0f0f14
• input.foreground#a9b1d6
• input.placeholderForeground#787c998A
• inputOption.activeBackground#3d59a144
• inputOption.activeForeground#c0caf5
• inputValidation.errorBackground#85353e
• inputValidation.errorBorder#963c47
• inputValidation.errorForeground#bbc2e0
• inputValidation.infoBackground#3d59a15c
• inputValidation.infoBorder#3d59a1
• inputValidation.infoForeground#bbc2e0
• inputValidation.warningBackground#c2985b
• inputValidation.warningBorder#e0af68
• inputValidation.warningForeground#000000
• list.activeSelectionBackground#a78bfa25
• list.activeSelectionForeground#a9b1d6
• list.deemphasizedForeground#787c99
• list.dropBackground#1e202e
• list.errorForeground#bb616b
• list.focusBackground#1c1d29
• list.focusForeground#a9b1d6
• list.highlightForeground#668ac4
• list.hoverBackground#a78bfa18
• list.hoverForeground#a9b1d6
• list.inactiveSelectionBackground#a78bfa1a
• list.inactiveSelectionForeground#a9b1d6
• list.invalidItemForeground#ff6188
• list.warningForeground#c49a5a
• listFilterWidget.background#101014
• listFilterWidget.noMatchesOutline#a6333f
• listFilterWidget.outline#3d59a1
• menu.background#16161e
• menu.border#101014
• menu.foreground#787c99
• menu.selectionBackground#1e202e
• menu.selectionForeground#a9b1d6
• menu.separatorBackground#101014
• menubar.selectionBackground#1e202e
• menubar.selectionBorder#1b1e2e
• menubar.selectionForeground#a9b1d6
• merge.currentContentBackground#007a7544
• merge.currentHeaderBackground#41a6b525
• merge.incomingContentBackground#3d59a144
• merge.incomingHeaderBackground#3d59a1aa
• mergeEditor.change.background#41a6b525
• mergeEditor.change.word.background#41a6b540
• mergeEditor.conflict.handled.minimapOverViewRuler#449dab
• mergeEditor.conflict.handledFocused.border#41a6b565
• mergeEditor.conflict.handledUnfocused.border#41a6b525
• mergeEditor.conflict.unhandled.minimapOverViewRuler#e0af68
• mergeEditor.conflict.unhandledFocused.border#e0af68b0
• mergeEditor.conflict.unhandledUnfocused.border#e0af6888
• minimapGutter.addedBackground#1C5957
• minimapGutter.deletedBackground#944449
• minimapGutter.modifiedBackground#425882
• multiDiffEditor.border#1a1b26
• multiDiffEditor.headerBackground#1a1b26
• notebook.cellBorderColor#101014
• notebook.cellEditorBackground#16161e
• notebook.cellStatusBarItemHoverBackground#1c1d29
• notebook.editorBackground#1a1b26
• notebook.focusedCellBorder#29355a
• notificationCenterHeader.background#101014
• notificationLink.foreground#6183bb
• notifications.background#101014
• notificationsErrorIcon.foreground#bb616b
• notificationsInfoIcon.foreground#0da0ba
• notificationsWarningIcon.foreground#bba461
• panel.background#11121a
• panel.border#0a0c12
• panelInput.border#16161e
• panelTitle.activeBorder#16161e
• panelTitle.activeForeground#787c99
• panelTitle.inactiveForeground#42465d
• peekView.border#101014
• peekViewEditor.background#16161e
• peekViewEditor.matchHighlightBackground#3d59a166
• peekViewResult.background#101014
• peekViewResult.fileForeground#787c99
• peekViewResult.lineForeground#a9b1d6
• peekViewResult.matchHighlightBackground#3d59a166
• peekViewResult.selectionBackground#3d59a133
• peekViewResult.selectionForeground#a9b1d6
• peekViewTitle.background#101014
• peekViewTitleDescription.foreground#787c99
• peekViewTitleLabel.foreground#a9b1d6
• pickerGroup.border#101014
• pickerGroup.foreground#a9b1d6
• progressBar.background#3d59a1
• sash.hoverBorder#29355a
• scmGraph.foreground1#ff9e64
• scmGraph.foreground2#e0af68
• scmGraph.foreground3#41a6b5
• scmGraph.foreground4#7aa2f7
• scmGraph.foreground5#bb9af7
• scmGraph.historyItemBaseRefColor#9d7cd8
• scmGraph.historyItemHoverAdditionsForeground#41a6b5
• scmGraph.historyItemHoverDefaultLabelForeground#a9b1d6
• scmGraph.historyItemHoverDeletionsForeground#f7768e
• scmGraph.historyItemHoverLabelForeground#1b1e2e
• scmGraph.historyItemRefColor#506FCA
• scmGraph.historyItemRemoteRefColor#41a6b5
• scrollbar.shadow#00000033
• scrollbarSlider.activeBackground#868bc422
• scrollbarSlider.background#868bc415
• scrollbarSlider.hoverBackground#868bc410
• selection.background#6b7fb2a0
• settings.headerForeground#6183bb
• sideBar.background#11121a
• sideBar.border#0a0c12
• sideBar.dropBackground#1e202e
• sideBar.foreground#787c99
• sideBarSectionHeader.background#11121a
• sideBarSectionHeader.border#0a0c12
• sideBarSectionHeader.foreground#a9b1d6
• sideBarTitle.foreground#787c99
• statusBar.background#11121a
• statusBar.border#101014
• statusBar.debuggingBackground#16161e
• statusBar.debuggingForeground#787c99
• statusBar.foreground#787c99
• statusBar.noFolderBackground#16161e
• statusBarItem.activeBackground#101014
• statusBarItem.hoverBackground#20222c
• statusBarItem.prominentBackground#101014
• statusBarItem.prominentHoverBackground#20222c
• tab.activeBackground#15161f
• tab.activeBorder#3d59a1
• tab.activeForeground#a9b1d6
• tab.activeModifiedBorder#1a1b26
• tab.border#101014
• tab.hoverForeground#a9b1d6
• tab.inactiveBackground#11121a
• tab.inactiveForeground#787c99
• tab.inactiveModifiedBorder#1f202e
• tab.lastPinnedBorder#222333
• tab.unfocusedActiveBorder#1f202e
• tab.unfocusedActiveForeground#a9b1d6
• tab.unfocusedHoverForeground#a9b1d6
• tab.unfocusedInactiveForeground#787c99
• terminal.ansiBlack#0a0c14
• terminal.ansiBlue#7aa2f7
• terminal.ansiBrightBlack#3b4261
• terminal.ansiBrightBlue#a4c0ff
• terminal.ansiBrightCyan#5ff0ff
• terminal.ansiBrightGreen#9eff9b
• terminal.ansiBrightMagenta#c4a8ff
• terminal.ansiBrightRed#ff85a1
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffe98a
• terminal.ansiCyan#00d4ff
• terminal.ansiGreen#7ce38b
• terminal.ansiMagenta#a78bfa
• terminal.ansiRed#ff6188
• terminal.ansiWhite#c0caf5
• terminal.ansiYellow#ffd866
• terminal.background#16161e
• terminal.foreground#787c99
• terminal.selectionBackground#6b7fb2c0
• textBlockQuote.background#16161e
• textCodeBlock.background#16161e
• textLink.activeForeground#c4a8ff
• textLink.foreground#a78bfa
• textPreformat.foreground#9699a8
• textSeparator.foreground#363b54
• titleBar.activeBackground#11121a
• titleBar.activeForeground#787c99
• titleBar.border#101014
• titleBar.inactiveBackground#11121a
• titleBar.inactiveForeground#787c99
• toolbar.activeBackground#202330
• toolbar.hoverBackground#202330
• tree.indentGuidesStroke#2b2b3b
• walkThrough.embeddedEditorBackground#16161e
• widget.shadow#ffffff00
• window.activeBorder#0d0f17
• window.inactiveBorder#0d0f17

tokenColors

TextMate scopes and font styles (syntax highlighting rules).