🎨 Theme
Welcome to the documentation for the @flexnative/theme-context package.
This guide provides a comprehensive overview of how to use, customize, and extend the theming system in your FlexNative application.
Whether you're looking to simply apply a theme, toggle between light and dark mode, or build a completely custom design system, these documents will guide you through the process.
Getting Started
If you are new to the theme package, we recommend reading the documents in the following order:
- Theme Provider: Learn how to set up the root provider, which is the entry point for the entire theming system.
- Consuming the Theme: Discover the React hooks (
useThemeColors,useThemeState) used to access theme properties like colors and fonts within your components. - Custom Themes & Colors: A step-by-step guide to extending the default theme with your own custom colors while maintaining type safety.
Installation
You can installing FlexNative theme-context packages using npm:
npm i @flexnative/theme-context
API Reference & Guides
Dive deeper into specific parts of the theme API.
📄️ Default Theme
The BaseTheme theme object is where you define your application's color palette, type scale, borders, border radius values, and more.
📄️ Theme Provider
The ThemeProvider is the foundation of the FlexNative theming system.
📄️ Custom Themes
The FlexNative theme system is designed to be extensible.
📄️ Consuming Themes
The ThemeContext module is a core part of the FlexNative theming system.
🗃️ Utilities
2 items