How to set CSS style of elements dynamically through backend? (user customization panel to change style of other webpages)

let's say we have a website with multiple pages and also a page for user account. the user has a setting in his panel to change the color/fontsize/style etc of certain parts in other pages of website for himself. how should this be implemented?

I know if it was a single page web app, I could set css variables and change them with js via input. this would work as it is only a single page with same :root for all different sections and menus.

what if it is a multi-page website? how can I make the setting affect style of other pages? I'm thinking about setting css style of those customizable elements in js by fetching data from backend by getting a json file with colors for example and setting those elements color with the data received from database. choosing a color in setting POSTs the data to database and other pages GET the style and set it on specific elements.

is this the right method?? are there any other methods or even libraries for this??

You can approach this by introducing a theming mechanism to the application. The way you described to get the JSON file can be usable in this approach as well. Introducing a context to manage theming in a React application would be much easier to simplify the process of applying user preferences across multiple components. Here's how you could implement it using functional components:

// ThemeContext.js
import React, { createContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children, theme }) => (
  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
);

export const useTheme = () => React.useContext(ThemeContext);

If you need to fetch the theme JSON from a backend and then pass it down to your components via context, you can modify the ThemeProvider component to handle this fetching logic. Here's how you could do it:

  // index.js
  // Theme should be fetched from an useEffect and pass it to the provider.

  const [theme, setTheme] = useState(null);

  useEffect(() => {
    // Fetch theme from backend
    fetchTheme().then((themeData) => {
      setTheme(themeData);
    });
  }, []);

  if (!theme) {
    // Theme data is not yet available
    return <div>Loading...</div>;
  }

  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );

This is how you use it any of your other components.

  const theme = useTheme();

  if (!theme) {
    // Theme data is not yet available
    return <div>Loading...</div>;
  }

  return (
    <div style={{ backgroundColor: theme.colors.primary }}>
      {/* Your other components */}
    </div>
  );