Appearance & Vibrancy

Properties3

Is BaseNo

Iconi-lucide-sparkles

Order40

Vibrancy Materials

Kelyphos uses NSVisualEffectView on macOS and .ultraThinMaterial on iPadOS. Set the material via KelyphosShellState:

shellState.vibrancyMaterial = .ultraThin   // Lightest — content shows through clearly
shellState.vibrancyMaterial = .thin
shellState.vibrancyMaterial = .regular
shellState.vibrancyMaterial = .thick
shellState.vibrancyMaterial = .ultraThick  // Heaviest — most opaque
shellState.vibrancyMaterial = .none        // Disable vibrancy entirely

Background Alpha

shellState.backgroundAlpha = 0.0   // Fully transparent
shellState.backgroundAlpha = 0.5   // Semi-transparent (balanced preset)
shellState.backgroundAlpha = 1.0   // Fully opaque (solid preset)

Appearance Presets

Three built-in presets cover common use cases:

AppearancePreset.clear.apply(to: shellState)     // transparent + ultraThin
AppearancePreset.balanced.apply(to: shellState)  // 50% opacity + thin
AppearancePreset.solid.apply(to: shellState)     // opaque + no material

Window Appearance

shellState.windowAppearance = "auto"   // Follows system appearance
shellState.windowAppearance = "light"  // Force light mode
shellState.windowAppearance = "dark"   // Force dark mode

Color Theme

The color theme provides semantic slots that adapt to light and dark mode:

Slot	Usage
`accent`	Primary interactive elements
`accentSecondary`	Secondary highlights
`foreground`	Primary text
`foregroundDim`	Secondary text
`background`	Panel background
`backgroundDim`	Elevated surface
`error` / `warning` / `success`	Status colors
`link`	Hyperlinks
`border`	Dividers
`selection`	Selected items

Customize with hex values per variant:

shellState.colorTheme.update(variant: "dark", from: [
    "accent": "#8B5CF6",
    "background": "#18181B",
    "foreground": "#FAFAFA"
])

Settings View

Drop in the built-in settings panel for user-controlled appearance:

Settings {
    KelyphosSettingsView(state: shellState)
}