How are you adding these stylesheets?
What most people, generally, use is something like the second example given in the documentation for Setting.addList() to switch between prefixed style rules that are, yes, added via Story Stylesheet. If you're interested in something else, then you're going to need to get into details.
Here's an example, straight from the docs, that leverages prefixed style rules: (goes in Story JavaScript)
var settingThemeNames = ["(none)", "Bright Lights", "Charcoal", "Midnight", "Tinsel City"];
var settingThemeHandler = function () {
// cache the jQuery-wrapped <html> element
var $html = $("html");
// remove any existing theme class
$html.removeClass("theme-bright-lights theme-charcoal theme-midnight theme-tinsel-city");
// switch on the theme name to add the requested theme class
switch (settings.theme) {
case "Bright Lights":
$html.addClass("theme-bright-lights");
break;
case "Charcoal":
$html.addClass("theme-charcoal");
break;
case "Midnight":
$html.addClass("theme-midnight");
break;
case "Tinsel City":
$html.addClass("theme-tinsel-city");
break;
}
};
Setting.addList("theme", {
label : "Choose a theme.",
list : settingThemeNames,
onInit : settingThemeHandler,
onChange : settingThemeHandler
}); // default value not defined, so the first array member "(none)" is used
And a few examples of how to prefix rules with the classes controlled by the setting which affect the body element: (goes in Story Stylesheet)
html.theme-bright-lights body {
/* style properties here */
}
html.theme-charcoal body {
/* style properties here */
}
html.theme-midnight body {
/* style properties here */
}
html.theme-tinsel-city body {
/* style properties here */
}