settings: Add backend storage and interface for night mode.

This allows the night mode setting to be stored in the backend.

static/js/server_events_dispatch.js

@@ -272,6 +272,7 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
             'emoji_alt_code',
             'emojiset',
             'high_contrast_mode',
+            'night_mode',
             'left_side_userlist',
             'timezone',
             'twenty_four_hour_time',
@@ -289,6 +290,13 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
         if (event.setting_name === 'high_contrast_mode') {
             $("body").toggleClass("high-contrast");
         }
+        if (event.setting_name === 'night_mode') {
+            $("body").fadeOut(300);
+            setTimeout(function () {
+                $("body").toggleClass("dark-mode");
+                $("body").fadeIn(300);
+            }, 300);
+        }
         if (event.setting_name === 'emoji_alt_code') {
             // Rerender the whole message list UI
             home_msg_list.rerender();

static/js/settings_display.js

@@ -2,6 +2,33 @@ var settings_display = (function () {
 
 var exports = {};
 
+exports.set_night_mode = function (bool) {
+    var night_mode = bool;
+    var data = { night_mode: JSON.stringify(night_mode) };
+    var context = {
+        enable_text: data.night_mode === "true" ?
+            i18n.t("enabled") :
+            i18n.t("disabled"),
+    };
+
+    channel.patch({
+        url: '/json/settings/display',
+        data: data,
+        success: function () {
+            page_params.night_mode = night_mode;
+            if (overlays.settings_open()) {
+                ui_report.success(i18n.t("Night mode __enable_text__!", context),
+                                  $('#display-settings-status').expectOne());
+            }
+        },
+        error: function (xhr) {
+            if (overlays.settings_open()) {
+                ui_report.error(i18n.t("Error updating night mode setting."), xhr, $('#display-settings-status').expectOne());
+            }
+        },
+    });
+};
+
 exports.set_up = function () {
     $("#display-settings-status").hide();
 
@@ -71,6 +98,10 @@ exports.set_up = function () {
         });
     });
 
+    $("#night_mode").change(function () {
+        exports.set_night_mode(this.checked);
+    });
+
     $("#left_side_userlist").change(function () {
         var left_side_userlist = this.checked;
         var data = {};

static/js/zulip.js

@@ -10,3 +10,9 @@ var current_msg_list = home_msg_list;
 if (typeof module !== 'undefined') {
     module.exports.current_msg_list = current_msg_list;
 }
+
+$(function () {
+    if (page_params.night_mode) {
+        $("body").addClass("dark-mode");
+    }
+});

static/templates/settings/display-settings.handlebars

@@ -29,6 +29,17 @@
                 <label for="high_contrast_mode" class="inline-block">{{t "High contrast mode" }}</label>
             </div>
 
+            <div class="input-group">
+                <label class="checkbox">
+                    <input type="checkbox" name="night_mode" id="night_mode"
+                    {{#if page_params.night_mode}}
+                      checked="checked"
+                    {{/if}} />
+                    <span></span>
+                </label>
+                <label for="night_mode" class="inline-block">{{t "Night mode" }}</label>
+            </div>
+
             <div class="input-group">
                 <label class="checkbox">
                     <input type="checkbox" name="left_side_userlist" id="left_side_userlist"

zerver/migrations/0119_userprofile_night_mode.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.6 on 2017-11-14 19:28
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('zerver', '0118_defaultstreamgroup_description'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='night_mode',
+            field=models.BooleanField(default=False),
+        ),
+    ]

zerver/models.py

@@ -601,6 +601,7 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
     twenty_four_hour_time = models.BooleanField(default=False)  # type: bool
     default_language = models.CharField(default=u'en', max_length=MAX_LANGUAGE_ID_LENGTH)  # type: Text
     high_contrast_mode = models.BooleanField(default=False)  # type: bool
+    night_mode = models.BooleanField(default=False)  # type: bool
 
     # Hours to wait before sending another email to a user
     EMAIL_REMINDER_WAITPERIOD = 24
@@ -665,6 +666,7 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
         timezone=Text,
         twenty_four_hour_time=bool,
         high_contrast_mode=bool,
+        night_mode=bool,
     )
 
     notification_setting_types = dict(

zerver/tests/test_home.py

@@ -94,6 +94,7 @@ class HomeTest(ZulipTestCase):
             "narrow_stream",
             "needs_tutorial",
             "never_subscribed",
+            "night_mode",
             "password_min_guesses",
             "password_min_length",
             "pm_content_in_desktop_notifications",

zerver/views/user_settings.py

@@ -140,6 +140,7 @@ def json_change_settings(request, user_profile,
 def update_display_settings_backend(request, user_profile,
                                     twenty_four_hour_time=REQ(validator=check_bool, default=None),
                                     high_contrast_mode=REQ(validator=check_bool, default=None),
+                                    night_mode=REQ(validator=check_bool, default=None),
                                     default_language=REQ(validator=check_string, default=None),
                                     left_side_userlist=REQ(validator=check_bool, default=None),
                                     emoji_alt_code=REQ(validator=check_bool, default=None),