Add OLED burn-in protection theme (makes some high-contrast stuff dark at cost of readability)

Skylar Ittner 4 years ago
parent 4513b4d824
commit b0ef570cd0

@ -9,8 +9,35 @@
*/ */
:root #app.theme-dark { :root #app.theme-dark {
--f7-page-bg-color: #020202; --f7-page-bg-color: #111;
--f7-list-bg-color: #020202; --f7-list-bg-color: #111;
--f7-popover-bg-color: #020202; --f7-popover-bg-color: #111;
--f7-sheet-bg-color: #020202; --f7-sheet-bg-color: #111;
}
#app.oled-burn-in .navbar .navbar-inner .title {
color: rgba(255,255,255,0.3);
}
#app.oled-burn-in .navbar .link {
color: rgba(100,100,255,0.5);
}
#app.oled-burn-in .navbar .link.text-color-red {
color: rgba(255,100,100,0.3) !important;
}
#app.oled-burn-in .mapboxgl-ctrl-group {
background: #222;
}
#app.oled-burn-in .mapboxgl-ctrl-group .mapboxgl-ctrl-icon {
filter: invert(69%) sepia(0%) saturate(28%) hue-rotate(215deg) brightness(88%) contrast(91%);
}
#app.oled-burn-in .mapboxgl-ctrl-scale {
background-color: #222;
color: #ccc;
border: 2px solid #333;
border-top: none;
} }

@ -108,13 +108,19 @@ function setAppTheme(theme) {
StatusBar.styleDefault(); StatusBar.styleDefault();
StatusBar.backgroundColorByHexString("#E0E0E0"); StatusBar.backgroundColorByHexString("#E0E0E0");
} }
} else if (theme == "dark") { } else if (theme == "dark" || theme == "oleddark") {
$("#app").addClass("theme-dark"); $("#app").addClass("theme-dark");
if (platform_type == "cordova" && cordova.platformId == 'android' && typeof StatusBar !== 'undefined') { if (platform_type == "cordova" && cordova.platformId == 'android' && typeof StatusBar !== 'undefined') {
StatusBar.styleLightContent(); StatusBar.styleLightContent();
StatusBar.backgroundColorByHexString("#000000"); StatusBar.backgroundColorByHexString("#000000");
} }
} }
if (theme == "oleddark") {
$("#app").addClass("oled-burn-in");
} else {
$("#app").removeClass("oled-burn-in");
}
} }
function applyColorTheme() { function applyColorTheme() {
@ -122,6 +128,8 @@ function applyColorTheme() {
setAppTheme("dark"); setAppTheme("dark");
} else if (getStorage("apptheme") == "light") { } else if (getStorage("apptheme") == "light") {
setAppTheme("light"); setAppTheme("light");
} else if (getStorage("apptheme") == "oleddark") {
setAppTheme("oleddark");
} else { } else {
// automatic theme, default light // automatic theme, default light
if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") { if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") {

@ -752,7 +752,12 @@ var routes = [
value: "light", value: "light",
label: "Light", label: "Light",
selected: getStorage("apptheme") == "light" selected: getStorage("apptheme") == "light"
} },
{
value: "oleddark",
label: "Dark with anti-burn-in",
selected: getStorage("apptheme") == "oleddark"
},
] ]
}, },
{ {

Loading…
Cancel
Save