The browser has the prefers-color-scheme media query for letting web applications be aware of the operating system configured light / dark mode setting.
Nimble should be aware of that configuration so nimble applications can automatically adjust to the operating system configured theme preference.
💁 Proposed Solution
Currently nimble's default theme is the Light theme. So if a user does not provide a <nimble-theme-provider> on the page then the default theme value will be light. We should instead make the default theme be the OS configured theme setting.
Nimble theme-provider should have an option for the theme property that allows explicitly configuring the OS specified preferred theme. ie theme = light | dark | color | platform
As part of a primeday project I prototyped with adding a platform option to the theme-provider's theme property.
We should still have an HLD to pin down the requirements and API for this change beyond the proposed solution.
We should make sure our solution works well with the changes in this SLE PR which attempts to set the nimble theme to match the OS setting at the application level.
😯 Problem to Solve
The browser has the
prefers-color-scheme
media query for letting web applications be aware of the operating system configured light / dark mode setting.Nimble should be aware of that configuration so nimble applications can automatically adjust to the operating system configured theme preference.
💁 Proposed Solution
<nimble-theme-provider>
on the page then the default theme value will belight
. We should instead make the default theme be the OS configured theme setting.theme
property that allows explicitly configuring the OS specified preferred theme. ietheme = light | dark | color | platform
As part of a primeday project I prototyped with adding a
platform
option to the theme-provider'stheme
property.We should still have an HLD to pin down the requirements and API for this change beyond the proposed solution.
📋 Tasks