Skip to content

Auto night mode maintains its dark-theme active until 7:59:59am #156

@sergeleger

Description

@sergeleger

Describe the bug

Note: observed in my local development environment... there are potentially two aspects to this bug, and both should be validated against a production site.

  1. as described in the title, the auto night mode description states that dark mode would be active from "21:00 to 7:00", but the implementation is actually from 21:00 to 8:00.
  2. on the initial load of the page it begins in light mode and then 60 seconds later it would switch to dark mode (this is the behaviour that made me question the implementation of auto night mode)

To Reproduce
Steps to reproduce the behavior:

  1. Between 8:00-20:00, go to Settings and enable "Auto night mode"
  2. Make sure to select a light mode theme

To test (1):

  1. The next day, between 7am-8am
  2. Access word weaver in a new tab
  3. The site will initially load in light mode, then after 60s toggle to dark mode (as described in (2))...
  4. ... or the site will load the dark-mode directly, it should not since it is after 7am.

To test (2):

  1. After 21:00 and in a new tab access word weaver
  2. The site will initially load in light mode, then after 60s switch to dark mode

Expected behavior

For the first aspect (1): the system should not use a dark theme after between 7:00:00 and 20:59:59.

If (2) is confirmed, it is very jarring when the site suddenly jumps to a dark theme. It should instead select the appropriate theme when first loading the site.

Desktop (please complete the following information):

  • Linux
  • Latest Chrome
  • Noticed in a development environment, running non-production code

Additional context

Here are two code snippets from word weaver:

// For (1)  - hour <= 7 includes the time period from 7:00:00 to 7:59:59
export const selectIsNightHour = createSelector(
  selectAutoNightMode,
  selectHour,
  (autoNightMode, hour) => autoNightMode && (hour >= 21 || hour <= 7)
);
// For (2) - jarring toggle after the 60 seconds delay happens here,
changeHour = createEffect(() =>
    merge(
      interval(60_000),
      this.actions$.pipe(ofType(actionSettingsChangeAutoNightMode))
    ).pipe(
      mapTo(new Date().getHours()),
      distinctUntilChanged(),
      map((hour) => actionSettingsChangeHour({ hour }))
    )
  );

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions