Theme
API reference for theming
ThemeProvider
Override theme values for a subtree. Nest multiple providers to apply different themes to different parts of the app. Merges with the parent theme, so you only need to specify the values you want to change.
import { GigglesProvider, ThemeProvider } from 'giggles';
render(
<GigglesProvider theme={{ accentColor: '#6B9FD4' }}>
<Sidebar />
<ThemeProvider theme={{ accentColor: '#C97066' }}>
<MainPanel />
</ThemeProvider>
</GigglesProvider>
);Prop
Type
GigglesTheme
Prop
Type
useTheme
Returns the current GigglesTheme from the nearest ThemeProvider. Use this in custom render functions to stay consistent with the app theme.
import { useTheme } from 'giggles';
function CustomOption({ highlighted }: { highlighted: boolean }) {
const theme = useTheme();
return <Text color={highlighted ? theme.accentColor : undefined}>...</Text>;
}