Transform Your UI with Dynamic CSS Injection

Jun 19, 2025 - 2 min read

Dynamic Custom CSS Injection: Beautiful Styling When You Need It

Custom CSS can transform your website’s appearance and create visually engaging experiences. However, loading all your styles upfront can significantly increase your initial page load time—especially when certain styles might only be needed for specific sections or user interactions.

The Smart Approach: Inject Custom CSS On-Demand

With Boostify’s content injection capabilities, you can load custom CSS styles dynamically, exactly when you need them:

(async () => {
    try {
        // Load custom CSS when a specific user action occurs
        document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
            // Option 1: Load from an external file
            await bstf.loadStyle({
                url: '/assets/css/dark-theme.css',
                appendTo: 'head',
                attributes: ["id=dark-theme"],
            });

            // Option 2: Insert inline CSS
            await bstf.loadStyle({
                inlineStyle: `
                    body {
                        background-color: #121212;
                        color: #e0e0e0;
                    }
                    .card {
                        background-color: #1e1e1e;
                        border: 1px solid #333;
                        box-shadow: 0 4px 8px rgba(0,0,0,0.5);
                    }
                    .button {
                        background-color: #bb86fc;
                        color: #000;
                    }
                    .button:hover {
                        background-color: #9966cc;
                    }
                `,
                appendTo: 'head'
            });

            console.log('Dark mode styles loaded successfully.');
        });

    } catch (error) {
        console.error(error);
    }
})();

The Benefits Are Clear

Faster Initial Page Load: Your core content loads quickly without being delayed by non-essential styles.
Better Performance Metrics: Improve Core Web Vitals by deferring non-critical CSS.
On-Demand Styling: Apply sophisticated visual enhancements exactly when you need them.
Reduced Rendering Complexity: Keep your initial render process simpler and faster.

Real-World Use Cases

Theme Switching: Load dark/light mode styles only when a user toggles the theme
Print Styles: Inject print-specific CSS only when a user initiates printing
Advanced Animations: Load complex animation styles only when elements enter the viewport
Specialized UI Components: Apply component-specific styles only when those components are activated

Before and After Example

Before: A standard light-themed interface with basic styling.

After: After clicking “Enable Dark Mode”:

Background shifts to a dark color scheme
Text becomes lighter for better contrast
UI elements receive subtle glow effects
Accent colors adjust for better visibility in dark mode

Implementation Tips

Use CSS variables to make theme switching more efficient
Consider using media queries within your injected CSS for responsive adjustments
Prioritize critical styles in your initial CSS and defer non-essential styles
Test your dynamic styling on various devices to ensure consistent experiences

By injecting custom CSS dynamically, you can create visually rich, adaptable interfaces without compromising on initial page load performance.