title: How to allow user to toggle between color themes in a Django
body: <p>So I'm working on a Django website and want visitors to the site to click the theme they want. I was able to do it with pure Html/css and Javascipt but now that im moving everything in Django it's not working. I think maybe its my path set up. Fisrt the code in my index.html</p>
  <pre><code>&lt;h5 style=&quot;text-align: center;line-height: 0;&quot;&gt;Personalize Theme&lt;/h5&gt;
  
                  {% load static %}
                  &lt;script type=&quot;text/javascript&quot; src=&quot;../../static/pythonicThinking/script.js&quot;&gt;&lt;/script&gt;
                  &lt;div id=&quot;theme-options-wrapper&quot;&gt;
                      &lt;div data-mode=&quot;light&quot; id=&quot;light-mode&quot; class=&quot;theme-dot&quot; &gt;&lt;/div&gt;
                      &lt;div data-mode=&quot;blue&quot; id=&quot;blue-mode&quot; class=&quot;theme-dot&quot;&gt;&lt;/div&gt;
                      &lt;div data-mode=&quot;green&quot; id=&quot;green-mode&quot; class=&quot;theme-dot&quot;&gt;&lt;/div&gt;
                      &lt;div data-mode=&quot;purple&quot; id=&quot;purple-mode&quot; class=&quot;theme-dot&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;p id=&quot;settings-note&quot;&gt;*Theme settings will be saved for&lt;br&gt;your next visit&lt;/p&gt;
              &lt;/div&gt;
  </code></pre>
  <p>the javacript file <code> </code></p>
  <pre><code>console.log('Its working')
  
  let theme = localStorage.getItem('theme')
  
  if(theme == null){
  setTheme('light')
  }else{
  setTheme(theme)
  }
  
  let themeDots = document.getElementsByClassName('theme-dot')
  
  
  for (var i=0; themeDots.length &gt; i; i++){
  themeDots[i].addEventListener('click', function(){
      let mode = this.dataset.mode
      console.log('Option clicked:', mode)
      setTheme(mode)
  })
  }
  
  function setTheme(mode){
  if(mode == 'light'){
      document.getElementById('theme-style').href = 'default.css'
  }
  
  if(mode == 'blue'){
      document.getElementById('theme-style').href = 'blue.css'
  }
  
  if(mode == 'green'){
      document.getElementById('theme-style').href = 'green.css'
  }
  
  if(mode == 'purple'){
      document.getElementById('theme-style').href = 'purple.css'
  }
  
  localStorage.setItem('theme', mode)
  }
  </code></pre>
  <p>the setting.py file</p>
  <pre><code># Static files (CSS, JavaScript, Images)
  
  
  STATIC_URL = '/static/'
  MEDIA_URL = '/media/'
  
  
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  
  STATICFILES_DIRS = (
  os.path.join(BASE_DIR, 'static'),
  )
  </code></pre>
  <p>the urls.py file
  from django.views.generic import RedirectView</p>
  <pre><code>urlpatterns = [
  path('admin/', admin.site.urls),
  path('pythonicthinking/', include('pythonicthinking.urls')),
  ]
  urlpatterns += [
  path('', RedirectView.as_view(url='pythonicthinking/', permanent=True)),
  ]
  
  urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  <p>the views.py file
  from django.shortcuts import render</p>
  <pre><code>def home(request):
  return render(request, 'pythonicthinking/index.html')
  </code></pre>
  <p>My defualt css is working but when I try to click the buttons to change I get this error</p>
  <pre><code>Refused to apply style from 'http://127.0.0.1:8000/pythonicthinking/purple.css' because its 
  MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is 
  enabled
  </code></pre>