[GUIDE] dark/light mode detection and toggle - PhpBB3 BBCodes

[GUIDE] dark/light mode detection and toggle

12 posts

1
2
Next

[GUIDE] dark/light mode detection and toggle

Post by Steve » 28 Aug 2025, 16:40

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

You do not have the required permissions to view the files attached to this post.

Last edited by Steve on 29 Aug 2025, 12:36, edited 7 times in total.

[SNIPPET] dark/light mode detection and toggle

Post by Stoker » 29 Aug 2025, 09:01

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

[GUIDE] dark/light mode detection and toggle

Post by Steve » 29 Aug 2025, 12:27

1st post updated with new version.

You do not have the required permissions to view the files attached to this post.

[GUIDE] dark/light mode detection and toggle

Post by Stoker » 30 Aug 2025, 08:25

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

[GUIDE] dark/light mode detection and toggle

Post by Steve » 30 Aug 2025, 08:34

Steve wrote: 28 Aug 2025, 16:40
This guide shows you how to build a new style that detects a users OS theme/ mode

[GUIDE] dark/light mode detection and toggle

Post by Stoker » Yesterday, 06:56

This tiny piece of css is all you need to light/dark toggle

Code: Select all

@media (prefers-color-scheme: dark) {
  html:not(.phpbb-light-mode) {
    background: #0b0e14;
    filter: invert(1) hue-rotate(180deg) saturate(0.9) contrast(0.95);
  }
}

html.phpbb-dark-mode {
  background: #0b0e14;
  filter: invert(1) hue-rotate(180deg) saturate(0.9) contrast(0.95);
}

html.phpbb-dark-mode img,
html.phpbb-dark-mode video,
html.phpbb-dark-mode iframe,
html.phpbb-dark-mode canvas,
html.phpbb-dark-mode .site_logo,
html.phpbb-dark-mode .avatar,
html.phpbb-dark-mode .emoji,
html.phpbb-dark-mode .codebox,
html.phpbb-dark-mode pre,
html.phpbb-dark-mode .syntaxhighlighter,

@media (prefers-color-scheme: dark) {
  html:not(.phpbb-light-mode) img,
  html:not(.phpbb-light-mode) video,
  html:not(.phpbb-light-mode) iframe,
  html:not(.phpbb-light-mode) canvas,
  html:not(.phpbb-light-mode) .site_logo,
  html:not(.phpbb-light-mode) .avatar,
  html:not(.phpbb-light-mode) .emoji,
  html:not(.phpbb-light-mode) .codebox,
  html:not(.phpbb-light-mode) pre,
  html:not(.phpbb-light-mode) .syntaxhighlighter {
    filter: invert(1) hue-rotate(180deg) saturate(1.1) contrast(1.05);
  }
}

html.phpbb-dark-mode .headerbar,
html.phpbb-dark-mode .forabg,
html.phpbb-dark-mode .forumbg,
@media (prefers-color-scheme: dark) {
  html:not(.phpbb-light-mode) .headerbar,
  html:not(.phpbb-light-mode) .forabg,
  html:not(.phpbb-light-mode) .forumbg {
    background-image: none !important;
    background-color: #102238 !important;
  }
}

Its not the most pretty solution, but it will work.

Then we have the more pretty +1000 lines solution.
Much better looking

Code: Select all

