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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build.sh
View File

@ -1,8 +0,0 @@
#!/bin/bash
echo "Building Tailwind CSS..."
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
echo "Building Zola site..."
zola build
echo "✅ Build complete!"

75
public/js/main.js
View File

@ -1,5 +1,7 @@
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
console.log("DOM loaded - initializing dark mode");
const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcons = menuButton.querySelectorAll('svg');
@ -20,4 +22,77 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
}
// Theme toggle functionality
const themeToggleBtn = document.getElementById('theme-toggle');
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
// Check if dark mode is already enabled
const isDarkMode = localStorage.getItem('color-theme') === 'dark' ||
(!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
console.log("Initial dark mode state:", isDarkMode);
// Set initial theme
if (isDarkMode) {
document.documentElement.classList.add('dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
} else {
document.documentElement.classList.remove('dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.add('hidden');
themeToggleDarkIcon.classList.remove('hidden');
}
}
// Toggle theme function
function toggleTheme() {
console.log("Toggle theme clicked");
// Add transition class
document.documentElement.classList.add('transition');
// Toggle theme
const isDark = document.documentElement.classList.contains('dark');
console.log("Current dark mode:", isDark);
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.add('hidden');
themeToggleDarkIcon.classList.remove('hidden');
}
console.log("Switched to light mode");
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
console.log("Switched to dark mode");
}
// Remove transition class after transition completes
setTimeout(() => {
document.documentElement.classList.remove('transition');
}, 300);
}
// Add event listeners to toggle buttons
if (themeToggleBtn) {
console.log("Adding event listener to theme toggle button");
themeToggleBtn.addEventListener('click', toggleTheme);
}
if (mobileThemeToggleBtn) {
console.log("Adding event listener to mobile theme toggle button");
mobileThemeToggleBtn.addEventListener('click', toggleTheme);
}
});

2
public/search_index.en.js
View File

File diff suppressed because one or more lines are too long

6
start.sh
View File

@ -1,6 +0,0 @@
#!/bin/bash
echo "Starting Tailwind CSS watcher & Zola live server..."
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve
echo "🚀 Development server running!"

75
static/js/main.js
View File

@ -1,5 +1,7 @@
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
console.log("DOM loaded - initializing dark mode");
const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcons = menuButton.querySelectorAll('svg');
@ -20,4 +22,77 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
}
// Theme toggle functionality
const themeToggleBtn = document.getElementById('theme-toggle');
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
// Check if dark mode is already enabled
const isDarkMode = localStorage.getItem('color-theme') === 'dark' ||
(!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
console.log("Initial dark mode state:", isDarkMode);
// Set initial theme
if (isDarkMode) {
document.documentElement.classList.add('dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
} else {
document.documentElement.classList.remove('dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.add('hidden');
themeToggleDarkIcon.classList.remove('hidden');
}
}
// Toggle theme function
function toggleTheme() {
console.log("Toggle theme clicked");
// Add transition class
document.documentElement.classList.add('transition');
// Toggle theme
const isDark = document.documentElement.classList.contains('dark');
console.log("Current dark mode:", isDark);
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.add('hidden');
themeToggleDarkIcon.classList.remove('hidden');
}
console.log("Switched to light mode");
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
if (themeToggleLightIcon && themeToggleDarkIcon) {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
}
console.log("Switched to dark mode");
}
// Remove transition class after transition completes
setTimeout(() => {
document.documentElement.classList.remove('transition');
}, 300);
}
// Add event listeners to toggle buttons
if (themeToggleBtn) {
console.log("Adding event listener to theme toggle button");
themeToggleBtn.addEventListener('click', toggleTheme);
}
if (mobileThemeToggleBtn) {
console.log("Adding event listener to mobile theme toggle button");
mobileThemeToggleBtn.addEventListener('click', toggleTheme);
}
});

1
tailwind.config.js
View File

@ -8,6 +8,7 @@ module.exports = {
'./content/**/*.md',
'./themes/**/*.html',
],
darkMode: 'class',
theme: {
extend: {},
},

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>