Feature Request: Dynamic Theming API for Runtime Customization

[Satyasn01]

Description

I propose adding a Dynamic Theming API to Serene UI, which would allow developers to customize and switch themes at runtime programmatically. This feature aims to extend the existing customization capabilities, which currently rely on statically defined CSS variables.

Proposed API and Usage

The Dynamic Theming API would provide a JavaScript utility to manipulate the root CSS variables directly from the application's logic. This would be particularly useful for applications needing to switch themes based on user preferences or environmental conditions.

Example API Usage:

// Import the theme manager
import { ThemeManager } from 'serene-ui';

// Define a new theme
const darkTheme = {
  '--primary-color': '#333',
  '--secondary-color': '#555',
  '--text-primary': '#fff',
  '--btn-font-size': '1rem',
  // Additional variables as needed
};

// Apply the new theme dynamically
ThemeManager.applyTheme(darkTheme);

// Reset to the default theme
ThemeManager.resetTheme();

Benefits

1. Flexibility: Enables dynamic switching of themes based on user interactions or automatic settings, enhancing user experience.
2. Customization: Developers can create more personalized experiences without altering the CSS files or reloading the page.
3. Integration Ease: Integrating theming into React components or other JavaScript-driven events becomes seamless with this API.

Potential Impact

Implementing this feature would make Serene UI a more attractive option for developers building complex applications that require theme personalization and could significantly improve user engagement by supporting multiple themes.

[arunkumar413]

@Satyasn01 I appreciate your interest in serene UI. But this library is a pure CSS and not a js/react library. I just used react to demo the HTML elements. I would like to do the dark mode theme in pure CSS only.

[Satyasn01]

@Satyasn01 I appreciate your interest in serene UI. But this library is a pure CSS and not a js/react library. I just used react to demo the HTML elements. I would like to do the dark mode theme in pure CSS only.

Instead of dynamically changing themes via JS, we can expand the current CSS custom properties to include multiple preset themes. This can be achieved by defining a set of themes as classes that can be applied to the root or any other container element to change themes on the fly with just a class change.