Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP on switching up the theme toggeler

Browse Source
This commit is contained in:
ernstmul
2025-02-11 13:19:53 +01:00
parent 7b43e18a72
commit 44ca06898d
1 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/navbar.svelte
+47 -16
View File
@@ -7,9 +7,10 @@
Tooltip,
Card,
ActionMenu,
Input,
ToggleButton,
Button,
Avatar
Avatar,
Typography
} from '@appwrite.io/pink-svelte';
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
@@ -32,6 +33,7 @@
import { app } from '$lib/stores/app';
import { isTabletViewport } from '$lib/stores/viewport';
import { isCloud } from '$lib/system.js';
import { user } from '$lib/stores/user';
let showSupport = false;
@@ -76,6 +78,11 @@
export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
export let showAccountMenu = false;
let activeTheme = 'dark';
$: {
updateTheme(activeTheme);
}
$: currentOrg = organizations.find((org) => org.isSelected);
</script>
@@ -157,30 +164,54 @@
<Layout.Stack gap="xxs">
<ActionMenu.Root>
<Layout.Stack gap="xxs">
<div
style:padding-inline-start="10px"
style:padding-inline-end="8px"
style:padding-block="4px">
<Typography.Text variant="m-500">
{$user.email}
</Typography.Text>
</div>
<ActionMenu.Item.Anchor
leadingIcon={IconUser}
trailingIcon={IconUser}
size="l"
href={`${base}/account`}>
Account</ActionMenu.Item.Anchor>
<ActionMenu.Item.Button
leadingIcon={IconLogoutRight}
trailingIcon={IconLogoutRight}
size="l"
on:click={logout}>Sign out</ActionMenu.Item.Button>
</Layout.Stack>
</ActionMenu.Root>
<Input.Select
value={$app.theme === 'auto' ? 'system' : $app.theme}
name="mode"
on:change={(event) => {
updateTheme(event.detail);
}}
bind:group={$app.theme}
options={[
{ label: 'Light', value: 'light', leadingIcon: IconSun },
{ label: 'Dark', value: 'dark', leadingIcon: IconMoon },
{ label: 'System', value: 'system', leadingIcon: IconMode }
]} />
<div style:padding-inline-start="13px" style:padding-inline-end="8px">
<Layout.Stack
justifyContent="space-between"
direction="row"
alignItems="center">
<Typography.Text>Theme</Typography.Text>
<ToggleButton
bind:active={activeTheme}
buttons={[
{ id: 'light', label: 'Light', icon: IconSun },
{ id: 'dark', label: 'Dark', icon: IconMoon },
{ id: 'system', label: 'System', icon: IconMode }
]}></ToggleButton>
</Layout.Stack>
</div>
<!-- <Input.Select-->
<!-- value={$app.theme === 'auto' ? 'system' : $app.theme}-->
<!-- name="mode"-->
<!-- on:change={(event) => {-->
<!-- updateTheme(event.detail);-->
<!-- }}-->
<!-- bind:group={$app.theme}-->
<!-- options={[-->
<!-- { label: 'Light', value: 'light', leadingIcon: IconSun },-->
<!-- { label: 'Dark', value: 'dark', leadingIcon: IconMoon },-->
<!-- { label: 'System', value: 'system', leadingIcon: IconMode }-->
<!-- ]} />-->
</Layout.Stack>
</Card.Base>
</div>