diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js index 2823f9d20e..2dbf0bfcad 100644 --- a/static/js/server_events_dispatch.js +++ b/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(); diff --git a/static/js/settings_display.js b/static/js/settings_display.js index f5d5774e05..a235c57781 100644 --- a/static/js/settings_display.js +++ b/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 = {}; diff --git a/static/js/zulip.js b/static/js/zulip.js index 230ad8a6a0..5c354b6cc1 100644 --- a/static/js/zulip.js +++ b/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"); + } +}); diff --git a/static/templates/settings/display-settings.handlebars b/static/templates/settings/display-settings.handlebars index 0b72f17e47..3f53230dc8 100644 --- a/static/templates/settings/display-settings.handlebars +++ b/static/templates/settings/display-settings.handlebars @@ -29,6 +29,17 @@ +