Flutter Theme

Color themes

• 

  Flutter Dark

• 

  Flutter Light

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#333333
• activityBar.foreground#FFFFFF
• button.background#007ACC
• button.foreground#FFFFFF
• button.hoverBackground#0062A3
• editor.background#283142
• editor.findMatchBackground#515C6A
• editor.findMatchBorder#E3AF5C
• editor.findMatchHighlightBackground#EA5C0055
• editor.findMatchHighlightBorder#EA5C00
• editor.foreground#eceff1
• editor.hoverHighlightBackground#264F78
• editor.lineHighlightBackground#1a1a1a
• editor.selectionBackground#ADD6FF33
• editor.wordHighlightBackground#575757B8
• editor.wordHighlightStrongBackground#004972B8
• editorBracketMatch.background#ADD6FF80
• editorBracketMatch.border#00000000
• editorCodeLens.foreground#999999
• editorCursor.foreground#FFFFFF
• editorHoverWidget.background#2D2D30
• editorHoverWidget.border#454545
• editorHoverWidget.foreground#FFFFFF
• editorIndentGuide.activeBackground#CCCCCC
• editorIndentGuide.background#1A1A1A
• editorInlayHint.background#2D2D30
• editorInlayHint.foreground#999999
• editorLightBulb.foreground#FFA500
• editorLightBulbAutoFix.foreground#75BEFF
• editorLineNumber.foreground#CCCCCC
• editorLink.activeForeground#4E94CE
• editorMarkerNavigation.background#2D2D30
• editorMarkerNavigationError.background#F48771
• editorMarkerNavigationInfo.background#75BEFF
• editorMarkerNavigationWarning.background#CCA700
• editorOverviewRuler.currentContentForeground#FFA500
• editorOverviewRuler.incomingContentForeground#40C8AE
• editorSuggestWidget.background#252526
• editorSuggestWidget.border#454545
• editorSuggestWidget.foreground#F5F5F5
• editorSuggestWidget.highlightForeground#FFCC00
• editorSuggestWidget.selectedBackground#094771
• editorWhitespace.foreground#1A1A1A
• editorWidget.background#252526
• editorWidget.border#454545
• peekViewEditor.background#1E1E1E
• peekViewEditorGutter.background#1E1E1E
• peekViewResult.background#252526
• peekViewResult.fileForeground#F5F5F5
• peekViewResult.lineForeground#CBCBCB
• peekViewResult.selectionBackground#3399FF33
• peekViewResult.selectionForeground#F5F5F5
• peekViewTitle.background#1E1E1E
• peekViewTitleDescription.foreground#6C6C6C
• peekViewTitleLabel.foreground#F5F5F5
• scrollbarSlider.activeBackground#BFBFBF99
• scrollbarSlider.background#79797999
• scrollbarSlider.hoverBackground#64646499
• sideBar.background#252526
• terminal.ansiBlack#000000
• terminal.ansiBlue#0000FF
• terminal.ansiBrightBlack#666666
• terminal.ansiBrightBlue#4C78DD
• terminal.ansiBrightCyan#4CD1E0
• terminal.ansiBrightGreen#6BCF19
• terminal.ansiBrightMagenta#C586C0
• terminal.ansiBrightRed#F48771
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#D7BA7D
• terminal.ansiCyan#00FFFF
• terminal.ansiGreen#00FF00
• terminal.ansiMagenta#FF00FF
• terminal.ansiRed#FF0000
• terminal.ansiWhite#F5F5F5
• terminal.ansiYellow#FFFF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...