pablo/shoppy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode switch

Browse Source
This commit is contained in:
Pablo Moreno
2024-11-23 19:33:23 +01:00
parent 3c9f28c5fd
commit b3c786847b
6 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -157,7 +157,7 @@ data/
.vscode/
static/
/static/
*.db
shop/templates/components/generic/navbar.html
+8 -7
View File
@@ -44,6 +44,7 @@
<!-- Right side -->
<div class="relative flex items-center lg:space-x-2">
{% include 'components/theme-switch.html' %}
<!-- Show/Hide cart -->
<button hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
id="myCartDropdownButton1"
@@ -57,7 +58,7 @@
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7H7.312"/>
</svg>
<span class="hidden sm:flex">{% translate 'Carrito' %}</span>
<span class="sm:flex">{% translate 'Carrito' %}</span>
<svg class="hidden sm:flex w-4 h-4 text-gray-900 dark:text-white ms-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -305,22 +306,22 @@
class="bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 hidden px-4 mt-4">
<ul class="text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3">
<li>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Home</a>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
</li>
<li>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Best Sellers</a>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Más vendidos' %}</a>
</li>
<li>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Gift Ideas</a>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ideas de regalo' %}</a>
</li>
<li>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Games</a>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Juegos' %}</a>
</li>
<li>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Electronics</a>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Electrónica' %}</a>
</li>
<li>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">Home & Garden</a>
<a href="#" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ofertas del día' %}</a>
</li>
</ul>
</div>
shop/templates/shop/index.html
-1
View File
@@ -3,7 +3,6 @@
{% block main %}
{% include 'components/generic/navbar.html' %}
{% include 'components/theme-switch.html' %}
<div>
{% include 'components/products/list_filters.html' %}
<section
theme/static/theme/js/theme.js
+28
View File
@@ -0,0 +1,28 @@
const currentTheme = localStorage.getItem('theme')
if (currentTheme === 'dark') {
document.documentElement.classList.add('dark')
document.getElementById('theme-toggle-dark-icon').classList.add('hidden')
document.getElementById('theme-toggle-light-icon').classList.remove('hidden')
} else {
document.documentElement.classList.remove('dark')
document.getElementById('theme-toggle-light-icon').classList.add('hidden')
document.getElementById('theme-toggle-dark-icon').classList.remove('hidden')
}
function switchTheme() {
const theme = localStorage.getItem('theme')
console.log("Switching theme from ", theme)
if (theme === 'dark') {
document.documentElement.classList.remove('dark')
localStorage.setItem('theme', 'light')
document.getElementById('theme-toggle-dark-icon').classList.remove('hidden')
document.getElementById('theme-toggle-light-icon').classList.add('hidden')
} else {
document.documentElement.classList.add('dark')
localStorage.setItem('theme', 'dark')
document.getElementById('theme-toggle-light-icon').classList.remove('hidden')
document.getElementById('theme-toggle-dark-icon').classList.add('hidden')
}
}
theme/templates/components/theme-switch.html
+7 -3
View File
@@ -1,4 +1,8 @@
<button onclick="switchTheme()" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
<button
onclick="switchTheme()"
id="theme-toggle"
type="button"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
theme/templates/theme/base.html
+2 -14
View File
@@ -10,20 +10,6 @@
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<script>
function switchTheme() {
const theme = localStorage.getItem('theme')
if (theme === 'dark') {
document.documentElement.classList.remove('dark')
localStorage.setItem('theme', 'light')
} else {
document.documentElement.classList.add('dark')
localStorage.setItem('theme', 'dark')
}
}
</script>
{% tailwind_css %}
{% block extra_js %}
{% endblock %}
@@ -35,4 +21,6 @@
{% endblock %}
</main>
</body>
<script src="{% static 'theme/js/theme.js' %}"></script>
</html>