/*
	* Steve, 
	* Tweaks,
	* not Twerks
	* @copyright (c) 2024, Steve, https://ios.steven-clark.tech/phpbb/
*/
:root {
	--html: #F5F7FA;
	--wrap: #FFFFFF;
	--text: #536482;
	--text-inverse: #FFFFFF;
	--h1: #FFFFFF;
	--h2: #28313F;
	--h3: #115098;
	--hr: #FFFFFF;
	--hr-top: #CCCCCC;
	--border: #E6E9ED;
	
	--link: #105289;
	--link-hover: #D31141;
	--link-inverse: #FFFFFF;
	--link-inverse-hover: #A8D8FF;
	--postlink: #368AD2;
	--postlink-visited: #5D8FBD;
	--postlink-hover: #0D4473;
	--postlink-hover-bg: #D0E4F6;
	--arrow-hover: #368AD2;
	--top-icon: #999999;

	--brand-ice: #6ACEFF;
	--brand-primary: #12A3EB;
	--brand-deep: #0076B1;
	--navbar-bg: #CADCEB;

	--panel-bg: #ECF1F3;
	--panel-text: #28313F;
	--bg1: #ECF3F7;
	--bg2: #E1EBF2;
	--bg3: #CADCEB;
	--ucprowbg: #DCDEE2;
	--fieldsbg: #E7E8EA;

	--table-head-text: #FFFFFF;
	--table-row-border: #BFC1CF;
	--table-row-hover-bg: #CFE1F6;
	--table-row-hover-text: #000000;
	--table-td-text: #536482;
	--table-td-border-top: #FAFAFA;
	--table-body-th-border-bottom: #000000;
	--table-body-th-text: #333333;
	--table-body-th-bg: #FFFFFF;

	--content-text: #333333;
	--content-h2: #115098;
	--content-border: #CCCCCC;
	--sep: #1198D9;

	--icon-blue: #196db5;
	--icon-green: #1b9A1B;
	--icon-red: #BC2A4D;
	--icon-orange: #FF6600;
	--icon-bluegray: #536482;
	--icon-gray: #777777;
	--icon-lightgray: #999999;
	--icon-black: #333333;

	--jumpbox-cat-bg: #0076B1;
	--jumpbox-cat-bg-hover: #12A3EB;
	--jumpbox-cat-text: #FFFFFF;
	--jumpbox-forum-bg: #E1EBF2;
	--jumpbox-forum-bg-hover: #F6F4D0;
	--jumpbox-sub-bg: #E1EBF2;
	--jumpbox-sub-bg-hover: #F1F8FF;

	--copyright: #555555;
	--error: #BC2A4D;
	--reported-bg: #F7ECEF;
	--reported-bg-hover: #ECD5D8;
	--rules-bg: #ECD5D8;
	--rules-text: #BC2A4D;
	--post-notice-bg: #ECD5D8;

	--forums-grad-start: #D2E0EB;
	--forums-grad-end: #EEF5F9;

	--topiclist-text: #4C5D77;
	--row-border-top: #FFFFFF;
	--row-border-bottom: #00608F;
	--row-hover-bg: #F6F4D0;
	--row-hover-dd-border: #CCCCCC;
	--list-header-text: #FFFFFF;

	--posthilit-bg: #F3BFCC;
	--posthilit-text: #BC2A4D;

	--signature-border-top: #CCCCCC;
	--notice-border-top: #CCCCCC;

	--quote-bg: #EBEADD;
	--quote-border: #DBDBCE;
	--quote-nested-bg: #EFEED9;
	--quote-nested2-bg: #EBEADD;

	--codebox-bg: #FFFFFF;
	--codebox-border: #C9D2D8;
	--codebox-rule: #CCCCCC;
	--code-text: #2E8B57;

	--attachbox-bg: #FFFFFF;
	--attachbox-border: #C9D2D8;
	--attachbox-p: #666666;
	--attachbox-stats: #666666;
	--attach-image-border: #999999;
	--thumbnail-border: #666666;
	--thumbnail-bg: #FFFFFF;
	--thumbnail-hover-bg: #EEEEEE;
	--thumbnail-hover-border: #368AD2;

	--polls-border-top: #DCDEE2;
	--polls-text: #666666;
	--polls-voted-text: #000000;
	--pollbar1: #AA2346;
	--pollbar1-border: #74162C;
	--pollbar2: #BE1E4A;
	--pollbar2-border: #8C1C38;
	--pollbar3: #D11A4E;
	--pollbar3-border: #AA2346;
	--pollbar4: #E41653;
	--pollbar4-border: #BE1E4A;
	--pollbar5: #F81157;
	--pollbar5-border: #D11A4E;

	--postprofile-text: #666666;
	--postprofile-border: #FFFFFF;
	--pm-postprofile-border: #DDDDDD;
	--postprofile-strong: #000000;
	--profile-warnings: #BC2A4D;

	--btn-border: #C7C3BF;
	--btn-bg-start: #FFFFFF;
	--btn-bg-end: #E9E9E9;
	--btn-text: #D31141;
	--btn-text-secondary: #8f8f8f;
	--btn-hover-border: #C7C3BF;
	--btn-hover-bg-start: #E9E9E9;
	--btn-hover-bg-end: #FFFFFF;
	--btn-focus-border: #0A8ED0;
	--btn-focus-text: #0F4987;

	--pager-bg: #ECEDEE;
	--pager-border: #B4BAC0;
	--pager-text: #5C758C;
	--pager-ellipsis: #000000;
	--pager-active-bg: #4692BF;
	--pager-active-border: #4692BF;
	--pager-active-text: #FFFFFF;
	--pager-hover-bg: #368AD2;
	--pager-hover-border: #368AD2;
	--pager-hover-text: #FFFFFF;

	--search-input-border: #C7C3BF;
	--search-header-shadow: #0075B0;
	--search-result-hover-bg: #CFE1F6;

	--alert-bg: #FFFFFF;
	--alert-border: #999999;
	--darken: #000000;
	--loading-bg: #000000;
	--dropdown-divider: #DCDCDC;
	--dropdown-bg: #FFFFFF;
	--dropdown-border: #B9B9B9;
	--dropdown-shadow: rgba(0,0,0,0.2);
	--dropdown-header-grad-start: #F1F8FF;
	--dropdown-header-grad-end: #CADCEB;
	--dropdown-pointer: #B9B9B9;
	--dropdown-pointer-inner: #FFFFFF;
	--dropdown-ext-pointer-inner: #F1F8FF;
	--dropdown-item-border-top: #B9B9B9;
	--dropdown-item-hover-bg: #CFE1F6;
	--dropdown-item-hover-text: #000000;

	--notif-time: #4C5D77;
	--notif-badge-bg: #D31141;
	--notif-badge-text: #FFFFFF;
}

/* Auto dark mode (browser prefers dark) unless user forced a mode */
@media (prefers-color-scheme: dark) {
	html:not(.phpbb-dark-mode):not(.phpbb-light-mode) {
		/* base */
		--html: #00001a;
		--wrap: #4d4d4d60;
		--text: #cfd6e4;
		--text-inverse: #0a0f18;
		--h1: #f3f6fb;
		--h2: #e7ecf5;
		--h3: #7cc7ff;
		--hr: #7cc1ff;
		--hr-top: #324252;
		--border: #2a3645;

		--link: #7cc1ff;
		--link-hover: #ff6685;
		--link-inverse: #0b1220;
		--link-inverse-hover: #bfe3ff;
		--postlink: #79b8ff;
		--postlink-visited: #9bbdf1;
		--postlink-hover: #cfe9ff;
		--postlink-hover-bg: #0f2236;
		--arrow-hover: #79b8ff;
		--top-icon: #a0a8b4;

		--brand-ice: #74c7ff;
		--brand-primary: #169ee6;
		--brand-deep: #0a5f8e;
		--navbar-bg: #1e2c3d;

		--panel-bg: #101725;
		--panel-text: #e7ecf5;
		--bg1: #0f1724;
		--bg2: #0c1420;
		--bg3: #132033;
		--ucprowbg: #182235;
		--fieldsbg: #1a273a;

		--table-head-text: #e6edf3;
		--table-row-border: #2a3645;
		--table-row-hover-bg: #152a42;
		--table-row-hover-text: #ffffff;
		--table-td-text: #cfd6e4;
		--table-td-border-top: #0b1320;
		--table-body-th-border-bottom: #334153;
		--table-body-th-text: #e0e6ef;
		--table-body-th-bg: #0f1724;

		--content-text: #e6edf3;
		--content-h2: #8ecbff;
		--content-border: #334153;
		--sep: #4aa9ff;

		--icon-blue: #6bb7ff;
		--icon-green: #5bd45b;
		--icon-red: #ff6b8f;
		--icon-orange: #ffa657;
		--icon-bluegray: #9fb0c8;
		--icon-gray: #9aa3ad;
		--icon-lightgray: #b7bfca;
		--icon-black: #e6edf3;

		--jumpbox-cat-bg: #0a5f8e;
		--jumpbox-cat-bg-hover: #169ee6;
		--jumpbox-cat-text: #e6edf3;
		--jumpbox-forum-bg: #0f1724;
		--jumpbox-forum-bg-hover: #1c2b42;
		--jumpbox-sub-bg: #0f1724;
		--jumpbox-sub-bg-hover: #142338;

		--copyright: #9aa3ad;
		--error: #ff6b8f;
		--reported-bg: #2a1420;
		--reported-bg-hover: #3a1b2b;
		--rules-bg: #3a1b2b;
		--rules-text: #ff6b8f;
		--post-notice-bg: #3a1b2b;

		--forums-grad-start: #1a2635;
		--forums-grad-end: #0f1724;

		--topiclist-text: #c2ccda;
		--row-border-top: #0c1220;
		--row-border-bottom: #0f3a59;
		--row-hover-bg: #1c2b42;
		--row-hover-dd-border: #314155;
		--list-header-text: #dfe7f3;

		--posthilit-bg: #3a2530;
		--posthilit-text: #ff6b8f;

		--signature-border-top: #2a3645;
		--notice-border-top: #2a3645;

		--quote-bg: #1b1e22;
		--quote-border: #2c3239;
		--quote-nested-bg: #20242a;
		--quote-nested2-bg: #1b1e22;

		--codebox-bg: #0d1117;
		--codebox-border: #1f2937;
		--codebox-rule: #2b3a4a;
		--code-text: #7bdc96;

		--attachbox-bg: #0f141a;
		--attachbox-border: #1f2a36;
		--attachbox-p: #a7b3c1;
		--attachbox-stats: #a7b3c1;
		--attach-image-border: #3a4656;
		--thumbnail-border: #3a4656;
		--thumbnail-bg: #0f141a;
		--thumbnail-hover-bg: #1a2330;
		--thumbnail-hover-border: #79b8ff;

		--polls-border-top: #2a3645;
		--polls-text: #a7b3c1;
		--polls-voted-text: #e6edf3;
		--pollbar1: #d24f7a;
		--pollbar1-border: #8e2d4d;
		--pollbar2: #e05282;
		--pollbar2-border: #a2395f;
		--pollbar3: #f05a8b;
		--pollbar3-border: #c24770;
		--pollbar4: #ff5e93;
		--pollbar4-border: #cc4a75;
		--pollbar5: #ff6a9a;
		--pollbar5-border: #d1557d;

		--postprofile-text: #a7b3c1;
		--postprofile-border: #0b1320;
		--pm-postprofile-border: #273446;
		--postprofile-strong: #e6edf3;
		--profile-warnings: #ff6b8f;

		--btn-border: #38465a;
		--btn-bg-start: #1a2331;
		--btn-bg-end: #141c27;
		--btn-text: #ff6b8f;
		--btn-text-secondary: #b6c2cf;
		--btn-hover-border: #405069;
		--btn-hover-bg-start: #1e2938;
		--btn-hover-bg-end: #172230;
		--btn-focus-border: #79b8ff;
		--btn-focus-text: #bfe3ff;

		--pager-bg: #1b2330;
		--pager-border: #334153;
		--pager-text: #c2ccda;
		--pager-ellipsis: #e6edf3;
		--pager-active-bg: #226b98;
		--pager-active-border: #226b98;
		--pager-active-text: #ffffff;
		--pager-hover-bg: #1c5e8d;
		--pager-hover-border: #1c5e8d;
		--pager-hover-text: #ffffff;

		--search-input-border: #334153;
		--search-header-shadow: #0a3c5f;
		--search-result-hover-bg: #152a42;

		--alert-bg: #0f1724;
		--alert-border: #334153;
		--darken: #000000;
		--loading-bg: #000000;
		--dropdown-divider: #2a3645;
		--dropdown-bg: #0f1724;
		--dropdown-border: #2a3645;
		--dropdown-shadow: rgba(0,0,0,0.5);
		--dropdown-header-grad-start: #0f2236;
		--dropdown-header-grad-end: #16283c;
		--dropdown-pointer: #2a3645;
		--dropdown-pointer-inner: #0f1724;
		--dropdown-ext-pointer-inner: #0f2236;
		--dropdown-item-border-top: #2a3645;
		--dropdown-item-hover-bg: #152a42;
		--dropdown-item-hover-text: #ffffff;

		--notif-time: #a7b3c1;
		--notif-badge-bg: #ff6b8f;
		--notif-badge-text: #0a0f18;
	}
}

