akveo/ngx-admin

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

Open

#5,542 opened on Oct 17, 2019

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

Repository metrics

Stars
 (24,990 stars)
PR merge metrics
 (No merged PRs in 30d)

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

Research direction
Examine how ngx admin currently loads themes, then add logic to detect OS preference via window.matchMedia('prefers color scheme') and apply the appropriate theme.
Tech stack
typescriptangular
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSS media queriesAngular theme system
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75