Twilite

Color themes

• 

  Twilite

• 

  Twilite (Darker)

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#18152a
• activityBar.border#282a36
• activityBar.foreground#d8d8d8
• activityBar.inactiveForeground#a0a0a0
• activityBarBadge.background#ff79c6
• activityBarBadge.foreground#f8f8f2
• badge.background#ff79c6
• badge.foreground#f8f8f2
• breadcrumb.activeSelectionForeground#ff79c6
• breadcrumb.focusForeground#f8f8f2
• breadcrumb.foreground#6272a4
• breadcrumbPicker.background#282a36
• button.background#ff79c6
• button.foreground#f8f8f2
• button.hoverBackground#ffa8eb
• button.secondaryBackground#44475a
• button.secondaryForeground#f8f8f2
• button.secondaryHoverBackground#6272a4
• debugConsole.errorForeground#ff6e6e
• debugConsole.infoForeground#70c9dd
• debugConsole.warningForeground#f1fa8c
• debugIcon.breakpointForeground#ff6e6e
• debugIcon.startForeground#50fa7b
• debugToolBar.background#282a36
• diffEditor.insertedLineBackground#50fa7b15
• diffEditor.insertedTextBackground#50fa7b22
• diffEditor.removedLineBackground#ff6e6e15
• diffEditor.removedTextBackground#ff6e6e22
• disabledForeground#6272a4
• dropdown.background#282a36
• dropdown.border#44475a
• dropdown.foreground#f8f8f2
• dropdown.listBackground#282a36
• editor.background#1e1a2e
• editor.findMatchBackground#ff79c644
• editor.findMatchHighlightBackground#ff79c622
• editor.foreground#f8f8f2
• editor.inactiveLineHighlightBackground#282a3618
• editor.lineHighlightBackground#282a3633
• editor.rangeHighlightBackground#44475a33
• editor.selectionBackground#44475a88
• editor.selectionHighlightBackground#44475a44
• editor.wordHighlightBackground#44475a55
• editor.wordHighlightStrongBackground#44475a88
• editorBracketMatch.background#44475a
• editorBracketMatch.border#ff79c6
• editorCursor.foreground#ff79c6
• editorGroup.border#282a36
• editorGroupHeader.tabsBackground#18152a
• editorGroupHeader.tabsBorder#282a36
• editorGutter.addedBackground#50fa7b
• editorGutter.background#1e1a2e
• editorGutter.deletedBackground#ff6e6e
• editorGutter.modifiedBackground#70c9dd
• editorHoverWidget.background#282a36
• editorHoverWidget.border#44475a
• editorHoverWidget.foreground#f8f8f2
• editorIndentGuide.activeBackground#44475a80
• editorIndentGuide.background#44475a40
• editorLineNumber.activeForeground#f8f8f2
• editorLineNumber.dimmedForeground#44475a
• editorLineNumber.foreground#6272a4
• editorOverviewRuler.addedForeground#50fa7b
• editorOverviewRuler.border#282a36
• editorOverviewRuler.deletedForeground#ff6e6e
• editorOverviewRuler.modifiedForeground#70c9dd
• editorRuler.foreground#44475a
• editorSuggestWidget.background#282a36
• editorSuggestWidget.foreground#f8f8f2
• editorSuggestWidget.highlightForeground#ff79c6
• editorSuggestWidget.selectedBackground#44475a
• editorWhitespace.foreground#44475a
• editorWidget.background#282a36
• editorWidget.border#44475a
• editorWidget.foreground#f8f8f2
• errorForeground#ff6e6e
• extensionBadge.remoteBackground#70c9dd
• extensionBadge.remoteForeground#f8f8f2
• extensionButton.prominentBackground#ff79c6
• extensionButton.prominentForeground#f8f8f2
• extensionButton.prominentHoverBackground#ffa8eb
• extensionEditor.background#18152a
• extensionEditor.foreground#d8d8d8
• extensionEditorBorder#282a36
• extensionIcon.foreground#ff79c6
• extensionIcon.preReleaseForeground#50fa7b
• extensions.autoUpdateButton.background#ff79c6
• extensions.autoUpdateButton.foreground#f8f8f2
• extensions.autoUpdateButton.hoverBackground#ffa8eb
• extensions.searchBox.background#282a36
• extensions.searchBox.border#44475a
• extensions.searchBox.foreground#d8d8d8
• focusBorder#ff79c680
• foreground#d8d8d8
• gitDecoration.addedResourceForeground#50fa7b
• gitDecoration.conflictingResourceForeground#f1fa8c
• gitDecoration.deletedResourceForeground#ff6e6e
• gitDecoration.ignoredResourceForeground#6272a4
• gitDecoration.modifiedResourceForeground#70c9dd
• gitDecoration.stageDeletedResourceForeground#ff6e6e
• gitDecoration.stageModifiedResourceForeground#70c9dd
• gitDecoration.untrackedResourceForeground#50fa7b
• icon.foreground#d8d8d8
• input.background#282a36
• input.border#44475a
• input.foreground#f8f8f2
• input.placeholderForeground#6272a4
• inputOption.activeBackground#ff79c633
• inputOption.activeBorder#ff79c6
• inputValidation.errorBackground#ff6e6e
• inputValidation.errorBorder#ff6e6e
• inputValidation.warningBackground#f1fa8c
• inputValidation.warningBorder#f1fa8c
• list.activeSelectionBackground#44475a
• list.activeSelectionForeground#f8f8f2
• list.dropBackground#44475a80
• list.focusBackground#44475a
• list.focusForeground#f8f8f2
• list.highlightForeground#ff79c6
• list.hoverBackground#282a36
• list.hoverForeground#f8f8f2
• list.inactiveSelectionBackground#44475a80
• menu.background#18152a
• menu.border#44475a
• menu.foreground#d8d8d8
• menu.selectionBackground#44475a
• menu.selectionForeground#ff79c6
• menu.separatorBackground#44475a
• menubar.selectionBackground#282a36
• menubar.selectionForeground#ff79c6
• minimap.background#1e1a2e
• minimap.findMatchHighlight#ff79c6
• minimap.selectionHighlight#44475a
• minimapSlider.activeBackground#44475a80
• minimapSlider.background#44475a40
• minimapSlider.hoverBackground#44475a60
• notifications.background#282a36
• notifications.border#44475a
• notifications.foreground#f8f8f2
• notificationsErrorIcon.foreground#ff6e6e
• notificationsInfoIcon.foreground#70c9dd
• notificationsWarningIcon.foreground#f1fa8c
• panel.background#18152a
• panel.border#282a36
• panelTitle.activeBorder#ff79c6
• panelTitle.activeForeground#ff79c6
• panelTitle.inactiveForeground#6272a4
• peekView.border#ff79c6
• peekViewEditor.background#282a36
• peekViewEditor.matchHighlightBackground#ff79c644
• peekViewResult.background#18152a
• peekViewResult.fileForeground#f8f8f2
• peekViewResult.lineForeground#d8d8d8
• peekViewResult.matchHighlightBackground#ff79c644
• peekViewResult.selectionBackground#44475a
• peekViewTitle.background#282a36
• peekViewTitleDescription.foreground#6272a4
• peekViewTitleLabel.foreground#ff79c6
• progressBar.background#ff79c6
• scrollbar.shadow#00000050
• scrollbarSlider.activeBackground#44475acc
• scrollbarSlider.background#44475a80
• scrollbarSlider.hoverBackground#44475aaa
• selection.background#44475a
• sideBar.background#18152a
• sideBar.border#282a36
• sideBar.foreground#d8d8d8
• sideBarSectionHeader.background#282a36
• sideBarSectionHeader.foreground#d8d8d8
• sideBarTitle.foreground#ff79c6
• statusBar.background#18152a
• statusBar.border#282a36
• statusBar.debuggingBackground#ff79c6
• statusBar.debuggingForeground#f8f8f2
• statusBar.foreground#d8d8d8
• statusBar.noFolderBackground#18152a
• statusBarItem.hoverBackground#44475a
• statusBarItem.remoteBackground#ff79c6
• statusBarItem.remoteForeground#f8f8f2
• tab.activeBackground#282a36
• tab.activeBorder#ff79c6
• tab.activeForeground#ff79c6
• tab.border#18152a
• tab.hoverBackground#282a36
• tab.inactiveBackground#18152a
• tab.inactiveForeground#a0a0a0
• terminal.ansiBlack#282a36
• terminal.ansiBlue#a080d9
• terminal.ansiBrightBlack#44475a
• terminal.ansiBrightBlue#b89ae0
• terminal.ansiBrightCyan#88dde8
• terminal.ansiBrightGreen#58e878
• terminal.ansiBrightMagenta#e878c0
• terminal.ansiBrightRed#e85858
• terminal.ansiBrightWhite#e8e8e8
• terminal.ansiBrightYellow#e0e888
• terminal.ansiCyan#70c9dd
• terminal.ansiGreen#40d860
• terminal.ansiMagenta#d960a8
• terminal.ansiRed#d84040
• terminal.ansiWhite#a0a0a0
• terminal.ansiYellow#d0d870
• terminal.background#1e1a2e
• terminal.foreground#f8f8f2
• terminal.selectionBackground#44475a
• terminalCursor.foreground#ff79c6
• titleBar.activeBackground#18152a
• titleBar.activeForeground#d8d8d8
• titleBar.border#282a36
• titleBar.inactiveBackground#141025
• titleBar.inactiveForeground#888888
• tree.indentGuidesStroke#44475a
• widget.border#44475a
• widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).