diff --git a/index.html b/index.html index 9379a9c..5d25713 100644 --- a/index.html +++ b/index.html @@ -2087,6 +2087,22 @@ +
+
+ Font + Choose the application font +
+ +
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,