feat(#47): add more ways to insert theme-switcher #49

Merged

Moiety merged 1 commit from refs/pull/49/head into next

2025-11-04 17:03:34 +01:00

Moiety commented

2025-11-04 17:01:03 +01:00

(Migrated from codeberg.org)

Adds an “insertBefore” and “prepend” method for the theme switcher.

With insertBefore you can add the theme switcher before a specific child:

const themeSwitcherSettings = {
    target: {
        container: ".footer-content", // what is the parent element of the element you’re targetting?
        "method": "insertBefore",
        "child": ".footer-copy" // which element should the switcher be inserted before?
    }
}

<footer>
    <div class="footer">
        <nav aria-label="footer">...</nav>
        <!-- this is where the theme switcher will be inerted -->
        <p class="footer-copy">...</p>
    </div>
</footer>

With prepend you can add the theme switcher as the first child of a container:

const themeSwitcherSettings = {
    target: {
        container: ".footer-content",
        "method": "prepend"
    }
}

<footer>
    <div class="footer">
        <!-- this is where the theme switcher will be inerted -->
        <nav aria-label="footer">...</nav>
        <p class="footer-copy">...</p>
    </div>
</footer>

Adds an “insertBefore” and “prepend” method for the theme switcher. With `insertBefore` you can add the theme switcher before a specific child: ```JS const themeSwitcherSettings = { target: { container: ".footer-content", // what is the parent element of the element you’re targetting? "method": "insertBefore", "child": ".footer-copy" // which element should the switcher be inserted before? } } ``` ```HTML <footer> <div class="footer"> <nav aria-label="footer">...</nav>  <p class="footer-copy">...</p> </div> </footer> ``` With `prepend` you can add the theme switcher as the first child of a container: ```JS const themeSwitcherSettings = { target: { container: ".footer-content", "method": "prepend" } } ``` ```HTML <footer> <div class="footer">  <nav aria-label="footer">...</nav> <p class="footer-copy">...</p> </div> </footer> ```