Add "system" theme setting for MacOS

This commit is contained in:
Ken Powers 2019-05-16 15:32:38 -07:00 committed by Scott Nonnenberg
parent 089a232a60
commit fd36720079
13 changed files with 174 additions and 35 deletions

View file

@ -208,6 +208,7 @@
switch (theme) {
case 'dark':
case 'light':
case 'system':
return theme;
case 'android-dark':
return 'dark';
@ -231,7 +232,11 @@
window.Events = {
getDeviceName: () => textsecure.storage.user.getDeviceName(),
getThemeSetting: () => storage.get('theme-setting', 'light'),
getThemeSetting: () =>
storage.get(
'theme-setting',
window.platform === 'darwin' ? 'system' : 'light'
),
setThemeSetting: value => {
storage.put('theme-setting', value);
onChangeTheme();
@ -326,6 +331,19 @@
`New version detected: ${currentVersion}; previous: ${lastVersion}`
);
const themeSetting = window.Events.getThemeSetting();
const newThemeSetting = mapOldThemeToNew(themeSetting);
if (
window.isBeforeVersion(lastVersion, 'v1.25.0') &&
window.platform === 'darwin' &&
newThemeSetting === window.systemTheme
) {
window.Events.setThemeSetting('system');
} else {
window.Events.setThemeSetting(newThemeSetting);
}
if (window.isBeforeVersion(lastVersion, 'v1.25.0')) {
// Stickers flags
await Promise.all([
@ -334,6 +352,7 @@
]);
}
// This one should always be last - it could restart the app
if (window.isBeforeVersion(lastVersion, 'v1.15.0-beta.5')) {
await window.Signal.Logs.deleteAll();
window.restart();
@ -411,10 +430,6 @@
};
startSpellCheck();
const themeSetting = window.Events.getThemeSetting();
const newThemeSetting = mapOldThemeToNew(themeSetting);
window.Events.setThemeSetting(newThemeSetting);
try {
await Promise.all([
ConversationController.load(),

View file

@ -9,7 +9,23 @@ $(document).on('keyup', e => {
});
const $body = $(document.body);
$body.addClass(`${window.theme}-theme`);
async function applyTheme() {
'use strict';
const theme = await window.getThemeSetting();
$body.removeClass('light-theme');
$body.removeClass('dark-theme');
$body.addClass(`${theme === 'system' ? window.systemTheme : theme}-theme`);
}
applyTheme();
window.subscribeToSystemThemeChange(() => {
'use strict';
applyTheme();
});
window.view = new Whisper.ConfirmationDialogView({
message: i18n('audioPermissionNeeded'),

View file

@ -9,7 +9,23 @@ $(document).on('keyup', e => {
});
const $body = $(document.body);
$body.addClass(`${window.theme}-theme`);
async function applyTheme() {
'use strict';
const theme = await window.getThemeSetting();
$body.removeClass('light-theme');
$body.removeClass('dark-theme');
$body.addClass(`${theme === 'system' ? window.systemTheme : theme}-theme`);
}
applyTheme();
window.subscribeToSystemThemeChange(() => {
'use strict';
applyTheme();
});
// eslint-disable-next-line strict
const getInitialData = async () => ({

View file

@ -8,6 +8,14 @@
window.Whisper = window.Whisper || {};
function resolveTheme() {
const theme = storage.get('theme-setting') || 'light';
if (window.platform === 'darwin' && theme === 'system') {
return window.systemTheme;
}
return theme;
}
Whisper.AppView = Backbone.View.extend({
initialize() {
this.inboxView = null;
@ -15,14 +23,18 @@
this.applyTheme();
this.applyHideMenu();
window.subscribeToSystemThemeChange(() => {
this.applyTheme();
});
},
events: {
'click .openInstaller': 'openInstaller', // NetworkStatusView has this button
openInbox: 'openInbox',
},
applyTheme() {
const theme = resolveTheme();
const iOS = storage.get('userAgent') === 'OWI';
const theme = storage.get('theme-setting') || 'light';
this.$el
.removeClass('light-theme')
.removeClass('dark-theme')

View file

@ -88,7 +88,9 @@
$(document.body)
.removeClass('dark-theme')
.removeClass('light-theme')
.addClass(`${theme}-theme`);
.addClass(
`${theme === 'system' ? window.systemTheme : theme}-theme`
);
window.setThemeSetting(theme);
},
});
@ -143,8 +145,10 @@
audioNotificationDescription: i18n('audioNotificationDescription'),
isAudioNotificationSupported: Settings.isAudioNotificationSupported(),
isHideMenuBarSupported: Settings.isHideMenuBarSupported(),
hasSystemTheme: window.platform === 'darwin',
themeLight: i18n('themeLight'),
themeDark: i18n('themeDark'),
themeSystem: i18n('themeSystem'),
hideMenuBar: i18n('hideMenuBar'),
clearDataHeader: i18n('clearDataHeader'),
clearDataButton: i18n('clearDataButton'),