[GUIDE] dark/light mode detection and toggle

[Steve]

This guide shows you how to build a new style that detects a users OS theme/ mode and adds a toggle button to use dark/light modes or set back to OS default.

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

upload the folder prosilver

steve-phpbb-theme-mode.zip

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

{% INCLUDEJS 'theme-mode/theme-mode-header.js' %}

find:

Code: Select all

</head>

before add:

Code: Select all

<link href="{T_THEME_PATH}/mode/toggle.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet"

open overall_footer.html
find:

Code: Select all

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

after add:

Code: Select all

{% INCLUDEJS 'theme-mode/theme-mode-footer.js' %}

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" class="theme-toggle">
				<span class="theme-icon"></span>
			</button>
		</li>	
		{% endif %}
		

//~~~~~~~~~~~~
Now lets start building are colors up.

we can start with the wrap seems appropriate as is its the next door.

open prosilver/theme/mode/toggle.css

find:

Code: Select all

		--html: #2a2a2a;

after add:

Code: Select all

		--wrap: #000;

find:

Code: Select all

		--html: #2a2a2a;

after add:

Code: Select all

		---wrap: #000;

find:

Code: Select all

	--html: #F5F7FA;

after add:

Code: Select all

	--wrap: #FFF;

find:

Code: Select all

html, body {
	background-color: var(--html);
	transition: all 0.5s ease;
}

after add:

Code: Select all

.wrap {
    background-color: var(--wrap);
}

//--------------------------------------
Bonus Tips(free forever):

the variables can now be used globaly in that file.

more variables can easily be created--flat-back/ var(--flat-back); and use it for h1, .forumtitle etc...

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

light

light-mode.png

dark

dark-mode.png

os setting

[Stoker]

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

[Steve]

1st post updated with new version.

[Stoker]

This one is nice. Love it!
But man, its almost like creating a new style.
Changing different background, text, span, a etc

[Steve]

This guide shows you how to build a new style that detects a users OS theme/ mode