Busy.org now has a Nightmode!

TL;DR: You can see the new nightmode on staging.busy.org. Once you are logged in go to the settings page and enable the nightmode option.

You might have noticed that the nightmode option is already available on the production/live site but it affects only the navbar at the top. These changes are from my first pull request, that contained only the settings option and the navbar style as an example. I don't know when the full nightmode will be deployed.

Implementation

Settings Option

First step was to add the option to the settings page properly, so that it get's saved permanently. Then some surrounding container needs to have an additional CSS class, if this setting is enabled.

Adding Settings Option: https://github.com/busyorg/busy/pull/2094/commits/d2cda80e5a8c5f9556cbbcdedf7fd2c25013501a
Adding CSS Class to Layout Container: https://github.com/busyorg/busy/pull/2094/commits/260f91d5b37b9e74548458d9a74b2e558bf9337f

<div className="Settings__section">
   <h3>
      <FormattedMessage id="nightmode" defaultMessage="Nightmode" />
   </h3>
   <p>
      <FormattedMessage
         id="nightmode_details"
         defaultMessage="You can enable this option for a more eye-friendly experience at night."
         />
   </p>
   <div className="Settings__section__checkbox">
      <Checkbox
         name="nightmode"
         defaultChecked={initialNightmode}
         checked={nightmode}
         onChange={this.handleNightmode}
         >
         <FormattedMessage id="use_nightmode" defaultMessage="Use Nightmode" />
      </Checkbox>
   </div>
</div>

<Layout
  className={nightmode ? 'dark' : ''}
  data-dir={language && language.rtl ? 'rtl' : 'ltr'}
>

Later I decided that it would be more practical to add this nightmode CSS class to the body instead the Layout component (and rename it to nightmode instead of dark). Because the body element lies outside of the React application, a little bit of plain Javascript was necessary.

Moving CSS Class to body: https://github.com/busyorg/busy/pull/2094/commits/e6800bc092cc0a73a7b9671bec63a08538c53ec1

componentDidMount() {
  ...
  if (this.props.nightmode) {
    document.body.classList.add('nightmode');
  }

Apply Nightmode Server-Side

This implementation works fine but it leads to a rather annoying visual issue. When the page loads it shows the white version first and then, once the state and thus all the settings options are loaded, it turns into nightmode. To prevent the normal white version flashing for a short moment, the nightmode had to be applied server-side when loading the page.

Even though I was a little bit afraid that I might not be able to figure out how to do that, since I never worked in that part of the code, it turned out to be pretty easy and in the end I only had to touch 3 lines of code.

https://github.com/busyorg/busy/pull/2094/commits/c3334f51a119dc0a47ae7ed0fcb150ad9e2cfee1

As the state object is available when rendering the template server-side, all I had to do is to get the nightmode option from it and pass it to the template. There the nightmode class is added to the body if nightmode is enabled.