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 {
--f7-page-bg-color: #020202;
--f7-list-bg-color: #020202;
--f7-popover-bg-color: #020202;
--f7-sheet-bg-color: #020202;
--f7-page-bg-color: #111;
--f7-list-bg-color: #111;
--f7-popover-bg-color: #111;
--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.backgroundColorByHexString("#E0E0E0");
}
} else if (theme == "dark") {
} else if (theme == "dark" || theme == "oleddark") {
$("#app").addClass("theme-dark");
if (platform_type == "cordova" && cordova.platformId == 'android' && typeof StatusBar !== 'undefined') {
StatusBar.styleLightContent();
StatusBar.backgroundColorByHexString("#000000");
}
}
if (theme == "oleddark") {
$("#app").addClass("oled-burn-in");
} else {
$("#app").removeClass("oled-burn-in");
}
}
function applyColorTheme() {
@ -122,6 +128,8 @@ function applyColorTheme() {
setAppTheme("dark");
} else if (getStorage("apptheme") == "light") {
setAppTheme("light");
} else if (getStorage("apptheme") == "oleddark") {
setAppTheme("oleddark");
} else {
// automatic theme, default light
if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") {

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

Loading…
Cancel
Save