Dark Mode

[austintruchan]

Colors for a dark version of color have been finalized. Dark mode will extend the colors used in the sidebar to the rest of kora, in order to create an easy on the eyes solution at night, and to work well with MacOS Mojave's dark mode. This will also be in introduction and experiment into how we develop future themes.

Users will be able to turn on dark mode from the my preferences page https://projects.invisionapp.com/d/main#/console/11107725/337155937/preview

Various pages have been mocked up on InVision that include the new look and feel of dark mode. Most importantly, style guides for dark mode has been made.
Inputs - https://projects.invisionapp.com/d/main#/console/11107725/337866766/preview
Buttons - https://projects.invisionapp.com/d/main#/console/11107725/337866767/preview
Colors - https://projects.invisionapp.com/d/main#/console/11107725/337871213/preview

I went ahead and updated the color variables for what dark mode uses. Only three new colors have been added, and a few colors have been removed:

  $base-accent: #04b6af;
  $base-background: #233D4A:
  $base-black: #000;  (Why do we have this? We shouldn’t use black anywhere.)
  $base-dropdown-menu: #122229;
  $base-green: #007c83; (Base green Is no more in dark mode, and is turning into $base-sidemenu ’s color)
  $base-sidemenu: #152730;
  $base-sidemenu-drawer: #14252e;
  $base-sidemenu-drawer-text: #f7f8fa;
  $base-sidemenu-footer: #11222a;
  $base-text: #ffffff;
  $base-warning: #ff6f81;
  $base-white: #284452;
  $base-yellow: #ffbc70;
  $base-yellow-text: #f39a33;

Dark mode wont be as simple as just changing the color variables, and i'm sure we will inevitably run into styling issues as we go along and we will work through them when get there.

But for the most part, input and button styling is mostly the same, other than changing their background and text colors. Dropshadows have been kept the same across the board.
The only instance that there is a change is with inactive radio buttons, where the opacity of the border is increased from 10% to 20%.

Before beginning this, meet with Anthony and Nick to figure out the best way to implement.