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#15161d
• activityBar.border#15161d
• activityBar.foreground#707083
• activityBar.inactiveForeground#4a4e6b
• activityBarBadge.background#7a7c9d
• activityBarBadge.foreground#dbdde4
• activityBarTop.foreground#707083
• activityBarTop.inactiveForeground#4a4e6b
• badge.background#989eb04d
• badge.foreground#8b8d9c
• breadcrumb.activeSelectionForeground#979ab3
• breadcrumb.background#15161d
• breadcrumb.focusForeground#979ab3
• breadcrumb.foreground#4a4b64
• breadcrumbPicker.background#15161d
• button.background#00d4ffcc
• button.foreground#0a0a0a
• button.hoverBackground#00d4ffaa
• button.secondaryBackground#262834
• charts.blue#7a7c9d
• charts.foreground#7c829d
• charts.green#5ed6d8
• charts.lines#15161d
• charts.orange#cdac98
• charts.purple#8a8cb2
• charts.red#ca5f64
• charts.yellow#b6a6c2
• chat.avatarBackground#7a7c9d
• chat.avatarForeground#979ab3
• chat.requestBorder#121214
• chat.slashCommandBackground#121214
• chat.slashCommandForeground#7a7c9d
• debugConsole.errorForeground#9c7a8f
• debugConsole.infoForeground#707083
• debugConsole.sourceForeground#707083
• debugConsole.warningForeground#b69c91
• debugConsoleInputIcon.foreground#6f768e
• debugExceptionWidget.background#121214
• debugExceptionWidget.border#ca5f64
• debugIcon.breakpointDisabledForeground#4e506e
• debugIcon.breakpointForeground#cc7575
• debugIcon.breakpointUnverifiedForeground#b27978
• debugTokenExpression.boolean#cdac98
• debugTokenExpression.error#9c7a8f
• debugTokenExpression.name#7f9bad
• debugTokenExpression.number#cdac98
• debugTokenExpression.string#9cb7a9
• debugTokenExpression.value#7c829d
• debugToolBar.background#121214
• debugView.stateLabelBackground#121214
• debugView.stateLabelForeground#707083
• debugView.valueChangedHighlight#7a7c9d4d
• descriptionForeground#4a4b64
• diffEditor.diagonalFill#4a4e6b
• diffEditor.insertedLineBackground#5ed6d826
• diffEditor.insertedTextBackground#5ed6d826
• diffEditor.removedLineBackground#cc757526
• diffEditor.removedTextBackground#cc757526
• diffEditor.unchangedCodeBackground#4c4e6866
• diffEditorGutter.insertedLineBackground#5ed6d826
• diffEditorGutter.removedLineBackground#cc757526
• diffEditorOverview.insertedForeground#5ed6d826
• diffEditorOverview.removedForeground#cc757526
• disabledForeground#4e506e
• dropdown.background#121214
• dropdown.foreground#707083
• dropdown.listBackground#121214
• editor.background#0f131c
• editor.findMatchBackground#00d4ff66
• editor.findMatchBorder#b6a6c2
• editor.findMatchHighlightBackground#00d4ff33
• editor.findRangeHighlightBackground#6b6e8a26
• editor.focusedStackFrameHighlightBackground#6f768e26
• editor.foldBackground#1112164d
• editor.foreground#a9b1d6
• editor.inactiveSelectionBackground#6b6e8a26
• editor.lineHighlightBackground#18191b
• editor.rangeHighlightBackground#6b6e8a14
• editor.selectionBackground#00d4ff30
• editor.selectionHighlightBackground#6b6e8a4d
• editor.stackFrameHighlightBackground#ac8a9226
• editor.wordHighlightBackground#6b6e8a4d
• editor.wordHighlightStrongBackground#6b6e8a66
• editorBracketHighlight.foreground1#00d4ff
• editorBracketHighlight.foreground2#a78bfa
• editorBracketHighlight.foreground3#7aa2f7
• editorBracketHighlight.foreground4#7ce38b
• editorBracketHighlight.foreground5#ffd866
• editorBracketHighlight.foreground6#ff6188
• editorBracketHighlight.unexpectedBracket.foreground#cc7575
• editorBracketMatch.background#15161d
• editorBracketMatch.border#4a4e6b
• editorBracketPairGuide.activeBackground1#7f92ac
• editorBracketPairGuide.activeBackground2#7f9bad
• editorBracketPairGuide.activeBackground3#8a8cb2
• editorBracketPairGuide.activeBackground4#5ed6d8
• editorBracketPairGuide.activeBackground5#9cb7a9
• editorBracketPairGuide.activeBackground6#cdac98
• editorCodeLens.foreground#4a4b64
• editorCursor.foreground#8b8d9c
• editorError.foreground#ff6188
• editorGroup.border#06090f
• editorGroup.dropBackground#18191b
• editorGroupHeader.border#121214
• editorGroupHeader.noTabsBackground#15161d
• editorGroupHeader.tabsBackground#0a0e15
• editorGroupHeader.tabsBorder#121214
• editorGutter.addedBackground#4a6f6e
• editorGutter.deletedBackground#863e45
• editorGutter.modifiedBackground#6f768e
• editorHint.foreground#7ce38b
• editorHoverWidget.background#15161d
• editorHoverWidget.border#121214
• editorIndentGuide.activeBackground1#4a4e6b
• editorIndentGuide.background1#2a2b44
• editorInfo.foreground#00d4ff
• editorInlayHint.foreground#5e657e
• editorLightBulb.foreground#b6a6c2
• editorLightBulbAutoFix.foreground#b6a6c2
• editorLineNumber.activeForeground#707083
• editorLineNumber.foreground#4a4e6b
• editorLink.activeForeground#8b8d9c
• editorMarkerNavigation.background#15161d
• editorOverviewRuler.addedForeground#4a6f6e
• editorOverviewRuler.border#121214
• editorOverviewRuler.bracketMatchForeground#121214
• editorOverviewRuler.deletedForeground#863e45
• editorOverviewRuler.errorForeground#cc7575
• editorOverviewRuler.findMatchForeground#979ab34d
• editorOverviewRuler.infoForeground#5ed6d8
• editorOverviewRuler.modifiedForeground#6f768e
• editorOverviewRuler.rangeHighlightForeground#979ab34d
• editorOverviewRuler.selectionHighlightForeground#979ab326
• editorOverviewRuler.warningForeground#b6a6c2
• editorOverviewRuler.wordHighlightForeground#8a8cb24d
• editorOverviewRuler.wordHighlightStrongForeground#8a8cb266
• editorPane.background#14151d
• editorRuler.foreground#121214
• editorSuggestWidget.background#15161d
• editorSuggestWidget.border#121214
• editorSuggestWidget.highlightForeground#6f768e
• editorSuggestWidget.selectedBackground#18191b
• editorWarning.foreground#ffd866
• editorWhitespace.foreground#4a4e6b
• editorWidget.background#15161d
• editorWidget.border#121214
• editorWidget.foreground#707083
• editorWidget.resizeBorder#6b6e8a26
• errorForeground#75657a
• extensionBadge.remoteBackground#7a7c9d
• extensionBadge.remoteForeground#dbdde4
• extensionButton.prominentBackground#7a7c9dd4
• extensionButton.prominentForeground#dbdde4
• extensionButton.prominentHoverBackground#7a7c9dc6
• focusBorder#00d4ff66
• foreground#707083
• gitDecoration.addedResourceForeground#7ce38b
• gitDecoration.conflictingResourceForeground#b6a6c280
• gitDecoration.deletedResourceForeground#ff6188
• gitDecoration.ignoredResourceForeground#3a5a6a
• gitDecoration.modifiedResourceForeground#7aa2f7
• gitDecoration.renamedResourceForeground#a78bfa
• gitDecoration.stageDeletedResourceForeground#863e45
• gitDecoration.stageModifiedResourceForeground#6f768e
• gitDecoration.untrackedResourceForeground#5ed6d8
• gitlens.gutterBackgroundColor#15161d
• gitlens.gutterForegroundColor#707083
• gitlens.gutterUncommittedForegroundColor#7a7c9d
• gitlens.trailingLineForegroundColor#5e657e
• icon.foreground#707083
• inlineChat.foreground#979ab3
• inlineChatDiff.inserted#5ed6d84d
• inlineChatDiff.removed#cc75754d
• inlineChatInput.background#121214
• input.background#121214
• input.border#121214
• input.foreground#979ab3
• input.placeholderForeground#7070838a
• inputOption.activeBackground#7a7c9d4d
• inputOption.activeForeground#8b8d9c
• inputValidation.errorBackground#683e4a
• inputValidation.errorBorder#ca5f64
• inputValidation.errorForeground#8b8d9c
• inputValidation.infoBackground#7a7c9d4d
• inputValidation.infoBorder#7a7c9d
• inputValidation.infoForeground#8b8d9c
• inputValidation.warningBackground#ac8a92
• inputValidation.warningBorder#b6a6c2
• inputValidation.warningForeground#6b6e8a
• list.activeSelectionBackground#00d4ff25
• list.activeSelectionForeground#979ab3
• list.deemphasizedForeground#707083
• list.dropBackground#18191b
• list.errorForeground#9c7a8f
• list.focusBackground#16161a
• list.focusForeground#979ab3
• list.highlightForeground#8c95ca
• list.hoverBackground#00d4ff18
• list.hoverForeground#979ab3
• list.inactiveSelectionBackground#00d4ff1a
• list.inactiveSelectionForeground#979ab3
• list.invalidItemForeground#ff6188
• list.warningForeground#b69c91
• listFilterWidget.background#121214
• listFilterWidget.noMatchesOutline#b27978
• listFilterWidget.outline#7a7c9d
• menu.background#15161d
• menu.border#121214
• menu.foreground#707083
• menu.selectionBackground#18191b
• menu.selectionForeground#979ab3
• menu.separatorBackground#121214
• menubar.selectionBackground#18191b
• menubar.selectionBorder#15161d
• menubar.selectionForeground#979ab3
• merge.currentContentBackground#4a6f6e4d
• merge.currentHeaderBackground#5ed6d826
• merge.incomingContentBackground#7a7c9d4d
• merge.incomingHeaderBackground#7a7c9d4d
• mergeEditor.change.background#5ed6d826
• mergeEditor.change.word.background#5ed6d84d
• mergeEditor.conflict.handled.minimapOverViewRuler#5ed6d8
• mergeEditor.conflict.handledFocused.border#5ed6d84d
• mergeEditor.conflict.handledUnfocused.border#5ed6d826
• mergeEditor.conflict.unhandled.minimapOverViewRuler#b6a6c2
• mergeEditor.conflict.unhandledFocused.border#b6a6c2b2
• mergeEditor.conflict.unhandledUnfocused.border#b6a6c280
• minimapGutter.addedBackground#4a6f6e
• minimapGutter.deletedBackground#863e45
• minimapGutter.modifiedBackground#6f768e
• multiDiffEditor.border#14151d
• multiDiffEditor.headerBackground#14151d
• notebook.cellBorderColor#121214
• notebook.cellEditorBackground#15161d
• notebook.cellStatusBarItemHoverBackground#16161a
• notebook.editorBackground#14151d
• notebook.focusedCellBorder#4a4e6b
• notificationCenterHeader.background#121214
• notificationLink.foreground#6f768e
• notifications.background#121214
• notificationsErrorIcon.foreground#9c7a8f
• notificationsInfoIcon.foreground#5ed6d8
• notificationsWarningIcon.foreground#8a8cb2
• panel.background#0a0e15
• panel.border#06090f
• panelInput.border#15161d
• panelTitle.activeBorder#15161d
• panelTitle.activeForeground#707083
• panelTitle.inactiveForeground#4a4e6b
• peekView.border#121214
• peekViewEditor.background#15161d
• peekViewEditor.matchHighlightBackground#7a7c9d4d
• peekViewResult.background#121214
• peekViewResult.fileForeground#707083
• peekViewResult.lineForeground#979ab3
• peekViewResult.matchHighlightBackground#7a7c9d4d
• peekViewResult.selectionBackground#7a7c9d26
• peekViewResult.selectionForeground#979ab3
• peekViewTitle.background#121214
• peekViewTitleDescription.foreground#707083
• peekViewTitleLabel.foreground#979ab3
• pickerGroup.border#121214
• pickerGroup.foreground#979ab3
• progressBar.background#7a7c9d
• sash.hoverBorder#4a4e6b
• scmGraph.foreground1#cdac98
• scmGraph.foreground2#b6a6c2
• scmGraph.foreground3#5ed6d8
• scmGraph.foreground4#7a7c9d
• scmGraph.foreground5#8a8cb2
• scmGraph.historyItemBaseRefColor#8a8cb2
• scmGraph.historyItemHoverAdditionsForeground#5ed6d8
• scmGraph.historyItemHoverDefaultLabelForeground#979ab3
• scmGraph.historyItemHoverDeletionsForeground#ca5f64
• scmGraph.historyItemHoverLabelForeground#15161d
• scmGraph.historyItemRefColor#6f768e
• scmGraph.historyItemRemoteRefColor#5ed6d8
• scrollbar.shadow#0000004d
• scrollbarSlider.activeBackground#817c9c4d
• scrollbarSlider.background#817c9c14
• scrollbarSlider.hoverBackground#817c9c26
• selection.background#6b6e8a4d
• settings.headerForeground#6f768e
• sideBar.background#0a0e15
• sideBar.border#06090f
• sideBar.dropBackground#18191b
• sideBar.foreground#707083
• sideBarSectionHeader.background#0a0e15
• sideBarSectionHeader.border#06090f
• sideBarSectionHeader.foreground#979ab3
• sideBarTitle.foreground#707083
• statusBar.background#0a0e15
• statusBar.border#121214
• statusBar.debuggingBackground#15161d
• statusBar.debuggingForeground#707083
• statusBar.foreground#707083
• statusBar.noFolderBackground#15161d
• statusBarItem.activeBackground#121214
• statusBarItem.hoverBackground#18191b
• statusBarItem.prominentBackground#121214
• statusBarItem.prominentHoverBackground#18191b
• tab.activeBackground#0f131c
• tab.activeBorder#7a7c9d
• tab.activeForeground#979ab3
• tab.activeModifiedBorder#14151d
• tab.border#121214
• tab.hoverForeground#979ab3
• tab.inactiveBackground#0a0e15
• tab.inactiveForeground#707083
• tab.inactiveModifiedBorder#18191b
• tab.lastPinnedBorder#2e3044
• tab.unfocusedActiveBorder#18191b
• tab.unfocusedActiveForeground#979ab3
• tab.unfocusedHoverForeground#979ab3
• tab.unfocusedInactiveForeground#707083
• 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#15161d
• terminal.foreground#707083
• terminal.selectionBackground#6b6e8a4d
• textBlockQuote.background#15161d
• textCodeBlock.background#15161d
• textLink.activeForeground#5ff0ff
• textLink.foreground#00d4ff
• textPreformat.foreground#7c829d
• textSeparator.foreground#4a4e6b
• titleBar.activeBackground#0a0e15
• titleBar.activeForeground#707083
• titleBar.border#121214
• titleBar.inactiveBackground#0a0e15
• titleBar.inactiveForeground#707083
• toolbar.activeBackground#18191b
• toolbar.hoverBackground#18191b
• tree.indentGuidesStroke#4a4e6b
• walkThrough.embeddedEditorBackground#15161d
• widget.shadow#15151a4d
• window.activeBorder#101015
• window.inactiveBorder#101015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).