Ability to set default theme style (#10)

SthephanShinkufag · Sep 21, 2023 · 21e0b04 · 21e0b04
1 parent 3ce0142
commit 21e0b04
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 119 deletions.
diff --git a/css/atomboard.css b/css/atomboard.css
@@ -1,40 +1,4 @@
-/* ==[Main rules]========================================================================================== */
-
-:root {
-	--button-bg: #e9e9ed;
-	--button-bg-active: #acacac;
-	--button-bg-hover: #f1f1f1;
-	--code-bg: rgba(27,31,35,0.07);
-	--code-color: #000;
-	--description-color: #71819f;
-	--fieldset-border: #9f9f9f;
-	--filititle-color: #506a81;
-	--focus: #4d87c4;
-	--highlighted-bg: #d4daf0;
-	--highlighted-border: #00f;
-	--hr-bg: linear-gradient(90deg, #eee, #7a95c1, #eee);
-	--html-bg: #eee;
-	--html-color: #34343f;
-	--inputs-bg: #fff;
-	--inputs-border: 1px solid #808080;
-	--inputs-color: #000;
-	--link-color: #0f73c8;
-	--link-button-bg: linear-gradient(to bottom, #c9d4e6, #577dae);
-	--link-button-bg-active: #435e82;
-	--link-button-bg-hover: #5f83bb;
-	--link-button-color: #fff;
-	--link-hover: #dd0000;
-	--navigation-bg: linear-gradient(to top, #c1d3fb, #375a88);
-	--navigation-link-border: #c0ccd7;
-	--poster-opacity: 1;
-	--postername-color: #438ad7;
-	--pre-bg: rgba(255,255,255,0.4);
-	--pre-color: inherit;
-	--reply-bg: #ddd;
-	--reply-border: #ccc;
-	--table-border: #8a97a4;
-	--table-th-bg: #b0e0e6;
-}
+/* ==[ Themes ]============================================================================================ */
 
 html[data-theme="Dark"] {
 	--button-bg: #2f3846;
@@ -73,6 +37,44 @@ html[data-theme="Dark"] {
 	--posteruid-filter: invert(100%);
 }
 
+html[data-theme="Light"] {
+	--button-bg: #e9e9ed;
+	--button-bg-active: #acacac;
+	--button-bg-hover: #f1f1f1;
+	--code-bg: rgba(27,31,35,0.07);
+	--code-color: #000;
+	--description-color: #71819f;
+	--fieldset-border: #9f9f9f;
+	--filititle-color: #506a81;
+	--focus: #4d87c4;
+	--highlighted-bg: #d4daf0;
+	--highlighted-border: #00f;
+	--hr-bg: linear-gradient(90deg, #eee, #7a95c1, #eee);
+	--html-bg: #eee;
+	--html-color: #34343f;
+	--inputs-bg: #fff;
+	--inputs-border: 1px solid #808080;
+	--inputs-color: #000;
+	--link-color: #0f73c8;
+	--link-button-bg: linear-gradient(to bottom, #c9d4e6, #577dae);
+	--link-button-bg-active: #435e82;
+	--link-button-bg-hover: #5f83bb;
+	--link-button-color: #fff;
+	--link-hover: #dd0000;
+	--navigation-bg: linear-gradient(to top, #c1d3fb, #375a88);
+	--navigation-link-border: #c0ccd7;
+	--poster-opacity: 1;
+	--postername-color: #438ad7;
+	--pre-bg: rgba(255,255,255,0.4);
+	--pre-color: inherit;
+	--reply-bg: #ddd;
+	--reply-border: #ccc;
+	--table-border: #8a97a4;
+	--table-th-bg: #b0e0e6;
+}
+
+/* ==[ Common rules ]====================================================================================== */
+
 :focus-visible {
 	outline: 2px solid var(--focus);
 }
@@ -222,20 +224,6 @@ body:not(.access-enabled) .button-manage {
 	border-radius: 8px;
 }
 
-code {
-	padding: 0.2em 0.4em;
-	margin: 0;
-	background-color: var(--code-bg);
-	color: var(--code-color);
-	border-radius: 3px;
-	font-size: 85%;
-}
-
-del {
-	-moz-text-decoration-color: red;
-	text-decoration-color: red;
-}
-
 #delform > table {
 	margin-bottom: 3px;
 }
@@ -315,24 +303,6 @@ del {
 	filter: var(--posteruid-filter);
 }
 
-pre {
-	padding: 5px 5px 4px 5px;
-	margin: 3px 0;
-	overflow-x: auto;
-	max-width: 1150px;
-	border: 1px dotted #808080;
-	border-radius: 4px;
-	background: var(--pre-bg);
-	color: var(--pre-color);
-	font-size: 85%;
-	line-height: 1.45;
-	clear: both;
-}
-
-pre + br {
-	display: none;
-}
-
 .reflink {
 	display: inline-flex;
 	font-weight: bold;
@@ -384,15 +354,6 @@ pre + br {
 	color: black;
 }
 
-.spoiler {
-	background: #bbb;
-	color: #bbb;
-}
-
-.spoiler:hover {
-	color: #333;
-}
-
 .thumb {
 	border: none;
 	float: left;
@@ -416,6 +377,49 @@ pre + br {
 	color: #800000;
 }
 
+/* ==[ Posts text formatting ]============================================================================= */
+
+code {
+	padding: 0.2em 0.4em;
+	margin: 0;
+	background-color: var(--code-bg);
+	color: var(--code-color);
+	border-radius: 3px;
+	font-size: 85%;
+}
+
+del {
+	-moz-text-decoration-color: red;
+	text-decoration-color: red;
+}
+
+pre {
+	padding: 5px 5px 4px 5px;
+	margin: 3px 0;
+	overflow-x: auto;
+	max-width: 1150px;
+	border: 1px dotted #808080;
+	border-radius: 4px;
+	background: var(--pre-bg);
+	color: var(--pre-color);
+	font-size: 85%;
+	line-height: 1.45;
+	clear: both;
+}
+
+pre + br {
+	display: none;
+}
+
+.spoiler {
+	background: #bbb;
+	color: #bbb;
+}
+
+.spoiler:hover {
+	color: #333;
+}
+
 .underline {
 	text-decoration: underline;
 }
@@ -425,6 +429,33 @@ pre + br {
 	color: #789922;
 }
 
+/* ==[ Like post button ]================================================================================== */
+
+.like-container {
+	height: 16px;
+	cursor: pointer;
+}
+
+.like-counter {
+	vertical-align: top;
+	color: #ff5b9c;
+}
+
+.like-disabled {
+	color: #bac1c8;
+}
+
+.like-enabled {
+	color: #ff8cb9;
+}
+
+.like-icon > svg {
+	width: 12px;
+	height: 12px;
+	margin-top: 1px;
+	fill: currentColor;
+}
+
 /* ==[ Postform ]========================================================================================== */
 
 #captchaimage {
@@ -575,33 +606,6 @@ button:active, input[type="submit"]:active {
 	cursor: pointer;
 }
 
-/* ==[ Like post button ]================================================================================== */
-
-.like-container {
-	height: 16px;
-	cursor: pointer;
-}
-
-.like-counter {
-	vertical-align: top;
-	color: #ff5b9c;
-}
-
-.like-disabled {
-	color: #bac1c8;
-}
-
-.like-enabled {
-	color: #ff8cb9;
-}
-
-.like-icon > svg {
-	width: 12px;
-	height: 12px;
-	margin-top: 1px;
-	fill: currentColor;
-}
-
 /* ==[ Mobile devices ]==================================================================================== */
 
 @media only screen and (max-width: 770px) {

diff --git a/imgboard.php b/imgboard.php
@@ -16,14 +16,19 @@
 /* ==[ Utils ]============================================================================================= */
 
 function fancyDie($message) {
-	die('<head>
+	die('<!DOCTYPE html>
+
+<html data-theme="' . ATOM_THEME . '">
+<head>
 	<link rel="stylesheet" type="text/css" href="/' . ATOM_BOARD . '/css/atomboard.css?2023091900">
 </head>
 <body align="center">
 	<br>
-	<div class="reply" style="display: inline-block; font-size: 1.25em;">' . $message . '</div>
-	<br><br>
-	- <a href="javascript: window.history.go(-1);">Click here to go back</a> -
+	<div class="reply" style="display: inline-block; padding: 8px 20px; font-size: 1.25em;">' .
+		$message . '</div>
+	<br>
+	<hr>
+	<a class="link-button" href="javascript: window.history.go(-1);" title="Return to board">Return</a>
 </body>');
 }
 

diff --git a/inc/html.php b/inc/html.php
@@ -12,7 +12,7 @@
 function pageHeader() {
 	return '<!DOCTYPE html>
 
-<html>
+<html data-theme="' . ATOM_THEME . '">
 <head>
 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
 	<meta http-equiv="cache-control" content="max-age=0">
@@ -593,7 +593,7 @@ function buildPage($htmlPosts, $parent, $pages = 0, $thispage = 0) {
 	// Build page's body
 	return pageHeader() . '<body class="tinyib atomboard">' .
 		pageWrapper(ATOM_BOARD_DESCRIPTION, $isInThread) .
-		(ATOM_HTML_TOP_INFO ? ATOM_HTML_TOP_INFO . '
+		(ATOM_HTML_INFO_TOP ? ATOM_HTML_INFO_TOP . '
 		<hr>
 		' : '') .
 		buildPostForm($parent) . '
@@ -613,9 +613,9 @@ function buildPage($htmlPosts, $parent, $pages = 0, $thispage = 0) {
 				</tr>
 			</tbody>
 		</table>' .
-		(ATOM_HTML_BOTTOM_INFO ? '
+		(ATOM_HTML_INFO_BOTTOM ? '
 		<hr>
-		' . ATOM_HTML_BOTTOM_INFO : '') .
+		' . ATOM_HTML_INFO_BOTTOM : '') .
 		pageFooter($isInThread);
 }
 

diff --git a/js/atomboard.js b/js/atomboard.js
@@ -1,9 +1,6 @@
 var highlightedUID = null;
 var selectedText = '';
 var settings = {};
-var defaultSettings = {
-	themeStyle: 'Dark'
-};
 
 function $q(path, rootEl) {
 	return (rootEl || document.body).querySelector(path);
@@ -285,7 +282,7 @@ function main() {
 
 	// Set theme style
 	if (!settings.themeStyle) {
-		settings.themeStyle = defaultSettings.themeStyle;
+		settings.themeStyle = document.documentElement.dataset.theme;
 		saveSettings();
 	}
 	document.documentElement.dataset.theme = settings.themeStyle;

diff --git a/settings.default.php b/settings.default.php
@@ -13,15 +13,17 @@
 // Timezone (see https://secure.php.net/manual/en/timezones.php - e.g. 'America/Los_Angeles')
 define('ATOM_TIMEZONE', 'UTC');
 // Specify your code at the top of pages
-define('ATOM_HTML_TOP_INFO', '');
+define('ATOM_HTML_INFO_TOP', '');
 // Specify your code at the bottom of pages
-define('ATOM_HTML_BOTTOM_INFO', '');
+define('ATOM_HTML_INFO_BOTTOM', '');
 // Specify your navigation links to be added at the top and the bottom of the page
 define('ATOM_HTML_NAVIGATION', '
 			<a class="navigation-link" href="/" title="Main page">Home</a>
 			<span class="navigation-separator"></span>
 			<a class="navigation-link" href="/' . ATOM_BOARD . '/" title="' . ATOM_BOARD_DESCRIPTION . '">' .
 				ATOM_BOARD . '</a>');
+// Default theme style. Values: 'Dark', 'Light'
+define('ATOM_THEME', 'Dark');
 
 /* ==[ Administration staff ]============================================================================== */
 // Administrator password. Administrator has full access to the board