Theming Guide

Customize the appearance of the framework to match your brand or personal preferences.

Theme Configuration

Themes are defined using a simple configuration file. Here’s an overview of available options:

Option Description Default Value
primaryColor Main brand color #3498db
secondaryColor Accent color #2ecc71
background Background color #ffffff
textColor Primary text color #333333
font Font family Arial, sans-serif

Changing the Theme

To apply a custom theme, update your configuration file.

const themeConfig = {
    primaryColor: '#ff5733',
    secondaryColor: '#33ff57',
    background: '#222222',
    textColor: '#ffffff',
    font: 'Roboto, sans-serif'
};

app.applyTheme(themeConfig);
theme_config = {
    "primary_color": "#ff5733",
    "secondary_color": "#33ff57",
    "background": "#222222",
    "text_color": "#ffffff",
    "font": "Roboto, sans-serif"
}

app.apply_theme(theme_config)

Steps to Customize Your Theme

  1. Locate the Theme Configuration
    • The configuration file is typically found in config/theme.json.
  2. Modify Theme Settings
    • Update colors, fonts, and other settings as needed.
  3. Apply the Theme
    • Use the framework’s API to apply the new theme settings.
  4. Restart the Application
    • Ensure changes take effect by restarting your app.

Dark Mode vs. Light Mode

Mode Background Color Text Color
Light #ffffff #333333
Dark #222222 #ffffff

Ensure proper contrast between text and background to maintain readability.

More Customization

For advanced customization, visit our API Reference for more details on theme management.

Updated on 20 March, 2025

On this page