Something went wrong. Try again.
https://clembs.com
Something went wrong. Try again.
4.4 kB · 174 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175---import Pencil from '@assets/icons/pencil.svg';import BaseHueInput from './BaseHueInput.astro';import Button from './Button.astro';import NavbarPopoverButton from './NavbarPopoverButton.astro';import { getTheme } from '../layouts/theme';import { getLocaleFromUrl, useTranslations } from '@i18n';
const { colorScheme } = getTheme(Astro);
const lang = getLocaleFromUrl(Astro.url);const t = useTranslations(lang);---
<script> const form = document.querySelector<HTMLFormElement>('#theme-menu form'); const colorSchemeInputs = form?.querySelectorAll<HTMLInputElement>('[name="color-scheme"]');
form?.addEventListener('reset', () => { // reset base hue inputs document.documentElement.dispatchEvent( new CustomEvent('onbasehueupdate', { detail: { value: '266' } }), ); // reset html base hue preview document.documentElement.style.setProperty('--base-hue', ''); // remove html color scheme (auto) document.documentElement.removeAttribute('data-color-scheme'); // check auto input colorSchemeInputs?.forEach((c) => c.value !== 'auto' ? c.removeAttribute('checked') : c.setAttribute('checked', 'true'), ); });
colorSchemeInputs?.forEach((i) => i.addEventListener('change', (ev) => { const value = (ev.currentTarget as HTMLInputElement).value;
// remove html color scheme if (value === 'auto') { document.documentElement.removeAttribute('data-color-scheme'); return; }
document.documentElement.dataset.colorScheme = value; }), );</script>
<NavbarPopoverButton id="theme-menu" aria-label={t('theme-menu.label')}> <Pencil slot="icon" />
<form method="post" class="theme-menu-container" action="/api/update-theme"> <fieldset data-field="color-scheme"> <legend>{t('theme-menu.color-scheme')}</legend>
<div role="group"> <label for="auto"> <input type="radio" name="color-scheme" id="auto" value="auto" checked={!colorScheme ? 'checked' : undefined} /> {t('theme.auto')} </label>
<label for="light"> <input type="radio" name="color-scheme" id="light" value="light" checked={colorScheme === 'light'} /> {t('theme.light')} </label>
<label for="dark"> <input type="radio" name="color-scheme" id="dark" value="dark" checked={colorScheme === 'dark'} /> {t('theme.dark')} </label> </div> </fieldset>
<fieldset data-field="hue"> <legend>{t('theme-menu.hue')}</legend>
<BaseHueInput thumb-size="1rem" id="navbar-base-hue" /> </fieldset>
<div role="group" class="buttons"> <Button variant="secondary" type="reset">{t('reset')}</Button>
<Button type="submit">{t('save')}</Button> </div> </form></NavbarPopoverButton>
<style lang="scss"> .theme-menu-container { display: flex; flex-direction: column; gap: 1rem;
padding: 0.75rem; min-inline-size: 250px;
fieldset { border: none;
legend { font-weight: 600; margin-inline-start: 0.5rem; margin-block-end: 0.25rem; } }
[data-field='color-scheme'] [role='group'] { display: flex; background-color: var(--color-300); border-radius: 9rem; padding: 0.25rem; gap: 0.25rem;
label { display: block; inline-size: 100%; padding-block: 0.5rem; border-radius: 9rem;
text-align: center; cursor: pointer; transition: background-color 100ms;
&:has(:checked) { background-color: var(--color-40); font-weight: 600; }
&:not(:has(:checked)):hover { background-color: var(--color-200); }
&:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--color-40), 0 0 0 4px var(--color-900); } }
input { position: fixed; inline-size: 1px; block-size: 1px; top: -1px; left: -1px; } }
.buttons { display: flex; gap: 0.25rem; inline-size: 100%; justify-content: end; } }</style>