mirror of
https://github.com/aljazceru/awesome-nostr.git
synced 2025-02-22 06:39:00 +00:00
give users theme options because why the fuck not
This commit is contained in:
Yeghro
parent
4206c262f8
commit
20ebb9c8ef
14
index.html
14
index.html
@ -38,9 +38,17 @@
|
||||
<input type="text" id="search" placeholder="Search resources...">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
<div class="theme-controls">
|
||||
<select id="colorThemeSelect" class="theme-select" aria-label="Select color theme">
|
||||
<option value="default">Default Theme</option>
|
||||
<option value="purple">Purple Dream</option>
|
||||
<option value="nature">Nature's Touch</option>
|
||||
<option value="sunset">Sunset Vibes</option>
|
||||
</select>
|
||||
<button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
102
script.js
102
script.js
@ -2,6 +2,78 @@
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const body = document.body;
|
||||
|
||||
// Color theme definitions
|
||||
const colorThemes = {
|
||||
default: {
|
||||
light: {
|
||||
primary: '#4a314d',
|
||||
background: '#ffffff',
|
||||
text: '#1a090d',
|
||||
cardBackground: '#a8ba9a',
|
||||
sidebarBackground: '#6b6570',
|
||||
hoverColor: '#ace894'
|
||||
},
|
||||
dark: {
|
||||
background: '#1a090d',
|
||||
text: '#ace894',
|
||||
cardBackground: '#4a314d',
|
||||
sidebarBackground: '#6b6570',
|
||||
linkColor: '#a8ba9a'
|
||||
}
|
||||
},
|
||||
purple: {
|
||||
light: {
|
||||
primary: '#9c528b',
|
||||
background: '#ffffff',
|
||||
text: '#2f0147',
|
||||
cardBackground: '#e2c2c6',
|
||||
sidebarBackground: '#b9929f',
|
||||
hoverColor: '#610f7f'
|
||||
},
|
||||
dark: {
|
||||
background: '#2f0147',
|
||||
text: '#e2c2c6',
|
||||
cardBackground: '#9c528b',
|
||||
sidebarBackground: '#610f7f',
|
||||
linkColor: '#b9929f'
|
||||
}
|
||||
},
|
||||
nature: {
|
||||
light: {
|
||||
primary: '#2c5530',
|
||||
background: '#ffffff',
|
||||
text: '#1a2f1c',
|
||||
cardBackground: '#a7c4aa',
|
||||
sidebarBackground: '#718355',
|
||||
hoverColor: '#90a955'
|
||||
},
|
||||
dark: {
|
||||
background: '#1a2f1c',
|
||||
text: '#90a955',
|
||||
cardBackground: '#2c5530',
|
||||
sidebarBackground: '#718355',
|
||||
linkColor: '#a7c4aa'
|
||||
}
|
||||
},
|
||||
sunset: {
|
||||
light: {
|
||||
primary: '#cf5c36',
|
||||
background: '#ffffff',
|
||||
text: '#1f1f1f',
|
||||
cardBackground: '#eec584',
|
||||
sidebarBackground: '#c8963e',
|
||||
hoverColor: '#f3a953'
|
||||
},
|
||||
dark: {
|
||||
background: '#1f1f1f',
|
||||
text: '#eec584',
|
||||
cardBackground: '#cf5c36',
|
||||
sidebarBackground: '#c8963e',
|
||||
linkColor: '#f3a953'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize theme from localStorage or system preference
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
@ -18,6 +90,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
darkModeToggle.innerHTML = body.dataset.theme === 'dark'
|
||||
? '<i class="fas fa-sun"></i>'
|
||||
: '<i class="fas fa-moon"></i>';
|
||||
|
||||
const colorThemeSelect = document.getElementById('colorThemeSelect');
|
||||
|
||||
// Initialize theme from localStorage
|
||||
const savedColorTheme = localStorage.getItem('colorTheme') || 'default';
|
||||
colorThemeSelect.value = savedColorTheme;
|
||||
applyColorTheme(savedColorTheme);
|
||||
|
||||
// Handle theme changes
|
||||
colorThemeSelect.addEventListener('change', (e) => {
|
||||
const selectedTheme = e.target.value;
|
||||
localStorage.setItem('colorTheme', selectedTheme);
|
||||
applyColorTheme(selectedTheme);
|
||||
});
|
||||
});
|
||||
|
||||
darkModeToggle.addEventListener('click', () => {
|
||||
@ -28,6 +114,10 @@ darkModeToggle.addEventListener('click', () => {
|
||||
darkModeToggle.innerHTML = newTheme === 'dark'
|
||||
? '<i class="fas fa-sun"></i>'
|
||||
: '<i class="fas fa-moon"></i>';
|
||||
|
||||
// Reapply color theme with new dark/light mode
|
||||
const currentColorTheme = localStorage.getItem('colorTheme') || 'default';
|
||||
applyColorTheme(currentColorTheme);
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
@ -616,4 +706,16 @@ function displaySection(sectionName, sections) {
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyColorTheme(themeName) {
|
||||
const isDark = document.body.dataset.theme === 'dark';
|
||||
const theme = colorThemes[themeName][isDark ? 'dark' : 'light'];
|
||||
|
||||
// Apply theme colors to CSS variables
|
||||
const root = document.documentElement;
|
||||
Object.entries(theme).forEach(([key, value]) => {
|
||||
const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
|
||||
root.style.setProperty(cssVar, value);
|
||||
});
|
||||
}
|
||||
74
styles.css
74
styles.css
@ -1,23 +1,23 @@
|
||||
:root {
|
||||
--primary-color: #6e5494;
|
||||
--primary-color: #4a314d;
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--card-background: #f5f5f5;
|
||||
--sidebar-background: #f8f9fa;
|
||||
--hover-color: #563d7c;
|
||||
--text-color: #1a090d;
|
||||
--card-background: #a8ba9a;
|
||||
--sidebar-background: #6b6570;
|
||||
--hover-color: #ace894;
|
||||
--text-primary: var(--text-color);
|
||||
--link-color: var(--primary-color);
|
||||
--star-color: #f1c40f;
|
||||
--star-color: #4a314d;
|
||||
}
|
||||
|
||||
/* Dark theme variables */
|
||||
[data-theme="dark"] {
|
||||
--background-color: #1a1a1a;
|
||||
--text-color: #ffffff;
|
||||
--card-background: #2d2d2d;
|
||||
--sidebar-background: #252525;
|
||||
--background-color: #1a090d;
|
||||
--text-color: #ace894;
|
||||
--card-background: #4a314d;
|
||||
--sidebar-background: #6b6570;
|
||||
--text-primary: var(--text-color);
|
||||
--link-color: #ffa500;
|
||||
--link-color: #a8ba9a;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -79,7 +79,7 @@ body {
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background-color: rgba(226, 194, 198, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -230,7 +230,7 @@ body {
|
||||
line-height: 1.5;
|
||||
font-size: 0.95em;
|
||||
padding: 8px 12px;
|
||||
background: rgba(110, 84, 148, 0.05);
|
||||
background: rgba(156, 82, 139, 0.05);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid var(--primary-color);
|
||||
}
|
||||
@ -385,7 +385,7 @@ body {
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 8px;
|
||||
padding: 2px 8px;
|
||||
background-color: rgba(110, 84, 148, 0.1);
|
||||
background-color: rgba(156, 82, 139, 0.1);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -631,7 +631,7 @@ button:focus {
|
||||
}
|
||||
|
||||
.menu-toggle:hover {
|
||||
background-color: var(--primary-color-dark);
|
||||
background-color: var(--hover-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@ -653,4 +653,48 @@ button:focus {
|
||||
}
|
||||
|
||||
/* Rest of your mobile styles... */
|
||||
}
|
||||
|
||||
/* Theme selector styles */
|
||||
.theme-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-select:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.theme-select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.theme-select option {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.theme-controls {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user