Theme flash vid sidladdning #14
Peter Wickenberg opened 2 weeks ago

Vid sidladdning eller force refresh blinkar sidan till i ljust läge innan mörkt tema appliceras (om användaren har mörkt tema).

Problem

  • Sidan renderas först med default (ljust) tema
  • Efter React hydration läses localStorage och tema byts
  • Resulterar i kort ljus blink

Tidigare försök

Försökte lösa med inline script som sätter dark-klass före body renderas. Detta bröt ThemeBackground-komponentens CSS-baserade tema-switching.

Möjliga lösningar

  • next-themes biblioteket
  • Modifiera ThemeBackground att läsa klass direkt från html
  • Cookie-baserat tema (server kan läsa)
  • CSS color-scheme property

Nuvarande implementation

  • src/components/theme-provider.tsx
  • src/components/theme-background.tsx
  • Peter Wickenberg commented 2 weeks ago

    Research klar - se librarian-analys i session. Lösning: modifiera ThemeProvider att initiera state direkt från localStorage och synka med DOM-klass istället för att sätta den. ~15 min implementation.

  • OneDev commented 2 weeks ago

    State changed as code fixing the issue is committed (23dfe8c0)

  • OneDev changed state to 'Closed' 2 weeks ago
    Previous Value Current Value
    Open
    Closed
1/1
Type
Bug
Priority
Minor
Assignees
Not assigned
Issue Votes (0)
Watchers (1)
Reference
klasslistan#14
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover