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#141025
• activityBar.border#21222c
• activityBar.foreground#f8f8f2
• activityBar.inactiveForeground#a8a8a8
• activityBarBadge.background#ff79c6
• activityBarBadge.foreground#f8f8f2
• badge.background#ff79c6
• badge.foreground#f8f8f2
• breadcrumb.activeSelectionForeground#ff79c6
• breadcrumb.focusForeground#f8f8f2
• breadcrumb.foreground#6272a4
• breadcrumbPicker.background#21222c
• button.background#ff79c6
• button.foreground#f8f8f2
• button.hoverBackground#ffa8eb
• button.secondaryBackground#44475a
• button.secondaryForeground#f8f8f2
• button.secondaryHoverBackground#6272a4
• debugConsole.errorForeground#ff6e6e
• debugConsole.infoForeground#79ddf0
• debugConsole.warningForeground#ffffb8
• debugIcon.breakpointForeground#ff6e6e
• debugIcon.startForeground#50fa7b
• debugToolBar.background#21222c
• diffEditor.insertedLineBackground#50fa7b15
• diffEditor.insertedTextBackground#50fa7b22
• diffEditor.removedLineBackground#ff6e6e15
• diffEditor.removedTextBackground#ff6e6e22
• disabledForeground#6272a4
• dropdown.background#21222c
• dropdown.border#44475a
• dropdown.foreground#f8f8f2
• dropdown.listBackground#21222c
• editor.background#181520
• editor.findMatchBackground#ff79c644
• editor.findMatchHighlightBackground#ff79c622
• editor.foreground#f8f8f2
• editor.inactiveLineHighlightBackground#21222c18
• editor.lineHighlightBackground#21222c33
• 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#21222c
• editorGroupHeader.tabsBackground#141025
• editorGroupHeader.tabsBorder#21222c
• editorGutter.addedBackground#50fa7b
• editorGutter.background#181520
• editorGutter.deletedBackground#ff6e6e
• editorGutter.modifiedBackground#79ddf0
• editorHoverWidget.background#21222c
• 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#21222c
• editorOverviewRuler.deletedForeground#ff6e6e
• editorOverviewRuler.modifiedForeground#79ddf0
• editorRuler.foreground#44475a
• editorSuggestWidget.background#21222c
• editorSuggestWidget.foreground#f8f8f2
• editorSuggestWidget.highlightForeground#ff79c6
• editorSuggestWidget.selectedBackground#44475a
• editorWhitespace.foreground#44475a
• editorWidget.background#21222c
• editorWidget.border#44475a
• editorWidget.foreground#f8f8f2
• errorForeground#ff6e6e
• extensionBadge.remoteBackground#79ddf0
• extensionBadge.remoteForeground#f8f8f2
• extensionButton.prominentBackground#ff79c6
• extensionButton.prominentForeground#f8f8f2
• extensionButton.prominentHoverBackground#ffa8eb
• extensionEditor.background#141025
• extensionEditor.foreground#f8f8f2
• extensionEditorBorder#21222c
• extensionIcon.foreground#ff79c6
• extensionIcon.preReleaseForeground#50fa7b
• extensions.autoUpdateButton.background#ff79c6
• extensions.autoUpdateButton.foreground#f8f8f2
• extensions.autoUpdateButton.hoverBackground#ffa8eb
• extensions.searchBox.background#21222c
• extensions.searchBox.border#44475a
• extensions.searchBox.foreground#f8f8f2
• focusBorder#ff79c680
• foreground#f8f8f2
• gitDecoration.addedResourceForeground#50fa7b
• gitDecoration.conflictingResourceForeground#ffffb8
• gitDecoration.deletedResourceForeground#ff6e6e
• gitDecoration.ignoredResourceForeground#6272a4
• gitDecoration.modifiedResourceForeground#79ddf0
• gitDecoration.stageDeletedResourceForeground#ff6e6e
• gitDecoration.stageModifiedResourceForeground#79ddf0
• gitDecoration.untrackedResourceForeground#50fa7b
• icon.foreground#f8f8f2
• input.background#21222c
• input.border#44475a
• input.foreground#f8f8f2
• input.placeholderForeground#6272a4
• inputOption.activeBackground#ff79c633
• inputOption.activeBorder#ff79c6
• inputValidation.errorBackground#ff6e6e
• inputValidation.errorBorder#ff6e6e
• inputValidation.warningBackground#ffffb8
• inputValidation.warningBorder#ffffb8
• list.activeSelectionBackground#44475a
• list.activeSelectionForeground#f8f8f2
• list.dropBackground#44475a80
• list.focusBackground#44475a
• list.focusForeground#f8f8f2
• list.highlightForeground#ff79c6
• list.hoverBackground#21222c
• list.hoverForeground#f8f8f2
• list.inactiveSelectionBackground#44475a80
• menu.background#141025
• menu.border#44475a
• menu.foreground#f8f8f2
• menu.selectionBackground#44475a
• menu.selectionForeground#ff79c6
• menu.separatorBackground#44475a
• menubar.selectionBackground#21222c
• menubar.selectionForeground#ff79c6
• minimap.background#181520
• minimap.findMatchHighlight#ff79c6
• minimap.selectionHighlight#44475a
• minimapSlider.activeBackground#44475a80
• minimapSlider.background#44475a40
• minimapSlider.hoverBackground#44475a60
• notifications.background#21222c
• notifications.border#44475a
• notifications.foreground#f8f8f2
• notificationsErrorIcon.foreground#ff6e6e
• notificationsInfoIcon.foreground#79ddf0
• notificationsWarningIcon.foreground#ffffb8
• panel.background#141025
• panel.border#21222c
• panelTitle.activeBorder#ff79c6
• panelTitle.activeForeground#ff79c6
• panelTitle.inactiveForeground#6272a4
• peekView.border#ff79c6
• peekViewEditor.background#21222c
• peekViewEditor.matchHighlightBackground#ff79c644
• peekViewResult.background#141025
• peekViewResult.fileForeground#f8f8f2
• peekViewResult.lineForeground#f8f8f2
• peekViewResult.matchHighlightBackground#ff79c644
• peekViewResult.selectionBackground#44475a
• peekViewTitle.background#21222c
• peekViewTitleDescription.foreground#6272a4
• peekViewTitleLabel.foreground#ff79c6
• progressBar.background#ff79c6
• scrollbar.shadow#00000060
• scrollbarSlider.activeBackground#44475acc
• scrollbarSlider.background#44475a80
• scrollbarSlider.hoverBackground#44475aaa
• selection.background#44475a
• sideBar.background#141025
• sideBar.border#21222c
• sideBar.foreground#f8f8f2
• sideBarSectionHeader.background#21222c
• sideBarSectionHeader.foreground#f8f8f2
• sideBarTitle.foreground#ff79c6
• statusBar.background#141025
• statusBar.border#21222c
• statusBar.debuggingBackground#ff79c6
• statusBar.debuggingForeground#f8f8f2
• statusBar.foreground#f8f8f2
• statusBar.noFolderBackground#141025
• statusBarItem.hoverBackground#44475a
• statusBarItem.remoteBackground#ff79c6
• statusBarItem.remoteForeground#f8f8f2
• tab.activeBackground#21222c
• tab.activeBorder#ff79c6
• tab.activeForeground#ff79c6
• tab.border#141025
• tab.hoverBackground#21222c
• tab.inactiveBackground#141025
• tab.inactiveForeground#a8a8a8
• terminal.ansiBlack#21222c
• terminal.ansiBlue#b084f5
• terminal.ansiBrightBlack#4d5066
• terminal.ansiBrightBlue#d4b5ff
• terminal.ansiBrightCyan#b8ffff
• terminal.ansiBrightGreen#7dffaa
• terminal.ansiBrightMagenta#ffa8eb
• terminal.ansiBrightRed#ff8080
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffffb8
• terminal.ansiCyan#79ddf0
• terminal.ansiGreen#40e868
• terminal.ansiMagenta#f060b3
• terminal.ansiRed#e84545
• terminal.ansiWhite#a8a8a8
• terminal.ansiYellow#e0e878
• terminal.background#181520
• terminal.foreground#f8f8f2
• terminal.selectionBackground#44475a
• terminalCursor.foreground#ff79c6
• titleBar.activeBackground#141025
• titleBar.activeForeground#f8f8f2
• titleBar.border#21222c
• titleBar.inactiveBackground#0d0a18
• titleBar.inactiveForeground#6272a4
• tree.indentGuidesStroke#44475a
• widget.border#44475a
• widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).