javascript - 如何让我的 JS 在不同的 CSS 文件之间切换？

Question

我的 Javascript 看起来像这样：

document.addEventListener('DOMContentLoaded', () => {
  const themeStylesheet = document.getElementById('theme');
    const storedTheme = localStorage.getItem('theme');
    if(storedTheme){
      themeStylesheet.href = storedTheme;
    }
    const themeToggle = document.getElementById('theme-toggle');
    themeToggle.addEventListener('click', () => {
      // if it's light -> go dark
      if(themeStylesheet.href.includes('light')){
        themeStylesheet.href = '../css/dark-theme.css';
        themeToggle.innerText = 'Switch to light mode';
      } else {
        // if it's dark -> go light
        themeStylesheet.href = '../css/light-theme.css';
        themeToggle.innerText = 'Switch to dark mode';
      }
      // save the preference to localStorage
      localStorage.setItem('theme',themeStylesheet.href)  
  })
})

它应该切换不同的 css 文件，但找不到它们。我的文件树如下所示：

app/
  static/
    myapp/
      css/
        style.css
        light-theme.css
        dark-theme.css
      js/
        main.js

附言。如果这有所作为，我正在使用 Django

标签： javascriptcss