ehab/www_zola_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dark and light mode

Browse Source
This commit is contained in:
Ehab Hassan
2025-03-19 14:50:42 +02:00
parent b057d82373
commit 4a4c0afe7d
8 changed files with 237 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
templates/base.html
View File

@@ -5,10 +5,78 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
<link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
<style>
/* Light mode (default) */
body {
background-color: #f3f4f6;
color: #1f2937;
}
header nav {
background-color: #1f2937;
color: #f9fafb;
}
footer {
background-color: #ffffff;
}
footer p {
color: #6b7280;
}
/* Dark mode */
html.dark body {
background-color: #111827 !important;
color: #f9fafb !important;
}
html.dark header nav {
background-color: #1f2937 !important;
}
html.dark footer {
background-color: #1f2937 !important;
}
html.dark footer p {
color: #9ca3af !important;
}
html.dark a {
color: #60a5fa !important;
}
html.dark a:hover {
color: #93c5fd !important;
}
html.dark .bg-gray-100 {
background-color: #111827 !important;
}
html.dark .bg-white {
background-color: #1f2937 !important;
}
html.dark .text-gray-900 {
color: #f9fafb !important;
}
html.dark .text-gray-500 {
color: #9ca3af !important;
}
html.dark .border-gray-200 {
border-color: #374151 !important;
}
html.dark button.bg-gray-800 {
background-color: #111827 !important;
}
html.dark button.hover\:bg-gray-700:hover {
background-color: #374151 !important;
}
/* Transition effects */
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
transition: all 0.3s ease-in-out !important;
transition-delay: 0 !important;
}
</style>
<script src="{{ get_url(path='js/main.js') }}" defer></script>
{% block head %}{% endblock %}
</head>
<body class="bg-gray-100 min-h-screen flex flex-col min-h-screen">
<body class="bg-gray-100 min-h-screen flex flex-col">
<header>
{% include "partials/navigation.html" %}
</header>

16
templates/partials/navigation.html
View File

@@ -20,6 +20,16 @@
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
Tailwind Docs
</a>
<button id="theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<!-- Sun icon (light mode) -->
<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>
<!-- Moon icon (dark mode) -->
<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>
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
@@ -46,6 +56,12 @@
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Tailwind Docs</a>
<button id="mobile-theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
<span>Toggle Dark Mode</span>
<svg id="mobile-theme-toggle-icon" class="w-5 h-5 ml-2" 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>
</button>
</div>
</div>
</nav>