Как мне заставить мой 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

Ps. Я использую Django, если это имеет значение