Add per-user CSS in a plugin?

Dev
1

In a plugin, how does one add a per-user CSS? E.g. caused by a user setting?

Adding the styles and whatnot to elements/via stylesheets would be global, no?

2

What are you trying to do? You can do things like change individual username/mention color just through the normal theme CSS. If you mean like, change some specific part of a theme with a toggle through a specific users preferences I don’t believe you could do that without giving them their own theme. I’m no expert though

2 Likes
3

Like for example, a per-user setting to change fonts of certain things (e.g. the Markdown composer).

4

You could offer groups that the user can join and use CSS Classes for Current User's Groups.

Or the user can use a browser plugin to change CSS only for themselves. I use Stylus to customize my experience on Meta.

Was the composer a random example? Or what do you want to offer in addition to “Use monospace font in composer’s Markdown mode,” which can be enabled or disabled in the preferences?

1 Like
5

Kinda. I was thinking how the font would be changed per-user.

1 Like
6

You can probably achieve this in a plugin by doing something along the lines of:

  • with the plugin API add a api.addSaveableUserOptionField("composer-custom-font")
  • add the field to the UserOption table in the db and the serializer so it can be set
  • add a connector to the user’s interface page so the setting can be set
  • you can make the setting a dropdown, for example, so if the user picks a certain font/font style it adds their preference in the db
  • you can extend the composer code to take into account their selected preference, and either change the styles directly with JS or make it add a CSS class based on the preference chosen, which you can apply styles via CSS for that specific class
2 Likes