Axure doesn’t allow you to set a specific style–like, from a style sheet, but there are a few ways you could go about this…
-
Use the widget’s “Selected” style for one of the themes. Say the default theme is Light --style all your widgets for that theme. Then create a Selected style (in the Style Effects dialog) and style the widget as it should look in the Dark theme. To switch to Dark theme, just select all your widgets. To make this more automatic, the OnLoad event for each widget can set itself to Selected if your “theme” global variable is “Dark”. To change modes, assign the global variable accordingly and reload your page. Of course, this approach means you can’t use the selection states individually for any of your styled widgets. You could use dynamic panel states for widgets that need to be selectable, and instead of selecting/unselecting, use the dp state to get or set “selection”.
-
Use a dynamic panel for each widget. Name State 1 as “Light”, create and style your widget for this mode. Duplicate the state and name it “Dark” then style the widget in that state accordingly. In the widget’s OnLoad event, set state to “Dark” if your global variable is set to “dark theme”. Of course, this will make your prototype and pages larger and potentially slower to load, but it allows individual widgets to be selected/unselected (and show those sub-styles if needed) and gives you more options for themes if needed.
Either of these approaches can make use of custom styles you create in the Widget Style Manager.
- If you are running your prototype on Axure Cloud you could attach a .css file, or you are comfortable with “javascript injection” (search forum for that term) you could create CSS classes for your visual theme styling. In the OnPageLoad event, test your global variable and assign the appropriate CSS class.