/* Manual dark mode (toggle forces dark) */
html.phpbb-dark-mode {
	--html: #00001a;
	--wrap: #4d4d4d60;

	--text: #cfd6e4;
	--text-inverse: #0a0f18;
	--h1: #f3f6fb;
	--h2: #e7ecf5;
	--h3: #7cc7ff;
	--hr: #7cc1ff;
	--hr-top: #324252;
	--border: #2a3645;

	--link: #7cc1ff;
	--link-hover: #ff6685;
	--link-inverse: #0b1220;
	--link-inverse-hover: #bfe3ff;
	--postlink: #79b8ff;
	--postlink-visited: #9bbdf1;
	--postlink-hover: #cfe9ff;
	--postlink-hover-bg: #0f2236;
	--arrow-hover: #79b8ff;
	--top-icon: #a0a8b4;

	--brand-ice: #74c7ff;
	--brand-primary: #169ee6;
	--brand-deep: #0a5f8e;
	--navbar-bg: #1e2c3d;

	--panel-bg: #101725;
	--panel-text: #e7ecf5;
	--bg1: #0f1724;
	--bg2: #0c1420;
	--bg3: #132033;
	--ucprowbg: #182235;
	--fieldsbg: #1a273a;

	--table-head-text: #e6edf3;
	--table-row-border: #2a3645;
	--table-row-hover-bg: #152a42;
	--table-row-hover-text: #ffffff;
	--table-td-text: #cfd6e4;
	--table-td-border-top: #0b1320;
	--table-body-th-border-bottom: #334153;
	--table-body-th-text: #e0e6ef;
	--table-body-th-bg: #0f1724;

	--content-text: #e6edf3;
	--content-h2: #8ecbff;
	--content-border: #334153;
	--sep: #4aa9ff;

	--icon-blue: #6bb7ff;
	--icon-green: #5bd45b;
	--icon-red: #ff6b8f;
	--icon-orange: #ffa657;
	--icon-bluegray: #9fb0c8;
	--icon-gray: #9aa3ad;
	--icon-lightgray: #b7bfca;
	--icon-black: #e6edf3;

	--jumpbox-cat-bg: #0a5f8e;
	--jumpbox-cat-bg-hover: #169ee6;
	--jumpbox-cat-text: #e6edf3;
	--jumpbox-forum-bg: #0f1724;
	--jumpbox-forum-bg-hover: #1c2b42;
	--jumpbox-sub-bg: #0f1724;
	--jumpbox-sub-bg-hover: #142338;

	--copyright: #9aa3ad;
	--error: #ff6b8f;
	--reported-bg: #2a1420;
	--reported-bg-hover: #3a1b2b;
	--rules-bg: #3a1b2b;
	--rules-text: #ff6b8f;
	--post-notice-bg: #3a1b2b;

	--forums-grad-start: #1a2635;
	--forums-grad-end: #0f1724;

	--topiclist-text: #c2ccda;
	--row-border-top: #0c1220;
	--row-border-bottom: #0f3a59;
	--row-hover-bg: #1c2b42;
	--row-hover-dd-border: #314155;
	--list-header-text: #dfe7f3;

	--posthilit-bg: #3a2530;
	--posthilit-text: #ff6b8f;

	--signature-border-top: #2a3645;
	--notice-border-top: #2a3645;

	--quote-bg: #1b1e22;
	--quote-border: #2c3239;
	--quote-nested-bg: #20242a;
	--quote-nested2-bg: #1b1e22;

	--codebox-bg: #0d1117;
	--codebox-border: #1f2937;
	--codebox-rule: #2b3a4a;
	--code-text: #7bdc96;

	--attachbox-bg: #0f141a;
	--attachbox-border: #1f2a36;
	--attachbox-p: #a7b3c1;
	--attachbox-stats: #a7b3c1;
	--attach-image-border: #3a4656;
	--thumbnail-border: #3a4656;
	--thumbnail-bg: #0f141a;
	--thumbnail-hover-bg: #1a2330;
	--thumbnail-hover-border: #79b8ff;

	--polls-border-top: #2a3645;
	--polls-text: #a7b3c1;
	--polls-voted-text: #e6edf3;
	--pollbar1: #d24f7a;
	--pollbar1-border: #8e2d4d;
	--pollbar2: #e05282;
	--pollbar2-border: #a2395f;
	--pollbar3: #f05a8b;
	--pollbar3-border: #c24770;
	--pollbar4: #ff5e93;
	--pollbar4-border: #cc4a75;
	--pollbar5: #ff6a9a;
	--pollbar5-border: #d1557d;

	--postprofile-text: #a7b3c1;
	--postprofile-border: #0b1320;
	--pm-postprofile-border: #273446;
	--postprofile-strong: #e6edf3;
	--profile-warnings: #ff6b8f;

	--btn-border: #38465a;
	--btn-bg-start: #1a2331;
	--btn-bg-end: #141c27;
	--btn-text: #ff6b8f;
	--btn-text-secondary: #b6c2cf;
	--btn-hover-border: #405069;
	--btn-hover-bg-start: #1e2938;
	--btn-hover-bg-end: #172230;
	--btn-focus-border: #79b8ff;
	--btn-focus-text: #bfe3ff;

	--pager-bg: #1b2330;
	--pager-border: #334153;
	--pager-text: #c2ccda;
	--pager-ellipsis: #e6edf3;
	--pager-active-bg: #226b98;
	--pager-active-border: #226b98;
	--pager-active-text: #ffffff;
	--pager-hover-bg: #1c5e8d;
	--pager-hover-border: #1c5e8d;
	--pager-hover-text: #ffffff;

	--search-input-border: #334153;
	--search-header-shadow: #0a3c5f;
	--search-result-hover-bg: #152a42;

	--alert-bg: #0f1724;
	--alert-border: #334153;
	--darken: #000000;
	--loading-bg: #000000;
	--dropdown-divider: #2a3645;
	--dropdown-bg: #0f1724;
	--dropdown-border: #2a3645;
	--dropdown-shadow: rgba(0,0,0,0.5);
	--dropdown-header-grad-start: #0f2236;
	--dropdown-header-grad-end: #16283c;
	--dropdown-pointer: #2a3645;
	--dropdown-pointer-inner: #0f1724;
	--dropdown-ext-pointer-inner: #0f2236;
	--dropdown-item-border-top: #2a3645;
	--dropdown-item-hover-bg: #152a42;
	--dropdown-item-hover-text: #ffffff;

	--notif-time: #a7b3c1;
	--notif-badge-bg: #ff6b8f;
	--notif-badge-text: #0a0f18;
}

/* Manual light (keep empty – forces fallback to :root) */
html.phpbb-light-mode {}
html, body {
	background-color: var(--html);
	color: var(--text);
	transition: all 0.3s ease;
}
.wrap {
	background-color: var(--wrap);
	border-color: var(--border);
	transition: all 0.3s ease;
}
html, body {
	background-color: var(--html);
	color: var(--text);
	transition: background-color .3s ease, color .3s ease;
}
.wrap {
	background-color: var(--wrap);
	border-color: var(--border);
	transition: background-color .3s ease, border-color .3s ease;
}
h1 { color: var(--h1); }
h2 { color: var(--h2); }
h3 { color: var(--h3); border-bottom-color: var(--content-border); }

hr {
	border-color: var(--hr);
	border-top-color: var(--hr-top);
}
a { color: var(--link); transition: color .2s ease; }
a:hover { color: var(--link-hover); }
.forumbg .header a,
.forabg .header a,
li.header .row-item dt,
li.header dl dt,
li.header span.stats_info,
li.header .row-item dd,
li.header .row-item i,
th a { color: var(--link-inverse); }
.forumbg .header a:hover,
.forabg .header a:hover,
th a:hover { color: var(--link-inverse-hover); }
.dropdown-extended a.mark_read { background-color: var(--dropdown-bg); }
.postlink {
	border-bottom-color: var(--postlink);
	color: var(--postlink);
}
.postlink:visited {
	border-bottom-color: var(--postlink-visited);
	color: var(--postlink-visited);
}
.postlink:hover {
	background-color: var(--postlink-hover-bg);
	color: var(--postlink-hover);
}
.signature a,
.signature a:hover { background-color: transparent; }
.top i { color: var(--top-icon); }
.arrow-left:hover,
.arrow-right:hover { color: var(--arrow-hover); }
.wrap { border-color: var(--border); }
.headerbar,
.forumbg {
	color: var(--text-inverse);
	background-color: var(--brand-primary);
	background-image:
		linear-gradient(to bottom,
			var(--brand-ice) 0%,
			var(--brand-deep) 2px,
			var(--brand-primary) 92px,
			var(--brand-primary) 100%);
	background-repeat: repeat-x;
}
.forabg {
	background-color: var(--brand-deep);
	background-image:
		linear-gradient(to bottom,
			var(--brand-ice) 0%,
			var(--brand-primary) 2px,
			var(--brand-deep) 92px,
			var(--brand-deep) 100%);
	background-repeat: repeat-x;
}
.navbar { background-color: var(--navbar-bg); border: 1px solid var(--content-border); }
.panel {
	background-color: var(--panel-bg);
	color: var(--panel-text);
}
.post:target .content,
.post h3 a.first-unread,
.post:target h3 a { color: var(--content-text); }
.bg1 { background-color: var(--bg1); }
.bg2 { background-color: var(--bg2); }
.bg3 { background-color: var(--bg3); }
table.zebra-list tr:nth-child(odd) td,
ul.zebra-list li:nth-child(odd) { background-color: var(--bg1); }
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) { background-color: var(--bg2); }
.ucprowbg { background-color: var(--ucprowbg); }
.fieldsbg { background-color: var(--fieldsbg); }
ul.navlinks { border-top-color: var(--hr); }
table.table1 thead th { color: var(--table-head-text); }
table.table1 tbody tr { border-color: var(--table-row-border); }
table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
	background-color: var(--table-row-hover-bg);
	color: var(--table-row-hover-text);
}
table.table1 td { color: var(--table-td-text); }
table.table1 tbody td { border-top-color: var(--table-td-border-top); }
table.table1 tbody th {
	border-bottom-color: var(--table-body-th-border-bottom);
	color: var(--table-body-th-text);
	background-color: var(--table-body-th-bg);
}
table.info tbody th { color: var(--content-text); }
dl.details dt { color: var(--content-text); }
dl.details dd { color: var(--table-td-text); }
.sep { color: var(--sep); }
.icon.icon-blue, a:hover .icon.icon-blue { color: var(--icon-blue); }
.icon.icon-green, a:hover .icon.icon-green { color: var(--icon-green); }
.icon.icon-red, a:hover .icon.icon-red { color: var(--icon-red); }
.icon.icon-orange, a:hover .icon.icon-orange { color: var(--icon-orange); }
.icon.icon-bluegray, a:hover .icon.icon-bluegray { color: var(--icon-bluegray); }
.icon.icon-gray, a:hover .icon.icon-gray { color: var(--icon-gray); }
.icon.icon-lightgray, a:hover .icon.icon-lightgray { color: var(--icon-lightgray); }
.icon.icon-black, a:hover .icon.icon-black { color: var(--icon-black); }
.alert_close .icon:before { background-color: var(--dropdown-bg); }
.jumpbox .dropdown li { border-top-color: var(--content-border); }
.jumpbox-cat-link {
	background-color: var(--jumpbox-cat-bg);
	border-top-color: var(--jumpbox-cat-bg);
	color: var(--jumpbox-cat-text);
}
.jumpbox-cat-link:hover {
	background-color: var(--jumpbox-cat-bg-hover);
	border-top-color: var(--jumpbox-cat-bg-hover);
	color: var(--jumpbox-cat-text);
}
.jumpbox-forum-link { background-color: var(--jumpbox-forum-bg); }
.jumpbox-forum-link:hover { background-color: var(--jumpbox-forum-bg-hover); }
.jumpbox .dropdown .pointer-inner { border-color: var(--jumpbox-forum-bg) transparent; }
.jumpbox-sub-link { background-color: var(--jumpbox-sub-bg); }
.jumpbox-sub-link:hover { background-color: var(--jumpbox-sub-bg-hover); }
.copyright { color: var(--copyright); }
.error { color: var(--error); }

.reported { background-color: var(--reported-bg); }
li.reported:hover { background-color: var(--reported-bg-hover) !important; }
div.rules {
	background-color: var(--rules-bg);
	color: var(--rules-text);
}
p.post-notice { background-color: var(--post-notice-bg); background-image: none; }
ul.forums {
	background-color: var(--forums-grad-end);
	background-image: linear-gradient(to bottom, var(--forums-grad-start) 0%, var(--forums-grad-end) 100%);
}
ul.topiclist li { color: var(--topiclist-text); }
ul.topiclist dd { border-left-color: var(--dropdown-pointer-inner); }
.rtl ul.topiclist dd {
	border-right-color: var(--dropdown-pointer-inner);
	border-left-color: transparent;
}
li.row {
	border-top-color: var(--row-border-top);
	border-bottom-color: var(--row-border-bottom);
}
li.row strong { color: var(--content-text); }

li.row:hover { background-color: var(--row-hover-bg); }
li.row:hover dd { border-left-color: var(--row-hover-dd-border); }
.rtl li.row:hover dd {
	border-right-color: var(--row-hover-dd-border);
	border-left-color: transparent;
}
li.header dt,
li.header dd { color: var(--list-header-text); }
.postbody { color: var(--content-text); }
.content { color: var(--content-text); }

.content h2,
.panel h2 {
	color: var(--content-h2);
	border-bottom-color: var(--content-border);
}

dl.faq dt { color: var(--content-text); }
.posthilit {
	background-color: var(--posthilit-bg);
	color: var(--posthilit-text);
}
.signature { border-top-color: var(--signature-border-top); }
.notice { border-top-color: var(--notice-border-top); }
blockquote {
	background-color: var(--quote-bg);
	border-color: var(--quote-border);
}
blockquote blockquote { background-color: var(--quote-nested-bg); }
blockquote blockquote blockquote { background-color: var(--quote-nested2-bg); }
.codebox {
	background-color: var(--codebox-bg);
	border-color: var(--codebox-border);
}
.codebox p { border-bottom-color: var(--codebox-rule); }
.codebox code { color: var(--code-text); }
.attachbox {
	background-color: var(--attachbox-bg);
	border-color: var(--attachbox-border);
}
.pm-message .attachbox { background-color: var(--bg1); }
.attachbox dd { border-top-color: var(--attachbox-border); }
.attachbox p,
.attachbox p.stats { color: var(--attachbox-p); }
.attach-image img { border-color: var(--attach-image-border); }
dl.file dd,
dl.thumbnail dd { color: var(--attachbox-p); }
dl.thumbnail img {
	border-color: var(--thumbnail-border);
	background-color: var(--thumbnail-bg);
}
dl.thumbnail dt a:hover { background-color: var(--thumbnail-hover-bg); }
dl.thumbnail dt a:hover img { border-color: var(--thumbnail-hover-border); }
fieldset.polls dl {
	border-top-color: var(--polls-border-top);
	color: var(--polls-text);
}
fieldset.polls dl.voted { color: var(--polls-voted-text); }
fieldset.polls dd div { color: var(--text-inverse); }

