Add automatic theme detection, change setting "darktheme" to "apptheme", close #48
This commit is contained in:
parent
1763b5d4df
commit
3bda61ca89
@ -63,6 +63,14 @@ Framework7 and FontAwesome both have a .fab class
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.no-animation * {
|
||||
-webkit-transition: 10ms !important;
|
||||
-moz-transition: 10ms !important;
|
||||
-o-transition: 10ms !important;
|
||||
-ms-transition: 10ms !important;
|
||||
transition: 10ms !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Allow easily changing help text to reflect finger/mouse usage.
|
||||
*/
|
||||
|
@ -100,8 +100,23 @@ if (getStorage("alertvolume") == null) {
|
||||
setStorage("alertvolume", 100);
|
||||
}
|
||||
|
||||
if (getStorage("darktheme") == "true") {
|
||||
$("#app").addClass("theme-dark");
|
||||
function applyColorTheme() {
|
||||
if (getStorage("apptheme") == "dark") {
|
||||
// dark theme
|
||||
$("#app").addClass("theme-dark");
|
||||
} else if (getStorage("apptheme") == "light") {
|
||||
// light theme
|
||||
$("#app").removeClass("theme-dark");
|
||||
} else {
|
||||
// automatic theme, default light
|
||||
if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") {
|
||||
$("#app").addClass("theme-dark");
|
||||
} else {
|
||||
$("#app").removeClass("theme-dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
applyColorTheme();
|
||||
|
||||
router.navigate("/home");
|
@ -43,11 +43,10 @@ function clearCaches() {
|
||||
}
|
||||
}
|
||||
|
||||
$('.item-content[data-setting=darktheme] .toggle input').on("change", function () {
|
||||
var checked = $(this).prop('checked');
|
||||
setStorage("darktheme", checked);
|
||||
$('.item-link[data-setting=apptheme] select').on("change", function () {
|
||||
setStorage("apptheme", $('.item-link[data-setting=apptheme] select').val());
|
||||
|
||||
loadSettings();
|
||||
applyColorTheme();
|
||||
});
|
||||
|
||||
$('.item-content[data-setting=showhelp] .toggle input').on("change", function () {
|
||||
|
@ -1,4 +1,4 @@
|
||||
/*
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
@ -84,11 +84,7 @@ function syncNow(callback) {
|
||||
}
|
||||
|
||||
function loadSettings() {
|
||||
if (getStorage("darktheme") == "true") {
|
||||
$("#app").addClass("theme-dark");
|
||||
} else {
|
||||
$("#app").removeClass("theme-dark");
|
||||
}
|
||||
applyColorTheme();
|
||||
|
||||
if (platform_type == "cordova") {
|
||||
if (getStorage("wakelock") == "true") {
|
||||
|
@ -726,12 +726,26 @@ var routes = [
|
||||
async: function (routeTo, routeFrom, resolve, reject) {
|
||||
var settings = [
|
||||
{
|
||||
setting: "darktheme",
|
||||
title: "Use dark theme",
|
||||
text: "Saves power on phones with OLED screens.",
|
||||
toggle: true,
|
||||
checked: getStorage("darktheme") == "true",
|
||||
onclick: ""
|
||||
setting: "apptheme",
|
||||
title: "Color theme",
|
||||
select: true,
|
||||
options: [
|
||||
{
|
||||
value: "auto",
|
||||
label: "Automatic",
|
||||
selected: getStorage("apptheme") == null || getStorage("apptheme") == "auto"
|
||||
},
|
||||
{
|
||||
value: "dark",
|
||||
label: "Dark",
|
||||
selected: getStorage("apptheme") == "dark"
|
||||
},
|
||||
{
|
||||
value: "light",
|
||||
label: "Light",
|
||||
selected: getStorage("apptheme") == "light"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
setting: "showhelp",
|
||||
|
Loading…
x
Reference in New Issue
Block a user