Feature Summary
Introduce global CSS Custom Properties (CSS variables) to allow developers to dynamically theme and customize GlassyUI components application-wide.
Description
Currently, customizing the glassmorphism properties (such as blur intensity, background opacity, border-radius, and highlight colors) requires overriding SCSS preprocessor variables in a local build environment or setting props on every component individually.
Without global CSS variables, developers cannot:
Implement dynamic dark/light mode toggles at runtime.
Easily customize component styles to match their brand identity without altering the library source code or rebuilding SCSS.
Keep style modifications modular and centralized in a single CSS stylesheet.
This feature adds value by providing flexible, zero-config styling control directly in the browser.
Proposed Solution
Define a core set of custom properties in a global :root CSS selector:
css
:root {
--glass-bg-color: rgba(255, 255, 255, 0.1);
--glass-border-color: rgba(255, 255, 255, 0.2);
--glass-blur: 12px;
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
--glass-border-radius: 10px;
--glass-text-color: #ffffff;
}
Refactor existing SCSS styles in individual components to fallback to these variables (e.g., changing backdrop-filter: blur(12px); to backdrop-filter: blur(var(--glass-blur, 12px));).
Allow developers using the library to dynamically overwrite themes in their own applications by overriding variables under their own CSS:
css
body.dark-mode {
--glass-bg-color: rgba(0, 0, 0, 0.2);
--glass-blur: 16px;
}
Alternatives Considered
React Context (GlassyProvider properties): While passing theme configurations via a React Context provider is possible, it adds JavaScript execution overhead at runtime. Native CSS variables perform faster, are immediately responsive to class changes (like .dark-mode), and require zero additional Javascript logic.
Inline Prop Overrides: Passing styling props (e.g., blur={12}) down to every single component is repetitive, error-prone, and doesn't support global, consistent theming.
Screenshots/Logs
No response
Additional Information
Feature Summary
Introduce global CSS Custom Properties (CSS variables) to allow developers to dynamically theme and customize GlassyUI components application-wide.
Description
Currently, customizing the glassmorphism properties (such as blur intensity, background opacity, border-radius, and highlight colors) requires overriding SCSS preprocessor variables in a local build environment or setting props on every component individually.
Without global CSS variables, developers cannot:
Implement dynamic dark/light mode toggles at runtime.
Easily customize component styles to match their brand identity without altering the library source code or rebuilding SCSS.
Keep style modifications modular and centralized in a single CSS stylesheet.
This feature adds value by providing flexible, zero-config styling control directly in the browser.
Proposed Solution
Define a core set of custom properties in a global :root CSS selector:
css
:root {
--glass-bg-color: rgba(255, 255, 255, 0.1);
--glass-border-color: rgba(255, 255, 255, 0.2);
--glass-blur: 12px;
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
--glass-border-radius: 10px;
--glass-text-color: #ffffff;
}
Refactor existing SCSS styles in individual components to fallback to these variables (e.g., changing backdrop-filter: blur(12px); to backdrop-filter: blur(var(--glass-blur, 12px));).
Allow developers using the library to dynamically overwrite themes in their own applications by overriding variables under their own CSS:
css
body.dark-mode {
--glass-bg-color: rgba(0, 0, 0, 0.2);
--glass-blur: 16px;
}
Alternatives Considered
React Context (GlassyProvider properties): While passing theme configurations via a React Context provider is possible, it adds JavaScript execution overhead at runtime. Native CSS variables perform faster, are immediately responsive to class changes (like .dark-mode), and require zero additional Javascript logic.
Inline Prop Overrides: Passing styling props (e.g., blur={12}) down to every single component is repetitive, error-prone, and doesn't support global, consistent theming.
Screenshots/Logs
No response
Additional Information