Documentation
¶
Overview ¶
Package fluent provides a Microsoft Fluent Design System theme.
Fluent Design uses an accent color to derive a consistent color scheme with subtle depth cues, clean typography, and restrained rounded corners. The default accent color is Windows Blue (#0078D4), but it can be customized to match any brand.
Creating a Theme ¶
Create a theme from an accent color:
t := fluent.NewTheme(fluent.WithAccentColor(widget.Hex(0x0078D4))) primary := t.Colors.Primary
Or use defaults:
lightTheme := fluent.NewTheme() // light mode darkTheme := fluent.NewDarkTheme() // dark mode
Design Characteristics ¶
- Accent color: Windows Blue (#0078D4) by default, customizable
- Rounded corners: 4px default (smaller than Material 3)
- Shadows: Subtle elevation with lighter shadow values
- Typography: Segoe UI-like metrics using Inter font
- Focus: Inner focus ring style
Component Painters ¶
The package provides painter implementations for all core widgets:
- ButtonPainter implements button.Painter
- CheckboxPainter implements checkbox.Painter
- RadioPainter implements radio.Painter
- TextFieldPainter implements textfield.Painter
- DropdownPainter implements dropdown.Painter
- SliderPainter implements slider.Painter
- DialogPainter implements dialog.Painter
- ScrollbarPainter implements scrollview.Painter
- TabViewPainter implements tabview.Painter
Example:
btn := button.New(
button.Text("Submit"),
button.PainterOpt(fluent.ButtonPainter{Theme: fluentTheme}),
)
Index ¶
Constants ¶
This section is empty.
Variables ¶
var DefaultAccentColor = widget.Hex(0x0078D4)
DefaultAccentColor is the standard Windows Blue accent color.
Functions ¶
This section is empty.
Types ¶
type ButtonPainter ¶
type ButtonPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
ButtonPainter renders buttons using Fluent Design tokens. It maps button variants (Filled/Accent, Outlined/Standard, TextOnly/Subtle, Tonal) to the Fluent color scheme.
If Theme is nil, ButtonPainter falls back to the default Fluent Blue palette.
func (ButtonPainter) PaintButton ¶
func (p ButtonPainter) PaintButton(canvas widget.Canvas, state button.PaintState)
PaintButton renders a button according to Fluent Design specifications.
type CheckboxPainter ¶
type CheckboxPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
CheckboxPainter renders checkboxes using Fluent Design tokens.
If Theme is nil, CheckboxPainter falls back to the default Fluent Blue palette.
func (CheckboxPainter) PaintCheckbox ¶
func (p CheckboxPainter) PaintCheckbox(canvas widget.Canvas, state checkbox.PaintState)
PaintCheckbox renders a checkbox according to Fluent Design specifications.
type ColorScheme ¶
type ColorScheme struct {
// Accent group: brand color and variants.
Accent widget.Color
AccentHover widget.Color
AccentPress widget.Color
OnAccent widget.Color
AccentLight widget.Color // lighter accent for subtle backgrounds
AccentDark widget.Color // darker accent for emphasis
// Surface group: neutral backgrounds.
Surface widget.Color
SurfaceSecondary widget.Color // slightly different surface (cards)
SurfaceTertiary widget.Color // input field backgrounds
OnSurface widget.Color // primary text
OnSurfaceSecond widget.Color // secondary text (dimmer)
// Stroke group: borders and outlines.
StrokeDefault widget.Color // control borders
StrokeFocus widget.Color // focused control borders
StrokeDisable widget.Color // disabled borders
// Fill group: control backgrounds.
FillDefault widget.Color // standard control fill
FillSecond widget.Color // secondary fill (hover)
FillTertiary widget.Color // tertiary fill (pressed)
FillDisable widget.Color // disabled fill
// Semantic colors.
Error widget.Color
Warning widget.Color
Success widget.Color
// Overlay and shadow.
Backdrop widget.Color
Shadow widget.Color
}
ColorScheme holds all Fluent Design color roles.
Fluent Design organizes colors around an accent color with neutral surface tones. Light mode uses white/gray backgrounds with dark text, while dark mode uses dark gray backgrounds (#1F1F1F, #2D2D2D) with light text.
func DarkScheme ¶
func DarkScheme(accent widget.Color) ColorScheme
DarkScheme generates a Fluent Design dark color scheme from an accent color.
func LightScheme ¶
func LightScheme(accent widget.Color) ColorScheme
LightScheme generates a Fluent Design light color scheme from an accent color.
type DialogPainter ¶
type DialogPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
DialogPainter renders dialogs using Fluent Design tokens. Fluent dialogs have a clean surface with subtle border and smaller corner radius compared to Material 3.
If Theme is nil, DialogPainter falls back to the default Fluent Blue palette.
func (DialogPainter) PaintDialog ¶
func (p DialogPainter) PaintDialog(canvas widget.Canvas, ps dialog.PaintState)
PaintDialog renders a dialog according to Fluent Design specifications.
type DropdownPainter ¶
type DropdownPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
DropdownPainter renders dropdowns using Fluent Design tokens.
If Theme is nil, DropdownPainter falls back to the default Fluent Blue palette.
func (DropdownPainter) PaintMenu ¶
func (p DropdownPainter) PaintMenu(canvas widget.Canvas, st *dropdown.MenuPaintState)
PaintMenu renders a dropdown menu according to Fluent Design specifications.
func (DropdownPainter) PaintTrigger ¶
func (p DropdownPainter) PaintTrigger(canvas widget.Canvas, st *dropdown.TriggerPaintState)
PaintTrigger renders a dropdown trigger according to Fluent Design specifications.
type Option ¶
type Option func(*themeConfig)
Option configures a Fluent theme.
func WithAccentColor ¶
WithAccentColor sets the accent color for the Fluent theme. If not provided, the default Windows Blue (#0078D4) is used.
type RadioPainter ¶
type RadioPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
RadioPainter renders radio items using Fluent Design tokens.
If Theme is nil, RadioPainter falls back to the default Fluent Blue palette.
func (RadioPainter) PaintRadio ¶
func (p RadioPainter) PaintRadio(canvas widget.Canvas, state radio.PaintState)
PaintRadio renders a radio item according to Fluent Design specifications.
type ScrollbarPainter ¶
type ScrollbarPainter struct {
Theme *Theme // nil uses default Fluent fallback
}
ScrollbarPainter renders scrollbars using Fluent Design tokens. Fluent scrollbars are thin and subtle, appearing on hover.
If Theme is nil, ScrollbarPainter falls back to the default Fluent scrollbar palette.
func (ScrollbarPainter) PaintScrollbar ¶
func (p ScrollbarPainter) PaintScrollbar(canvas widget.Canvas, ps scrollview.PaintState)
PaintScrollbar renders scrollbars according to Fluent Design specifications.
type SliderPainter ¶
type SliderPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
SliderPainter renders sliders using Fluent Design tokens.
If Theme is nil, SliderPainter falls back to the default Fluent Blue palette.
func (SliderPainter) PaintSlider ¶
func (p SliderPainter) PaintSlider(canvas widget.Canvas, ps slider.PaintState)
PaintSlider renders a slider according to Fluent Design specifications.
type TabViewPainter ¶
type TabViewPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
TabViewPainter renders tab bars using Fluent Design tokens. Fluent tabs have a subtle selected indicator and clean typography.
If Theme is nil, TabViewPainter falls back to the default Fluent Blue palette.
func (TabViewPainter) PaintTabBar ¶
func (p TabViewPainter) PaintTabBar(canvas widget.Canvas, ps tabview.PaintState)
PaintTabBar renders a tab bar according to Fluent Design specifications.
type TextFieldPainter ¶
type TextFieldPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
TextFieldPainter renders text fields using Fluent Design tokens. Fluent text fields feature a subtle bottom accent border on focus and clean rectangular shape with small corner radius.
If Theme is nil, TextFieldPainter falls back to the default Fluent Blue palette.
func (TextFieldPainter) PaintTextField ¶
func (p TextFieldPainter) PaintTextField(canvas widget.Canvas, st textfield.PaintState)
PaintTextField renders a text field according to Fluent Design specifications.
type Theme ¶
type Theme struct {
// Colors holds the Fluent Design color scheme derived from the accent color.
Colors ColorScheme
// contains filtered or unexported fields
}
Theme provides Fluent Design System design tokens.
A Theme contains the complete set of design tokens needed to style a Fluent Design application: colors (derived from an accent color), and references to the shared theme.Theme for typography, spacing, shadows, and radii.
Create a theme with NewTheme or NewDarkTheme:
t := fluent.NewTheme() // default light t := fluent.NewTheme(fluent.WithAccentColor(widget.Hex(0x744DA9))) // custom accent dark := fluent.NewDarkTheme() // default dark
func NewDarkTheme ¶
NewDarkTheme creates a Fluent Design dark theme.
By default it uses Windows Blue (#0078D4) as the accent color. Use WithAccentColor to customize.
func NewTheme ¶
NewTheme creates a Fluent Design light theme.
By default it uses Windows Blue (#0078D4) as the accent color. Use WithAccentColor to customize:
t := fluent.NewTheme(fluent.WithAccentColor(widget.Hex(0x744DA9)))
func (*Theme) AsTheme ¶
AsTheme converts the Fluent theme to a theme.Theme for use with the generic theme system. This maps Fluent color roles to the shared ColorPalette structure.
Source Files