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

update

Browse Source
This commit is contained in:
Ehab Hassan
2025-02-03 18:31:57 +02:00
parent 7dcf8767e8
commit 0e6c045411
2 changed files with 61 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/js/custom.js
View File

@@ -198,16 +198,14 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
const toggleSwitch = document.getElementById('lightModeSwitch'); const toggleSwitch = document.getElementById('lightModeSwitch');
const body = document.body; const body = document.body;
// Apply the saved theme on load // Apply saved theme on load
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode const savedTheme = localStorage.getItem('theme') || 'dark'; // Default is dark mode
if (savedTheme === 'light') { if (savedTheme === 'light') {
body.classList.add('light-mode'); body.classList.add('light-mode');
body.classList.remove('dark-mode');
toggleSwitch.checked = true; toggleSwitch.checked = true;
} else { } else {
body.classList.add('dark-mode');
body.classList.remove('light-mode'); body.classList.remove('light-mode');
toggleSwitch.checked = false; toggleSwitch.checked = false;
} }
@@ -217,10 +215,8 @@ document.addEventListener('DOMContentLoaded', () => {
toggleSwitch.addEventListener('change', () => { toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) { if (toggleSwitch.checked) {
body.classList.add('light-mode'); body.classList.add('light-mode');
body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
} else { } else {
body.classList.add('dark-mode');
body.classList.remove('light-mode'); body.classList.remove('light-mode');
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
} }

121
templates/partials/header.html
View File

@@ -116,14 +116,14 @@
</a> </a>
</li> </li>
</ul> --> </ul> -->
<button class="theme-toggle px-2 mx-2"> <button class="theme-toggle mx-4">
<label for="lightModeSwitch" class="switch"> <label for="lightModeSwitch" class="switch">
<i class="fa-solid fa-sun" id="lightIcon"></i> <i class="fa-solid fa-sun" id="lightIcon"></i>
<input type="checkbox" id="lightModeSwitch"> <input type="checkbox" id="lightModeSwitch">
<span class="slider"></span> <span class="slider"></span>
<i class="fas fa-moon" id="darkIcon"></i> <i class="fas fa-moon" id="darkIcon"></i>
</label> </label>
</button> </button>
@@ -236,6 +236,20 @@
color: #c7c7c7 !important; color: #c7c7c7 !important;
} }
.active{
color: #c7c7c7 !important;
}
.nav_btn:hover {
color: #c7c7c7 !important;
}
.theme-toggle {
border: none !important;
box-shadow: none !important;
}
/* logo image */
.light { .light {
display: block; /* Show dark logo by default */ display: block; /* Show dark logo by default */
@@ -254,80 +268,63 @@
display: block;/* Show light logo in light mode */ display: block;/* Show light logo in light mode */
} }
.theme-toggle { /* Styling for the switch container */
border: none !important;
box-shadow: none !important;
}
.active{
color: #c7c7c7 !important;
}
.nav_btn:hover {
color: #c7c7c7 !important;
}
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-flex;
width: 60px; align-items: center;
height: 34px; width: 50px;
height: 25px;
background: #ccc;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease-in-out;
} }
/* Hide the default checkbox */
.switch input { .switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
/* Slider (toggle button) */
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; top: 2px;
top: 0; left: 3px;
left: 0; width: 20px;
right: 0; height: 20px;
bottom: 0; background: white;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%; border-radius: 50%;
transition: .4s; transition: transform 0.3s ease-in-out;
} }
input:checked + .slider { /* Show moon by default (dark mode) */
background-color: #2196F3; #lightIcon {
} display: block;
margin-left: 5px;
input:checked + .slider:before {
transform: translateX(26px);
}
/* Icons */
#lightIcon, #darkIcon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: white; color: white;
} }
#lightIcon {
left: 10px;
display: none; /* Hide by default */
}
#darkIcon { #darkIcon {
right: 10px; display: inline-block;
margin-left: 5px;
} }
/* When light mode is active */
.light-mode .switch {
background: #111; /* Dark background in light mode */
}
.light-mode .slider {
transform: translateX(25px); /* Move slider to the right */
}
.light-mode #lightIcon {
display: inline-block;
color: white;
}
.light-mode #darkIcon {
display: none;
}
</style> </style>