Switchable (dark / light) theme on widgets


#1

Hi there!
I am creating a widget library to mimic our house style so we can quickly prototype new screens. One noticeable feature of our app is that it has a light and a dark theme, live switchable by the user.

What would be a good way to achieve this in Axure? I’ve noticed that widgets have only 1 style set. Ideally this would be a list of styles, switchable with a var.

Since dark/light mode is really a thing in all apps now, I am wondering how you guys do it?


Multiply set of css
Alternate design
Widget styles for page styles
#2

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.

Use Interactivity to dynamically switch between applied Widget Styles?
#3

Hey thanks! I think I will go for the dynamic panel route. Downside would be that you have to maintain (shapes, states, interactions, etc) twice.

Not (yet) running on Axure cloud, but will look into that too.

Thanks again!


#4

@mbc66: Hmmm, running into trouble. My “Main Window” widget in the lib has the button that users presses to toggle between dark and light. But how can i make my other widgets respond to that?

  • I’ve tried to set a global var, but you cannot attach a handler (start an interaction) on the change of variables.
  • Moving the button into a master and raising an event. But you cannot catch that in a widget, only on the page that uses that master. It would also mean that the code to switch panel states have to be in the project using the lib, not in the lib itself (and applied/duplicated to each widget being used over and over again…)

Any tips on this?


#5

Correct. So, whatever action you use to set the global variable would also need to reload the page. Each individual library widget can take care of itself by setting the “dark” state if the global variable is set to “dark” in its Loaded interaction.

Your button to toggle light/dark mode can be in the library and/or a master. The key is that it needs to set the global variable and then reload the current page. Then, all subsequent pages will be in the correct mode unless and until the global variable value changes.

Here is a quick demo with a few widgets.
dark mode example.rp (97.4 KB)


#6

Ah many thanks! I was on the right track but didn’t think of reloading the page!
Thank you so much for taking the effort to create that sample, it was really helpful!


#7

Hmm, both scenarios seem to be troublesome:

  • Using the selected state -> Not possible for every widget because selected is needed for other purposes (e.g. the selected state on buttons, when creating tabs, etc).
  • Gone the dp way for most widgets, but that means a) duplicating the whole widget and having double maintenance, and b) in the project the library is used, settings need to be changed in 2 places too, for example, the text on a button needs to be set for both dark and light states. Bummer. :roll_eyes:

#8

Hey,

The best solution for this seems to be using adaptive views with the same dimensions (but different colors)
.dark mode example_RP10.rp (64.2 KB)