Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix system theme not respecting preferred dark theme. (#1673)

Browse Source
This commit is contained in:
Prospector 2024-04-10 18:30:46 -07:00 committed by GitHub
parent 60727656c9
commit 5b1850e161
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/default.vue
View File

@ -722,7 +722,9 @@ function toggleBrowseMenu() {
}
function changeTheme() {
updateTheme(
DARK_THEMES.includes(app.$colorMode.value) ? 'light' : cosmetics.value.preferredDarkTheme,
DARK_THEMES.includes(app.$colorMode.value)
? 'light'
: cosmetics.value.preferredDarkTheme ?? 'dark',
true
)
}

15
pages/settings/index.vue
View File

@ -41,7 +41,7 @@
class="theme-icon"
/>
<MoonIcon
v-else-if="cosmetics.preferredDarkTheme === option"
v-else-if="(cosmetics.preferredDarkTheme ?? 'dark') === option"
v-tooltip="formatMessage(colorTheme.preferredDark)"
class="theme-icon"
/>
@ -402,14 +402,21 @@ const themeOptions = computed(() => {
onMounted(() => {
updateSystemTheme()
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (event) => {
setSystemTheme(event.matches)
})
})
function updateSystemTheme() {
const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
if (colorSchemeQueryList.matches) {
const query = window.matchMedia('(prefers-color-scheme: light)')
setSystemTheme(query.matches)
}
function setSystemTheme(light) {
if (light) {
systemTheme.value = 'light'
} else {
systemTheme.value = cosmetics.value.preferredDarkTheme
systemTheme.value = cosmetics.value.preferredDarkTheme ?? 'dark'
}
}

3
plugins/1.theme.js
View File

@ -2,6 +2,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
await useAuth()
await useUser()
const themeStore = useTheme()
const cosmetics = useCosmetics()
nuxtApp.hook('app:mounted', () => {
if (process.client && themeStore.value.preference === 'system') {
@ -12,7 +13,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
if (e.matches) {
updateTheme('light')
} else {
updateTheme('dark')
updateTheme(cosmetics.value.preferredDarkTheme ?? 'dark')
}
}
}