.pollbar1 { background-color: var(--pollbar1); border-bottom-color: var(--pollbar1-border); border-right-color: var(--pollbar1-border); }
.pollbar2 { background-color: var(--pollbar2); border-bottom-color: var(--pollbar2-border); border-right-color: var(--pollbar2-border); }
.pollbar3 { background-color: var(--pollbar3); border-bottom-color: var(--pollbar3-border); border-right-color: var(--pollbar3-border); }
.pollbar4 { background-color: var(--pollbar4); border-bottom-color: var(--pollbar4-border); border-right-color: var(--pollbar4-border); }
.pollbar5 { background-color: var(--pollbar5); border-bottom-color: var(--pollbar5-border); border-right-color: var(--pollbar5-border); }
.postprofile {
	color: var(--postprofile-text);
	border-color: var(--postprofile-border);
}
.pm .postprofile { border-color: var(--pm-postprofile-border); }
.postprofile strong { color: var(--postprofile-strong); }
dd.profile-warnings { color: var(--profile-warnings); }
.button {
	border-color: var(--btn-border);
	color: var(--btn-text);
	background-color: var(--btn-bg-end);
	background-image: linear-gradient(to bottom, var(--btn-bg-start) 0%, var(--btn-bg-end) 100%);
	box-shadow: 0 0 0 1px var(--dropdown-pointer-inner) inset;
}
.button:hover,
.button:focus {
	border-color: var(--btn-focus-border);
	text-shadow: none;
	background-color: var(--btn-bg-start);
	background-image: linear-gradient(to bottom, var(--btn-hover-bg-start) 0%, var(--btn-hover-bg-end) 100%);
}
.button .icon,
.button-secondary { color: var(--btn-text-secondary); }
.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon { color: var(--btn-focus-border); }
.button-search:hover,
.button-search-end:hover { border-color: var(--btn-border); }
.caret { border-color: var(--dropdown-divider); }
.contact-icons a { border-color: var(--dropdown-divider); }
.contact-icons a:hover { background-color: var(--bg1); }
.pagination li a {
	background: var(--pager-bg);
	border-color: var(--pager-border);
	box-shadow: none;
	color: var(--pager-text);
}
.pagination li.ellipsis span {
	background: transparent;
	color: var(--pager-ellipsis);
}
.pagination li.active span {
	background: var(--pager-active-bg);
	border-color: var(--pager-active-border);
	color: var(--pager-active-text);
}
.pagination li a:hover,
.pagination li a:hover .icon,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: var(--pager-hover-bg);
	border-color: var(--pager-hover-border);
	color: var(--pager-hover-text);
	text-shadow: none;
}
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus { border-color: var(--search-input-border); }
.search-header { box-shadow: 0 0 10px var(--search-header-shadow); }
.search-results li:hover,
.search-results li.active { background-color: var(--search-result-hover-bg); }
.phpbb_alert {
	background-color: var(--alert-bg);
	border-color: var(--alert-border);
}
.darken { background-color: var(--darken); }
.loading_indicator {
	background-color: var(--loading-bg);
	background-image: url("./images/loading.gif");
}

.dropdown-extended ul li { border-top-color: var(--dropdown-item-border-top); }
.dropdown-extended ul li:hover {
	background-color: var(--dropdown-item-hover-bg);
	color: var(--dropdown-item-hover-text);
}
.dropdown-extended .header,
.dropdown-extended .footer {
	border-color: var(--dropdown-border);
	color: var(--content-text);
}
.dropdown-extended .footer { border-top-style: solid; border-top-width: 1px; }
.dropdown-extended .header {
	background-image: linear-gradient(to bottom, var(--dropdown-header-grad-start) 0%, var(--dropdown-header-grad-end) 100%);
}

.dropdown .pointer { border-color: var(--dropdown-pointer) transparent; }
.dropdown .pointer-inner { border-color: var(--dropdown-pointer-inner) transparent; }
.dropdown-extended .pointer-inner { border-color: var(--dropdown-ext-pointer-inner) transparent; }

.dropdown .dropdown-contents {
	background: var(--dropdown-bg);
	border-color: var(--dropdown-border);
	box-shadow: 1px 3px 5px var(--dropdown-shadow);
}
.dropdown-up .dropdown-contents { box-shadow: 1px 0 5px var(--dropdown-shadow); }
.dropdown li,
.dropdown li li { border-color: var(--dropdown-divider); }
.dropdown li.separator { border-color: var(--dropdown-divider); }
.notification_list p.notification-time { color: var(--notif-time); }
li.notification-reported strong,
li.notification-disapproved strong { color: var(--error); }
.badge { background-color: var(--notif-badge-bg); color: var(--notif-badge-text); }
.panel-container h3,
.panel-container hr,
.cp-menu hr { border-color: var(--content-border); }

.panel-container .panel li.row {
	border-bottom-color: var(--row-hover-dd-border);
	border-top-color: var(--row-border-top);
}
ul.cplist { border-top-color: var(--row-hover-dd-border); }

