Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Introducing: ThemeManagerRt

Windows 8.1 and Windows Phone 8.1 both have this really great theme support that allows you to use ThemeResource as a xaml type, it means if the theme changes, anything using that will change its theme too. It’s actually very cool. What’s not cool though is you can only have two themes (Light/Dark). What if you want other themes? Yes, you can override both of those themes to show your own custom theme, but what if you want a third? A fourth? What then?

Well I’ve created a little helper that helps to alleviate that, and also means that you can swap themes on the fly without having to restart the app. Pretty cool, huh.

The Solution

The solution is actually stupidly simple, that sort of makes you wonder why this just couldn’t have been included as part of the SDK, but hey.

So install the package from nuget: ThemeManagerRt

Once it’s installed, there are few things you need to configure before you can just start using it. These are things that could be done by a smarter person than me using powershell in the nuget package (subtle hint: someone help me with that please Smile).

In your App.xaml:

<themeManagerRt:ThemeManager x:Key="ThemeManager"/>

The thing to note in here is this resource *MUST* be named ThemeManager, the ThemeEnabledPage relies on it. If you don’t I will throw an exception and make you!

In there, you’ll also need to define a theme resource (you don’t have to, but the experience could be jarring for the user), and be sure to set the Dark theme:

    <ResourceDictionary x:Key="Dark">
            <ResourceDictionary Source="/Themes/Dark.xaml"/>

On each page that needs to be theme enabled, instead of using Page as the page’s type, use ThemeEnabledPage. If you’re using a base page for your app, be sure that the base page inherits from ThemeEnabledPage.

That’s it.

When you want to change the theme, from viewmodel or wherever, just call:

ThemeManager.ChangeTheme(new Uri("ms-appx:///Themes/PurpleMongooseTheme.xaml"));

And your theme will change. It will even have changed it for any pages that are in the backstack, so you get a full, app-wide theme change.

Want to see behind the scenes, pop over to Github and check out the source.


12 responses to “Introducing: ThemeManagerRt

  1. Derek Lakin August 5, 2014 at 08:11

    Reblogged this on Derek Lakin and commented:
    Managing themes in Windows and Windows Phone 8.1

  2. Derek Lakin August 5, 2014 at 08:13

    Isn’t it possible to define the style for all pages instead of having to use ThemeEnabledPage?

    • scottisafool August 5, 2014 at 10:27

      Yup, I was trying to do as much of the work as possible 🙂

      • Derek Lakin August 5, 2014 at 10:28

        Well that was what I was trying to say. If the style is applied to any page instead of ThemeEnablePage, that’s one less thing for the dev to do.

      • scottisafool August 5, 2014 at 12:12

        You can’t have a binding in a style’s Setter though, so that wouldn’t work.

      • Derek Lakin August 6, 2014 at 08:48

        Might have helped if I’d looked at the code first :p What about using a Behavior so that devs with their own custom page could apply it too? Then the behaviour can specify the ThemeManager and it doesn’t have to have a fixed key.

      • scottisafool August 6, 2014 at 08:49

        I guess I could include that in the library, yes. Although the source is available if devs wanted to include it in their own base page (if they can’t inherit from this one)

      • scottisafool August 6, 2014 at 09:31

        Actually, no point adding a behaviour, if the dev has to add all the code required to add the behaviour to the page, they might as well add the binding to the page for RequestedTheme.

  3. Pingback: Introducing ThemeManagerRt | Derek Lakin

  4. Pingback: ThemeManager for Windows Phone 8.1 and Windows 8.1

  5. bitdisaster February 16, 2015 at 19:24

    Reblogged this on Bitdisaster and commented:
    An elegant way to manage multiple themes in WinRT.

  6. Neme July 19, 2015 at 22:29

    Thanks a lot, it works! Previously I had to do all sorts of hacks to get themes working in my 8.0 app.

Leave a Reply to Derek Lakin Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: