Settings

Retrieving and setting the preferences

The settings-related actions are located in the src/stores/app.ts directory. These actions handle the process of setting the user preferences in the browser's local storage.

The provider of the preferences, located at components/providers/app-provider.tsx, plays a crucial role in handling user preferences and rendering the appropriate theme based on those preferences. Here's how it works:

On root layout initialization, the layout utilizes to retrieve the user's preferences from local storage. Based on the retrieved settings, the layout constructs the UI theme with the appropriate theme color and primary color. This ensures that the user's selected settings are applied consistently across the entire application.

How customize color variant

The list of color variant are located in src/config/color.ts. you can add new color variant or modify existing color.

Add color variant

Create new variant on configuration.

src/config/color.ts

export const colors = {
    primary: [
        {
            label: 'Sapphire',
            color: 'blue'
        },
        {
            label: 'Lavender',
            color: 'violet'
        },
        {
            label: 'Spearmint',
            color: 'lime'
        },
        {
            label: 'Cyan',
            color: 'cyan'
        },
        {
            label: 'Crimson',
            color: 'rose'
        },

        {
            label: 'Emerald',
            color: 'emerald'
        },
    ],
    ...
}

Define css variable with format hsl on src/styles/theme.css by className.

/* light scheme */
.primary-emerald {
    --primary: 160.1 84.1% 39.4%;
    --primary-foreground: 0 0% 98%;
    --success: 160 60% 45%;
    --success-foreground: 170 64% 84%;
    --warning: 30 80% 55%;
    --warning-foreground: 48 96% 89%;
 
    --chart-1: 160.1 84.1% 39.4%;
    --chart-2: 172.5 66% 50.4%;
    --chart-3: 170.6 76.9% 64.3%;
    --chart-4: 168.4 83.8% 78.2%;
    --chart-5: 174.7 83.9% 31.6%;
 
    --sidebar-ring: 162.9 93.5% 24.3%;
    --sidebar-primary: 160.1 84.1% 39.4%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-border: 240 3.7% 15.9%;
 
    --radius: 0.5rem;
}
 
/* dark scheme */
.dark .primary-emerald {
    --primary: 160.1 84.1% 39.4%;;
    --primary-foreground: 20 0% 100%;
    --success: 160 60% 45%;
    --success-foreground: 170 64% 84%;
    --warning: 30 80% 55%;
    --warning-foreground: 48 96% 89%;
 
    --chart-1: 160.1 84.1% 39.4%;;
    --chart-2: 162.9 93.5% 24.3%;
    --chart-3: 163.1 88.1% 19.8%;
    --chart-4: 164.2 85.7% 16.5%;
    --chart-5: 160.1 84.1% 39.4%;
 
    --sidebar-ring: 160.1 84.1% 39.4%;
    --sidebar-primary: 160.1 84.1% 39.4%;;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-border: 240 3.7% 15.9%;
 
    --radius: 0.5rem;
}

See in user preferences will be show new primary variant

Creating the theme based on preferences

Example

Create a React Client Component switch color button:

src/components/examples/switch-theme.tsx

'use client'
 
import { useTheme } from "next-themes"
 
export function SwitchTheme() {
    const { theme, setTheme } = useTheme()
 
    const toggle = () => {
        const value = theme === 'dark' ? 'light' : 'dark'
        setTheme(value)
    }
 
    return (
        <button onClick={toggle}>{theme}</button>
    )
}