Flat UI

Color themes

• 

  FlatUI

• 

  FlatUI Dark

• 

  FlatUI Immersed

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#F0F0F0
• activityBar.border#F0F0F0
• activityBar.dropBackground#D0D0D0
• activityBar.foreground#414141
• activityBarBadge.background#2AA298
• activityBarBadge.foreground#F0F0F0
• badge.background#2AA298
• badge.foreground#F0F0F0
• button.background#2AA298
• button.foreground#F0F0F0
• debugExceptionWidget.background#F0F0F0
• debugExceptionWidget.border#d9d9d9
• debugToolBar.background#F0F0F0
• descriptionForeground#414141
• dropdown.background#F0F0F0
• dropdown.border#d9d9d9
• dropdown.foreground#414141
• editor.background#FBFBFB
• editor.findMatchBackground#49d0c5
• editor.findMatchHighlightBackground#49d0c5
• editor.findRangeHighlightBackground#E0E7EA
• editor.foreground#414141
• editor.hoverHighlightBackground#d3e8f8
• editor.lineHighlightBackground#F0F0F0
• editor.rangeHighlightBackground#E0E7EA
• editor.selectionBackground#E0E0E0
• editor.selectionHighlightBackground#d3e8f8
• editor.wordHighlightBackground#d3e8f8
• editor.wordHighlightStrongBackground#A3CFEE
• editorBracketMatch.background#d3e8f8
• editorBracketMatch.border#2AA298
• editorCodeLens.foreground#414141
• editorCursor.foreground#90A7B2
• editorError.border#E64D49
• editorError.foreground#E64D49
• editorGroup.background#F6F6F6
• editorGroup.border#F0F0F0
• editorGroupHeader.noTabsBackground#F0F0F0
• editorGroupHeader.tabsBackground#F0F0F0
• editorGroupHeader.tabsBorder#F0F0F0
• editorGutter.addedBackground#49d0c5
• editorGutter.deletedBackground#f76e6e
• editorGutter.modifiedBackground#6fbef6
• editorHoverWidget.background#F0F0F0
• editorHoverWidget.border#d9d9d9
• editorIndentGuide.background#d9d9d9
• editorLineNumber.foreground#90A7B2
• editorMarkerNavigation.background#D0D0D0
• editorMarkerNavigationError.background#f76e6e
• editorMarkerNavigationWarning.background#FDC602
• editorOverviewRuler.errorForeground#E64D49
• editorOverviewRuler.warningForeground#FDC602
• editorRuler.foreground#d9d9d9
• editorSuggestWidget.background#F0F0F0
• editorSuggestWidget.border#d9d9d9
• editorSuggestWidget.foreground#414141
• editorSuggestWidget.highlightForeground#414141
• editorSuggestWidget.selectedBackground#d3e8f8
• editorWarning.border#FDC602
• editorWarning.foreground#FDC602
• editorWhitespace.foreground#d9d9d9
• editorWidget.background#F0F0F0
• editorWidget.border#d9d9d9
• errorForeground#414141
• extensionButton.prominentBackground#2AA298
• extensionButton.prominentForeground#F0F0F0
• focusBorder#2AA298
• foreground#414141
• input.background#F0F0F0
• input.border#d9d9d9
• input.foreground#414141
• input.placeholderForeground#93A1A1
• inputOption.activeBorder#2AA298
• inputValidation.errorBackground#f76e6e
• inputValidation.errorBorder#de3d3b
• inputValidation.infoBackground#F0F0F0
• inputValidation.infoBorder#D0D0D0
• inputValidation.warningBackground#FDC602
• inputValidation.warningBorder#E0AF02
• list.activeSelectionBackground#d3e8f8
• list.activeSelectionForeground#414141
• list.errorForeground#E64D49
• list.focusBackground#d3e8f8
• list.focusForeground#414141
• list.highlightForeground#414141
• list.hoverBackground#d3e8f8
• list.hoverForeground#414141
• list.inactiveSelectionBackground#E0E7EA
• list.inactiveSelectionForeground#414141
• list.warningForeground#FDC602
• notification.background#F0F0F0
• notification.buttonBackground#2AA298
• notification.buttonForeground#F0F0F0
• notification.buttonHoverBackground#3ABEB4
• notification.errorBackground#f76e6e
• notification.errorForeground#F0F0F0
• notification.foreground#414141
• notification.infoBackground#F1F1F1
• notification.infoForeground#414141
• notification.warningBackground#FDC602
• notification.warningForeground#414141
• panel.background#F0F0F0
• panel.border#d9d9d9
• peekView.border#d9d9d9
• peekViewEditor.background#F6F6F6
• peekViewEditor.matchHighlightBackground#49d0c5
• peekViewEditorGutter.background#F6F6F6
• peekViewResult.background#F0F0F0
• peekViewResult.fileForeground#414141
• peekViewResult.lineForeground#414141
• peekViewResult.matchHighlightBackground#49d0c5
• peekViewResult.selectionBackground#E0E7EA
• peekViewResult.selectionForeground#414141
• peekViewTitle.background#F0F0F0
• peekViewTitleDescription.foreground#414141
• peekViewTitleLabel.foreground#414141
• pickerGroup.border#d9d9d9
• pickerGroup.foreground#414141
• progressBar.background#2AA298
• scrollbar.shadow#0000
• selection.background#F0F0F0
• sideBar.background#F0F0F0
• sideBar.border#F0F0F0
• sideBar.foreground#414141
• sideBarTitle.foreground#414141
• statusBar.background#F0F0F0
• statusBar.border#F0F0F0
• statusBar.debuggingBackground#F0F0F0
• statusBar.debuggingForeground#414141
• statusBar.foreground#414141
• statusBar.noFolderBackground#F0F0F0
• statusBar.noFolderForeground#414141
• tab.activeBackground#F6F6F6
• tab.activeForeground#414141
• tab.activeModifiedBorder#2AA298
• tab.border#F0F0F0
• tab.inactiveBackground#F0F0F0
• tab.inactiveForeground#414141
• tab.inactiveModifiedBorder#2AA298
• tab.unfocusedActiveModifiedBorder#2AA298
• tab.unfocusedInactiveModifiedBorder#2AA298
• terminal.ansiBlack#414141
• terminal.ansiBlue#288ed7
• terminal.ansiBrightBlack#414141
• terminal.ansiBrightBlue#288ed7
• terminal.ansiBrightCyan#2AA298
• terminal.ansiBrightGreen#08916a
• terminal.ansiBrightMagenta#d6438a
• terminal.ansiBrightRed#de3d3b
• terminal.ansiBrightWhite#F0F0F0
• terminal.ansiBrightYellow#FDC602
• terminal.ansiCyan#2AA298
• terminal.ansiGreen#08916a
• terminal.ansiMagenta#d6438a
• terminal.ansiRed#de3d3b
• terminal.ansiWhite#F0F0F0
• terminal.ansiYellow#E0AF02
• terminal.background#F6F6F6
• terminal.foreground#414141
• titleBar.activeBackground#F0F0F0
• widget.shadow#d9d9d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...