How can I detect Windows 10 light/dark mode? - windows

I'm using Windows.UI.ViewManagement.UISettings to get system accent color but it seems this class does not have any method or property for light/dark mode. I failed to find a document for this feature, how can I detect this?
PS: I'm making a JS app which does not have access for Windows.UI.Xaml namespace.

You can create a Windows Runtime Component project in your solution from there you access Windows.UI.Xaml namespace. Add a method to check current ApplicationTheme like that.
public sealed class Test
{
public static string CurrentTheme()
{
var isDark = Application.Current.RequestedTheme == ApplicationTheme.Dark;
if (isDark)
return "Dark";
return "Light";
}
}
Add reference to windows runtime component project in your javascript app project and you can call this method where ever you want to check application theme. Take a look here for walkthrough on createing Windows Runtime Component.

I have found an easier solution, which should work in JavaScript apps as well, without requiring the Windows Runtime Component - the UISettings class:
var uiSettings = new Windows.UI.ViewManagement.UISettings();
var color = uiSettings.getColorValue(
Windows.UI.ViewManagement.UIColorType.background
);
The color you get is either black for dark theme or white for light theme.
The class also has very useful event ColorValuesChanged which you can use to observe theme changes at runtime.

For Windows 10, the value of the AppsUseLightTheme property in the path HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize of the registry specifies wherever Windows is in dark or light mode.

You can read the registry if the theme is enabled for the current user and get the setting from there. Something like this...
private const string RegistryKeyPath = #"Software\Microsoft\Windows\CurrentVersion\Themes\Personalize";
private const string RegistryValueName = "AppsUseLightTheme";
private static ApplicationTheme GetWindowsTheme()
{
using var key = Registry.CurrentUser.OpenSubKey(RegistryKeyPath);
var registryValueObject = key?.GetValue(RegistryValueName);
if (registryValueObject == null)
{
return ApplicationTheme.Light;
}
var registryValue = (int)registryValueObject;
return registryValue > 0 ? ApplicationTheme.Light : ApplicationTheme.Dark;
}
Full example can be found in this link
https://engy.us/blog/2018/10/20/dark-theme-in-wpf/

Before the Windows Anniversary update you could not do that. The application theme was always the one you set in the App.xaml file:
<Application
...
RequestedTheme="Dark">
</Application>
Now with the new Anniversary Update, you can remove this line from the App.xaml file, which will make the app honor the user's system settings.
The RequestedTheme enumeration has actually three values - Dark, Light and Default. Default is the value that reflects the system settings, Dark and Light force the theme.
If you want to actually detect the current theme in code when App's RequestedTheme is Default, you will probably need to check the some color resource like SystemAltHighColor for its value, because that will give you an idea of what theme is currently set.

ThemeResources have been introduced in 8.1 and their behavior is similar in W10. Therefore you can define suitable resource in ThemeDictionaries responsible for available Themes and then you can check the defined resource when you whant to know which Theme is currently used.
The code will be very similar to the one in this answer.

If you want to get the Value in PowerShell you can use the following code:
(New-Object Windows.UI.ViewManagement.UISettings).GetColorValue("background")

Related

Action Bar and Activity Handling in Xamarin

I have two questions:
I want to change the Action Bar color. Right now I'm using the default theme for the application. How can I do this?
The next question is: How can I show some specific activities when the application is running for the very first time on device after installation? I don't want to show them again after that.
1)
You can change the color exactly like in an native android app.
http://developer.android.com/training/material/theme.html
Here is a xamarin related tutorial: https://blog.xamarin.com/android-tips-hello-material-design-v7-appcompat/
2) You could use the Settings Plugin and then read a boolean value like
var settings = CrossSettings.Current;
var shownFirstLaunch = settings.GetValueOrDefault<bool>("FirstLaunchShown", false);
if(shownFirstLaunch) {
// show Mainactivity
}
else {
settings.AddOrUpdateValue<bool>("FirstLaunchShown", true);
// show first launch activity
}

Variables for colors in interface builder

I have a project that I need to change overall color themes in the app. A lot of my UI elements are built through Interface Builder in Xcode 6.1. I need to set colors as variables in interface builder, so if I set a preprocessor telling the app to use a certain scheme then the colors will change in interface builder. Is this even possible?
I'm not aware of any way to do this with interface builder, however there is a way that you can set appearance properties in code for many IOS UI elements that will then apply globally. As an example see the following snippet of code:
UIToolbar.appearance().tintColor = UIColor.whiteColor()
UIToolbar.appearance().barTintColor = UIColor.blackColor()
UITableView.appearance().separatorColor = UIColor.grayColor()
UITableView.appearance().sectionIndexColor = UIColor.grayColor();
UINavigationBar.appearance().tintColor = UIColor.blueColor()
UINavigationBar.appearance().barTintColor = UIColor.blackColor()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]
The code sets a the default tint and bar color for all the UIToolbars, separator and section index colors for all UITableViews, and appearance properties for all the UINavigation views in my app..
You could use #if to set the appearance differently depending on the environment variables set in the compiler.
If you want to find out more about how this works Id suggest reading Apples documentation on UIAppearance properties here:
UIAppearance Documentation
Color variables are awesome, I wish xcode had this too.
Turns out you can add a color variables feature.
This xcode plugin, called Suggested Colors, let's you build and use a palette of colors in Interface Builder. It uses a plist file, So I think you could read that in code and have a color palette shared between code and IB this way. Looks promising. Unfortunately, doesn't seem to work on xcode 6.3.2. Hope it gets fixed.

