octobox/octobox

[Feature request] Add option to follow the System Theme

Open

#2.841 geöffnet am 10. Nov. 2021

Auf GitHub ansehen
 (1 Kommentar) (5 Reaktionen) (0 zugewiesene Personen)Ruby (3.737 Stars) (311 Forks)batch import
accessibilitydesignenhancementhelp wanted

Beschreibung

💥 Proposal

Add a third Theme options: Follow System Default theme.

Motivation

Most modern apps and websites offer at least 3 themes by default:

  • Light
  • Dark
  • System Default

Octobox is missing the third one. The System Default theme would follow the theme set by the browser and automatically switch to the appropriate one accordingly.

The browser can also follow the System Default theme itself: If the user switches the OS theme to light or dark, the browser changes its theme, and then it would tell Octobox to change the theme as well.

Pitch

Some modern OSs have the ability to detect the sunrise and sunset time based on the user's location, and switch to a light theme on sunrise or to a dark theme on sunset. This prevents eye strain.

Some other OSs do not have the ability to detect sunrise/sunset, but the user can still manually switch to Light or Dark theme on demand.

In an ideal world, the user would only switch the theme at the OS level, and all apps would follow that setting.

Contributor Guide

Tech Stack
rubyrailsjavascriptcss
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 days
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
CSS custom propertiesJavaScriptRuby on Rails
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
65
Research-Richtung
Review the existing theme implementation in Octobox, likely in app/assets/stylesheets and app/views. Look for how light and dark themes are toggled. Use window.matchMedia('(prefers color scheme: dark)') to detect system preference. Add a new theme option 'system' and listen for changes. Save the preference in the user settings (likely in the database). See comments in the issue for further guidance.