Flutter Theme

Name: Flutter Theme
Author: vmcgon

Publisher: vmcgonThemes in package: 2

A VS Code theme based on flutter.dev's code blocks. Light and Dark versions available.

Open in VS Code

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Flutter Theme — Flutter Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

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).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ff8bcb	italic
string, punctuation.definition.string	#9ccc65	—
constant.numeric	#fbc02d	—
entity.name.type	#d7aefb	bold
keyword	#78d9ec	—
variable	#ff8bcb	—