New: Setting to force black background and white blank page in night …

…mode
ollm · May 14, 2024 · e7190f7 · e7190f7
1 parent 17e2e29
commit e7190f7
Show file tree

Hide file tree

Showing 26 changed files with 104 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Shortcut to go next/prev chapter [`9cda79e`](https://github.com/ollm/OpenComic/commit/9cda79e24dab1116c734e5a3773f74e13071c219)
 - Option to rotate horizontal images [`20258ff`](https://github.com/ollm/OpenComic/commit/20258ff0ebf57d5a8064dec821ce745b7d9242a3)
+- Setting to force black background and white blank page in night mode
 
 ##### 🐛 Bug Fixes
 

diff --git a/languages/ca.json b/languages/ca.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "Iniciar OpenComic a l'inici"
 		},
 		"theme": {
-			"systemNightMode": "Canviar al mode nit/clar quan el sistema operatiu ho faci"
+			"systemNightMode": "Canviar al mode nit/clar quan el sistema operatiu ho faci",
+			"nightModeBlackBackground": "Utilitzar el color negre com a fons en el mode nit",
+			"nightModeWhiteBlankPage": "Mostra les pàgines en blanc de color blanc en el mode nit"
 		},
 		"releases": {
 			"main": "Comprovar noves versions",

diff --git a/languages/cs.json b/languages/cs.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/de.json b/languages/de.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/en.json b/languages/en.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "Start OpenComic on startup"
 		},
 		"theme": {
-			"systemNightMode": "Switch to night/light mode when the OS does it"
+			"systemNightMode": "Switch to night/light mode when the OS does it",
+			"nightModeBlackBackground": "Use black as background in night mode",
+			"nightModeWhiteBlankPage": "Show blank pages white in night mode"
 		},
 		"releases": {
 			"main": "Check for new versions",

diff --git a/languages/es.json b/languages/es.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "Iniciar OpenComic al inicio"
 		},
 		"theme": {
-			"systemNightMode": "Cambiar al modo noche/claro cuando el sistema operativo lo haga"
+			"systemNightMode": "Cambiar al modo noche/claro cuando el sistema operativo lo haga",
+			"nightModeBlackBackground": "Utilizar el color negro como fondo en el modo noche",
+			"nightModeWhiteBlankPage": "Mostrar las páginas en blanco de color blanco en el modo noche"
 		},
 		"releases": {
 			"main": "Comprobar nuevas versiones",

diff --git a/languages/fr.json b/languages/fr.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/hu.json b/languages/hu.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/it.json b/languages/it.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/ja.json b/languages/ja.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/ko.json b/languages/ko.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "업데이트 확인",

diff --git a/languages/pt-br.json b/languages/pt-br.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/ru.json b/languages/ru.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/languages/sv.json b/languages/sv.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "Starta OpenComic vid uppstart"
 		},
 		"theme": {
-			"systemNightMode": "Växla mellan nattläge och ljust läge när operativsystemet gör det"
+			"systemNightMode": "Växla mellan nattläge och ljust läge när operativsystemet gör det",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "Sök efter nya versioner",

diff --git a/languages/th.json b/languages/th.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "เปิด OpenComic เมื่อเริ่มต้นระบบ"
 		},
 		"theme": {
-			"systemNightMode": "สลับโหมดกลางวัน/กลางคืนตามระบบ"
+			"systemNightMode": "สลับโหมดกลางวัน/กลางคืนตามระบบ",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "ตรวจหาเวอร์ชั่นใหม่",

diff --git a/languages/vi.json b/languages/vi.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "Khởi động OpenComic khi bật máy"
 		},
 		"theme": {
-			"systemNightMode": "Chuyển sang chế độ sáng/tối theo hệ điều hành"
+			"systemNightMode": "Chuyển sang chế độ sáng/tối theo hệ điều hành",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "Kiểm tra phiên bản mới",

diff --git a/languages/zh-hans.json b/languages/zh-hans.json
@@ -234,7 +234,9 @@
 			"startOnStartup": "开机启动时打开 OpenComic"
 		},
 		"theme": {
-			"systemNightMode": "当操作系统执行此操作时切换到夜间/明亮模式"
+			"systemNightMode": "当操作系统执行此操作时切换到夜间/明亮模式",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "检查新版本",

diff --git a/languages/zh-hant.json b/languages/zh-hant.json
@@ -234,7 +234,9 @@
 			"startOnStartup": ""
 		},
 		"theme": {
-			"systemNightMode": ""
+			"systemNightMode": "",
+			"nightModeBlackBackground": "",
+			"nightModeWhiteBlankPage": ""
 		},
 		"releases": {
 			"main": "",

diff --git a/scripts/dom.js b/scripts/dom.js
@@ -1814,9 +1814,26 @@ function nightMode(force = null)
 		storage.updateVar('config', 'nightMode', true);
 	}
 
+	nightModeConfig(_app);
+
 	titleBar.setColors();
 }
 
