Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 14:59:36 +02:00
Code Issues Releases Activity

Merge pull request #572 from lkiesow/theme-picker

Browse source 
Harmonize language and theme picker interface
This commit is contained in:
Sean Morley 2025-05-09 21:32:47 -04:00 • committed by GitHub
commit a91018d792
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/lib/components/Navbar.svelte
View file

@ -20,6 +20,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let inputElement: HTMLInputElement | null = null; let inputElement: HTMLInputElement | null = null;
let theme = '';
// Event listener for focusing input // Event listener for focusing input
function handleKeydown(event: KeyboardEvent) { function handleKeydown(event: KeyboardEvent) {
// Ignore any keypresses in an input/textarea field, so we don't interfere with typing. // Ignore any keypresses in an input/textarea field, so we don't interfere with typing.
@ -38,6 +40,8 @@
// Attach event listener on component mount // Attach event listener on component mount
document.addEventListener('keydown', handleKeydown); document.addEventListener('keydown', handleKeydown);
theme = document.documentElement.getAttribute('data-theme');
// Cleanup event listener on component destruction // Cleanup event listener on component destruction
return () => { return () => {
document.removeEventListener('keydown', handleKeydown); document.removeEventListener('keydown', handleKeydown);
@ -69,9 +73,14 @@
locale.set(newLocale); locale.set(newLocale);
window.location.reload(); window.location.reload();
}; };
const submitThemeChange = (event: Event) => {
const theme = event.target.value;
const themeForm = event.target.parentNode;
themeForm.action = `/?/setTheme&theme=${theme}`;
themeForm.submit();
};
const submitUpdateTheme: SubmitFunction = ({ action }) => { const submitUpdateTheme: SubmitFunction = ({ action }) => {
const theme = action.searchParams.get('theme'); const theme = action.searchParams.get('theme');
console.log('theme', theme);
if (theme) { if (theme) {
document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', theme);
} }
@ -303,13 +312,15 @@
</form> </form>
<p class="font-bold m-4 text-lg text-center">{$t('navbar.theme_selection')}</p> <p class="font-bold m-4 text-lg text-center">{$t('navbar.theme_selection')}</p>
<form method="POST" use:enhance={submitUpdateTheme}> <form method="POST" use:enhance={submitUpdateTheme}>
{#each themes as theme} <select
<li> class="select select-bordered w-full max-w-xs bg-base-100 text-base-content"
<button formaction="/?/setTheme&theme={theme.name}" bind:value={theme}
>{$t(`navbar.themes.${theme.name}`)} on:change={submitThemeChange}
</button> >
</li> {#each themes as theme}
{/each} <option value={theme.name} class="text-base-content">{$t(`navbar.themes.${theme.name}`)}</option>
{/each}
</select>
</form> </form>
</ul> </ul>
</div> </div>