Change theme color using dropdown for simulation

Hello all,

Is there a way to create an interactive prototype where I could could create a dropdown menu and have selections available to change from a green theme to a blue theme?

Then the styles I defined (CSS) would change to the new style sheet color on the fly?

So the hyperlinks, color fills, backgrounds etc… would change from blue to green?

This would be a really cool feature for Axure to add theming and go to another style sheet.

Thanks for you help,
Steve

Hi Steve,

If you’re familiar with working with JavaScript and CSS, you could use Axure Share’s “plugins” feature to inject custom code into your prototype hosted on Axure Share. You can read more about Axure Share plugins here:

Axure | Plugins

That said, there isn’t a native way to link or switch between different CSS files in a prototype. I’ll go ahead and let our product management team know there is interest for this though. Please let us know if you have any other questions or concerns!

Hi!

You could do this through manual setting of adaptive views:

  • Define adaptive views named “pink” and “blue” with breakpoints so wide that it insures that they will never be set off by sizing the window. E.g., “Width is greater than 10000000.”

  • Create all of your UI with the Base view selected. Then select the pink view and manually color everything pink that you want to be pink, and then go into the blue view and color everything blue that you want to be blue.

  • Create some sort of switching mechanism to switch manually between the views using the Set Adaptive View command. Base will serve as your normal theme. For this example I used a dropdown with values “White theme” (I’ve named the Base view “white”), “Pink theme” and “Blue theme,” and I added the following code to the dropdown, manually setting the adaptive view:

(Those “Set” commands beg the question “Set what?” Axure folks, please display this command as “Set Adaptive View” rather than just “Set.”)

Live sample

Note that this would be tedious to implement on a large file, but if you simply are doing it to showcase your various themes for documentation/internal review, this solution could be a good one.

[Edit] You can use this same method to selectively apply widget styles to your objects, which may be more manageable, especially if you decide to change your theme later.

1 Like

Over the past few weeks, with the help from a javascript wizard on my team, I’ve made a couple plugins for easy theming in Axure using CSS Variables.

Basically, one plugin injects the CSS Variable stylesheet :root { --var1: #575659; --var2: 333333} and lives in the Head tag, and the other one uses js to search ALL Axure style.css stylesheets then appends extension classes that use these CSS Variables for all colors.

Then there’s a jQuery component that replaces the inline styles within the HTML. Hook some extra js stuff into a dropdown menu, and BAM! You have yourself a theme switcher based on CSS Variables.

It’s almost tooooo easy.