Autodetect default theme based on user’s device preferences #8

New Issue

phundrak · 2020-05-20T16:32:46Z

phundrak commented

2020-05-20 16:32:46 +00:00

It is possible to perform media queries in Dart in order to retrieve some information such as the user’s device preferences as to which theme to use, dark or light.

Documentation about this can be found in the W3C level 5 draft here. In Javascript, it is possible to send a media query with .matchMedia('(prefers-color-scheme: dark)') in order to detect if the user prefers a dark theme. The possible values are:

no-preference
light
dark

In Dart, it is also possible to perform media queries with dart:html’s window and its styleMedia member, which has the method matchMedium.

It should be easy to add in the initializing Dart code a couple of lines that look for the user’s preferences and set the default theme accordingly.

It is possible to perform media queries in Dart in order to retrieve some information such as the user’s device preferences as to which theme to use, dark or light. Documentation about this can be found in the W3C level 5 draft [here](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme). In Javascript, it is possible to send a media query with `.matchMedia('(prefers-color-scheme: dark)')` in order to detect if the user prefers a dark theme. The possible values are: - `no-preference` - `light` - `dark` In Dart, it is also possible to perform media queries with `dart:html`’s [`window`](https://api.dart.dev/stable/2.8.1/dart-html/window.html) and its `styleMedia` member, which has the method [`matchMedium`](https://api.dart.dev/stable/2.8.1/dart-html/StyleMedia/matchMedium.html). It should be easy to add in the initializing Dart code a couple of lines that look for the user’s preferences and set the default theme accordingly.

phundrak added the

good first issue

enhancement

labels 2020-05-20 16:32:46 +00:00

phundrak self-assigned this 2020-05-20 16:32:46 +00:00

phundrak referenced this issue from a commit

2020-05-21 05:37:13 +00:00

Fixes #8 The default theme is now chosen based on the user’s preference stored in their device. If the device uses a dark theme, the website’s dark theme will be used by default. Otherwise, the light theme will be used by default.

phundrak closed this issue

2020-05-21 05:37:13 +00:00

This repo is archived. You cannot comment on issues.