SamiAhmed7777
109 lines
3.5 KiB
Svelte
109 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import Button from '$lib/components/ui/button/Button.svelte';
|
|
import Input from '$lib/components/ui/input/Input.svelte';
|
|
import Label from '$lib/components/ui/label/Label.svelte';
|
|
import Card from '$lib/components/ui/card/Card.svelte';
|
|
import Select from '$lib/components/ui/select/Select.svelte';
|
|
import { toast } from '$lib/components/ui/toast';
|
|
|
|
let primaryColor = '#007AFF';
|
|
let secondaryColor = '#6B7280';
|
|
let backgroundColor = '#FFFFFF';
|
|
let textColor = '#000000';
|
|
let fontSize = '16px';
|
|
let currentFont = 'Inter';
|
|
|
|
let availableFonts = [
|
|
'Inter',
|
|
'Roboto',
|
|
'Open Sans',
|
|
'Montserrat',
|
|
'Lato'
|
|
];
|
|
|
|
async function updateTheme() {
|
|
try {
|
|
document.documentElement.style.setProperty('--primary-color', primaryColor);
|
|
document.documentElement.style.setProperty('--secondary-color', secondaryColor);
|
|
document.documentElement.style.setProperty('--background-color', backgroundColor);
|
|
document.documentElement.style.setProperty('--text-color', textColor);
|
|
document.documentElement.style.setProperty('--font-size', fontSize);
|
|
document.documentElement.style.setProperty('--font-family', currentFont);
|
|
|
|
toast({
|
|
title: 'Success',
|
|
description: 'Theme updated successfully'
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Error',
|
|
description: 'Failed to update theme',
|
|
variant: 'destructive'
|
|
});
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
// Load current theme values from CSS variables
|
|
primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || primaryColor;
|
|
secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim() || secondaryColor;
|
|
backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim() || backgroundColor;
|
|
textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim() || textColor;
|
|
fontSize = getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim() || fontSize;
|
|
currentFont = getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim() || currentFont;
|
|
});
|
|
</script>
|
|
|
|
<Card class="p-6">
|
|
<h2 class="text-2xl font-bold mb-4">Theme Customization</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Primary Color</Label>
|
|
<Input type="color" bind:value={primaryColor} />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Secondary Color</Label>
|
|
<Input type="color" bind:value={secondaryColor} />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Background Color</Label>
|
|
<Input type="color" bind:value={backgroundColor} />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Text Color</Label>
|
|
<Input type="color" bind:value={textColor} />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Font Size</Label>
|
|
<Input
|
|
type="text"
|
|
bind:value={fontSize}
|
|
placeholder="e.g., 16px, 1.2rem"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Font Family</Label>
|
|
<Select
|
|
bind:value={currentFont}
|
|
options={availableFonts}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
variant="primary"
|
|
class="w-full mt-4"
|
|
on:click={updateTheme}
|
|
>
|
|
Apply Theme
|
|
</Button>
|
|
</div>
|
|
</Card> |