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#ffffff
• activityBar.foreground#000000
• button.background#dcdcdc
• button.foreground#000000
• button.hoverBackground#c7c7c7
• editor.background#f1f3f4
• editor.findMatchBackground#d3d3d3
• editor.findMatchBorder#6a6a6a
• editor.findMatchHighlightBackground#b4b4b4
• editor.findMatchHighlightBorder#5a5a5a
• editor.foreground#37474f
• editor.hoverHighlightBackground#eaeaea
• editor.lineHighlightBackground#e2e2e2
• editor.selectionBackground#d0d7e2
• editor.wordHighlightBackground#bfbfbf
• editor.wordHighlightStrongBackground#a3a3a3
• editorBracketMatch.background#bfbfbf
• editorBracketMatch.border#00000000
• editorCodeLens.foreground#9a9a9a
• editorCursor.foreground#000000
• editorHoverWidget.background#f3f3f3
• editorHoverWidget.border#c8c8c8
• editorHoverWidget.foreground#333333
• editorIndentGuide.activeBackground#939393
• editorIndentGuide.background#d0d0d0
• editorInlayHint.background#e2e2e2
• editorInlayHint.foreground#6a6a6a
• editorLightBulb.foreground#ffbf00
• editorLightBulbAutoFix.foreground#75beff
• editorLineNumber.foreground#8a8a8a
• editorLink.activeForeground#0000ff
• editorMarkerNavigation.background#f3f3f3
• editorMarkerNavigationError.background#f48771
• editorMarkerNavigationInfo.background#75beff
• editorMarkerNavigationWarning.background#cca700
• editorOverviewRuler.currentContentForeground#40a6ff
• editorOverviewRuler.incomingContentForeground#40c8ae
• editorSuggestWidget.background#fafafa
• editorSuggestWidget.border#c8c8c8
• editorSuggestWidget.foreground#333333
• editorSuggestWidget.highlightForeground#0000ff
• editorSuggestWidget.selectedBackground#dcdcdc
• editorWhitespace.foreground#d0d0d0
• peekViewEditor.background#f1f3f4
• peekViewEditorGutter.background#f1f3f4
• peekViewResult.background#fafafa
• peekViewResult.fileForeground#333333
• peekViewResult.lineForeground#6a6a6a
• peekViewResult.selectionBackground#dcdcdc
• peekViewResult.selectionForeground#333333
• peekViewTitle.background#f1f3f4
• peekViewTitleDescription.foreground#6a6a6a
• peekViewTitleLabel.foreground#333333
• progressBar.background#0e70c0
• sideBar.background#fafafa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...