michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix dark/light theme toggle, adjust text, change images to png screenshots

Browse Source
This commit is contained in:
Michael DiLeo
2025-08-17 12:29:26 -05:00
parent fc0c2f5a1c
commit f9011f5ef4
4 changed files with 43 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/about.html
View File

@@ -54,7 +54,7 @@
<p>Keyboard Vagabond is a place where nomads, travelers, backpacker, whoever, can come together in a digital space that is free of advertising and the attention economy to share information and experiences. It is a place of mutual respect, courtesy, and understanding not just for the members who join, but also for those people and places we encounter on our journeys.</p>
<h4>Why Keyboard Vagabond</h4>
<p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was a space specifically for nomads, so I thought I would make it.</p>
<p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was not a space specifically for nomads, so I thought I would make it.</p>
<h2>What to expect and commitments</h2>
<p><strong>Moderation style</strong> -

9
public/index.html
View File

@@ -136,24 +136,24 @@
<div class="photo-gallery">
<div class="photo-item">
<small>Check out that Explore button on the main page.</small>
<img src="https://picsur.keyboardvagabond.com/i/48624639-e731-4e50-a166-f88cf9eccded.jpg?width=400"
<img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=400"
alt="Explore button on main page" loading="lazy" />
</div>
<div class="photo-item">
<small>Visit the Posts, Hashtags, and News tabs to see what's on the server</small>
<img src="https://picsur.keyboardvagabond.com/i/d05996c7-5c23-450e-9ca0-b7e532d1c700.jpg?width=700"
<img src="https://picsur.keyboardvagabond.com/i/aea3c3c5-b011-4680-be4c-96fc1fdb009a.png?width=700"
alt="Posts, Hashtags, and News tabs" loading="lazy" />
</div>
<div class="photo-item">
<small>Look at the local communities to see what communities have been created on this server specifically. The rest of the communities are ones that this server is following.
Following communities on other instances will result in them being shown here.
</small>
<img src="https://picsur.michaeldileo.org/i/e07dddbc-d264-4f12-8877-17eed896026a.jpg?width=700"
<img src="https://picsur.keyboardvagabond.com/i/b5d316d9-8958-47bf-ba74-fb853e2d2be8.png?width=700"
alt="Communities, Local Communities" loading="lazy" />
</div>
<div class="photo-item">
<small>Scroll all the way to the bottom to find local topics. Topics are groups of communities. You can suggest more in the Meta community.</small>
<img src="https://picsur.michaeldileo.org/i/5a977aa0-b9bb-4376-a348-f879c7162f63.jpg?width=700"
<img src="https://picsur.keyboardvagabond.com/i/e5909364-3c4f-4bca-8631-5b1225781177.png?width=700"
alt="Local topics" loading="lazy" />
</div>
</div>
@@ -163,6 +163,7 @@
<footer></footer>
<script src="scripts/bundle.js"></script>
<script src="site-scripts/theme-toggle2.js"></script>
</body>
</html>

79
public/site-scripts/theme-toggle.js
View File

@@ -1,23 +1,25 @@
(function() {
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
function getStoredTheme() {
return localStorage.getItem('picoPreferredColorScheme') || 'auto';
}
function storeTheme(theme) {
localStorage.setItem('picoPreferredColorScheme', theme);
}
function getSystemTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
function getStoredTheme() {
return localStorage.getItem('picoPreferredColorScheme');
}
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
if (theme === 'dark') {
function getCurrentTheme() {
return document.documentElement.getAttribute('data-theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}
function applyTheme(currentTheme) {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
if (newTheme === 'dark') {
themeIcon.textContent = '☀️';
themeToggle.setAttribute('aria-pressed', 'true');
} else {
@@ -25,39 +27,28 @@
themeToggle.setAttribute('aria-pressed', 'false');
}
}
function toggleTheme() {
let currentStored = getStoredTheme();
if (currentStored === 'auto') {
currentStored = getSystemTheme();
}
if (currentStored === 'auto') {
currentStored = 'light';
}
let nextTheme;
nextTheme = currentStored === 'light' ? 'dark' : 'light';
storeTheme(nextTheme);
applyTheme(nextTheme);
}
function init() {
if (themeToggle) {
let storedTheme = getStoredTheme();
if (storedTheme && storedTheme !== 'auto') {
applyTheme(storedTheme);
themeToggle.addEventListener('click', () => {
const currentTheme = getCurrentTheme();
applyTheme(currentTheme);
storeTheme(currentTheme);
});
function init() {
let storedTheme = getStoredTheme() || getCurrentTheme();
applyTheme(storedTheme);
themeToggle.addEventListener('click', toggleTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
// Only apply theme if user hasn't made an explicit choice
const storedTheme = getStoredTheme();
if (storedTheme === 'auto') {
applyTheme();
}
themeToggle.addEventListener('click', toggleTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (getStoredTheme() === 'auto') {
applyTheme();
}
});
}
})
}
if (document.readyState !== 'loading') {