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>