mirror of
https://github.com/tiennm99/noitu.git
synced 2026-10-13 02:14:48 +00:00
tiennm99
2a94e05752
Mechanical follow-through on the app.css ramp collapse: every var(--text-N) reference in these files moves to the step that carries the same size it did under the old nine-step scale, and the remaining 6/10/14px spacing literals become --space tokens. Accent hover/pressed tokens land on the two primary buttons here (Lobby's "Bắt đầu"/"Sẵn sàng", the chat panel's "Gửi") for the same reason the other primary buttons got them.
37 lines
796 B
Svelte
37 lines
796 B
Svelte
<script>
|
|
import { t } from '$lib/i18n/vi.js';
|
|
import { settings } from '$lib/stores/settings.svelte.js';
|
|
|
|
const dark = $derived(settings.state.theme === 'dark');
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
class="toggle"
|
|
aria-pressed={dark}
|
|
title={dark ? t.themeLight : t.themeDark}
|
|
onclick={() => settings.toggleTheme()}
|
|
>
|
|
<span aria-hidden="true">{dark ? '☀' : '☾'}</span>
|
|
<span class="sr-only">{t.theme}: {dark ? t.themeDark : t.themeLight}</span>
|
|
</button>
|
|
|
|
<style>
|
|
.toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 50%;
|
|
background: var(--surface);
|
|
font-size: var(--text-3);
|
|
line-height: 1;
|
|
}
|
|
|
|
.toggle:hover {
|
|
background: var(--surface-alt);
|
|
}
|
|
</style>
|