Support for more than 2 themes

[touseefbsb]

Feature Request

Currently theme editor offers 2 themes ( Light/Dark ) which basically overrides the System defined light and dark themes.

But what if another optional feature can be added to it, where the developer can basically generate a List of themes? Each theme with exactly the same editing features as dark and light but developer can create multiple flavors of their app, considering they dont have a fixed branding and they want the user to select theme according to their liking.

How it will work is that after the editor finishes generating and exporting themes, all of those themes can be put into app.xaml and then in settings of the user they can toggle between all those themes, this toggle functionality will be developed by the user obviously, theme editor cn maybe provide a helper class for switching between the themes i.e : ThemeSwitcher.

Windows Template Studio already has a theme switcher in setting which toggles between Light , Dark and Windows Default. following same method other themes can also be added to the list.

Tricky Part

the min tricky part I noticed which might occur in this feature is that windows 10 has just 2 built in themes ( light/dark), so how will we include other themes to follow the same pattren of theme switching? I have a rough solution to that :

When the app is switched to light or dark, the app will look into respective resources present in app.xaml ( generated by theme editor ) and apply them to the system light or dark themes respectively. What we need to do in ThemeSwitcher is map other themes to light and dark. For-Example I have total 4 themes

1. Light (default )
2. Dark ( default )
3. Neon ( custom name by developer ) ( will be mapped to light theme )
4. Slate ( custom name by developer ) ( will be mapped to dark theme )

now when the user selects Neon the ThemeSwitcher will take the Neon Resources and apply them to Light Theme and then change the ApplicationTheme to Light. And when Slate is selected its resources will be applied to Dark Theme and then App theme will be switched to Dark.

This is still just a rough idea, so I thought I should put it out there and make it open for discussion maybe with the community and see what they think about it? Apart from the open choice of themes, it will have another major benefit : above OCT 2018 update theme editor supports localized theme ( different theme at different parts of the app ) and if we have more than 2 themes it will just give a lot more flexibility to the developer on how they want to design the app.

we can always limit the number of themes the editor can generate at one time so that editor app itself remains fast or if too much resources in app.xaml has consequences or for any other reason possible. but for complexity sake it doesnt effect the process because, if we re able to create more than 2 themes then technically we should be able to toggle between infinite amount of themes.

Thanks for reading

[mdtauk]

The ThemeResources that control the usage of the colour themes generated by this tool, use the built in Light and Dark themes. If you wanted to override both light and dark with a custom theme you would need to "inject" the XAML into the App.xaml file as both Light and Dark. At that point you will need some kind of helper or boilerplate code for the app its child windows, and the settings screen implementation.

It may be beyond the scope of this project, and might be worth suggesting to the Community Toolkit project.

[touseefbsb]

@mdtauk yeah it might be tricky, that is wht I want to discuss it first here and see what the maintainer think and whether it is doable in this repo.

[kikisaints]

Did you get a chance to check out the Windows Developer Blog post on this editor?

I describe there how you would add one of these exported themes to your app. In doing so you would create a separate ResourceDictionary page and merge that dictionary into an app scope like so:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="NeonTheme.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Then you can call Application.Current.MergedDictionaries (which is an IList) and handle it like any other collection. Clear, add, etc. and your ResourceDictionary's source could be re-targeted (through a URI) to whatever theme you'd like.

Does this sound at all what you're looking for?

[touseefbsb]

so when I re-target it through c# code, the theme can be changed at runtime?

[touseefbsb]

also @kikisaints it would b great if we can have the details of blog on the ReadMe of this repo as well, that will help developers explore all features of the editor :)

[ghost]

@kikisaints, you said:

Then you can call Application.Current.MergedDictionaries (which is an IList) and handle it like any other collection. Clear, add, etc. and your ResourceDictionary's source could be re-targeted (through a URI) to whatever theme you'd like.

Thais can be made with a ComboBox? User chooses Neon and NeonTheme.xaml is injected at runtime?

(Sorry for my rusty English)

[doghappy]

Great proposal.

I really need it, but neither Community Toolkit nor Theme Editor provides a simple case. where should I go to keep up-to-date with this feature?

[kikisaints]

Great proposal.

I really need it, but neither Community Toolkit nor Theme Editor provides a simple case. where should I go to keep up-to-date with this feature?

It's not too difficult to do - although resources are originally hooked up to our dark and light themes, you can break out of that and create your own themes to switch between.

An example of how to set up your own theme can be found in the ReadMe of this repo.

However, if you'd like a cleaner/more interactive sample of how to do this, feel free to log an issue over on our Xaml Controls Gallery app and we'll see how we can get an example out to you for easy usage.

[rahulkps23]

so when I re-target it through c# code, the theme can be changed at runtime?

This was not answered. Can anyone give clarity about this?