Skip to content

The errorOverlay's themeSwitch does not work as expected. #10715

@liruifengv

Description

@liruifengv

Astro Info

Astro                    v4.5.12
Node                     v18.16.1
System                   Windows (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Issue

The errorOverlay's themeSwitch does not work as expected.

How to reproduce

Prerequisites

  • User's system use dark mode
  • When the user first encounters the error page, open the errorOverlay.
  • No localstorage astroErrorOverlayTheme now.

Steps

  1. open the errorOverlay
  2. theme is detected as dark
  3. Click the themeSwitch
  4. themeSwitch's check status is wrong
  5. theme toggle also does not work

Video

astro-error-overlay.-.Compressed.with.FlexClip.mp4

Reason

  • When it is detected that the system is dark, it is not saved to localstorage.
  • isDark should be localStorage.astroErrorOverlayTheme === 'dark' || this?.classList.contains('astro-dark')

What's the expected result?

errorOverlay's themeSwitch works correctly

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-xx2wzh

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P2: nice to haveNot breaking anything but nice to have (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions