Center Align the Theme Toggle Button?

[Tx0actical]

I want to align the theme toggle button at the center of the header instead of beside the label. Here's what I mean:

Not here:

But here:

Is there a way to achieve this?

[c2tz]

Ok then I think you've found a solution on your blog because I see the theme logo completely on the right. The solution is to create a layout and move the <div class="logo-switches"> between the two div. However, this poses a problem because on smaller smartphone screens the logo is not very visible and not very accessible. I don't think I can provide any further solution to this question.

[Tx0actical]

Thanks! I created 2 theme toggle buttons (with the same id). Then added some JS to remove one from the DOM (depending upon window size, I selected 616px) to avoid using two elements with the same id, avoid two toggle buttons, and address the scaling issues on mobile platforms. It works and here's the custom JS, I added in <project>/layouts/partials/header.html:

        const hideNonNeededElement = () => {
            const windowWidth = window.innerWidth;

            const toggleThemeButton = document.getElementsByClassName("logo-switches")[0];
            const leftContainer = document.getElementsByClassName("logo-swtich-display-a")[0]
            const rightContainer = document.getElementsByClassName("logo-swtich-display-b")[0]

            if (windowWidth < 616) {
                
                if(leftContainer.childNodes.length === 0) {
                    leftContainer.append(toggleThemeButton);
                }
                rightContainer.childNodes?.[0]?.remove();
            } else {
                if(rightContainer.childNodes.length === 0) {
                    rightContainer.append(toggleThemeButton);
                }
                leftContainer.childNodes?.[0]?.remove();
            }
        }

        window.addEventListener("resize", hideNonNeededElement);
        window.addEventListener("load", hideNonNeededElement);

[c2tz]

Ah ok that works too but personally I'd do it in HTML CSS with two buttons when media queries is active the other is in display off and otherwise if media queries is disabled I alternate.

I'd rather avoid JS for this kind of thing, which doesn't really require it. But everyone's free to do as they please. As long as it works

[Tx0actical]

Yeah... I tried that but the thing is that with this approach one of the buttons didn't work while in normal mode (so it was basically useless) and the other one worked only when the window was resized. So I came up with this hacky solution. Maybe I did something wrong but I'm not sure.