ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test2

Browse Source
This commit is contained in:
Ehab Hassan
2025-01-20 12:59:34 +02:00
parent 2a7a895e11
commit 396549c850
3 changed files with 34 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/header/index.md
View File

@@ -3,7 +3,8 @@ title: "Header"
insert_anchor_links: "left" insert_anchor_links: "left"
template: "partials/header.html" template: "partials/header.html"
extra: extra:
logoPath: "images/new_logo_tft_light.png" logoPathLight: "images/new_logo_tft_light.png"
logoPathDark: "images/new_logo_tft_dark.png"
--- ---

30
static/js/custom.js
View File

@@ -194,36 +194,32 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
// Get the toggle switch and the logo element
const toggleSwitch = document.getElementById('darkModeSwitch');
const siteLogo = document.getElementById('site-logo');
// Apply the saved theme on load
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const toggleSwitch = document.getElementById('darkModeSwitch');
const logo = document.getElementById('logo');
// Log the current state for debugging
console.log('Light logo:', logo.getAttribute('data-light-logo'));
console.log('Dark logo:', logo.getAttribute('data-dark-logo'));
const savedTheme = localStorage.getItem('theme'); const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') { if (savedTheme === 'dark') {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
toggleSwitch.checked = true; toggleSwitch.checked = true;
logo.src = logo.getAttribute('data-dark-logo'); siteLogo.src = siteLogo.getAttribute('data-dark');
console.log('Loaded dark mode with dark logo.');
} else { } else {
logo.src = logo.getAttribute('data-light-logo'); document.body.classList.remove('dark-mode');
console.log('Loaded light mode with light logo.'); siteLogo.src = siteLogo.getAttribute('data-light');
} }
});
toggleSwitch.addEventListener('change', () => { // Toggle dark mode
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) { if (toggleSwitch.checked) {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
logo.src = logo.getAttribute('data-dark-logo'); siteLogo.src = siteLogo.getAttribute('data-dark');
console.log('Switched to dark mode. Updated logo to dark.');
} else { } else {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
logo.src = logo.getAttribute('data-light-logo'); siteLogo.src = siteLogo.getAttribute('data-light');
console.log('Switched to light mode. Updated logo to light.');
} }
});
}); });

9
templates/partials/header.html
View File

@@ -7,14 +7,13 @@
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 "> <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<a href="{{ get_url(path='/') }}" class="flex"> <a href="{{ get_url(path='/') }}" class="flex">
<img <img
id="logo" id="site-logo"
class="w-36 h-auto" class="w-36 h-auto"
style="max-width: none;" style="max-width: none;"
src="{{ get_url(path=section.extra.logoPathLight) }}" src="{{ get_url(path=section.extra.logoPathLight) }}"
data-light-logo="{{ get_url(path=section.extra.logoPathLight) }}" data-light="{{ get_url(path=section.extra.logoPathLight) }}"
data-dark-logo="{{ get_url(path=section.extra.logoPathDark) }}" data-dark="{{ get_url(path=section.extra.logoPathDark) }}"
alt="ThreeFold Logo" alt="ThreeFold Logo" />
/>
</a> </a>
</a> </a>