vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(UI): Font Selection

Browse source
This commit is contained in:
Samidy 2026-02-08 22:50:41 +03:00
parent 05043505f6
commit c3b88da054
4 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -2087,6 +2087,22 @@
<button class="btn-secondary" id="reset-custom-theme">Reset</button>
</div>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Font</span>
<span class="description">Choose the application font</span>
</div>
<select id="font-select">
<option value="'Inter', sans-serif">Inter (Default)</option>
<option value="'Roboto', sans-serif">Roboto</option>
<option value="'Open Sans', sans-serif">Open Sans</option>
<option value="'Lato', sans-serif">Lato</option>
<option value="'Montserrat', sans-serif">Montserrat</option>
<option value="'Poppins', sans-serif">Poppins</option>
<option value="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif">System UI</option>
<option value="monospace">Monospace</option>
</select>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Waveform Seekbar</span>

14
js/app.js
View file

@ -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;

2
js/ui.js
View file

@ -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];

2
styles.css
View file

@ -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,