I'm looking to give users the option to change the theme based on specific criteria:
- For Anonymous Users:
- Check localStorage and use default if empty, otherwise use localStorage value
- For Authenticated Users:
- Check localStorage and use user profile setting if empty
Everything is working well for Anonymous users, but I'm unsure how to handle it for Authenticated users when checking localStorage.
{% if user.is_authenticated %}
<body class="theme-{{user.profile.theme}}">
// How can I check localStorage.getItem('theme') and use {{user.profile.theme}} if null?
{% else %}
<body>
<script>
var theme = localStorage.getItem('theme')
if(theme == 'light'){
document.body.classList.add("theme-light")
} else if (theme == 'dark'){
document.body.classList.add("theme-dark")
} else {
document.body.classList.add("theme-light")
}
</script>
{% endif %}