akveo/ngx-admin

Support automatic theme detection from OS using prefers-color-scheme

Open

#5542 opened on Oct 17, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (24,990 stars) (7,916 forks)batch import
enhancementhelp wanted

Description

Issue type

I'm submitting a ... (check one with "x")

  • bug report
  • feature request
  • question about the decisions made in the repository

Issue description

Current behavior:

The default theme loads automatically, despite user OS preferences.

Expected behavior:

By using prefers-color-scheme media query, it would be possible to detect the user OS theme. For example, if my Windows theme is dark, the dark theme of ngx-admin should be loaded. If my Windows theme is light, then the light theme of ngx-admin should be loaded.

This is demo'ed here: https://davidwalsh.name/demo/prefers-color-scheme.php It already has decent browser support: https://caniuse.com/#search=prefers-color-scheme

Steps to reproduce:

Related code:

Other information:

This thread is related: https://github.com/angular/components/issues/16905

npm, node, OS, Browser OS: Windows 10 Browser: Chrome 77

Angular, Nebular

Contributor guide

Tech stack
typescriptangularcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
knowledge of CSS prefers color schemengx admin theme systemAngular basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the current theme switching mechanism in ngx admin (likely in the theme service). Implement detection of prefers color scheme using window.matchMedia. Add a listener to update the theme when the user changes OS settings. Consider fallback to a default theme if the media query is not supported. Test across different browsers.