Add OLED burn-in protection theme (makes some high-contrast stuff dark at cost of readability)
This commit is contained in:
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…
x
Reference in New Issue
Block a user