Label Switch

by TigerAsks

HTML

<input id="app-version-checkbox" type="checkbox">
<label for="app-version-checkbox" id="app-version"></label>

CSS

:root {
    --release-version: "R0.0.0";
    --build-version: "v0.0.0";
}

/* https://css-tricks.com/swapping-out-text-five-different-ways/#aa-css-only-way */
#app-version {
    position: relative;
}
#app-version-checkbox {
    display: none;
}
#app-version-checkbox:checked + #app-version::after {
    content: var(--build-version);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}

JavaScript

//TODO: get versions from a config file
let releaseVersion = "R1.1.0"
let buildVersion = "v1.32.0"

window.onload = () => {
    const root = document.querySelector(":root");
        root.style.setProperty("--release-version", JSON.stringify(releaseVersion))
        root.style.setProperty("--build-version", JSON.stringify(buildVersion))
    
    //cannot change label text with CSS
    document.querySelector("#app-version").innerHTML = releaseVersion
}