Flatcap Theme

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#121418
• activityBar.border#2e3440
• activityBar.foreground#cbced5
• activityBar.inactiveForeground#484f5c
• activityBarBadge.background#5e81ac
• activityBarBadge.foreground#e4e6e9
• badge.background#5e81ac
• badge.foreground#e4e6e9
• button.background#81a1c1
• button.foreground#121418
• button.hoverBackground#8fbcbb
• button.secondaryBackground#2e3440
• button.secondaryForeground#cbced5
• button.secondaryHoverBackground#3b4252
• checkbox.background#191c22
• checkbox.border#2e3440
• checkbox.foreground#cbced5
• debugExceptionWidget.background#2e3440
• debugExceptionWidget.border#bf616a
• debugToolBar.background#191c22
• descriptionForeground#b2b6bf
• diffEditor.insertedTextBackground#a3be8c20
• diffEditor.removedTextBackground#bf616a20
• dropdown.background#191c22
• dropdown.border#2e3440
• dropdown.foreground#cbced5
• dropdown.list.background#2e3440
• editor.background#121418
• editor.findMatchBackground#ebcb8b40
• editor.findMatchHighlightBackground#ebcb8b20
• editor.findRangeHighlightBackground#2e3440
• editor.foreground#cbced5
• editor.hoverHighlightBackground#88c0d020
• editor.inactiveSelectionBackground#88c0d015
• editor.lineHighlightBackground#191c2240
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBackground#2e3440
• editor.selectionBackground#88c0d030
• editor.selectionHighlightBackground#8fbcbb30
• editor.wordHighlightBackground#5e81ac30
• editor.wordHighlightStrongBackground#81a1c130
• editorBracketMatch.background#2e3440
• editorBracketMatch.border#88c0d0
• editorCodeLens.foreground#6a7280
• editorCursor.foreground#88c0d0
• editorGroup.border#2e3440
• editorGroup.dropBackground#88c0d040
• editorGroupHeader.border#2e3440
• editorGroupHeader.noTabsBackground#121418
• editorGroupHeader.tabsBackground#191c22
• editorGroupHeader.tabsBorder#2e3440
• editorGutter.addedBackground#a3be8c
• editorGutter.background#121418
• editorGutter.deletedBackground#bf616a
• editorGutter.modifiedBackground#ebcb8b
• editorHoverWidget.background#191c22
• editorHoverWidget.border#2e3440
• editorHoverWidget.foreground#cbced5
• editorIndentGuide.activeBackground#484f5c
• editorIndentGuide.background#2e344080
• editorLineNumber.activeForeground#cbced5
• editorLineNumber.foreground#484f5c
• editorLink.activeForeground#81a1c1
• editorMarkerNavigation.background#191c22
• editorMarkerNavigationError.background#bf616a
• editorMarkerNavigationInfo.background#b48ead
• editorMarkerNavigationWarning.background#ebcb8b
• editorOverviewRuler.addedForeground#a3be8c
• editorOverviewRuler.border#2e3440
• editorOverviewRuler.deletedForeground#bf616a
• editorOverviewRuler.errorForeground#bf616a
• editorOverviewRuler.findMatchForeground#ebcb8b
• editorOverviewRuler.infoForeground#b48ead
• editorOverviewRuler.modifiedForeground#ebcb8b
• editorOverviewRuler.rangeHighlightForeground#2e3440
• editorOverviewRuler.selectionHighlightForeground#88c0d0
• editorOverviewRuler.warningForeground#ebcb8b
• editorOverviewRuler.wordHighlightForeground#5e81ac
• editorOverviewRuler.wordHighlightStrongForeground#81a1c1
• editorRuler.foreground#2e344080
• editorSuggestWidget.background#191c22
• editorSuggestWidget.border#2e3440
• editorSuggestWidget.foreground#cbced5
• editorSuggestWidget.highlightForeground#81a1c1
• editorSuggestWidget.selectedBackground#2e3440
• editorWhitespace.foreground#3b4252
• editorWidget.background#191c22
• editorWidget.border#2e3440
• errorForeground#bf616a
• focusBorder#5e81ac
• foreground#cbced5
• icon.foreground#cbced5
• input.background#191c22
• input.border#2e3440
• input.foreground#cbced5
• input.placeholderForeground#6a7280
• inputOption.activeBackground#5e81ac40
• inputOption.activeBorder#5e81ac
• inputOption.activeForeground#e4e6e9
• inputValidation.errorBackground#bf616a40
• inputValidation.errorBorder#bf616a
• inputValidation.infoBackground#b48ead40
• inputValidation.infoBorder#b48ead
• inputValidation.warningBackground#ebcb8b40
• inputValidation.warningBorder#ebcb8b
• list.activeSelectionBackground#2e3440
• list.activeSelectionForeground#e4e6e9
• list.dropBackground#88c0d040
• list.errorForeground#bf616a
• list.focusBackground#2e3440
• list.focusForeground#e4e6e9
• list.highlightForeground#81a1c1
• list.hoverBackground#2e344040
• list.hoverForeground#d8dadf
• list.inactiveSelectionBackground#2e344040
• list.inactiveSelectionForeground#cbced5
• list.invalidItemForeground#bf616a
• list.warningForeground#ebcb8b
• merge.border#2e3440
• merge.currentContentBackground#81a1c120
• merge.currentHeaderBackground#81a1c180
• merge.incomingContentBackground#8fbcbb20
• merge.incomingHeaderBackground#8fbcbb80
• minimap.background#121418
• minimap.errorHighlight#bf616a
• minimap.findMatchHighlight#ebcb8b
• minimap.selectionHighlight#88c0d0
• minimap.warningHighlight#ebcb8b
• notificationCenterHeader.background#191c22
• notificationLink.foreground#81a1c1
• notifications.background#191c22
• notifications.border#2e3440
• notifications.foreground#cbced5
• notificationsErrorIcon.foreground#bf616a
• notificationsInfoIcon.foreground#b48ead
• notificationsWarningIcon.foreground#ebcb8b
• panel.background#191c22
• panel.border#2e3440
• panelTitle.activeBorder#81a1c1
• panelTitle.activeForeground#d8dadf
• panelTitle.inactiveForeground#6a7280
• peekView.border#5e81ac
• peekViewEditor.background#121418
• peekViewEditor.matchHighlightBackground#ebcb8b40
• peekViewResult.background#191c22
• peekViewResult.fileForeground#d8dadf
• peekViewResult.lineForeground#cbced5
• peekViewResult.matchHighlightBackground#ebcb8b40
• peekViewResult.selectionBackground#2e3440
• peekViewResult.selectionForeground#e4e6e9
• peekViewTitle.background#191c22
• peekViewTitleDescription.foreground#b2b6bf
• peekViewTitleLabel.foreground#d8dadf
• pickerGroup.border#2e3440
• pickerGroup.foreground#81a1c1
• progressBar.background#81a1c1
• sash.hoverBorder#5e81ac
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#484f5c
• scrollbarSlider.background#2e344080
• scrollbarSlider.hoverBackground#3b4252
• selection.background#88c0d040
• sideBar.background#191c22
• sideBar.border#2e3440
• sideBar.foreground#cbced5
• sideBarSectionHeader.background#121418
• sideBarSectionHeader.border#2e3440
• sideBarSectionHeader.foreground#d8dadf
• sideBarTitle.foreground#d8dadf
• statusBar.background#191c22
• statusBar.border#2e3440
• statusBar.debuggingBackground#bf616a
• statusBar.debuggingForeground#e4e6e9
• statusBar.foreground#cbced5
• statusBar.noFolderBackground#191c22
• statusBar.noFolderForeground#cbced5
• statusBarItem.activeBackground#2e3440
• statusBarItem.hoverBackground#2e3440
• statusBarItem.prominentBackground#5e81ac
• statusBarItem.prominentHoverBackground#81a1c1
• statusBarItem.remoteBackground#81a1c1
• statusBarItem.remoteForeground#121418
• tab.activeBackground#121418
• tab.activeBorder#81a1c1
• tab.activeBorderTop#121418
• tab.activeForeground#e4e6e9
• tab.border#2e3440
• tab.hoverBackground#12141880
• tab.inactiveBackground#191c22
• tab.inactiveForeground#6a7280
• tab.unfocusedActiveForeground#cbced5
• tab.unfocusedInactiveForeground#6a7280
• terminal.ansiBlack#2e3440
• terminal.ansiBlue#81a1c1
• terminal.ansiBrightBlack#484f5c
• terminal.ansiBrightBlue#81a1c1
• terminal.ansiBrightCyan#8fbcbb
• terminal.ansiBrightGreen#a3be8c
• terminal.ansiBrightMagenta#b48ead
• terminal.ansiBrightRed#bf616a
• terminal.ansiBrightWhite#eceff4
• terminal.ansiBrightYellow#ebcb8b
• terminal.ansiCyan#88c0d0
• terminal.ansiGreen#a3be8c
• terminal.ansiMagenta#b48ead
• terminal.ansiRed#bf616a
• terminal.ansiWhite#e4e6e9
• terminal.ansiYellow#ebcb8b
• terminal.background#121418
• terminal.foreground#cbced5
• textLink.activeForeground#81a1c1
• textLink.foreground#81a1c1
• titleBar.activeBackground#121418
• titleBar.activeForeground#d8dadf
• titleBar.border#2e3440
• titleBar.inactiveBackground#121418
• titleBar.inactiveForeground#6a7280
• walkThrough.embeddedEditorBackground#121418
• welcomePage.background#121418
• widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).