mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-04-08 00:36:34 +00:00
4331a58e50
Add responsive icons for system theme selection (Smartphone, Tablet, Monitor) in ThemeToggle.vue; add an "Explore Communities" CTA to Home.vue that links to the localized communities page. Reduce the advertised sync update rate from ~100 to ~50 times per second across multiple locale files (en, de, es, it, ru). Also update the English freeroam label/description to "Freeroam & Custom Servers" with details about custom scripts/maps/mods. Note: fr.json contains unresolved merge conflict markers for the sync description and needs manual resolution.
81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { Sun, Moon, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
|
|
|
|
const theme = ref('system')
|
|
|
|
const setTheme = (newTheme) => {
|
|
theme.value = newTheme
|
|
localStorage.setItem('theme', newTheme)
|
|
applyTheme(newTheme)
|
|
}
|
|
|
|
const applyTheme = (selectedTheme) => {
|
|
const root = document.documentElement
|
|
if (
|
|
selectedTheme === 'dark' ||
|
|
(selectedTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
) {
|
|
root.classList.add('dark')
|
|
} else {
|
|
root.classList.remove('dark')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
const savedTheme = localStorage.getItem('theme') || 'system'
|
|
theme.value = savedTheme
|
|
applyTheme(savedTheme)
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
if (theme.value === 'system') {
|
|
applyTheme('system')
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-1 bg-neutral-200 dark:bg-neutral-800/50 rounded-lg p-1">
|
|
<button
|
|
:class="[
|
|
'p-2 rounded transition-colors',
|
|
theme === 'light'
|
|
? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
|
|
: 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
|
|
]"
|
|
:title="$t('message.theme.light')"
|
|
@click="setTheme('light')"
|
|
>
|
|
<Sun class="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
:class="[
|
|
'p-2 rounded transition-colors',
|
|
theme === 'system'
|
|
? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
|
|
: 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
|
|
]"
|
|
:title="$t('message.theme.system')"
|
|
@click="setTheme('system')"
|
|
>
|
|
<Smartphone class="w-4 h-4 md:hidden" />
|
|
<Tablet class="w-4 h-4 hidden md:block lg:hidden" />
|
|
<Monitor class="w-4 h-4 hidden lg:block" />
|
|
</button>
|
|
<button
|
|
:class="[
|
|
'p-2 rounded transition-colors',
|
|
theme === 'dark'
|
|
? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
|
|
: 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
|
|
]"
|
|
:title="$t('message.theme.dark')"
|
|
@click="setTheme('dark')"
|
|
>
|
|
<Moon class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</template>
|