Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers override system-level user preferences for a subtree of the view hierarchy. colorScheme forces light or dark appearance. dynamicTypeSize overrides the user’s preferred text size. Both should be used sparingly — respecting the user’s system settings is the right default for accessibility. Use these modifiers for small, scoped exceptions like an always-dark header or a fixed-size logo.

​
colorScheme

Forces a specific color scheme (light or dark) for a component and its descendants. 
.colorScheme(scheme: "light" | "dark")
​
scheme
"light" | "dark"
required
The color scheme to apply to this component subtree.
This modifier overrides the system color scheme for the component and all of its descendants. It doesn’t affect siblings or ancestors. Use the environment modifier with the "colorScheme" key for the same effect. Force dark mode on a section 
VStack([
    Text("Dark Section"),
    Text("Always dark")
])
    .padding(16)
    .colorScheme("dark")
Force light mode on a card 
VStack([
    Text("Light Card"),
    Text("Always light appearance")
])
    .padding(16)
    .background(Color("white"))
    .colorScheme("light")

​
dynamicTypeSize

Overrides the dynamic type size for a component and its descendants. 
.dynamicTypeSize(size: DynamicTypeSize)
​
size
DynamicTypeSize
required
The dynamic type size to apply. See DynamicTypeSize for available values. Default system size is "large".
This modifier overrides the user’s system-wide Dynamic Type preference for the targeted component subtree. Use sparingly — respecting the user’s preferred text size is generally recommended for accessibility. Force a smaller text size 
VStack([
    Text("Compact UI"),
    Text("Smaller text regardless of system setting")
])
    .dynamicTypeSize("small")
Force an accessibility size 
Text("Large readable text")
    .dynamicTypeSize("xxxLarge")
Pin a header to a fixed size 
Text("App Title")
    .font("largeTitle")
    .dynamicTypeSize("large")

​
See also