.panel-container .panel li.header dd,
.panel-container .panel li.header dt { color: var(--content-text); }
.panel-container table.table1 thead th {
	color: var(--content-text);
	border-bottom-color: var(--content-text);
}
.cp-main .pm-message {
	border-color: var(--codebox-border);
	background-color: var(--dropdown-bg);
}
.tabs .tab > a {
	background: var(--navbar-bg);
	color: var(--text);
}
.tabs .tab > a:hover {
	background: var(--bg1);
	color: var(--link-hover);
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
	background-image: linear-gradient(to bottom, var(--forums-grad-end) 0%, var(--navbar-bg) 100%);
	border-color: var(--navbar-bg);
	box-shadow: 0 1px 1px var(--dropdown-pointer-inner) inset;
	color: var(--content-text);
}
.tabs .activetab > a:hover { color: var(--content-text); }
.minitabs .tab > a { background-color: var(--bg2); }
.minitabs .activetab > a,
.minitabs .activetab > a:hover {
	background-color: var(--wrap);
	color: var(--content-text);
}
.responsive-tab .responsive-tab-link:before { border-color: var(--text); }
.responsive-tab .responsive-tab-link:hover:before { border-color: var(--link-hover); }
.navigation a {
	color: var(--content-text);
	background: linear-gradient(to right, color-mix(in srgb, var(--navbar-bg) 80%, #0000) 50%, var(--navbar-bg) 100%);
}
.rtl .navigation a {
	background: linear-gradient(to right, var(--navbar-bg) 50%, color-mix(in srgb, var(--navbar-bg) 80%, #0000) 100%);
}
.navigation a:hover {
	background: color-mix(in srgb, var(--navbar-bg) 85%, #000);
	color: var(--error);
}
.navigation .active-subsection a {
	background: var(--wrap);
	color: var(--link-hover);
}
.panel-container h2 { color: var(--content-text); }
.panel-container .panel { background-color: var(--wrap); }
.cp-main .pm { background-color: var(--dropdown-bg); }
.cp-mini { background-color: var(--bg1); }
dl.mini dt { color: var(--topiclist-text); }
.current { color: var(--content-text) !important; }
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour { border-left-color: var(--error); border-right-color: var(--error); }
.pmlist li.pm_marked_colour, .pm_marked_colour { border-color: var(--icon-orange); }
.pmlist li.pm_replied_colour, .pm_replied_colour { border-color: var(--navbar-bg); }
.pmlist li.pm_friend_colour, .pm_friend_colour { border-color: var(--postlink-visited); }
.pmlist li.pm_foe_colour, .pm_foe_colour { border-color: var(--icon-black); }
.gallery label { background: var(--dropdown-bg); border-color: var(--content-border); }
.gallery label:hover { background-color: var(--bg1); }
select {
	border-color: var(--content-text);
	background-color: var(--table-td-border-top);
	color: var(--content-text);
}
label { color: var(--topiclist-text); }
option.disabled-option { color: graytext; }
dd label { color: var(--content-text); }
fieldset.fields1 { background-color: transparent; }
fieldset dl:hover dt label { color: var(--content-text); }
fieldset.fields2 dl:hover dt label { color: inherit; }
fieldset.quick-login input.inputbox { background-color: var(--bg1); }
.message-box textarea { color: var(--content-text); }
.message-box textarea.drag-n-drop { outline-color: color-mix(in srgb, var(--content-text) 50%, transparent); }
.message-box textarea.drag-n-drop-highlight { outline-color: color-mix(in srgb, var(--link) 50%, transparent); }
.inputbox {
	background-color: var(--dropdown-bg);
	border-color: var(--btn-border);
	color: var(--content-text);
}
.inputbox:hover { border-color: var(--link); }
.inputbox:focus { border-color: var(--link); }
.inputbox:-moz-placeholder {
	color: var(--content-text);
}

.inputbox::-webkit-input-placeholder {
	color: var(--content-text);
}
.inputbox:focus:-moz-placeholder {
	color: transparent;
}
.inputbox:focus::-webkit-input-placeholder {
	color: transparent;
}
a.button1, input.button1, input.button3, a.button2, input.button2 {
	color: var(--content-text);
	background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-bg-start) 80%, #0000) 0%, var(--btn-bg-end) 100%);
}
a.button1, input.button1 { border-color: var(--content-text); }
input.button3 { background-image: none; }
a.button2, input.button2, input.button3 { border-color: var(--content-text); }
a.button1, a.button2 { color: var(--content-text); }

a.button1:hover, input.button1:hover,
a.button2:hover, input.button2:hover, input.button3:hover {
	border-color: var(--link-hover);
	color: var(--link-hover);
	background-image: linear-gradient(to bottom, var(--btn-hover-bg-start) 0%, var(--btn-hover-bg-end) 100%);
}
input.button1:focus, input.button2:focus, input.button3:focus {
	border-color: var(--btn-focus-border);
	color: var(--btn-focus-text);
}
input.disabled { color: var(--icon-gray); }

/* Toggle */
#toggle-theme {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}
#toggle-theme:focus,
#toggle-theme:active,
#toggle-theme:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
}
/* Firefox inner focus ring */
#toggle-theme::-moz-focus-inner { border: 0; }

[GUIDE] dark/light mode detection and toggle

Post by cisco007 » Yesterday, 13:21

now, lets make an extension! on it

[GUIDE] dark/light mode detection and toggle

Post by Stoker » Yesterday, 13:47

cisco007 wrote: Yesterday, 13:21 now, lets make an extension! on it

We need an extra event in overall_header.html
The two other edits can be done in an ext

[GUIDE] dark/light mode detection and toggle

Post by cisco007 » Yesterday, 16:22

the event can be in the breadcrumbs overall_header_breadcrumbs_after.html something like:

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 %}
{% endif %}

or what other event you taking about?

[GUIDE] dark/light mode detection and toggle

Post by Stoker » Yesterday, 17:13

Im talking about the script that is inserted in overall header.
There is no event for that one

12 posts

1
2
Next

Return to “Snippets”