This sounds like a perfect use-case for CSS Variables, if you can handle the browser support for them :)
In the case of your app, for each thing you wanted to possible expose as a user-settable value in your CSS, you could replace it with var(--variableName), where --variableName is a name you're inventing to store this information. Suppose we want to let users set a background image on the page, and an avatar image they they see. You could write some CSS like this:
.avatar {
background: var(--user-avatar);
}
main {
background: var(--user-bg);
}
Here the background is set using CSS variables. You'll want to initialize them with a default value, this can be done by including a rule like this somewhere in your CSS:
:root {
--user-avatar: url(path/to/default/avatar.png);
--user-bg: url(path/to/default/bg.jpg);
}
Now we should see the default avatar and background on our site. All we have to do to override this with a user preference is include the following in CSS, HTML, or JavaScipt:
:root {
--user-avatar: url(path/to/user/avatar.png);
--user-bg: url(path/to/user/bg.png);
}
<style>
:root {
--user-avatar: url(path/to/user/avatar.png);
--user-bg: url(path/to/user/bg.png);
}
</style>
document.documentElement.style.setProperty('--user-avatar', 'url(path/to/user/avatar.png)')
document.documentElement.style.setProperty('--user-avatar', 'url(path/to/user/bg.png)')
You can use whichever language is most convenient for you to output, but as long as these variables are re-declared with the user's specific values after the default values are set, the CSS above will display the correct value in the right place :D
Hopefully this helps solve your problem or at least gives you a few new ideas about how to approach it!