+function nightModeConfig(_app = false)
+{
+	_app = _app || document.querySelector('.app');
+
+	if(config.nightModeBlackBackground)
+		_app.classList.add('night-mode-black-background');
+	else
+		_app.classList.remove('night-mode-black-background');
+
+	if(config.nightModeWhiteBlankPage)
+		_app.classList.add('night-mode-white-blank-page');
+	else
+		_app.classList.remove('night-mode-white-blank-page');
+}
+
 // Show the comic context menu
 async function comicContextMenu(path, fromIndex = true, fromIndexNotMasterFolders = true, folder = false, gamepad = false)
 {	
@@ -2269,6 +2286,7 @@ module.exports = {
 	goPrevComic: goPrevComic,
 	orderBy: orderBy,
 	nightMode: nightMode,
+	nightModeConfig: nightModeConfig,
 	addComicButtons: addComicButtons,
 	comicContextMenu: comicContextMenu,
 	removeComic: removeComic,

diff --git a/scripts/storage.js b/scripts/storage.js
@@ -1,4 +1,4 @@
-var changes = 80; // Update this if readingPagesConfig is updated
+var changes = 81; // Update this if readingPagesConfig is updated
 
 var readingPagesConfig = {
 	readingConfigName: '',
@@ -79,6 +79,8 @@ var storageDefault = {
 		theme: 'material-design',
 		themeColor: 'blue',
 		nightMode: false,
+		nightModeBlackBackground: false,
+		nightModeWhiteBlankPage: false,
 		systemNightMode: false,
 		zoomFactor: 1,
 		foldersFirst: true,

diff --git a/scripts/theme.js b/scripts/theme.js
@@ -54,8 +54,6 @@ function systemNightMode()
 
 function start()
 {
-	events.events();
-
 	if(!handlebarsContext.themeColors)
 	{
 		let themeColors = [];
@@ -93,6 +91,8 @@ function start()
 	template.loadContentRight('theme.content.right.html', true);
 
 	gamepad.updateBrowsableItems('theme');
+
+	events.events();
 }
 
 module.exports = {

diff --git a/templates/body.html b/templates/body.html
@@ -4,7 +4,7 @@
 	<span style="font-weight: 500;">Roboto</span>
 	<i class="material-icon">add</i>
 </div>
-<div class="app {{config.themeColor}}{{#if config.nightMode}} night-mode{{/if}}">
+<div class="app {{config.themeColor}}{{#if config.nightMode}} night-mode{{/if}}{{#if config.nightModeBlackBackground}} night-mode-black-background{{/if}}{{#if config.nightModeWhiteBlankPage}} night-mode-white-blank-page{{/if}}">
 	<div class="title-bar"></div>
 	<div class="bar-header">
 

diff --git a/templates/theme.content.right.html b/templates/theme.content.right.html
@@ -1,6 +1,22 @@
 <div class="settings-body body-medium">
 	<h1 class="display-medium">{{language.global.theme}}</h1>
 
+	<div class="menu-simple-text gamepad-item">
+		<span>{{language.settings.theme.nightModeBlackBackground}}</span>
+		<div class="switch{{#if config.nightModeBlackBackground}} a{{/if}}" on="settings.set('nightModeBlackBackground', true); dom.nightModeConfig();" off="settings.set('nightModeBlackBackground', false); dom.nightModeConfig();">
+			<div></div>
+			<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
+		</div>
+	</div>
+
+	<div class="menu-simple-text gamepad-item">
+		<span>{{language.settings.theme.nightModeWhiteBlankPage}}</span>
+		<div class="switch{{#if config.nightModeWhiteBlankPage}} a{{/if}}" on="settings.set('nightModeWhiteBlankPage', true); dom.nightModeConfig();" off="settings.set('nightModeWhiteBlankPage', false); dom.nightModeConfig();">
+			<div></div>
+			<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
+		</div>
+	</div>
+
 	<div class="theme-page">
 		{{#each themeColors}}
 

diff --git a/themes/material-design/reading.css b/themes/material-design/reading.css
@@ -198,6 +198,11 @@
 	background-color: var(--md-sys-color-background);
 }
 
+.night-mode-white-blank-page .reading-body .r-img.blank > div > *, .night-mode-white-blank-page .reading-lens .r-img.blank > div > *
+{
+	background-color: #fff;
+}
+
 .reading-body .r-img > oc-img, .reading-lens .r-img > oc-img
 {
 	overflow: hidden;

diff --git a/themes/material-design/theme-page.css b/themes/material-design/theme-page.css
@@ -5,6 +5,7 @@
 	justify-content: space-between;
 	padding-bottom: 60px;
 	padding: 0px 24px;
+	margin-top: 40px;
 }
 
 .theme-page-item

diff --git a/themes/material-design/theme.css b/themes/material-design/theme.css
@@ -656,6 +656,12 @@ body .app
 	display: none;
 }
 
+body .app.night-mode.night-mode-black-background
+{
+	--md-sys-color-background: #000;
+	--md-sys-color-surface: #000;
+}
+
 body .app > *
 {
 	color: var(--md-sys-color-on-surface);