How can I detect Windows 10 light/dark mode?
Solution 1
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.
Solution 2
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.
Solution 3
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.
Solution 4
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.
Kagami Sascha Rosylight
Updated on June 14, 2022Comments
-
Kagami Sascha Rosylight almost 2 years
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. -
Kagami Sascha Rosylight almost 8 yearsIt seems the solution is only for XAML apps. No solution for HTML apps?
-
Kagami Sascha Rosylight almost 8 yearsI need a solution that also works for HTML but this one sadly seems to work only on XAML apps.
-
Romasz almost 8 years@KagamiSaschaRosylight I've not played with HTML much for now, but maybe you can do something similar.
-
Hendrik over 5 yearsHow would this work in JavaScript? I.e. using
wscript
from the command line? -
Matt about 4 yearsAppsUseLightTheme (REG_DWORD): 0 = Dark mode, 1 = Light mode
-
Uwe Keim over 3 yearsBe aware that the
AppsUseLightTheme
value might be missing completely. In this case, you should fall back to a light mode. (Happened to me on an older Windows 10 system; the one that comes with the IE Test VM images from Microsoft itself).