Repository

https://github.com/busyorg/busy

Pull Requests

https://github.com/busyorg/busy/pull/2090
https://github.com/busyorg/busy/pull/2094

Task Request

https://steemit.com/utopian-io/@cahlen/task-request-busy-org-night-mode-100-steem-w-bonus

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.

CSS Adjustments

Now that there is a global CSS class on the body element, when the nightmode is enabled, the rest is just about the actual CSS adjustments.

I inspected the frontend part by part and looked for the respective CSS classes in the components' code. Each component has a <Component>.less file. I copied those files, where needed, suffixed it with <Component>-nightmode.less and imported this file in the main file at the bottom.

It's important that all those new styles are wrapped by the .nightmode class, so that they only take affect when the nightmode is enabled.

I did this with 35 *.less files to cover all the parts of the layout.

Todo

There are actually two more things that will probably come with a future update.

One is a special link syntax to enable nightmode for unauthenticated users.

The other one is a toggle button in the navbar on the right, to quickly toggle between night and day.

Please feel free to check out the new nightmode and see if you can find parts that I forgot or that need more work.

I hope you like it! :)

And if you just want to take a brief look, here are some more screenshots: