janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-25 13:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change to using HTML symbols for light & dark mode for better compat

Browse Source
This commit is contained in:
Janis Hutz
2025-10-30 10:56:58 +01:00
parent 8778740454
commit 80c497b80a
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
MusicPlayerV2-GUI/src/App.vue
View File

@@ -20,30 +20,30 @@
ref ref
} from 'vue'; } from 'vue';
const theme = ref( 'light_mode' ); const theme = ref( '&#263C;' );
const changeTheme = () => { const changeTheme = () => {
if ( theme.value === 'dark_mode' ) { if ( theme.value === '&#263D;' ) {
document.documentElement.classList.remove( 'dark' ); document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' ); document.documentElement.classList.add( 'light' );
localStorage.setItem( 'theme', 'light_mode' ); localStorage.setItem( 'theme', '&#263C' );
theme.value = 'light_mode'; theme.value = '&#263C';
} else if ( theme.value === 'light_mode' ) { } else if ( theme.value === '&#263C' ) {
document.documentElement.classList.remove( 'light' ); document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' ); document.documentElement.classList.add( 'dark' );
localStorage.setItem( 'theme', 'dark_mode' ); localStorage.setItem( 'theme', '&#263D' );
theme.value = 'dark_mode'; theme.value = '&#263D';
} }
}; };
theme.value = localStorage.getItem( 'theme' ) ?? ''; theme.value = localStorage.getItem( 'theme' ) ?? '';
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme.value === 'dark_mode' ) { if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme.value === '&#263D' ) {
document.documentElement.classList.add( 'dark' ); document.documentElement.classList.add( 'dark' );
theme.value = 'dark_mode'; theme.value = '&#263D';
} else { } else {
document.documentElement.classList.add( 'light' ); document.documentElement.classList.add( 'light' );
theme.value = 'light_mode'; theme.value = '&#263C';
} }
</script> </script>