Wide Tile Windows Phone 7.1 using MangoPollo

I have a Windows Phone 7.1 app and I want to include a wide iconic tile. I found a library called MangoPollo:
http://mangopollo.codeplex.com/
I found this code within:
var tile = ShellTile.ActiveTiles.FirstOrDefault();
if (tile != null)
{
var tileData = new FlipTileData();
tileData.Title = "Start Debugging";
tileData.BackContent = "switch to windows phone, we've got candy";
tileData.BackgroundImage = new Uri("Assets/tileBackground.png", UriKind.Relative);
tileData.BackBackgroundImage = new Uri("Assets/tileBackBackground.png", UriKind.Relative);
tileData.WideBackContent = "switch to windows phone, we've got candy";
tileData.WideBackgroundImage = new Uri("Assets/wideTileBackground.png", UriKind.Relative);
tileData.WideBackBackgroundImage = new Uri("Assets/wideTileBackBackground.png", UriKind.Relative);
tile.Update(tileData);
}
The problem is there isn't any documentation included on Codeplex for the project so I'm not sure where to insert this code (i.e. which function) to change the tile size from normal to wide.
Another way of creating Wide Tile in Windows Phone 7. Tested it and it works.
Check this out.
http://www.supersmithbros.com/index.php/latest-news/93-how-to-create-a-wp8-wide-tile-in-wp7-xna
You may call it where you want and there is no code to change tile at the user screen, because it's not allowed.
If you look in the source code, in the link to MangoPollo which you supplied, the sample code places the tile code in a button click event. So what I would do in your app, is make an option to set up this new tile (settings page, maybe?) and when the user turns this setting on, you would run the code in that event handler.
This way, the code doesn't unnecessarily execute multiple times (as it would if it were in the constructor of a page or in app.xaml.cs).
Hope this helps!
Edit:
Based on your comment then, maybe you can put it in the constructor of your first page. Maybe, then, to prevent the code from executing more than necessary, you could check the existing tile to see if it already has a WideBackgroundImage, and if it doesn't, then set it and call Update() otherwise just continue.

Change the colour of WinJS.UI.BackButton (Win 8.1 back button)

I'm getting started with Windows 8 App development using WinJS. I'm using the Light UI theme but I have set up a darker area on the left of the page (where the black back button is) and the issue is: you can't see the button.
I've trawled through the MSDN pages and the most I could find is how to style a button which doesn't actually explain how to change the colour of an actual asset.
http://msdn.microsoft.com/en-us/library/windows/apps/jj835822.aspx
I've also tried adding: win-ui-light and win-ui-dark classes to the button with no success.
I wondered if someone could point me in the right direction?
Many thanks for your time
Chris
First of all you have to delete the link tag that contain UI css by default and add it to document head , Dynamically.see below code :
var uistyle;
// call when your app load or resume.
function onappopen(){
uistyle = document.createElement('link');
uistyle.href = "//Microsoft.WinJS.2.0/css/ui-dark.css";
uistyle.rel = "stylesheet";
uistyle.id = "UIstyle";
document.head.appendChild(uistyle);}
// call when you want to change UI Style.
function UIstyle(UIbool){
if(UIbool=='light'){ uistyle.href = "//Microsoft.WinJS.2.0/css/ui-light.css";}
else {uistyle.href = "//Microsoft.WinJS.2.0/css/ui-dark.css";}}
Like: UIstyle('light'); for light UI in Windows 8 or "UIstyle()" for dark;
I used the DOM Explorer to find the buttons default values and overwrite them. It was the child element that needed to be overwritten: .win-back

Performance of changing Visual Studio colors with custom add-in

I'm creating an add-in for Visual Studio 2008 that will allow me to switch between color schemes with a hotkey.
I got it to successfully load a color scheme and apply it, but it's very slow.
Here's the code that applies a scheme:
// The Theme class is a holder for a color scheme
private static void LoadTheme(Theme theme, DTE2 application)
{
var items = GetItems(application);
foreach (var item in items)
{
if (!theme.Properties.ContainsKey(item.Name)) continue;
var prop = theme.Properties[item.Name];
item.Background = prop.Background;
item.Foreground = prop.Foreground;
item.Bold = prop.Bold;
}
}
private static IEnumerable<ColorableItems> GetItems(DTE2 application)
{
var fontsAndColorsItems = (FontsAndColorsItems) application
.get_Properties("FontsAndColors", "TextEditor")
.Item("FontsAndColorsItems")
.Object;
return fontsAndColorsItems.Cast<ColorableItems>();
}
Basically, GetItems gets the list of ColorableItems from Visual Studio's options. Setting a property on one of these items applies the change to VS immediately. Since a color scheme can contain over a hundred properties, this results in 300+ update operations and it takes a very long time (10+ seconds on my laptop).
I'd like to somehow tell VS that I don't want it to refresh while I'm updating properties, and when I'm done tell it to update, but I can't find a way of doing that.
Ideally the whole process would take 1 or 2 seconds, similar to running an Import/Export Settings with the VS wizard.
I'm also open to alternative approaches. I had an idea to simply overwrite the registry settings, but then I need a way of forcing VS to reload it's settings.
Well, I found a solution that works very well. I can simply invoke the actual import/export settings functionality of Visual Studio, like this:
application.ExecuteCommand(
"Tools.ImportandExportSettings",
string.Format("/import:\"{0}\"", file));
Where file is the full path to a vssettings file. This runs in about 1 second.
It will require some changes to the way my add-in works, but it's actually simpler this way.

Resources