javascript - Angularjs切换开关无法通过该站点工作

Question

我正在为我的网站制作一个深色主题，并使用放置在 footer 中的拨动开关来完成。问题是它适用于主页，但不适用于其他页面。另外我如何确保如果按钮已打开，那么当用户更改页面时它不会重置或关闭

<footer class="ev-md-container ev-footer ev-dark-bg">
<div class="grad-container rm-grad-pad">
    <div class="row">
        <div class="col l6 s12">
            <h5 class="white-text">EvalAI</h5>
            <p class="text-light-gray">Evaluating state of the art in AI</p>
            <ul class="inline-list">
                <li><a class="text-light-gray" href="https://github.com/Cloud-CV/EvalAI" target="_blank"><i class="fa fa-github"></i></a></li>
                <li><a class="text-light-gray" href="https://twitter.com/project_cloudcv" target="_blank"><i class="fa fa-twitter"></i></a></li>
                <li>
                <div class="switch">
                    <label class="darktheme_text">
                        <input  type="checkbox" id="switch" name="theme">
                        <span class="lever"></span>
                        Dark Mode
                    </label>
                </div>
                </li>
                <!-- <li><a class="text-light-gray" href="#!"><i class="fa fa-facebook" target="_blank"></i></a></li> -->
            </ul>
            <p><a class="text-white">© CloudCV {{year}}</a></p>
        </div>
        <div class="col l4 offset-l0 s12">
            <h5 class="white-text">Links</h5>
            <ul>
                <li><a class="text-light-gray" ui-sref="about-us">About Us</a></li>
                <li><a class="text-light-gray" ui-sref="contact-us">Contact Us</a></li>
                <li><a class="text-light-gray" ui-sref="our-team">Our Team</a></li>
                <li><a class="text-light-gray" ui-sref="get-involved">Get Involved</a></li>
                <li><a class="text-light-gray" ui-sref="privacy_policy">Privacy Policy</a></li>
                <li><a class="text-light-gray" href="https://cloudcv.org">CloudCV Website</a></li>
            </ul>
        </div>
        <div class="col l2 s12">
            <h5 class="white-text">Stats</h5>
            <ul>
                <li>
                   <a class="github-button" href="https://github.com/Cloud-CV/EvalAI" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Cloud-CV/EvalAI on GitHub">Star</a>
                 </li>
                <li>
                   <a class="github-button" href="https://github.com/Cloud-CV/EvalAI/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork Cloud-CV/EvalAI on GitHub">Fork</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</footer>
<script>
const body = document.body;
var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() {
if(this.checked) {
    trans()
    body.classList.add('dark-theme');

} else {
    trans()
    body.classList.remove('dark-theme');
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
    document.documentElement.classList.remove('transition')
}, 1000)
}
</script>

标签： javascriptjqueryhtmlangularjs