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