Skip to content

Theme Configuration

Description

The Theme Configuration in Liberty Core defines the application's primary color scheme, typography, background styles, and dark mode behavior.

It provides a dynamic way to override and customize themes using the AppProvider.

Theme Structure

Theme Colors

Key Light Mode Value Dark Mode Value Description
primary #1976d2 #607d8b Primary brand color.
secondary #ff9800 #ffc107 Secondary accent color.
background Light gradient Dark gradient Defines the UI background.
color #333333 #E1D9D1 Default text color.

Theme Fields

Field Name Type Description
palette.mode "light" | "dark" Determines the color scheme.
palette.primary.main string Primary color.
palette.secondary.main string Secondary color.
background.default string Main background color.
background.loginPage string Background gradient for login page.
spacing (factor: number) => string Function to set spacing.
shadows string[] Shadow presets for components.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { AppProvider, LYThemeProvider } from "@nomana-it/liberty-core"
import { theme } from "@nomana-it/liberty-core"

export const ThemeExample = () => {
  return (
    <AppProvider>
      <LYThemeProvider customTheme={theme}>
        <MyApp />
      </LYThemeProvider>
    </AppProvider>
  );
};

const MyApp = () => {
  return (
    <div>
      <h2>Theming with Liberty Core</h2>
      <p>The theme is applied dynamically using the theme provider.</p>
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core