diff --git a/index.html b/index.html
index 9379a9c..5d25713 100644
--- a/index.html
+++ b/index.html
@@ -2087,6 +2087,22 @@
+
Waveform Seekbar
diff --git a/js/app.js b/js/app.js
index 58e975d..ae561cb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1432,6 +1432,20 @@ document.addEventListener('DOMContentLoaded', async () => {
showKeyboardShortcuts();
});
+ // Font Settings
+ const fontSelect = document.getElementById('font-select');
+ if (fontSelect) {
+ const savedFont = localStorage.getItem('monochrome-font');
+ if (savedFont) {
+ fontSelect.value = savedFont;
+ }
+ fontSelect.addEventListener('change', (e) => {
+ const font = e.target.value;
+ document.documentElement.style.setProperty('--font-family', font);
+ localStorage.setItem('monochrome-font', font);
+ });
+ }
+
// Listener for Pocketbase Sync updates
window.addEventListener('library-changed', () => {
const path = window.location.pathname;
diff --git a/js/ui.js b/js/ui.js
index 8f97063..3336680 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -42,6 +42,8 @@ import {
createProjectCardHTML,
createTrackFromSong,
} from './tracker.js';
+const savedFont = localStorage.getItem('monochrome-font');
+if (savedFont) document.documentElement.style.setProperty('--font-family', savedFont);
function sortTracks(tracks, sortType) {
if (sortType === 'custom') return [...tracks];
diff --git a/styles.css b/styles.css
index 4be47ee..0056733 100644
--- a/styles.css
+++ b/styles.css
@@ -280,7 +280,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
- font-family: Inter, sans-serif;
+ font-family: var(--font-family, 'Inter', sans-serif);
overflow: hidden;
transition:
background-color 0.3s ease,