[SNIPPET] dark/light mode detection and toggle

[Steve]

Detects a users default dark/light mode from a users web browser/device settings with a toggle function to override web browser/device settings.

great for style authors this is..

These instructions are set in stone and only for prosilver, do not think it will work any other way.

open overall_header.html
find:

Code: Select all

<title>{% if UNREAD_NOTIFICATIONS_COUNT %}({{ UNREAD_NOTIFICATIONS_COUNT }}) {% endif %}{% if not S_VIEWTOPIC and not S_VIEWFORUM %}{{ SITENAME }} - {% endif %}{% if S_IN_MCP %}{{ lang('MCP') }} - {% elseif S_IN_UCP %}{{ lang('UCP') }} - {% endif %}{{ PAGE_TITLE }}{% if S_VIEWTOPIC or S_VIEWFORUM %} - {{ SITENAME }}{% endif %}</title>

after add:

Code: Select all

<script>
/*
	* @copyright (c) 2024, Steve, https://ios.steven-clark.tech/phpbb/
*/
(() =>  {
	try {
		const theme = localStorage.getItem('phpbb-theme-mode');
		if (theme === 'dark') {
			document.documentElement.classList.add('phpbb-dark-mode');
		} else if (theme === 'light') {
			document.documentElement.classList.add('phpbb-light-mode');
		}
	} catch (e) {}
})();
</script>

open overall_footer.html
find:

Code: Select all

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->

after add:

Code: Select all

<script>
/*
	* @copyright (c) 2024, Steve, https://ios.steven-clark.tech/phpbb/
*/
(($) => { 'use strict';

const phpbbRoot = $('#phpbb').length;
if (!phpbbRoot) { return; }

	$('#toggle-theme').on('click', function() {
		const html = $('html');
		const isDark = html.hasClass('phpbb-dark-mode');

		if (isDark) {
			html.removeClass('phpbb-dark-mode').addClass('phpbb-light-mode');
			localStorage.setItem('phpbb-theme-mode', 'light');
		} else {
			html.removeClass('phpbb-light-mode').addClass('phpbb-dark-mode');
			localStorage.setItem('phpbb-theme-mode', 'dark');
		}
	});

})(jQuery);
</script>

open navbar_header.html
find:

Code: Select all

	<!-- IF S_REGISTERED_USER -->
		<!-- EVENT navbar_header_user_profile_prepend -->

before add:

Code: Select all

		
		{% if not S_IS_BOT %}
		<li class="rightside" data-skip-responsive="true">
			<button id="toggle-theme" data-toggle-theme-mode="true">
				<i class="icon fa-tint toggle-theme fa-fw" aria-hidden="true"></i>
			</button>
		</li>	
		{% endif %}
		

open colors.css:
find:

Code: Select all

/*
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

Before add:

Code: Select all

/*
	* Steve, 
	* Tweaks,
	* not Twerks
	* @copyright (c) 2024, Steve, https://ios.steven-clark.tech/phpbb/
*/
/* light mode (users browser setting) */
:root {
	--html: #F5F7FA;
}

/* dark mode (users browser setting) */
@media (prefers-color-scheme: dark) {
	html:not(.phpbb-dark-mode):not(.phpbb-light-mode) {
		--html: #2a2a2a;
	}
}

/* dark mode */
html.phpbb-dark-mode {
	--html: #2a2a2a;
}

/* light Mode (Do not change!!) */
html.phpbb-light-mode { }

find:

Code: Select all

html, body {
	color: #536482;
	background-color: #F5F7FA;
}

find:

Code: Select all

	background-color: #F5F7FA;

replace with:

Code: Select all

	background-color: var(--html);
	transition: all 0.3s ease;

now once that works you can expand on the dark/light mode colors.

Let's change the wrap color.

find:

Code: Select all

:root {
	--html: #F5F7FA;

after add:

Code: Select all

	--wrap: #FFF;

find:

Code: Select all

	html:not(.phpbb-dark-mode):not(.phpbb-light-mode) {
		--html: #2a2a2a;

after add:

Code: Select all

		--wrap: #000;

find:

Code: Select all

html.phpbb-dark-mode {
	--html: #2a2a2a;

after add:

Code: Select all

		--wrap: #000;

find:

Code: Select all

.wrap {
	background-color: #FFF;

find:

Code: Select all

	background-color: #FFF;

place with:

Code: Select all

background-color: var(--wrap);

//----------------------------
find:

Code: Select all

/* light Mode (Do not change!!) */
html.phpbb-light-mode { }

after add:

Code: Select all

Don't be so daft, look at the comment ;)

what you should have so far.

Code: Select all

/*
	* Steve, 
	* Tweaks,
	* not Twerks
	* @copyright (c) 2024, Steve, https://ios.steven-clark.tech/phpbb/
*/
/* light mode (users browser setting) */
:root {
	--html: #F5F7FA;
	--wrap: #FFF;
}

/* dark mode (users browser setting) */
@media (prefers-color-scheme: dark) {
	html:not(.phpbb-dark-mode):not(.phpbb-light-mode) {
		--html: #2a2a2a;
		--wrap: #000;		
	}
}

/* dark mode */
html.phpbb-dark-mode {
	--html: #2a2a2a;
	--wrap: #000;	
}

/* light Mode (Do not change!!) */
html.phpbb-light-mode { }

light-mode.png

dark-mode.png

//--------------------------------------
Bonus Tips(free forever):
e.g,

Code: Select all

var(--wrap);

can be used as global color in that file, or you could rename the var to for e.g., --flat-back/ var(--flat-back); and use it h1 etc...

https://www.w3schools.com/cssref/sel_root.php
https://www.w3schools.com/css/css3_variables.asp

[Stoker]

Looks great!
Toggle works fine. However the autodetect browser settings doesnt