So, I set up Roundo and Roundo Dark so they share templates but have separate CSS files. I then added this code to my header_welcomeblock_member template:
<a href="{$mybb->settings['bburl']}/?theme=7&my_post_key={$mybb->post_code}" title="Switch to light mode"><i class="fas fa-lightbulb fa-lg"></i></a>
<a href="{$mybb->settings['bburl']}/?theme=8&my_post_key={$mybb->post_code}" title="Switch to dark mode"> <i class="fas fa-moon fa-lg"></i></a>
It works nice but I noticed that if you are in a thread and click dark mode, it changes instantly but goes back to the forum index. If you are on the index when you switch, you really don't notice it. My code also lacks indication of what theme you are currently viewing (different color icon per selection)
Is there a trick to making it switch instantly without losing your place in the forums? This is my URL but you'll have to register and login in to try it.
www.alpharomeo15.org
(2023-07-12, 04:22 PM)RocketFoot Wrote: [ -> ]So, I set up Roundo and Roundo Dark so they share templates but have separate CSS files. I then added this code to my header_welcomeblock_member template:
<a href="{$mybb->settings['bburl']}/?theme=7&my_post_key={$mybb->post_code}" title="Switch to light mode"><i class="fas fa-lightbulb fa-lg"></i></a>
<a href="{$mybb->settings['bburl']}/?theme=8&my_post_key={$mybb->post_code}" title="Switch to dark mode"> <i class="fas fa-moon fa-lg"></i></a>
It works nice but I noticed that if you are in a thread and click dark mode, it changes instantly but goes back to the forum index. If you are on the index when you switch, you really don't notice it. My code also lacks indication of what theme you are currently viewing (different color icon per selection)
Is there a trick to making it switch instantly without losing your place in the forums? This is my URL but you'll have to register and login in to try it.
www.alpharomeo15.org
Any ideas on this question? I know it's not a major issue but it would be nice to function properly!
There's a location variable
{$theme_redirect_url['location']} defined in
https://github.com/mybb/mybb/blob/d84d4d...1022-L1042 for the default theme selector, but it doesn't look like it would be available when rendering the header.
It could be defined earlier with a simple plugin (to avoid modifying core files), or adjusted with JavaScript in this way, or similar:
<a href="?theme=2&my_post_key={$mybb->post_code}" class="switch-theme">Theme 2</a>
<a href="?theme=3&my_post_key={$mybb->post_code}" class="switch-theme">Theme 3</a>
<script>
const documentParams = new URLSearchParams(document.location.search);
for (const link of document.querySelectorAll('.switch-theme')) {
const params = new URLSearchParams(
new URL(link.href).search
);
for (const [key, value] of documentParams) {
if (!params.has(key)) params.append(key, value);
}
link.href = '?' + params.toString();
}
</script>
(HTML links with
switch-theme class have a hardcoded
theme and
my_post_key parameters, and the rest - like thread IDs - is added dynamically)
If you have more experience with JS, you may be interested in
https://github.com/dvz/mybb-dvzThemeOptions.
(2023-07-14, 01:26 PM)Devilshakerz Wrote: [ -> ]There's a location variable {$theme_redirect_url['location']} defined in https://github.com/mybb/mybb/blob/d84d4d...1022-L1042 for the default theme selector, but it doesn't look like it would be available when rendering the header.
It could be defined earlier with a simple plugin (to avoid modifying core files), or adjusted with JavaScript in this way, or similar:
<a href="?theme=2&my_post_key={$mybb->post_code}" class="switch-theme">Theme 2</a>
<a href="?theme=3&my_post_key={$mybb->post_code}" class="switch-theme">Theme 3</a>
<script>
const documentParams = new URLSearchParams(document.location.search);
for (const link of document.querySelectorAll('.switch-theme')) {
const params = new URLSearchParams(
new URL(link.href).search
);
for (const [key, value] of documentParams) {
if (!params.has(key)) params.append(key, value);
}
link.href = '?' + params.toString();
}
</script>
(HTML links with switch-theme class have a hardcoded theme and my_post_key parameters, and the rest - like thread IDs - is added dynamically)
If you have more experience with JS, you may be interested in https://github.com/dvz/mybb-dvzThemeOptions.
Thank you for the reply!
It looks like this may be above my level! I was hoping it be a simple conditional that I was missing but I may have to leave it as is for now. Maybe I can figure out how to change the color of the icon of the theme that is active. (I have a light bulb and a moon icon in my header)
Thanks again for taking the time to guide me!
@Devilshakerz
UPDATE! I actually got the code you provided to work! It will zoom to the top of the page but it does stay on the same page when you switch!!
Now, is there any way I can add something to change the color of the icon that is active depending on what theme you have clicked? It should default to light and change the dark theme icon when you click it.
<a href="{$mybb->settings['bburl']}/?theme=7&my_post_key={$mybb->post_code}" class="switch-theme" title="Switch to light mode"><i class="fas fa-lightbulb fa-lg"></i></a>
<a href="{$mybb->settings['bburl']}/?theme=8&my_post_key={$mybb->post_code}" class="switch-theme" title="Switch to dark mode"><i class="fas fa-moon fa-lg"></i></a>
<script>
const documentParams = new URLSearchParams(document.location.search);
for (const link of document.querySelectorAll('.switch-theme')) {
const params = new URLSearchParams(
new URL(link.href).search
);
for (const [key, value] of documentParams) {
if (!params.has(key)) params.append(key, value);
}
link.href = '?' + params.toString();
}
</script>
[
attachment=46154]