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

update dark

Browse Source
This commit is contained in:
Ehab Hassan
2025-01-19 14:48:34 +02:00
parent 0159f76fca
commit 2a7a895e11
5 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/footer/_index.md
View File

@@ -4,7 +4,7 @@ description: ""
insert_anchor_links: "left"
template: "partials/footer.html"
extra:
logoPath: "images/new_logo_tft.png"
logoPath: "images/new_logo_tft_light.png"
socialLinks: { Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews", Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech"}
---

12
css/index.css
View File

@@ -18,12 +18,20 @@ body {
color: #000000;
}
body .semigray {
color: #424242 !important;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
body.dark-mode .semigray {
color: #bbbbbb !important;
}
.dashboard:hover {
@@ -109,10 +117,10 @@ img[src*="#absolute"] {
top: 0;
}
a img:hover{
/* a img:hover{
opacity: 0.5 !important;
cursor: pointer;
}
} */
/* new theme */

44
static/js/custom.js
View File

@@ -194,26 +194,36 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
// Get the toggle switch
const toggleSwitch = document.getElementById('darkModeSwitch');
// Apply the saved theme on load
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');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
toggleSwitch.checked = true;
}
});
// Toggle dark mode
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
document.body.classList.add('dark-mode');
toggleSwitch.checked = true;
logo.src = logo.getAttribute('data-dark-logo');
console.log('Loaded dark mode with dark logo.');
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
logo.src = logo.getAttribute('data-light-logo');
console.log('Loaded light mode with light logo.');
}
});
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
logo.src = logo.getAttribute('data-dark-logo');
console.log('Switched to dark mode. Updated logo to dark.');
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
logo.src = logo.getAttribute('data-light-logo');
console.log('Switched to light mode. Updated logo to light.');
}
});
});

27
templates/partials/header.html
View File

@@ -5,11 +5,23 @@
<div class="z-20 fixed top-0 left-0 right-0 bg-black lg:bg-transparent lg:absolute w-full">
<div class="relative z-50">
<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>
<a href="{{get_url(path='/')}}" class="flex">
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
</a>
</div>
<a href="{{ get_url(path='/') }}" class="flex">
<img
id="logo"
class="w-36 h-auto"
style="max-width: none;"
src="{{ get_url(path=section.extra.logoPathLight) }}"
data-light-logo="{{ get_url(path=section.extra.logoPathLight) }}"
data-dark-logo="{{ get_url(path=section.extra.logoPathDark) }}"
alt="ThreeFold Logo"
/>
</a>
</a>
</a>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
<!-- Heroicon name: menu -->
@@ -108,9 +120,10 @@
</li>
</ul> -->
<button class="theme-toggle px-2 mx-2">
<label clas="" for="darkModeSwitch">Dark Mode:</label>
<label class="" for="darkModeSwitch">Dark Mode:</label>
<input type="checkbox" id="darkModeSwitch">
</button>
</button>
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a>
</div>

2
templates/partials/home/hero.html
View File

@@ -2,7 +2,7 @@
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
<p class="semigray mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
<br>
<h2 class="text-balance font-normal tracking-tight lg:text-6xl text-6xl fade-in">Web4</h2>